TRI-283: edit chatterbox

static/css/moover.css

@@ -1231,6 +1231,14 @@ b {
   }
 }
 
+@media (max-width: 767.98px) {
+  .chatterbox {
+    max-width: 100vw;
+    margin: 0 auto 100px;
+    position: relative;
+  }
+}
+
 .chatterbox__slider {
   max-width: 1200px;
   margin: 0 auto;
@@ -1254,6 +1262,21 @@ b {
   }
 }
 
+@media (max-width: 767.98px) {
+  .chatterbox__slider {
+    width: 720px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+
+@media (max-width: 479.98px) {
+  .chatterbox__slider {
+    width: 830px;
+    max-width: initial;
+  }
+}
+
 .chatterbox__slide {
   width: 335px;
   height: 615px;
@@ -1287,6 +1310,14 @@ b {
   }
 }
 
+@media (max-width: 767.98px) {
+  .chatterbox__slide {
+    width: 234px;
+    height: 429px;
+    background-size: 234px 429px;
+  }
+}
+
 .chatterbox__slide.loaded video {
   opacity: 1;
 }
@@ -1302,6 +1333,13 @@ b {
   pointer-events: none;
 }
 
+@media (max-width: 767.98px) {
+  .chatterbox__slide video {
+    position: relative;
+    top: -4px;
+  }
+}
+
 .chatterbox__slide img {
   position: absolute;
   scale: 1.32;
@@ -1422,6 +1460,20 @@ b {
   }
 }
 
+.chatterbox__mbtns {
+  position: absolute;
+  top: 58%;
+  transform: translateY(-50%);
+  left: 0;
+  right: 0;
+}
+
+@media (max-width: 479.98px) {
+  .chatterbox__mbtns {
+    top: 61%;
+  }
+}
+
 .chatterbox .title {
   margin-bottom: 60px;
 }
@@ -1451,6 +1503,12 @@ b {
   }
 }
 
+@media (max-width: 479.98px) {
+  .chatterbox .slick-next {
+    right: 0;
+  }
+}
+
 .chatterbox .slick-prev {
   left: -40px;
 }
@@ -1470,6 +1528,12 @@ b {
   }
 }
 
+@media (max-width: 479.98px) {
+  .chatterbox .slick-prev {
+    left: 0;
+  }
+}
+
 @media (max-width: 991.98px) {
   .chatterbox .slick-list {
     overflow: visible;
@@ -1492,6 +1556,12 @@ b {
   }
 }
 
+@media (max-width: 479.98px) {
+  .slick-slide:not(.slick-center) .chatterbox__slide {
+    scale: 0.85;
+  }
+}
+
 .slick-center .chatterbox__vbtn {
   opacity: 1;
   pointer-events: initial;

static/css/moover/chatterbox.css

@@ -22,6 +22,14 @@
   }
 }
 
+@media (max-width: 767.98px) {
+  .chatterbox {
+    max-width: 100vw;
+    margin: 0 auto 100px;
+    position: relative;
+  }
+}
+
 .chatterbox__slider {
   max-width: 1200px;
   margin: 0 auto;
@@ -45,6 +53,21 @@
   }
 }
 
+@media (max-width: 767.98px) {
+  .chatterbox__slider {
+    width: 720px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+
+@media (max-width: 479.98px) {
+  .chatterbox__slider {
+    width: 830px;
+    max-width: initial;
+  }
+}
+
 .chatterbox__slide {
   width: 335px;
   height: 615px;
@@ -78,6 +101,14 @@
   }
 }
 
+@media (max-width: 767.98px) {
+  .chatterbox__slide {
+    width: 234px;
+    height: 429px;
+    background-size: 234px 429px;
+  }
+}
+
 .chatterbox__slide.loaded video {
   opacity: 1;
 }
@@ -93,6 +124,13 @@
   pointer-events: none;
 }
 
+@media (max-width: 767.98px) {
+  .chatterbox__slide video {
+    position: relative;
+    top: -4px;
+  }
+}
+
 .chatterbox__slide img {
   position: absolute;
   scale: 1.32;
@@ -213,6 +251,20 @@
   }
 }
 
+.chatterbox__mbtns {
+  position: absolute;
+  top: 58%;
+  transform: translateY(-50%);
+  left: 0;
+  right: 0;
+}
+
+@media (max-width: 479.98px) {
+  .chatterbox__mbtns {
+    top: 61%;
+  }
+}
+
 .chatterbox .title {
   margin-bottom: 60px;
 }
@@ -242,6 +294,12 @@
   }
 }
 
+@media (max-width: 479.98px) {
+  .chatterbox .slick-next {
+    right: 0;
+  }
+}
+
 .chatterbox .slick-prev {
   left: -40px;
 }
@@ -261,6 +319,12 @@
   }
 }
 
+@media (max-width: 479.98px) {
+  .chatterbox .slick-prev {
+    left: 0;
+  }
+}
+
 @media (max-width: 991.98px) {
   .chatterbox .slick-list {
     overflow: visible;
@@ -283,6 +347,12 @@
   }
 }
 
+@media (max-width: 479.98px) {
+  .slick-slide:not(.slick-center) .chatterbox__slide {
+    scale: 0.85;
+  }
+}
+
 .slick-center .chatterbox__vbtn {
   opacity: 1;
   pointer-events: initial;

styles/moover/chatterbox.scss

@@ -16,6 +16,12 @@
     //max-width: 100vw;
   }
 
+  @media (max-width: 767.98px) {
+    max-width: 100vw;
+    margin: 0 auto 100px;
+    position: relative;
+  }
+
   &__slider {
     max-width: 1200px;
     margin: 0 auto;
@@ -31,7 +37,18 @@
     @media (max-width: 991.98px) {
       max-width: 720px;
       //position: relative;
+    }
 
+    @media (max-width: 767.98px) {
+      width: 720px;
+      left: 50%;
+      transform: translateX(-50%);
+      //position: relative;
+    }
+
+    @media (max-width: 479.98px) {
+      width: 830px;
+      max-width: initial;
     }
   }
 
@@ -61,6 +78,12 @@
       background-size: 206px 377px;
     }
 
+    @media (max-width: 767.98px) {
+      width: 234px;
+      height: 429px;
+      background-size: 234px 429px;
+    }
+
     &.loaded {
       video {
         opacity: 1;
@@ -76,6 +99,11 @@
       opacity: 0;
       transition: opacity 0.2s ease-in-out;
       pointer-events: none;
+
+      @media (max-width: 767.98px) {
+        position: relative;
+        top: -4px;
+      }
     }
 
     img {
@@ -185,6 +213,18 @@
     }
   }
 
+  &__mbtns {
+    position: absolute;
+    top: 58%;
+    transform: translateY(-50%);
+    left: 0;
+    right: 0;
+
+    @media (max-width: 479.98px) {
+      top: 61%;
+      }
+  }
+
   .title {
     margin-bottom: 60px;
 
@@ -206,6 +246,10 @@
       background-size: 32%;
       right: 5%;
     }
+
+    @media (max-width: 479.98px) {
+      right: 0;
+    }
   }
 
   .slick-prev {
@@ -221,6 +265,10 @@
       background-size: 32%;
       left: 5%;
     }
+
+    @media (max-width: 479.98px) {
+      left: 0;
+    }
   }
 
   .slick-list {
@@ -241,6 +289,10 @@
   @media (max-width: 991.98px) {
     scale: 0.8;
   }
+
+  @media (max-width: 479.98px) {
+    scale: 0.85;
+  }
 }
 
 .slick-center {

templates/pages/p_mover_landing_page.html

@@ -264,6 +264,8 @@
         </div>
       {% endfor %}
     </div>
+    <div class="chatterbox__mbtns show__md"></div>
+
     <script type="text/javascript">
       $(document).ready(function () {
         function handlerVideos() {
@@ -271,12 +273,15 @@
           if (!vtns.length) return;
           vtns.off('click.load-lazy').on('click.load-lazy', (e) => {
             const vtn = e.target;
+            console.log('!!!!!!!', vtn,)
             vtn.nextElementSibling.querySelector('video');
+            vtn.closest('.slick-slide').classList.contains('slick-current') &&
             LazyLoad.load($(vtn).siblings().find('video')[0], {
               callback_loaded: (e) => callbackLoaded(e, vtn),
             });
           });
           const callbackLoaded = function (elm, vtn) {
+            {#vtn.closest('.slick-slide').classList.contains('slick-current')#}
             vtn.classList.add('hide');
             const imgWrap = elm.closest('.chatterbox__slide');
             imgWrap?.classList.add('loaded');
@@ -292,10 +297,26 @@
             slidesToShow: 3,
             infinite: false,
             initialSlide: 1,
+            responsive: [
+
+              {
+                breakpoint: 768,
+                settings: {
+                  {#slidesToShow: 1,#}
+                  {#slidesToScroll: 1,#}
+                  draggable: true,
+                  appendArrows: $('.chatterbox__mbtns'),
+                },
+              },
+            ],
           })
             .on('beforeChange', function (event, slick, currentSlide, nextSlide) {
+              console.log([slick.$slides[currentSlide].querySelector('video')])
               slick.$slides[currentSlide]?.querySelector('video')?.pause();
-              console.log('edge was hit', slick.$slides[currentSlide]);
+              slick.$slides[nextSlide]?.querySelector('video')?.pause();
+
+
+              console.log('edge was hit', nextSlide, currentSlide, slick.$slides[currentSlide]);
             });
         }