TRI-283: end header + start adaptive 1400>

2024-11-20 01:38:34 +03:00
parent 4996d02f71
commit d83940b47d
27 changed files with 1883 additions and 208 deletions
--- a/templates/blocks/n_header.html
+++ b/templates/blocks/n_header.html
@@ -3,24 +3,50 @@
 {% load webpush_notifications %}

 </div>
-<header id="header_bg" class="header">
-  <div class="header__logo">
-    
+<header class="header">
+  <div class="header__grid container">
+    <div class="header__logo">
+      <a href="{% url 'main' %}">
+        <img class="svg" src="/static/img/png/finlogo.png">
+      </a>
+    </div>
+
+
+    <nav class="header__nav hide__md">
+      <ul class="header__list">
+        <li class="header__item">
+          <a href="#benefits" class="header__link">{% trans "Преимущества" %}</a>
+        </li>
+        <li class="header__item">
+          <a href="#rewiews" class="header__link">{% trans "Отзывы" %}</a>
+        </li>
+        <li class="header__item">
+          <a href="#howtowork" class="header__link">{% trans "Как это работает" %}</a>
+        </li>
+        <li class="header__item">
+          <a href="#about" class="header__link">{% trans "О сервисе" %}</a>
+        </li>
+      </ul>
+    </nav>
+    <a
+        class="header__btn btn btn--primary hide--md"
+        onclick="ym(97070898,'reachGoal','reg_button_header'); return true"
+        href="{% url "registration_page" %}">
+      {% trans "Регистрируйся" %}
+    </a>
+    <div class="dropdown show__md">
+      <img onclick="showMenu(this, event)" class="dropbtn" src="/static/img/svg/Menu.svg">
+      <div
+          onblur="hideMenu(event)"
+          class="dropdown-content"
+      >
+        <a href="#benefits" class="header__link">{% trans "Преимущества" %}</a>
+        <a href="#rewiews" class="header__link">{% trans "Отзывы" %}</a>
+        <a href="#howtowork" class="header__link">{% trans "Как это работает" %}</a>
+        <a href="#about" class="header__link">{% trans "О сервисе" %}</a>
+
+
+      </div>
+    </div>
  </div>
-  <nav class="header__nav">
-    <ul class="header__list">
-      <li class="header__item">
-        <a href="#benefits" class="header__link">Преимущества</a>
-      </li>
-      <li class="header__item">
-        <a href="#rewiews" class="header__link">Отзывы</a>
-      </li>
-      <li class="header__item">
-        <a href="#howtowork" class="header__link">Как это работает</a>
-      </li>
-      <li class="header__item">
-        <a href="#about" class="header__link">О сервисе</a>
-      </li>
-    </ul>
-  </nav>
 </header>
--- a/templates/pages/p_mover_landing_page.html
+++ b/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();
--- a/templates/tb_base.html
+++ b/templates/tb_base.html
@@ -177,8 +177,11 @@ function gtag_report_conversion(url) {
    {% endif %}
        <div class="block_overlay  {% if page_type == 'profile' %}hidden{% elif page_type == 'routes' %} routes n_profile hidden{% else %}hidden n_profile{% endif %}" onclick="close_open_curtain()"></div>
        <div class="wrapper_main{% if page.url == "landing_mover" %} is-container{% endif %}">
-
-            {% include 'blocks/b_header.html' %}
+            {% if page.url == "landing_mover" or page.url == 'landing_customer' %}
+              {% include 'blocks/n_header.html' %}
+            {% else %}
+              {% include 'blocks/b_header.html' %}
+            {% endif %}

                <div class="cut_width_f_curtain close{% if page_type == 'profile' %}{% else %} n_profile{% endif %} right" onclick="reAdressClickOnbackrground(event,this)">
                    <div class="menu_buttons curtain right {% if page_type == 'profile' %}padding_remove {% if not mobile %}open{% else %}close{% endif %}{% else %} n_profile close{% endif %}" data-name="<img style='width: 15px;display: block;position: relative;bottom: 0;transform: rotate(270deg);' src='{% static "/img/svg/burger.svg" %}'>">