wait #7070 @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 a60498286a55f5bd73f30cae6eea227ff391b87a..0c4f35494ad79adc170077dba5e7a0f0efb914e0 100644 (file)
--- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php
+++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php
@@ -2,6 +2,7 @@
 
 namespace Cube\Elementor\Widgets;
 
+use Elementor\Repeater;
 use Elementor\Utils;
 use Elementor\Controls_Manager;
 
@@ -63,25 +64,6 @@ class HeaderSlideshow extends _Base {
             ]
         );
 
-        $this->add_control(
-            'title',
-            [
-                'label' => __( 'Title', 'elementor' ),
-                'type' => Controls_Manager::TEXTAREA,
-                'placeholder' => __( 'Enter your title', 'elementor' ),
-                'default' => '',
-            ]
-        );
-
-        $this->add_control(
-            'body',
-            [
-                'label' => __('Body', 'cube'),
-                'type' => Controls_Manager::TEXTAREA,
-                'default' => '',
-            ]
-        );
-
         $this->add_control(
             'images_desktop',
             [
@@ -163,6 +145,37 @@ class HeaderSlideshow extends _Base {
                 'show_external' => true
             ]
         );
+
+        $repeater = new Repeater();
+
+        $repeater->add_control(
+            'title',
+            [
+                'label' => __( 'Title', 'elementor' ),
+                'type' => Controls_Manager::TEXTAREA,
+                'placeholder' => __( 'Enter your title', 'elementor' ),
+                'default' => '',
+            ]
+        );
+
+        $repeater->add_control(
+            'body',
+            [
+                'label' => __('Body', 'cube'),
+                'type' => Controls_Manager::WYSIWYG,
+                'default' => '',
+            ]
+        );
+
+        $this->add_control(
+            'items',
+            [
+                'label' => __('Items', 'cube'),
+                'type' => Controls_Manager::REPEATER,
+                'fields' => $repeater->get_controls(),
+                'title_field' => '{{{ title }}}',
+            ]
+        );
         
         $this->end_controls_section();
 
@@ -178,8 +191,7 @@ class HeaderSlideshow extends _Base {
     protected function render() {
 
         $id = 'header_slideshow_' . $this->get_id();
-        $title = $this->get_settings('title');
-        $body = $this->get_settings('body');
+        $items = $this->get_settings('items');
         $images_desktop = $this->get_settings('images_desktop');
         $images_mobile = $this->get_settings('images_mobile');
         $cta_text = $this->get_settings('cta_text');
@@ -209,7 +221,7 @@ class HeaderSlideshow extends _Base {
         <div class="header-slideshow elementor" id="<?= $id ?>">
 
             <?php foreach($images_desktop as $index => $desktop_image): ?>
-                <div class="header-slideshow-image<?= $index === 0 ? ' showing' : '' ?>">
+                <div class="header-slideshow-image<?= $index === 0 ? ' showing' : '' ?> header-slideshow-all">
 
                     <?php if (isset($images_mobile[$index]['id'])): ?>
                         <div class="header-slideshow-image-mobile"
@@ -234,37 +246,42 @@ class HeaderSlideshow extends _Base {
                 After recent updates, the parent must also have the class "elementor" for animations to work.
                 */
                 ?>
-
-                <?php if (!empty($title) || !empty($body)): ?>
-
-                    <h1 class="header-slideshow-content elementor-element elementor-invisible"
-                        data-settings='{"animation":"fadeInRight","animation_delay":0}'
-                        data-element_type="section">
-                        <div class="header-slideshow-title"><?= $title ?></div>
-                        <span class="header-slideshow-body"><?= $body ?></span>
-
-                    <?php if (!empty($cta_text) || !empty($cta_text_2)) { ?>
-                        <div class="header-slideshow-buttons flex items-center">
-                            <?php if (!empty($cta_text)) { ?>
-                                <a href="<?php echo $cta_link; ?>" class="btn btn-no-hover flex items-center text-sm">
-                                    <?php if (!empty($cta_icon)){ ?>
-                                        <img src="<?php echo $cta_icon ?>" class="mr-2">
-                                    <?php } ?>
-                                    <?php echo $cta_text; ?>
-                                </a>
-                            <?php } if (!empty($cta_text_2)) { ?>
-                                <a href="<?php echo $cta_link_2; ?>" class="btn btn-no-hover flex items-center text-sm">
-                                    <?php if (!empty($cta_2_icon)){ ?>
-                                        <img src="<?php echo $cta_2_icon ?>" class="mr-2">
-                                    <?php } ?>
-                                    <?php echo $cta_text_2; ?>
-                                </a>
-                            <?php } ?>
-                        </div>
-                    <?php } ?>
-                    </h1>
-
-                <?php endif; ?>
+                <?php
+                foreach ($images_desktop as $index => $item):
+                    $items[$index]['title'] = $items[$index]['title'] ?? '';
+                    $items[$index]['body'] = $items[$index]['body'] ?? '';
+                    ?>
+
+                        <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>
+
+                        <?php if (!empty($cta_text) || !empty($cta_text_2)) { ?>
+                            <div class="header-slideshow-buttons flex items-center">
+                                <?php if (!empty($cta_text)) { ?>
+                                    <a href="<?php echo $cta_link; ?>" class="btn btn-no-hover flex items-center text-sm">
+                                        <?php if (!empty($cta_icon)){ ?>
+                                            <img src="<?php echo $cta_icon ?>" class="mr-2">
+                                        <?php } ?>
+                                        <?php echo $cta_text; ?>
+                                    </a>
+                                <?php } if (!empty($cta_text_2)) { ?>
+                                    <a href="<?php echo $cta_link_2; ?>" class="btn btn-no-hover flex items-center text-sm">
+                                        <?php if (!empty($cta_2_icon)){ ?>
+                                            <img src="<?php echo $cta_2_icon ?>" class="mr-2">
+                                        <?php } ?>
+                                        <?php echo $cta_text_2; ?>
+                                    </a>
+                                <?php } ?>
+                            </div>
+                        <?php } ?>
+                        </h1>
+
+                    <?php
+                endforeach;
+                ?>
             </div>
         </div>
 

diff --git a/wp-content/themes/CCV/dist/styles/app.css b/wp-content/themes/CCV/dist/styles/app.css
index 046ae3c4374f6b6649c063c18669c20342f44fbe..8ee4b52035e8b72674d600b28d80f827b08ef6d0 100644 (file)
--- a/wp-content/themes/CCV/dist/styles/app.css
+++ b/wp-content/themes/CCV/dist/styles/app.css
@@ -1856,11 +1856,11 @@ header.site {
 }
 
 .header-logo {
-  width: 85%;
+  width: 100%;
 }
 
 .header-logo-container {
-  max-width: 45%;
+  max-width: 255px;
 }
 
 @media only screen and (max-width: 1199px) {
@@ -2933,9 +2933,8 @@ h4,
   -moz-osx-font-smoothing: grayscale;
   background: rgba(3,18,54,0.84);
   text-transform: none;
-  padding: 3.75em 2em 0.75em 3.9em;
+  padding: 3.75em 2em 0.75em 2.5em;
   margin: 0 !important;
-  z-index: 10;
   position: absolute;
   bottom: 9.2vw;
   left: 0;
@@ -2943,6 +2942,7 @@ h4,
   width: 50%;
   height: 100%;
   font-size: 2.1875vw;
+  z-index: 1;
 }
 
 @media only screen and (min-width: 1920px) {
@@ -2957,6 +2957,10 @@ h4,
   }
 }
 
+.header-slideshow .header-slideshow-content.showing {
+  z-index: 10;
+}
+
 .header-slideshow .header-slideshow-content:before {
   content: none;
 }
@@ -2996,13 +3000,12 @@ h4,
 
 .header-slideshow-title {
   display: block;
-  font-size: 1em;
+  font-size: 1.333em;
   margin-bottom: 1em;
   position: relative;
 }
 
 .header-slideshow-title:before {
-  content: '';
   top: 0.5em;
   left: -17px;
   width: 1.2em;
@@ -3034,18 +3037,39 @@ h4,
 }
 
 .header-slideshow-body {
-  font-size: 1.333em;
+  font-size: 26px;
+  font-size: 1.181818181818182rem;
   white-space: pre-line;
+  font-family: Roboto Condensed, sans-serif;
+  font-weight: light;
+}
+
+.header-slideshow-body li {
+  list-style-type: none;
+  padding-bottom: 2rem;
+  position: relative;
+  padding-left: 38px;
+}
+
+.header-slideshow-body li:before {
+  content: "";
+  width: 20px;
+  height: 20px;
+  display: inline-flex;
+  background: #ffbf29;
+  left: 0;
+  position: absolute;
+  border-radius: 50px;
 }
 
-.header-slideshow-buttons {
+-buttons {
   margin-top: 57px;
   gap: 17px;
   flex-wrap: wrap;
 }
 
 @media only screen and (max-width: 999px) {
-  .header-slideshow-buttons {
+  -buttons {
     margin-top: 20px;
     gap: 9px;
     flex-wrap: nowrap;
@@ -3053,31 +3077,31 @@ h4,
 }
 
 @media only screen and (max-width: 599px) {
-  .header-slideshow-buttons {
+  -buttons {
     flex-wrap: wrap;
   }
 }
 
-.header-slideshow-buttons a,
-.header-slideshow-buttons .btn {
+-buttons a,
+-buttons .btn {
   padding: 1em 1.8em;
 }
 
 @media only screen and (max-width: 999px) {
-  .header-slideshow-buttons a,
-  .header-slideshow-buttons .btn {
+  -buttons a,
+  -buttons .btn {
     font-size: 0.9rem;
   }
 }
 
-.header-slideshow-buttons a img,
-.header-slideshow-buttons .btn img {
+-buttons a img,
+-buttons .btn img {
   margin-right: 0.9rem;
 }
 
 @media only screen and (max-width: 999px) {
-  .header-slideshow-buttons a img,
-  .header-slideshow-buttons .btn img {
+  -buttons a img,
+  -buttons .btn img {
     width: 20px;
   }
 }

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 d69a895a82fe89c016f662b1345bc64d6b99f0ce..f1f15bbf3cce17fbbc7462f7f3da7aa066f28e99 100644 (file)
--- a/wp-content/themes/CCV/resources/assets/scripts/header-slideshow.js
+++ b/wp-content/themes/CCV/resources/assets/scripts/header-slideshow.js
@@ -7,6 +7,7 @@ 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, 4000);
       let currentSlide = 0;
 
@@ -30,14 +31,25 @@ import debounce from 'lodash.debounce';
 
         $(document).on('click', '.header-slideshow-dots li', function() {
           clearInterval(slideInterval); // Stop autoplay
-          showSlide($(this).data('slide'));
+          let index = $(this).data('slide')
+          showSlide(index);
         });
       }
 
       function showSlide(index) {
+        removeBySlide(slides)
+        removeBySlide(slidesText)
+        currentSlide = (index + slides.length) % slides.length;
+        addBySlides(slides)
+        addBySlides(slidesText)
+      }
+
+      function removeBySlide(slides) {
         $(slides[currentSlide]).removeClass('showing');
         $scope.find(`[data-slide="${currentSlide}"]`).removeClass('active');
-        currentSlide = (index + slides.length) % slides.length;
+      }
+
+      function addBySlides(slides) {
         $(slides[currentSlide]).addClass('showing');
         $scope.find(`[data-slide="${currentSlide}"]`).addClass('active');
       }

diff --git a/wp-content/themes/CCV/resources/assets/styles/components/header.styl b/wp-content/themes/CCV/resources/assets/styles/components/header.styl
index 7df6cbe4b2ddfd299071a13f3d3e91c37a05b50f..37724542837eeb176feeccc1f3022d94fa05c243 100644 (file)
--- a/wp-content/themes/CCV/resources/assets/styles/components/header.styl
+++ b/wp-content/themes/CCV/resources/assets/styles/components/header.styl
@@ -30,9 +30,9 @@ header.site
     padding: 0.75em 1.6em
 
 .header-logo
-  width: 85%
+  width: 100%
   &-container
-    max-width: 45%
+    max-width: 255px
     +below(1200px)
       flex-shrink: 0
     +below(1080px)

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 01bc67b15ba4f402983b00c62d6d3fe5815d354e..06ab608bb5ce6cbe76a6c77c0bfc4fc52edcdde3 100644 (file)
--- a/wp-content/themes/CCV/resources/assets/styles/widgets/header-slideshow.styl
+++ b/wp-content/themes/CCV/resources/assets/styles/widgets/header-slideshow.styl
@@ -83,9 +83,8 @@ $title_bg = rgba(#031236, 0.84)
       font-smoothing()
       background: $title_bg
       text-transform: none
-      padding: 3.75em 2em .75em 3.9em
+      padding: 3.75em 2em .75em 2.5em
       margin: 0 !important
-      z-index: 10
       position: absolute
       constrain(bottom, 9.2vw)
       left: 0 // Not using constrain because this shouldn't be capped on lower limits
@@ -93,6 +92,9 @@ $title_bg = rgba(#031236, 0.84)
       width: 50%
       height: 100%
       font-size: 2.1875vw // 42px in vw based on 1920px width
+      z-index: 1
+      &.showing
+        z-index: 10
       &:before
         content: none
 
@@ -118,23 +120,23 @@ $title_bg = rgba(#031236, 0.84)
 
   &-title
     display: block
-    font-size: 1em // Inherits from parent element so both bits of text can be scaled together
+    font-size: 1.333em // Inherits from parent element so both bits of text can be scaled together
     margin-bottom: 1em
     position relative
 
     // Pink dash
     &:before
-      content: ''
-      top: .5em;
-      left: -17px;
+      //content: ''
+      top: .5em
+      left: -17px
       width: 1.2em
       height: 5px
-      position: absolute;
-      transform: translateX(-100%);
+      position: absolute
+      transform: translateX(-100%)
       @apply bg-yellow
 
       +below($breakpoint-slideshow)
-        left: -11px;
+        left: -11px
         width: 1.5em
       +below(1200px)
         height: 4px
@@ -142,10 +144,29 @@ $title_bg = rgba(#031236, 0.84)
         height: 3px
 
   &-body
-    font-size: 1.333em
+    font-size: 26px
     white-space: pre-line
+    @apply font-body
+    font-weight: light
+
+    li
+      list-style-type: none
+      @apply pb-8
+      position: relative
+      padding-left: 38px
+      
+      &:before
+        content: ""
+        width: 20px
+        height: 20px
+        display: inline-flex
+        background: #FFBF29
+        left: 0
+        position: absolute
+        border-radius: 50px
+
 
-  &-buttons
+&-buttons
     margin-top: 57px
     gap: 17px
     flex-wrap: wrap