wait #7067 @1:00

diff --git a/wp-content/themes/CCV/dist/styles/app.css b/wp-content/themes/CCV/dist/styles/app.css
index 470bd8763b4d79c6fdcb34a329f1311f4f96b2f6..046ae3c4374f6b6649c063c18669c20342f44fbe 100644 (file)
--- a/wp-content/themes/CCV/dist/styles/app.css
+++ b/wp-content/themes/CCV/dist/styles/app.css
@@ -3361,24 +3361,45 @@ h4,
   overflow-x: visible;
 }
 
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 1919px) {
   .patient-tour {
-    width: 90%;
+    width: calc(100% - calc(10vw * 2)) !important;
   }
 }
 
-@media only screen and (max-width: 1919px) {
+@media only screen and (max-width: 1199px) {
   .patient-tour {
-    width: calc(100% - calc(10vw * 2)) !important;
+    margin-bottom: 3rem;
+    width: 100% !important;
+    padding: 0 5vw;
+    overflow: hidden;
   }
 }
 
-@media only screen and (max-width: 499px) {
-  .patient-tour {
-    width: calc(100% - calc(5vw * 2)) !important;
+.patient-tour-mobile-header {
+  display: none;
+  margin-bottom: 1.5rem;
+  margin-left: 10vw;
+  font-size: 1.25rem;
+}
+
+@media only screen and (max-width: 1199px) {
+  .patient-tour-mobile-header {
+    display: block;
   }
 }
 
+.patient-tour-mobile-header li {
+  display: none;
+  opacity: 0;
+}
+
+.patient-tour-mobile-header li.active {
+  display: inline;
+  color: #ffbf29;
+  opacity: 1;
+}
+
 .patient-tour-item {
   --bg-opacity: 1;
   background-color: #FFF;
@@ -3443,18 +3464,9 @@ h4,
   left: 0;
 }
 
-@media only screen and (max-width: 949px) {
-  .patient-tour-item {
-    padding-left: 10vw;
-    padding-right: 10vw;
-  }
-}
-
 @media only screen and (max-width: 767px) {
   .patient-tour-item {
     flex-direction: column;
-    padding-left: 15vw;
-    padding-right: 15vw;
   }
 }
 
@@ -3518,14 +3530,7 @@ h4,
   z-index: 1;
 }
 
-@media only screen and (max-width: 949px) {
-  .patient-tour-pagination {
-    width: 90% !important;
-    left: 5% !important;
-  }
-}
-
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 1199px) {
   .patient-tour-pagination {
     display: none;
   }

diff --git a/wp-content/themes/CCV/resources/assets/scripts/patient-tour.js b/wp-content/themes/CCV/resources/assets/scripts/patient-tour.js
index 72c9a43fc69f7dc2a5424721f4565f60be2527f5..a0e87be6f761035b9f14c8a217fba4332619ae9a 100644 (file)
--- a/wp-content/themes/CCV/resources/assets/scripts/patient-tour.js
+++ b/wp-content/themes/CCV/resources/assets/scripts/patient-tour.js
@@ -4,9 +4,33 @@
         elementorFrontend.hooks.addAction('frontend/element_ready/cube-patient-tour.default', function ($scope) {
             const elementSelector = `[data-id="${$scope.data('id')}"] .patient-tour`;
             const swiperSettings = $(elementSelector).data('swiper'); // Get parameters from data-swiper attribute in HTML
-
             const swiper = new Swiper(elementSelector, swiperSettings);
 
+            carouselManipulation(swiper,elementSelector)
+
+            $(window).on('resize', function () {
+                carouselManipulation(swiper,elementSelector)
+            });
+
+        });
+    });
+    function carouselManipulation(swiper,elementSelector) {
+        let ww = $(window).width();
+        if(ww <= 1200) {
+            swiper.allowTouchMove = true
+            swiper.on('activeIndexChange', function(swiper) {
+                let activeIndex = swiper.activeIndex
+                $(".patient-tour-mobile-header [data-slide]").removeClass("active")
+                if(activeIndex >= 0 && activeIndex < 6) {
+                    $(".patient-tour-mobile-header [data-slide=1]").addClass("active")
+                } else if(activeIndex >= 6 && activeIndex < 13) {
+                    $(".patient-tour-mobile-header [data-slide=7]").addClass("active")
+                } else if(activeIndex >= 13) {
+                    $(".patient-tour-mobile-header [data-slide=14]").addClass("active")
+                }
+            })
+        } else {
+            swiper.allowTouchMove = false
             $(document).on("mousemove", function( e ) {
                 let pageX = e.pageX,
                     coordSwiper = $(elementSelector).get(0).getBoundingClientRect()
@@ -28,6 +52,7 @@
                 }
 
             })
-        });
-    });
-})(jQuery);
\ No newline at end of file
+        }
+    }
+})(jQuery);
+

diff --git a/wp-content/themes/CCV/resources/assets/styles/widgets/link-carousel.styl b/wp-content/themes/CCV/resources/assets/styles/widgets/link-carousel.styl
index 17336892397b7b25bc9ebddf6cb3bc8156394a31..124554cd15a6ff19b9f5d7856369a60a415b34d0 100644 (file)
--- a/wp-content/themes/CCV/resources/assets/styles/widgets/link-carousel.styl
+++ b/wp-content/themes/CCV/resources/assets/styles/widgets/link-carousel.styl
@@ -39,6 +39,7 @@
       text-align: center
       padding: 2em 0 0
       font-size: 26px
+      line-height: 40px
       transition: background-color 0.2s ease-out
       font-weight: 100
 

diff --git a/wp-content/themes/CCV/resources/assets/styles/widgets/patient-tour.styl b/wp-content/themes/CCV/resources/assets/styles/widgets/patient-tour.styl
index ecd331e2a3d47a638ad2069c836d989197219db2..8c2fdcd9ce4e989ccb0a05402b7196e9ba82257b 100644 (file)
--- a/wp-content/themes/CCV/resources/assets/styles/widgets/patient-tour.styl
+++ b/wp-content/themes/CCV/resources/assets/styles/widgets/patient-tour.styl
@@ -7,14 +7,29 @@ $breakpoint-timeline-horizontal = 768px // When timeline changes to mobile view
   margin: 0 auto
   overflow-x: visible
 
-  +below($breakpoint-timeline-horizontal)
-    width: 90%
-
   +below(1920px)
     width: calc(100% - calc(10vw * 2)) !important
 
-  +below(500px)
-    width: calc(100% - calc(5vw * 2)) !important
+  +below(1200px)
+    @apply mb-12
+    width: 100% !important
+    padding: 0 5vw
+    overflow: hidden
+
+  &-mobile-header
+    @apply hidden mb-6
+    margin-left: 10vw
+    font-size: 1.25rem
+
+    +below(1200px)
+      @apply block
+    li
+      @apply hidden
+      opacity: 0
+      &.active
+        @apply inline
+        color: #ffbf29
+        opacity: 1
 
 
   &-item
@@ -47,15 +62,8 @@ $breakpoint-timeline-horizontal = 768px // When timeline changes to mobile view
     &:last-child:before
       left: 0
 
-
-    +below(950px)
-      padding-left: 10vw
-      padding-right: @padding-left
-
     +below($breakpoint-timeline-horizontal)
       flex-direction: column
-      padding-left: 15vw
-      padding-right: @padding-left
 
     &-image-wrapper
       display: flex
@@ -105,11 +113,7 @@ $breakpoint-timeline-horizontal = 768px // When timeline changes to mobile view
     margin: 0 auto
     z-index: 1
 
-    +below(950px)
-      width: 90% !important
-      left: 5% !important
-
-    +below($breakpoint-timeline-horizontal)
+    +below(1200px)
       display: none
 
     // Timeline horizontal line

diff --git a/wp-content/themes/CCV/resources/views/widgets/patient-tour.blade.php b/wp-content/themes/CCV/resources/views/widgets/patient-tour.blade.php
index 307a9761b6009a5b893cd8018ac76312ee2f4315..8bf6afce7cb2b927c8f43701852a0a4a2dcb76a6 100644 (file)
--- a/wp-content/themes/CCV/resources/views/widgets/patient-tour.blade.php
+++ b/wp-content/themes/CCV/resources/views/widgets/patient-tour.blade.php
@@ -15,7 +15,11 @@
   $swiper = json_encode($settings);
 
 @endphp
-
+<ul class="patient-tour-mobile-header">
+    <li class="active" data-slide="1">pre-operative phase - UK</li>
+    <li data-slide="7">Surgery phase - France</li>
+    <li data-slide="14">recovery phase - UK</li>
+</ul>
 <div class="patient-tour swiper-container" data-swiper="{{ $swiper }}">
   <div class="swiper-wrapper">
     @foreach ($items as $key => $item)