TRI-283: end header + start adaptive 1400>

templates/pages/p_mover_landing_page.html

@@ -48,7 +48,7 @@
             <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'/> посылку." %}
+              {% translate "сервисов и она устала искать в<br class='br--xxl'/> чатах тех, кто сможет перевезти<br class='br--xxl br--md'/> посылку." %}
             </p>
           </div>
           <div class="cards__item">
@@ -76,6 +76,61 @@
           </div>
         </div>
       </div>
+      <script>
+        $(function () {
+          var timer = 0;
+          var cards = $('.cards');
+          var list = $('.cards__list');
+          var items = $('.cards__item');
+          if (!cards.length && !list.length && !items.length) {
+            return false;
+          }
+
+          function checkAdaptive() {
+            if (window.innerWidth <= 1000) {
+              console.log('init check')
+              initStagesSlider();
+            } else {
+              console.log('rem')
+              removeSlider();
+            }
+          }
+
+          function removeSlider() {
+            if (list.hasClass('slick-slider')) {
+              list[0].slick.unslick();
+              list[0].slick = null;
+            }
+            list.addClass('js-not-slider');
+          }
+
+          function initStagesSlider() {
+            if (!list[0].slick) {
+              console.log('init')
+              list.slick({
+                autoplay: false,
+                dots: true,
+                arrows: false,
+                infinite: false,
+                variableWidth: true,
+                slidesToScroll: 1,
+
+                touchMove: true,
+                draggable: true,
+              });
+            }
+            list.removeClass('js-not-slider');
+          }
+
+          window.addEventListener('resize', () => {
+            clearTimeout(timer);
+            timer = setTimeout(() => {
+              checkAdaptive();
+            }, 400);
+          });
+          checkAdaptive();
+        });
+      </script>
     </div>
   </section>
   <section class="easy">
@@ -95,12 +150,16 @@
         <div class="easy__arrow easy__arrow--fir"></div>
         <div class="easy__arrow easy__arrow--sec"></div>
         <p>{% translate "Попутчики видят твое объявление и&nbsp;оставляют отклики на&nbsp;него." %}</p>
-        <img src="{% static 'img/png/sender-card2.png' %}" alt="sender1">
+        <img src="{% static 'img/png/sender-card2.png' %}" alt="sender2">
       </div>
       <div class="easy__item easy__item--thr">
         <p class="hide__xxl">{% translate "Тебе остаётся только выбрать перевозчика, связаться и&nbsp;обсудить детали перевозки." %}</p>
         <p class="show__xxl">{% translate "Попутчики видят твое объявление и&nbsp;оставляют отклики на&nbsp;него." %}</p>
-        <img src="{% static 'img/png/sender-card3.png' %}" alt="sender1">
+
+        <picture class="img">
+          <source srcset="{% static "img/png/sender-card3.png" %}" media="(min-width: 1439.98px)"/>
+          <img src="{% static 'img/png/sender-card3-md.png' %}" alt="sender3">
+        </picture>
 
       </div>
     </div>
@@ -111,7 +170,10 @@
   </section>
   <section class="use">
     <div class="title">{% translate "Уже пользуются сайтом и находят перевозчиков" %}</div>
-    <img src="{% static "img/webp/use.webp" %}" alt="list users" class="use__img">
+    <picture class="img">
+      <source srcset="{% static "img/webp/use.webp" %}" media="(min-width: 991.98px)"/>
+      <img src="{% static "img/png/use-md.png" %}" alt="list users" class="use__img">
+    </picture>
     <div class="h3">
       {% translate "Нужно отправить посылку партнеру, родителям или знакомым?" %}
     </div>
@@ -176,7 +238,7 @@
       </div>
     </div>
   </section>
-  <section class="chatterbox" >
+  <section class="chatterbox">
     <div class="title">{% translate "Что о нас говорят люди" %}</div>
     <div class="chatterbox__slider slick-slider">
       {#      {% for media_item in page.get_media_items %}#}
@@ -294,9 +356,6 @@
           vtns.off('click.load-lazy').on('click.load-lazy', (e) => {
             const vtn = e.target;
             vtn.nextElementSibling.querySelector('video');
-            window.d = vtn;
-            {#console.log($(vtn).siblings().find('video')[0]);#}
-            {#console.log(vtn, e.target)#}
             LazyLoad.load($(vtn).siblings().find('video')[0], {
               callback_loaded: (e) => callbackLoaded(e, vtn),
             });
@@ -312,32 +371,13 @@
         $('.slick-slider')
           .slick({
             centerMode: true,
+            draggable: false,
             {#centerPadding: '160px',#}
             slidesToShow: 3,
             infinite: false,
             initialSlide: 1,
             {#lazyLoad: 'ondemand',#}
             {#lazyLoad: 'progressive',#}
-            responsive: [
-              {
-                breakpoint: 768,
-                settings: {
-                  arrows: false,
-                  centerMode: true,
-                  centerPadding: '40px',
-                  slidesToShow: 3
-                }
-              },
-              {
-                breakpoint: 480,
-                settings: {
-                  arrows: false,
-                  centerMode: true,
-                  centerPadding: '40px',
-                  slidesToShow: 1
-                }
-              }
-            ]
           })
           .on('beforeChange', function (event, slick, currentSlide, nextSlide) {
             slick.$slides[currentSlide]?.querySelector('video')?.pause();