From db338202b5d41683c96d2f3e1a758b7a981451e5 Mon Sep 17 00:00:00 2001 From: soufiane Date: Mon, 28 Oct 2024 16:26:32 +0100 Subject: [PATCH] wait #7127 @5:00 --- .../src/Elementor/Widgets/HeaderSlideshow.php | 9 +- wp-content/themes/CCV/dist/styles/app.css | 109 +++++++++--------- .../assets/scripts/header-slideshow.js | 8 +- .../styles/widgets/header-slideshow.styl | 89 +++++++------- 4 files changed, 101 insertions(+), 114 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 dd4f4149..6ea1c573 100644 --- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php +++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php @@ -255,11 +255,10 @@ class HeaderSlideshow extends _Base {

-
-
-
-
- + + + +
diff --git a/wp-content/themes/CCV/dist/styles/app.css b/wp-content/themes/CCV/dist/styles/app.css index 7862385d..1b459aa5 100644 --- a/wp-content/themes/CCV/dist/styles/app.css +++ b/wp-content/themes/CCV/dist/styles/app.css @@ -2836,14 +2836,6 @@ body .elementor-section:not(#slideshow-section) { } } -@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; @@ -2916,29 +2908,24 @@ body .elementor-section:not(#slideshow-section) { } .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)); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - background: #031236; + background: rgba(26,46,93,0.91); text-transform: none; - margin: 0 !important; + padding: 1.5em 1.5em; + margin-bottom: 0; + z-index: 10; position: absolute; bottom: 9.2vw; - left: 0; - top: 0; - width: 50%; - height: 100%; + left: 6.4vw; font-size: 2.1875vw; font-size: 2.1875vw; - z-index: 1; - opacity: 0; + max-width: 968px; + width: 60vw; + opacity: 1; } @media only screen and (min-width: 1920px) { @@ -2953,32 +2940,23 @@ body .elementor-section:not(#slideshow-section) { } } -.header-slideshow .header-slideshow-content.showing { - z-index: 10; - opacity: 1; -} - -.header-slideshow .header-slideshow-content:before { - content: none; +@media only screen and (min-width: 2128px) { + .header-slideshow .header-slideshow-content { + left: calc((100% - 1920px ) / 2); + } } @media only screen and (min-width: 1920px) { .header-slideshow .header-slideshow-content { - font-size: 42px; - font-size: 42px; - max-width: calc(1920px / 2); - left: calc((100% - 1920px ) / 2); + font-size: 31px; + font-size: 31px; } } @media only screen and (max-width: 999px) { .header-slideshow .header-slideshow-content { - top: initial; - bottom: 0; - padding: 1.75em 1em 3.75em 5em; - width: 100%; - height: auto; - display: block; + bottom: 4em; + padding: 0.75em 1em; } } @@ -2986,7 +2964,9 @@ body .elementor-section:not(#slideshow-section) { .header-slideshow .header-slideshow-content { font-size: 3.75vw; font-size: 3.75vw; - padding-right: 1em; + margin: 0 52px; + left: 0; + width: auto; } } @@ -2995,34 +2975,47 @@ body .elementor-section:not(#slideshow-section) { font-size: 31px; } -.header-slideshow-content:before { - content: none; +.header-slideshow .header-slideshow-content:not(.showing) { + opacity: 0 !important; } -.elementor-editor-active .header-slideshow-content, -.elementor-editor-preview .header-slideshow-content { - visibility: visible; +.header-slideshow .header-slideshow-content:before { + top: 2.5em; + left: -0.6em; + width: 1.2em; + height: 5px; } -.header-slideshow-title, -.header-slideshow-body p, -.header-slideshow-body li { - opacity: 0; - transition: opacity 1.5s; +@media only screen and (max-width: 1199px) { + .header-slideshow .header-slideshow-content:before { + height: 4px; + } } -.header-slideshow-title.showing, -.header-slideshow-body p.showing, -.header-slideshow-body li.showing { - opacity: 1; +@media only screen and (max-width: 899px) { + .header-slideshow .header-slideshow-content:before { + height: 3px; + } +} + +@media only screen and (max-width: 599px) { + .header-slideshow .header-slideshow-content:before { + top: 1.9em; + } +} + +.elementor-editor-active .header-slideshow .header-slideshow-content, +.elementor-editor-preview .header-slideshow .header-slideshow-content { + visibility: visible; } .header-slideshow-title { display: block; font-size: 1.333em; font-size: 1.333em; - margin-bottom: 1em; position: relative; + text-transform: uppercase; + line-height: 1.5em; } .header-slideshow-title:before { @@ -3057,10 +3050,14 @@ body .elementor-section:not(#slideshow-section) { } .header-slideshow-body { - font-size: 0.63em; - font-size: 0.63em; + font-size: 0.85em; + font-size: 0.85em; white-space: pre-line; font-family: Roboto Condensed, sans-serif; + line-height: 1.5em; + margin-top: 1em; + display: inline-block; + font-weight: 100; } .header-slideshow-body li { 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 e3ad5190..79315201 100644 --- a/wp-content/themes/CCV/resources/assets/scripts/header-slideshow.js +++ b/wp-content/themes/CCV/resources/assets/scripts/header-slideshow.js @@ -8,7 +8,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, 14000); + const slideInterval = setInterval(nextSlide, 14000); let currentSlide = 0; let headerHeight = $("header.site").get(0).getBoundingClientRect().height @@ -37,9 +37,6 @@ import debounce from 'lodash.debounce'; let index = $(this).data('slide') showSlide(index); }); - setTimeout(function() { - revealText(slidesText) - }, 1000) revealLastText(slidesText); } @@ -62,13 +59,12 @@ import debounce from 'lodash.debounce'; $(slides[currentSlide]).removeClass('showing'); $scope.find(`[data-slide="${currentSlide}"]`).removeClass('active'); - $(slides[currentSlide]).not(':last-child').find(".header-slideshow-title, .header-slideshow-body p,.header-slideshow-body li").removeClass("showing") + //$(slides[currentSlide]).not(':last-child').find(".header-slideshow-title, .header-slideshow-body p,.header-slideshow-body li").removeClass("showing") } function addBySlides(slides) { $(slides[currentSlide]).addClass('showing'); $scope.find(`[data-slide="${currentSlide}"]`).addClass('active'); - revealText(slidesText) } function nextSlide() { 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 a4bf72ef..8f58afda 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 @@ -1,5 +1,5 @@ $breakpoint-slideshow-images = 600px -$title_bg = #031236 +$title_bg = rgba(#1A2E5D,0.91) .header-slideshow position: relative @@ -19,11 +19,6 @@ $title_bg = #031236 //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 @@ -89,72 +84,68 @@ $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 - margin: 0 !important + padding: 1.5em 1.5em + margin-bottom: 0 + z-index: 10 position: absolute constrain(bottom, 9.2vw) - left: 0 // Not using constrain because this shouldn't be capped on lower limits - top: 0 - width: 50% - height: 100% + left: 6.4vw // Not using constrain because this shouldn't be capped on lower limits font-size: 2.1875vw // 42px in vw based on 1920px width - z-index: 1 - opacity: 0 - - &.showing - z-index: 10 - opacity: 1 + max-width: 968px + width: 60vw + opacity: 1 - &:before - content: none + +above(2128px) + left: 'calc((100% - %s ) / 2)' % ($content-max-width) +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) + font-size: 31px // Base font size +below($breakpoint-slideshow) - top: initial - bottom: 0 - padding: 1.75em 1em 3.75em 5em - width: 100% - height: auto - display: block + bottom: 4em + padding: 0.75em 1em +below($breakpoint-slideshow-images) font-size: 3.75vw - padding-right: 1em + margin: 0 52px + left: 0 + width: auto &.small-height font-size: 31px - &:before - content: none + &:not(.showing) + opacity: 0 !important + + + // Pink dash + &:before + top: 2.5em //1.2em + left: -0.6em + width: 1.2em + height: 5px + + +below(1200px) + height: 4px + +below(900px) + height: 3px + + +below($breakpoint-slideshow-images) + top: 1.9em .elementor-editor-active &, .elementor-editor-preview & visibility: visible // Animation doesn't trigger in the editor for some reason so just show it - &-title, - &-body p, - &-body li - opacity: 0 - transition: opacity 1.5s - &.showing - opacity: 1 - &-title display: block font-size: 1.333em // Inherits from parent element so both bits of text can be scaled together - margin-bottom: 1em position relative + text-transform: uppercase + line-height: 1.5em // Pink dash &:before @@ -176,9 +167,13 @@ $title_bg = #031236 height: 3px &-body - font-size: .63em + font-size: .85em white-space: pre-line @apply font-body + line-height: 1.5em + margin-top: 1em + display: inline-block + font-weight: 100 li list-style-type: none @@ -186,7 +181,7 @@ $title_bg = #031236 position: relative padding-left: 1.5em font-weight: 100 - + &:before content: "" width: .6em -- 2.39.5