From: soufiane Date: Mon, 23 Sep 2024 12:57:44 +0000 (+0200) Subject: wait #7067 @1:00 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=c02ab429125d97310a253ae6bd5211b4a94d0312;p=spinepro.git 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 470bd876..046ae3c4 100644 --- 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 72c9a43f..a0e87be6 100644 --- 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 17336892..124554cd 100644 --- 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 ecd331e2..8c2fdcd9 100644 --- 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 307a9761..8bf6afce 100644 --- 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 - +
@foreach ($items as $key => $item)