From: soufiane <soufiane@cubedesigners.com>
Date: Thu, 17 Oct 2024 15:10:06 +0000 (+0200)
Subject: wait #7127 @7:00
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=5f8788c5300e04f4aec60777924dbc24c058df33;p=spinepro.git

wait #7127 @7:00
---

diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php
index 0c4f3549..dd4f4149 100644
--- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php
+++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php
@@ -255,8 +255,10 @@ class HeaderSlideshow extends _Base {
                         <h1 class="header-slideshow-content elementor-element elementor-invisible <?= $index === 0 ? ' showing' : '' ?>"
                             data-settings='{"animation":"fadeInRight","animation_delay":0}'
                             data-element_type="section">
-                            <div class="header-slideshow-title"><?= $items[$index]['title'] ?></div>
-                            <div class="header-slideshow-body"><?= $items[$index]['body'] ?></div>
+                            <div class="header-slideshow-content-wrapper">
+                                <div class="header-slideshow-title"><?= $items[$index]['title'] ?></div>
+                                <div class="header-slideshow-body"><?= $items[$index]['body'] ?></div>
+                            </div>
 
                         <?php if (!empty($cta_text) || !empty($cta_text_2)) { ?>
                             <div class="header-slideshow-buttons flex items-center">
diff --git a/wp-content/themes/CCV/dist/styles/app.css b/wp-content/themes/CCV/dist/styles/app.css
index 4ef126e2..7862385d 100644
--- a/wp-content/themes/CCV/dist/styles/app.css
+++ b/wp-content/themes/CCV/dist/styles/app.css
@@ -1156,7 +1156,7 @@ body {
   margin-top: 1.5em;
 }
 
-.wrapper {
+body:not(.home) .wrapper {
   margin-left: auto;
   margin-right: auto;
   max-width: 1920px;
@@ -2582,6 +2582,12 @@ h4,
   flex-direction: row-reverse;
 }
 
+body .elementor-section:not(#slideshow-section) {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 1920px;
+}
+
 .elementor-swiper-button,
 .elementor-lightbox .elementor-swiper-button {
   --bg-opacity: 1;
@@ -2803,12 +2809,16 @@ h4,
 }
 
 @media only screen and (min-width: 1000px) {
+  .header-slideshow-sizer {
+    padding-bottom: 0 !important;
+  }
+
   .header-slideshow-sizer:before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
-    width: 100%;
+    width: 102%;
     height: 100%;
     z-index: 5;
   }
@@ -2820,6 +2830,20 @@ h4,
   }
 }
 
+@media only screen and (max-width: 999px) {
+  .header-slideshow-sizer {
+    height: 0 !important;
+  }
+}
+
+@media only screen and (min-width: 1000px) and (min-width: 1920px) {
+  .header-slideshow-sizer:before {
+    background-color: #031236;
+    transform: translateX(calc( ((100% - 1920px ) / 2 - 100%)) );
+    border-right: 5px solid #031236;
+  }
+}
+
 .header-slideshow-image {
   position: absolute;
   top: 0;
@@ -2892,6 +2916,11 @@ h4,
 }
 
 .header-slideshow .header-slideshow-content {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: flex-end;
+  padding: 0 2em 0 2.5em;
   --text-opacity: 1;
   color: #FFF;
   color: rgba(255, 255, 255, var(--text-opacity));
@@ -2899,7 +2928,6 @@ h4,
   -moz-osx-font-smoothing: grayscale;
   background: #031236;
   text-transform: none;
-  padding: 3.75em 2em 0.75em 2.5em;
   margin: 0 !important;
   position: absolute;
   bottom: 9.2vw;
@@ -2938,6 +2966,8 @@ h4,
   .header-slideshow .header-slideshow-content {
     font-size: 42px;
     font-size: 42px;
+    max-width: calc(1920px / 2);
+    left: calc((100% - 1920px ) / 2);
   }
 }
 
@@ -2948,6 +2978,7 @@ h4,
     padding: 1.75em 1em 3.75em 5em;
     width: 100%;
     height: auto;
+    display: block;
   }
 }
 
@@ -2959,6 +2990,11 @@ h4,
   }
 }
 
+.header-slideshow .header-slideshow-content.small-height {
+  font-size: 31px;
+  font-size: 31px;
+}
+
 .header-slideshow-content:before {
   content: none;
 }
diff --git a/wp-content/themes/CCV/resources/assets/scripts/header-slideshow.js b/wp-content/themes/CCV/resources/assets/scripts/header-slideshow.js
index 5ee49029..e3ad5190 100644
--- a/wp-content/themes/CCV/resources/assets/scripts/header-slideshow.js
+++ b/wp-content/themes/CCV/resources/assets/scripts/header-slideshow.js
@@ -8,10 +8,13 @@ import debounce from 'lodash.debounce';
       // Inspired by: https://www.sitepoint.com/make-a-simple-javascript-slideshow-without-jquery/
       const slides = $scope.find('.header-slideshow-image');
       const slidesText = $scope.find('.header-slideshow-content');
-      const slideInterval = setInterval(nextSlide, 10000);
+      //const slideInterval = setInterval(nextSlide, 14000);
       let currentSlide = 0;
+      let headerHeight = $("header.site").get(0).getBoundingClientRect().height
 
       initSlideshow();
+      setHeight(headerHeight);
+      detectRatio();
 
       function initSlideshow() {
         let slideshowDots = document.createElement('ul');
@@ -37,9 +40,16 @@ import debounce from 'lodash.debounce';
         setTimeout(function() {
           revealText(slidesText)
         }, 1000)
+
         revealLastText(slidesText);
       }
 
+      $(window).on('resize', function() {
+        headerHeight = $("header.site").get(0).getBoundingClientRect().height
+        setHeight(headerHeight);
+        detectRatio();
+      })
+
       function showSlide(index) {
         removeBySlide(slides)
         removeBySlide(slidesText)
@@ -69,7 +79,7 @@ import debounce from 'lodash.debounce';
       }
 
       function revealText(slides) {
-        let delay = 200
+        let delay = 2000
         $(slides[currentSlide]).find(".header-slideshow-title").addClass('showing')
         $(slides[currentSlide]).find(".header-slideshow-body p,.header-slideshow-body li").each(function(i, el) {
 
@@ -77,7 +87,7 @@ import debounce from 'lodash.debounce';
             $(el).addClass("showing")
           }, delay)
 
-          delay += 200
+          delay += 2000
         })
       }
 
@@ -85,6 +95,22 @@ import debounce from 'lodash.debounce';
         $(slides).last().find(".header-slideshow-title,.header-slideshow-body p,.header-slideshow-body li").addClass('showing')
       }
 
+      function setHeight(h) {
+        let vh = $(window).outerHeight() - h
+        $(".header-slideshow-sizer").css("height", vh + "px")
+      }
+
+      function detectRatio() {
+        let ratio_window = $(window).width() / $(window).height()
+        const ratio_1 = 32 / 9;
+        const ratio_2 = 21 / 9;
+
+        if (ratio_window >= ratio_1 || (ratio_window >= ratio_2 && $(window).width() <= 1920)) {
+          $(".header-slideshow-content").addClass("small-height")
+        } else {
+          $(".header-slideshow-content").removeClass("small-height")
+        }
+      }
     });
   });
 })(jQuery);
diff --git a/wp-content/themes/CCV/resources/assets/styles/common/global.styl b/wp-content/themes/CCV/resources/assets/styles/common/global.styl
index 0ea63396..f9628032 100644
--- a/wp-content/themes/CCV/resources/assets/styles/common/global.styl
+++ b/wp-content/themes/CCV/resources/assets/styles/common/global.styl
@@ -18,7 +18,7 @@ body
 * + p
   margin-top: 1.5em
 
-.wrapper
+body:not(.home) .wrapper
   @apply mx-auto
   max-width: $content-max-width
 
diff --git a/wp-content/themes/CCV/resources/assets/styles/components/sections.styl b/wp-content/themes/CCV/resources/assets/styles/components/sections.styl
index c98f83ab..190a1824 100644
--- a/wp-content/themes/CCV/resources/assets/styles/components/sections.styl
+++ b/wp-content/themes/CCV/resources/assets/styles/components/sections.styl
@@ -30,3 +30,8 @@
 .layout-reversed
   .elementor-row
     flex-direction: row-reverse
+
+body
+  .elementor-section:not(#slideshow-section)
+    @apply mx-auto
+    max-width: $content-max-width
\ No newline at end of file
diff --git a/wp-content/themes/CCV/resources/assets/styles/widgets/header-slideshow.styl b/wp-content/themes/CCV/resources/assets/styles/widgets/header-slideshow.styl
index 36356773..a4bf72ef 100644
--- a/wp-content/themes/CCV/resources/assets/styles/widgets/header-slideshow.styl
+++ b/wp-content/themes/CCV/resources/assets/styles/widgets/header-slideshow.styl
@@ -7,21 +7,30 @@ $title_bg = #031236
   &-sizer
     // White fade for better readability of menu when slideshow is under it
     +above($breakpoint-slideshow)
+      padding-bottom: 0 !important
       &:before
         content: ''
         position: absolute
         top: 0
         left: 0
-        width: 100%
+        width: 102%
         height: 100%
         //background-image: linear-gradient(to bottom, #fff 10%, transparent 50%)
         //background-image: linear-gradient(180deg, rgba(255,255,255,1) -5%,rgba(255,255,255,0.9) 17%, transparent 55%)
         z-index: 5
 
+        +above($content-max-width)
+          background-color: $title_bg
+          transform: 'translateX(calc( ((100% - %s ) / 2 - 100%)) )' % ($content-max-width)
+          border-right: 5px solid $title_bg
+
     // Change to portrait oriented images for small screens
     +below($breakpoint-slideshow-images)
       padding-bottom: 140% !important // Based off mockup: 525px / 375px
 
+    +below($breakpoint-slideshow)
+      height: 0 !important
+
   &-image
     position: absolute
     top: 0
@@ -80,11 +89,15 @@ $title_bg = #031236
 
   &-content
     .header-slideshow & // Need some extra specificity to override H1 CSS
+      display: flex
+      justify-content: center
+      flex-direction: column
+      align-items: flex-end
+      padding: 0 2em 0 2.5em
       @apply text-white
       font-smoothing()
       background: $title_bg
       text-transform: none
-      padding: 3.75em 2em .75em 2.5em
       margin: 0 !important
       position: absolute
       constrain(bottom, 9.2vw)
@@ -105,6 +118,8 @@ $title_bg = #031236
 
       +above($content-max-width)
         font-size: 42px // Base font size
+        max-width: 'calc(%s / 2)' % ($content-max-width)
+        left: 'calc((100% - %s ) / 2)' % ($content-max-width)
 
       +below($breakpoint-slideshow)
         top: initial
@@ -112,11 +127,15 @@ $title_bg = #031236
         padding: 1.75em 1em 3.75em 5em
         width: 100%
         height: auto
+        display: block
 
       +below($breakpoint-slideshow-images)
         font-size: 3.75vw
         padding-right: 1em
 
+      &.small-height
+        font-size: 31px
+
     &:before
         content: none