TRI-283: end editors pages

static/css/moover.css

@@ -428,7 +428,13 @@ b {
   height: initial;
 }
 
-.header .dropdown img {
+@media (max-width: 575px) {
+  .header .dropdown-content {
+    right: 0;
+  }
+}
+
+.header img {
   width: 25px;
   height: 25px;
 }
@@ -645,6 +651,13 @@ b {
   }
 }
 
+.slick-active .cards__item .cards__desc, .cards__item:hover .cards__desc, .cards__item:focus .cards__desc {
+  -webkit-line-clamp: initial;
+  /* number of lines to show */
+  line-clamp: initial;
+  max-height: 17em;
+}
+
 .cards__img {
   margin-bottom: 5px;
 }
@@ -682,12 +695,15 @@ b {
 .cards__desc {
   font-weight: 500;
   line-height: 22px;
+  padding: 0 5px;
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 7;
   /* number of lines to show */
   line-clamp: 7;
   -webkit-box-orient: vertical;
+  transition: all 0.3s ease-in-out;
+  max-height: 10em;
 }
 
 @media (min-width: 1720px) {
@@ -714,10 +730,11 @@ b {
   }
 }
 
-.slick-active .cards__desc {
+.slick-active .cards__desc, .cards__desc:hover, .cards__desc:focus {
   -webkit-line-clamp: initial;
   /* number of lines to show */
   line-clamp: initial;
+  max-height: 999em;
 }
 
 .cards__desc a {
@@ -796,6 +813,17 @@ b {
   background-color: var(--color-orange);
 }
 
+.cards--cstmr .cards__desc {
+  padding: 0 50px;
+}
+
+@media (max-width: 1304.98px) {
+  .cards--cstmr .cards__desc {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+}
+
 .easy {
   margin-bottom: 162px;
 }
@@ -954,6 +982,12 @@ b {
   }
 }
 
+@media (max-width: 991.98px) {
+  .easy__item--fir p {
+    max-width: 78%;
+  }
+}
+
 .easy__item--sec {
   grid-area: b;
   position: relative;
@@ -2726,6 +2760,92 @@ b {
   }
 }
 
+.uses__title {
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 36px;
+  margin-bottom: 10px;
+}
+
+.uses--cstmr .uses__item {
+  text-align: center;
+  padding: 0 15px;
+}
+
+@media (max-width: 991.98px) {
+  .uses--cstmr .uses__item {
+    margin-bottom: 42px;
+    min-height: 255px;
+  }
+}
+
+@media (max-width: 479.98px) {
+  .uses--cstmr .uses__item {
+    margin-bottom: 25px;
+    min-height: 194px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .uses--cstmr .uses__item p {
+    max-width: 90%;
+    margin: 0 auto;
+  }
+}
+
+@media (max-width: 479.98px) {
+  .uses--cstmr .uses__item p {
+    max-width: 100%;
+  }
+}
+
+.uses--cstmr .uses__icon {
+  width: 118px;
+  height: 118px;
+}
+
+@media (max-width: 991.98px) {
+  .uses--cstmr .uses__icon {
+    width: 142px;
+    height: 142px;
+    margin-bottom: 23px;
+  }
+}
+
+@media (max-width: 479.98px) {
+  .uses--cstmr .uses__icon {
+    width: 117px;
+    height: 117px;
+    margin-bottom: 8px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .uses--cstmr .uses__grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 1304.98px) {
+  .uses--cstmr .title {
+    margin-bottom: 61px;
+    max-width: 80%;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .uses--cstmr .title {
+    margin-bottom: 44px;
+  }
+}
+
+@media (max-width: 479.98px) {
+  .uses--cstmr .title {
+    max-width: 90%;
+    margin-bottom: 31px;
+  }
+}
+
 .sore {
   margin-bottom: 160px;
   margin-top: 1px;

static/css/moover/cards.css

@@ -20,6 +20,13 @@
   }
 }
 
+.slick-active .cards__item .cards__desc, .cards__item:hover .cards__desc, .cards__item:focus .cards__desc {
+  -webkit-line-clamp: initial;
+  /* number of lines to show */
+  line-clamp: initial;
+  max-height: 17em;
+}
+
 .cards__img {
   margin-bottom: 5px;
 }
@@ -57,12 +64,15 @@
 .cards__desc {
   font-weight: 500;
   line-height: 22px;
+  padding: 0 5px;
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 7;
   /* number of lines to show */
   line-clamp: 7;
   -webkit-box-orient: vertical;
+  transition: all 0.3s ease-in-out;
+  max-height: 10em;
 }
 
 @media (min-width: 1720px) {
@@ -89,10 +99,11 @@
   }
 }
 
-.slick-active .cards__desc {
+.slick-active .cards__desc, .cards__desc:hover, .cards__desc:focus {
   -webkit-line-clamp: initial;
   /* number of lines to show */
   line-clamp: initial;
+  max-height: 999em;
 }
 
 .cards__desc a {
@@ -170,3 +181,14 @@
 .cards .slick-dots li.slick-active button {
   background-color: var(--color-orange);
 }
+
+.cards--cstmr .cards__desc {
+  padding: 0 50px;
+}
+
+@media (max-width: 1304.98px) {
+  .cards--cstmr .cards__desc {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+}

static/css/moover/easy.css

@@ -156,6 +156,12 @@
   }
 }
 
+@media (max-width: 991.98px) {
+  .easy__item--fir p {
+    max-width: 78%;
+  }
+}
+
 .easy__item--sec {
   grid-area: b;
   position: relative;

static/css/moover/header.css

@@ -123,7 +123,13 @@
   height: initial;
 }
 
-.header .dropdown img {
+@media (max-width: 575px) {
+  .header .dropdown-content {
+    right: 0;
+  }
+}
+
+.header img {
   width: 25px;
   height: 25px;
 }

static/css/moover/uses.css

@@ -101,3 +101,89 @@
     margin-bottom: 30px;
   }
 }
+
+.uses__title {
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 36px;
+  margin-bottom: 10px;
+}
+
+.uses--cstmr .uses__item {
+  text-align: center;
+  padding: 0 15px;
+}
+
+@media (max-width: 991.98px) {
+  .uses--cstmr .uses__item {
+    margin-bottom: 42px;
+    min-height: 255px;
+  }
+}
+
+@media (max-width: 479.98px) {
+  .uses--cstmr .uses__item {
+    margin-bottom: 25px;
+    min-height: 194px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .uses--cstmr .uses__item p {
+    max-width: 90%;
+    margin: 0 auto;
+  }
+}
+
+@media (max-width: 479.98px) {
+  .uses--cstmr .uses__item p {
+    max-width: 100%;
+  }
+}
+
+.uses--cstmr .uses__icon {
+  width: 118px;
+  height: 118px;
+}
+
+@media (max-width: 991.98px) {
+  .uses--cstmr .uses__icon {
+    width: 142px;
+    height: 142px;
+    margin-bottom: 23px;
+  }
+}
+
+@media (max-width: 479.98px) {
+  .uses--cstmr .uses__icon {
+    width: 117px;
+    height: 117px;
+    margin-bottom: 8px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .uses--cstmr .uses__grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 1304.98px) {
+  .uses--cstmr .title {
+    margin-bottom: 61px;
+    max-width: 80%;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .uses--cstmr .title {
+    margin-bottom: 44px;
+  }
+}
+
+@media (max-width: 479.98px) {
+  .uses--cstmr .title {
+    max-width: 90%;
+    margin-bottom: 31px;
+  }
+}

styles/moover/cards.scss

@@ -16,6 +16,17 @@
       max-width: 251px;
       margin-right: 18px;
     }
+
+    .slick-active &,
+    &:hover, &:focus {
+
+      .cards__desc {
+        -webkit-line-clamp: initial; /* number of lines to show */
+        line-clamp: initial;
+        max-height: 17em;
+
+      }
+    }
   }
 
   &__img {
@@ -47,11 +58,15 @@
   &__desc {
     font-weight: 500;
     line-height: 22px;
+    padding: 0 5px;
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 7; /* number of lines to show */
     line-clamp: 7;
     -webkit-box-orient: vertical;
+    transition: all 0.3s ease-in-out;
+    max-height: 10em;
+
 
     @media (min-width: 1720px) {
       font-size: 20px;
@@ -71,14 +86,11 @@
       padding-right: 8px;
     }
 
-    @media (max-width: 767.98px) {
+    .slick-active &,
-      //padding-left: 5px;
+    &:hover, &:focus {
-      //padding-right: 5px;
-    }
-
-    .slick-active & {
       -webkit-line-clamp: initial; /* number of lines to show */
       line-clamp: initial;
+      max-height: 999em;
     }
 
     a {
@@ -131,7 +143,7 @@
 
       @media (max-width: 767.98px) {
         margin: 0 0.31rem;
-}
+      }
     }
 
     button {
@@ -152,5 +164,16 @@
     }
 
   }
+
+  &--cstmr .cards {
+    &__desc {
+      padding: 0 50px;
+
+      @media (max-width: 1304.98px) {
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+    }
+  }
 }
 

styles/moover/easy.scss

@@ -120,6 +120,10 @@
           width: 89%;
           margin-bottom: 53px;
         }
+
+        @media (max-width: 991.98px) {
+          max-width: 78%;
+        }
       }
     }
 
@@ -325,6 +329,6 @@
       padding-right: 50px;
       margin-top: -8px;
       max-width: 100%;
-      }
+    }
   }
 }

styles/moover/header.scss

@@ -103,11 +103,15 @@
     &-content {
       right: 0;
       height: initial;
-    }
 
-    img {
+      @media (max-width: 575px) {
-      width: 25px;
+        right: 0;
-      height: 25px;
+      }
     }
   }
+
+  img {
+    width: 25px;
+    height: 25px;
+  }
 }

styles/moover/uses.scss

@@ -13,9 +13,9 @@
     margin-bottom: 100px;
   }
 
-    @media (max-width: 479.98px) {
+  @media (max-width: 479.98px) {
-      margin-bottom: 199px;
+    margin-bottom: 199px;
-      }
+  }
 
   &__grid {
     text-align: left;
@@ -29,10 +29,10 @@
       column-gap: 15px;
     }
 
-      @media (max-width: 479.98px) {
+    @media (max-width: 479.98px) {
-        display: block;
+      display: block;
-        text-align: center;
+      text-align: center;
-      }
+    }
   }
 
 
@@ -54,7 +54,6 @@
         margin-bottom: 0;
       }
     }
-
   }
 
   &__icon {
@@ -77,9 +76,87 @@
       margin-bottom: 39px;
     }
 
-      @media (max-width: 479.98px) {
+    @media (max-width: 479.98px) {
-        margin-bottom: 30px;
+      margin-bottom: 30px;
-      }
+    }
   }
 
+  &__title {
+    font-size: 24px;
+    font-weight: 700;
+    line-height: 36px;
+    margin-bottom: 10px;
+  }
+
+
+  &--cstmr {
+    & .uses {
+      &__item {
+        text-align: center;
+        padding: 0 15px;
+
+        @media (max-width: 991.98px) {
+          margin-bottom: 42px;
+          min-height: 255px;
+        }
+
+        @media (max-width: 479.98px) {
+          margin-bottom: 25px;
+          min-height: 194px;
+        }
+
+        p {
+          @media (max-width: 991.98px) {
+            max-width: 90%;
+            margin: 0 auto;
+          }
+
+          @media (max-width: 479.98px) {
+            max-width: 100%;
+          }
+        }
+      }
+
+      &__icon {
+        width: 118px;
+        height: 118px;
+
+        @media (max-width: 991.98px) {
+          width: 142px;
+          height: 142px;
+          margin-bottom: 23px;
+        }
+
+        @media (max-width: 479.98px) {
+          width: 117px;
+          height: 117px;
+          margin-bottom: 8px;
+        }
+      }
+
+
+      &__grid {
+        @media (max-width: 991.98px) {
+          grid-template-columns: 1fr;
+        }
+      }
+    }
+
+    .title {
+
+      @media (max-width: 1304.98px) {
+        margin-bottom: 61px;
+        max-width: 80%;
+      }
+
+      @media (max-width: 991.98px) {
+        margin-bottom: 44px;
+      }
+
+      @media (max-width: 479.98px) {
+        max-width: 90%;
+        margin-bottom: 31px;
+      }
+    }
+  }
 }

templates/pages/p_customer_landing_page.html

@@ -41,18 +41,18 @@
         {% translate "Маленькая история о том, как работает наш сервис" %}
       </p>
       {############cards###############}
-      <div class="presentation__cards cards">
+      <div class="presentation__cards cards cards--cstmr">
         <div class="cards__list">
           <div class="cards__item">
             <div class="cards__arrow"></div>
-            <img class="cards__img" src="{% static "img/webp/mover/image1.webp" %}" alt="img1"/>
+            <img class="cards__img" src="{% static "img/webp/customer/image1.webp" %}" alt="img1"/>
             <p class="cards__desc">
               {% translate "Олег планирует поездку в&nbsp;другой город, задался вопросом, как окупить стоимость дороги?" %}
             </p>
           </div>
           <div class="cards__item">
             <div class="cards__arrow"></div>
-            <img class="cards__img" src="{% static "img/webp/mover/image2.webp" %}" alt="img1"/>
+            <img class="cards__img" src="{% static "img/webp/customer/image2.webp" %}" alt="img2"/>
             <p class="cards__desc">
 
               {% translate "Олег зашел на сайт " %}
@@ -62,13 +62,13 @@
           </div>
           <div class="cards__item">
             <div class="cards__arrow"></div>
-            <img class="cards__img" src="{% static "img/webp/mover/image3.webp" %}" alt="img1"/>
+            <img class="cards__img" src="{% static "img/webp/customer/image3.webp" %}" alt="img3"/>
             <p class="cards__desc">
               {% translate "На&nbsp;объявление Олега откликнулась Аня, ей&nbsp;как раз и&nbsp;нужно отправить посылку своему другу в&nbsp;город, куда следует Олег, но&nbsp;обычными почтовыми сервисами очень дорого и&nbsp;долго ждать." %}
             </p>
           </div>
           <div class="cards__item">
-            <img class="cards__img" src="{% static "img/webp/mover/image4.webp" %}" alt="img1"/>
+            <img class="cards__img" src="{% static "img/webp/customer/image4.webp" %}" alt="img4"/>
             <p class="cards__desc">
               {% translate "Аня с Олегом созвонились, обсудили условия и договорились о месте и времени передачи посылки." %}
             </p>
@@ -86,11 +86,11 @@
           }
 
           function checkAdaptive() {
-            if (window.innerWidth <= 1000) {
+            if (window.innerWidth <= 991.98) {
-              console.log('init check')
+              {#console.log('init check')#}
               initStagesSlider();
             } else {
-              console.log('rem')
+              {#console.log('rem')#}
               removeSlider();
             }
           }
@@ -105,7 +105,7 @@
 
           function initStagesSlider() {
             if (!list[0].slick) {
-              console.log('init')
+              {#console.log('init')#}
               list.slick({
                 autoplay: false,
                 dots: true,
@@ -165,7 +165,7 @@
     <div class="subtitle">
       {% translate "Чтобы разместить объявление - зарегистрируйтесь" %}
     </div>
-    <a href="#form" class="easy__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
+    <a href="{% url "registration_page" %}" class="easy__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
   </section>
 
   <section class="use">
@@ -180,9 +180,9 @@
     <div class="h3">
       {% translate "Хотите перевезти посылку и окупить стоимость дороги, топлива?" %}
     </div>
-    <a href="{% url "registration_page" %}"> class="use__btn btn btn--primary">{% translate "Найти посылку" %}</a>
+    <a href="{% url "registration_page" %}" class="use__btn btn btn--primary">{% translate "Найти посылку" %}</a>
     <br/>
-    <a href="{% url "registration_page" %}"> class="use__link">{% translate "Зарегистрироваться" %}</a>
+    <a href="{% url "registration_page" %}" class="use__link">{% translate "Зарегистрироваться" %}</a>
   </section>
 
   <section class="benefits" id="benefits">
@@ -260,7 +260,7 @@
           if (!vtns.length) return;
           vtns.off('click.load-lazy').on('click.load-lazy', (e) => {
             const vtn = e.target;
-            console.log('!!!!!!!', vtn,)
+            {#console.log('!!!!!!!', vtn,)#}
             vtn.nextElementSibling.querySelector('video');
             vtn.closest('.slick-slide').classList.contains('slick-current') &&
             LazyLoad.load($(vtn).siblings().find('video')[0], {
@@ -276,7 +276,7 @@
         }
 
         function initSlider() {
-          console.log($('.slick-slider'))
+          {#console.log($('.slick-slider'))#}
           $('.slick-slider')
             .not('.slick-initialized').slick({
             centerMode: true,
@@ -285,12 +285,9 @@
             infinite: false,
             initialSlide: 1,
             responsive: [
-
               {
                 breakpoint: 768,
                 settings: {
-                  {#slidesToShow: 1,#}
-                  {#slidesToScroll: 1,#}
                   draggable: true,
                   appendArrows: $('.chatterbox__mbtns'),
                 },
@@ -298,12 +295,8 @@
             ],
           })
             .on('beforeChange', function (event, slick, currentSlide, nextSlide) {
-              console.log([slick.$slides[currentSlide].querySelector('video')])
               slick.$slides[currentSlide]?.querySelector('video')?.pause();
               slick.$slides[nextSlide]?.querySelector('video')?.pause();
-
-
-              console.log('edge was hit', nextSlide, currentSlide, slick.$slides[currentSlide]);
             });
         }
 
@@ -332,7 +325,7 @@
     <div class="subtitle">
       {% translate "Зарегистрируйся на&nbsp;<a href='#' class='animate__link'>Trip With Bonus</a> прямо сейчас, размести бесплатно объявление и&nbsp;получи отклики от&nbsp;людей с&nbsp;посылками" %}
     </div>
-    <a href="{% url "registration_page" %}"> class="use__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
+    <a href="{% url "registration_page" %}" class="use__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
     <script>
       document.addEventListener("DOMContentLoaded", () => {
         const animate = document.querySelectorAll('.animate');
@@ -414,7 +407,7 @@
     <div class="title">
       {% translate "Размести свое объявление какую посылку ты можешь перевезти прямо сейчас " %}
     </div>
-    <a href="{% url "registration_page" %}"> class="use__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
+    <a href="{% url "registration_page" %}" class="use__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
   </section>
 
   <section class="sore">
@@ -434,7 +427,7 @@
     <div class="h3">
       {% translate "Зарегистрируйся бесплатно прямо сейчас и начни размещать объявления о перевозки посылки" %}
     </div>
-    <a href="{% url "registration_page" %}"> class="sore__btn btn btn--primary">{% translate "Зарегистрироваться и разместить" %}</a>
+    <a href="{% url "registration_page" %}" class="sore__btn btn btn--primary">{% translate "Зарегистрироваться и разместить" %}</a>
     <br/>
     </div>
   </section>

templates/pages/p_mover_landing_page.html

@@ -87,11 +87,11 @@
           }
 
           function checkAdaptive() {
-            if (window.innerWidth <= 1000) {
+            if (window.innerWidth <= 991.98) {
-              console.log('init check')
+              {#console.log('init check')#}
               initStagesSlider();
             } else {
-              console.log('rem')
+              {#console.log('rem')#}
               removeSlider();
             }
           }
@@ -106,7 +106,7 @@
 
           function initStagesSlider() {
             if (!list[0].slick) {
-              console.log('init')
+              {#console.log('init')#}
               list.slick({
                 autoplay: false,
                 dots: true,
@@ -273,7 +273,7 @@
           if (!vtns.length) return;
           vtns.off('click.load-lazy').on('click.load-lazy', (e) => {
             const vtn = e.target;
-            console.log('!!!!!!!', vtn,)
+            {#console.log('!!!!!!!', vtn,)#}
             vtn.nextElementSibling.querySelector('video');
             vtn.closest('.slick-slide').classList.contains('slick-current') &&
             LazyLoad.load($(vtn).siblings().find('video')[0], {
@@ -289,7 +289,7 @@
         }
 
         function initSlider() {
-          console.log($('.slick-slider'))
+          {#console.log($('.slick-slider'))#}
           $('.slick-slider')
             .not('.slick-initialized').slick({
             centerMode: true,
@@ -298,12 +298,9 @@
             infinite: false,
             initialSlide: 1,
             responsive: [
-
               {
                 breakpoint: 768,
                 settings: {
-                  {#slidesToShow: 1,#}
-                  {#slidesToScroll: 1,#}
                   draggable: true,
                   appendArrows: $('.chatterbox__mbtns'),
                 },
@@ -311,12 +308,8 @@
             ],
           })
             .on('beforeChange', function (event, slick, currentSlide, nextSlide) {
-              console.log([slick.$slides[currentSlide].querySelector('video')])
               slick.$slides[currentSlide]?.querySelector('video')?.pause();
               slick.$slides[nextSlide]?.querySelector('video')?.pause();
-
-
-              console.log('edge was hit', nextSlide, currentSlide, slick.$slides[currentSlide]);
             });
         }
 
@@ -351,7 +344,7 @@
         const observer = new IntersectionObserver(
           (entries, interserctionObserver) => {
             entries.forEach(entry => {
-              console.log('or', entry)
+              {#console.log('or', entry)#}
               if (entry.isIntersecting) {
                 counter++;
                 const el = entry.target;