TRI-283: start 768>
This commit is contained in:
@@ -2,7 +2,6 @@
|
||||
{% load base_tags_extra %}
|
||||
{% load webpush_notifications %}
|
||||
|
||||
</div>
|
||||
<header class="header">
|
||||
<div class="header__grid container">
|
||||
<div class="header__logo">
|
||||
@@ -55,15 +54,11 @@
|
||||
var activeClassname = 'scrolled';
|
||||
var $document = $(document);
|
||||
var headerTop = $('.header');
|
||||
console.log('dfsdfdsfsdfsdfsdfsfsfsfsdfsdf')
|
||||
var header = $('.header');
|
||||
$(window).off('scroll.header').on('scroll.header', function() {
|
||||
var scrollTop = $document.scrollTop();
|
||||
var headerHeight = header.outerHeight();
|
||||
var headerHeightTop = headerTop.outerHeight();
|
||||
var top = headerHeight - headerHeightTop - 20;
|
||||
if (scrollTop > headerHeight) {
|
||||
console.log(scrollTop, top)
|
||||
headerTop.addClass(activeClassname);
|
||||
$(document.body).addClass(activeClassname);
|
||||
} else {
|
||||
@@ -76,5 +71,4 @@
|
||||
$(document).ready(()=>{
|
||||
initHeaderState();
|
||||
})
|
||||
console.log($,'sdsdads')
|
||||
</script>
|
||||
@@ -47,8 +47,8 @@
|
||||
<div class="cards__arrow"></div>
|
||||
<img class="cards__img" src="{% static "img/webp/image1.webp" %}" alt="img1"/>
|
||||
<p class="cards__desc">
|
||||
{% translate "Мария, хочет отправить<br class='br--xxl'/> посылку, но её не устраивает<br class='br--xxl'/> цена доставки почтовых<br class='br1'/>" %}
|
||||
{% translate "сервисов и она устала искать в<br class='br--xxl'/> чатах тех, кто сможет перевезти<br class='br--xxl br--md'/> посылку." %}
|
||||
{% translate "Мария, хочет отправить<br class='br--xxl'/> посылку, но её не устраивает<br class='br--xxl br--sm'/> цена доставки почтовых<br class='br--sm'/>" %}
|
||||
{% translate "сервисов и она устала искать в<br class='br--xxl br--sm'/> чатах тех, кто сможет перевезти<br class='br--xxl br--md'/> посылку." %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="cards__item">
|
||||
@@ -56,22 +56,22 @@
|
||||
<img class="cards__img" src="{% static "img/webp/image2.webp" %}" alt="img1"/>
|
||||
<p class="cards__desc">
|
||||
|
||||
{% translate "Мария, узнаёт о нашем сервисе<br class='br1'/>" %}
|
||||
{% translate "Мария, узнаёт о нашем сервисе<br class='br--sm'/>" %}
|
||||
<a href="/">TripWB.com. </a>
|
||||
{% translate "Регистрируется<br class='br--xxl'/> и очень быстро размещает<br class='br--xxl'/> объявление." %}
|
||||
{% translate "Регистрируется<br class='br--xxl br--sm'/> и очень быстро размещает<br class='br--xxl' br--sm/> объявление." %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="cards__item">
|
||||
<div class="cards__arrow"></div>
|
||||
<img class="cards__img" src="{% static "img/webp/image3.webp" %}" alt="img1"/>
|
||||
<p class="cards__desc">
|
||||
{% translate "Попутчик Егор увидел<br class='br--xxl'/> объявление Марии, нажал<br class='br--xxl'/> откликнуться и получил<br class='br1'/> возможность связаться с ней,<br class='br--xxl'/> удобным для него способом." %}
|
||||
{% translate "Попутчик Егор увидел<br class='br--xxl br--sm'/> объявление Марии, нажал<br class='br--xxl br--sm'/> откликнуться и получил<br class='br--sm'/> возможность связаться с ней,<br class='br--xxl br--sm'/> удобным для него способом." %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="cards__item">
|
||||
<img class="cards__img" src="{% static "img/webp/image4.webp" %}" alt="img1"/>
|
||||
<p class="cards__desc">
|
||||
{% translate "Мария и Егор обговорили детали<br class='br1'/> доставки и потом встретились в<br class='br1'/> удобном для всех месте. После<br class='br--xxl'/> чего Мария передала посылку<br class='br--xxl'/> Егору и он её доставил." %}
|
||||
{% translate "Мария и Егор обговорили детали<br class='br--sm'/> доставки и потом встретились в<br class='br--sm'/> удобном для всех месте. После<br class='br--xxl br--sm'/> чего Мария передала посылку<br class='br--xxl br--sm'/> Егору и он её доставил." %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -172,8 +172,8 @@
|
||||
<div class="title">{% translate "Уже пользуются сайтом и находят перевозчиков" %}</div>
|
||||
<picture class="img">
|
||||
<source srcset="{% static "img/png/use-1720.png" %}" media="(min-width: 1720px)"/>
|
||||
<source srcset="{% static "img/png/use-1280.png" %}" media="(min-width: 1280px)"/>
|
||||
<source srcset="{% static "img/png/use-1120.png" %}" media="(min-width: 1120px)"/>
|
||||
<source srcset="{% static "img/png/use-1280.png" %}" media="(min-width: 1304px)"/>
|
||||
<source srcset="{% static "img/png/use-1120.png" %}" media="(min-width: 1280px)"/>
|
||||
<source srcset="{% static "img/png/use-640.png" %}" media="(min-width: 768px)"/>
|
||||
<img src="{% static "img/png/use-328.png" %}" alt="list users" class="use__img">
|
||||
</picture>
|
||||
@@ -244,112 +244,25 @@
|
||||
<section class="chatterbox">
|
||||
<div class="title">{% translate "Что о нас говорят люди" %}</div>
|
||||
<div class="chatterbox__slider slick-slider">
|
||||
{% for media_item in page.get_media_items %}
|
||||
<div class="slick-slide">
|
||||
<div class="chatterbox__slide">
|
||||
<div class="chatterbox__vbtn"></div>
|
||||
<div class="chatterbox__wrap">
|
||||
<div class="chatterbox__vbox">
|
||||
<img src="{{ MEDIA_URL }}{{ media_item.picture }}" alt="user" class="chatterbox__poster">
|
||||
<video
|
||||
data-src="{{ MEDIA_URL }}{{ media_item.video }}"
|
||||
poster="{{ MEDIA_URL }}{{ media_item.picture }}"
|
||||
controls
|
||||
autoplay
|
||||
></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% for media_item in page.get_media_items %}
|
||||
<div class="slick-slide">
|
||||
<div class="chatterbox__slide">
|
||||
<div class="chatterbox__vbtn"></div>
|
||||
<div class="chatterbox__wrap">
|
||||
<div class="chatterbox__vbox">
|
||||
<img src="{{ MEDIA_URL }}{{ media_item.picture }}" alt="user" class="chatterbox__poster">
|
||||
<video
|
||||
data-src="{{ MEDIA_URL }}{{ media_item.video }}"
|
||||
poster="{{ MEDIA_URL }}{{ media_item.picture }}"
|
||||
controls
|
||||
autoplay
|
||||
></video>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{# <div class="slick-slide">#}
|
||||
{# <div class="chatterbox__slide">#}
|
||||
{# <div class="chatterbox__vbtn"></div>#}
|
||||
{# <div class="chatterbox__wrap">#}
|
||||
{# <div class="chatterbox__vbox">#}
|
||||
{# <img src="/ava1.jpg" alt="user" class="chatterbox__poster">#}
|
||||
{# <video#}
|
||||
{# data-src="/media/media_items/video/1.mp4"#}
|
||||
{# poster="/ava1.jpg"#}
|
||||
{# controls#}
|
||||
{# autoplay#}
|
||||
{# ></video>#}
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
{##}
|
||||
{# </div>#}
|
||||
{# <div class="slick-slide">#}
|
||||
{# <div class="chatterbox__slide">#}
|
||||
{# <div class="chatterbox__vbtn"></div>#}
|
||||
{# <div class="chatterbox__wrap">#}
|
||||
{# <div class="chatterbox__vbox">#}
|
||||
{# <img src="/ava2.jpg" alt="user" class="chatterbox__poster">#}
|
||||
{# <video#}
|
||||
{# data-src="/media/media_items/video/2.mp4"#}
|
||||
{# poster="/ava2.jpg"#}
|
||||
{# controls#}
|
||||
{# autoplay#}
|
||||
{# ></video>#}
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
{# <div class="slick-slide">#}
|
||||
{# <div class="chatterbox__slide">#}
|
||||
{# <div class="chatterbox__vbtn"></div>#}
|
||||
{# <div class="chatterbox__wrap">#}
|
||||
{# <div class="chatterbox__vbox">#}
|
||||
{# <img src="/ava3.jpg" alt="user" class="chatterbox__poster">#}
|
||||
{# <video#}
|
||||
{# data-src="/media/media_items/video/3.mp4"#}
|
||||
{# poster="/ava3.jpg"#}
|
||||
{# controls#}
|
||||
{# autoplay#}
|
||||
{# >#}
|
||||
{# </video>#}
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
{##}
|
||||
{# </div>#}
|
||||
{# <div class="slick-slide">#}
|
||||
{# <div class="chatterbox__slide">#}
|
||||
{# <div class="chatterbox__vbtn"></div>#}
|
||||
{# <div class="chatterbox__wrap">#}
|
||||
{# <div class="chatterbox__vbox">#}
|
||||
{# <img src="/ava1.jpg" alt="user" class="chatterbox__poster">#}
|
||||
{# <video#}
|
||||
{# data-src="/media/media_items/video/4.mp4"#}
|
||||
{# poster="/ava1.jpg"#}
|
||||
{# controls#}
|
||||
{# autoplay#}
|
||||
{# >#}
|
||||
{# </video>#}
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
{# <div class="slick-slide">#}
|
||||
{# <div class="chatterbox__slide">#}
|
||||
{# <div class="chatterbox__vbtn"></div>#}
|
||||
{# <div class="chatterbox__wrap">#}
|
||||
{# <div class="chatterbox__vbox">#}
|
||||
{# <img src="/ava2.jpg" alt="user" class="chatterbox__poster">#}
|
||||
{# <video#}
|
||||
{# data-src="/media/media_items/video/5.mp4"#}
|
||||
{# poster="/ava2.jpg"#}
|
||||
{# controls#}
|
||||
{# autoplay#}
|
||||
{# >#}
|
||||
{# </video>#}
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
{##}
|
||||
{##}
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
@@ -370,22 +283,25 @@
|
||||
};
|
||||
}
|
||||
|
||||
handlerVideos();
|
||||
$('.slick-slider')
|
||||
.slick({
|
||||
function initSlider() {
|
||||
console.log($('.slick-slider'))
|
||||
$('.slick-slider')
|
||||
.not('.slick-initialized').slick({
|
||||
centerMode: true,
|
||||
draggable: false,
|
||||
{#centerPadding: '160px',#}
|
||||
slidesToShow: 3,
|
||||
infinite: false,
|
||||
initialSlide: 1,
|
||||
{#lazyLoad: 'ondemand',#}
|
||||
{#lazyLoad: 'progressive',#}
|
||||
})
|
||||
.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
|
||||
slick.$slides[currentSlide]?.querySelector('video')?.pause();
|
||||
console.log('edge was hit', slick.$slides[currentSlide]);
|
||||
});
|
||||
.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
|
||||
slick.$slides[currentSlide]?.querySelector('video')?.pause();
|
||||
console.log('edge was hit', slick.$slides[currentSlide]);
|
||||
});
|
||||
}
|
||||
|
||||
handlerVideos();
|
||||
initSlider();
|
||||
|
||||
});
|
||||
</script>
|
||||
</section>
|
||||
@@ -393,8 +309,8 @@
|
||||
<div class="title">{% translate "Что о нас пишут люди" %}</div>
|
||||
<picture>
|
||||
<source srcset="{% static "img/png/use-letters-1739.png" %}" media="(min-width: 1720px)"/>
|
||||
<source srcset="{% static "img/png/use-letters-1280.png" %}" media="(min-width: 1280px)"/>
|
||||
<source srcset="{% static "img/png/use-letters-1120.png" %}" media="(min-width: 1120px)"/>
|
||||
<source srcset="{% static "img/png/use-letters-1280.png" %}" media="(min-width: 1304px)"/>
|
||||
<source srcset="{% static "img/png/use-letters-1120.png" %}" media="(min-width: 1280px)"/>
|
||||
<source srcset="{% static "img/png/use-letters-640.png" %}" media="(min-width: 768px)"/>
|
||||
<img src="{% static "img/png/use-letters-328.png" %}" alt="list letters" class="use__img">
|
||||
</picture>
|
||||
@@ -452,7 +368,7 @@
|
||||
<p class="about__half">{% translate "Если не хочешь размещать объявление и ждать, то можешь <b>самостоятельно на нашем сайте найти перевозчика</b> через удобную систему поиска" %}</p>
|
||||
</div>
|
||||
</div>
|
||||
{# </div>#}
|
||||
|
||||
</section>
|
||||
<section class="benefits" id="benefits">
|
||||
<div class="title">{% translate "Преимущества сервиса" %}</div>
|
||||
@@ -556,8 +472,8 @@
|
||||
</div>
|
||||
<picture>
|
||||
<source srcset="{% static "img/png/sore-1720.png" %}" media="(min-width: 1720px)"/>
|
||||
<source srcset="{% static "img/png/sore-1280.png" %}" media="(min-width: 1280px)"/>
|
||||
<source srcset="{% static "img/png/sore-1120.png" %}" media="(min-width: 1120px)"/>
|
||||
<source srcset="{% static "img/png/sore-1280.png" %}" media="(min-width: 1304px)"/>
|
||||
<source srcset="{% static "img/png/sore-1120.png" %}" media="(min-width: 1280px)"/>
|
||||
<source srcset="{% static "img/png/sore-640.png" %}" media="(min-width: 768px)"/>
|
||||
<img src="{% static "/img/png/sore-328.png" %}" alt="sore image" class="sore__img">
|
||||
</picture>
|
||||
|
||||
Reference in New Issue
Block a user