From d0b0a7e7215a7b61741a53c5a1b252bcffce9d4c Mon Sep 17 00:00:00 2001 From: soufiane Date: Thu, 26 Sep 2024 10:19:50 +0200 Subject: [PATCH] wait #7070 @7:00 --- .../src/Elementor/Widgets/HeaderSlideshow.php | 123 ++++++++++-------- wp-content/themes/CCV/dist/styles/app.css | 60 ++++++--- .../assets/scripts/header-slideshow.js | 16 ++- .../assets/styles/components/header.styl | 4 +- .../styles/widgets/header-slideshow.styl | 43 ++++-- 5 files changed, 160 insertions(+), 86 deletions(-) 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 a6049828..0c4f3549 100644 --- 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 {
$desktop_image): ?> -
+
- - - -

-
- - - -
- - - - - - - - - - - - - - - -
- -

- - + $item): + $items[$index]['title'] = $items[$index]['title'] ?? ''; + $items[$index]['body'] = $items[$index]['body'] ?? ''; + ?> + +

+
+
+ + +
+ + + + + + + + + + + + + + + +
+ +

+ +
diff --git a/wp-content/themes/CCV/dist/styles/app.css b/wp-content/themes/CCV/dist/styles/app.css index 046ae3c4..8ee4b520 100644 --- 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 d69a895a..f1f15bbf 100644 --- 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 7df6cbe4..37724542 100644 --- 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 01bc67b1..06ab608b 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 @@ -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 -- 2.39.5