From: Stephen Cameron Date: Thu, 31 Oct 2019 17:35:46 +0000 (+0100) Subject: WIP #3053 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=2cee6bbd043dc474f2f5e7acca86c17db04e21b3;p=ccv-wordpress.git WIP #3053 --- 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 41a8f26..0ce746e 100644 --- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php +++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php @@ -70,54 +70,36 @@ class HeaderSlideshow extends Widget_Base { ); $this->add_control( - 'title', + 'content_image', [ - 'label' => __( 'Title', 'elementor' ), - 'type' => Controls_Manager::TEXTAREA, - 'placeholder' => __( 'Enter your title', 'elementor' ), - 'default' => '', + 'label' => __( 'Content Image', 'cube' ), + 'type' => Controls_Manager::MEDIA, + 'label_block' => true, + 'default' => [ + 'url' => Utils::get_placeholder_image_src(), + ], ] ); $this->add_control( - 'subtitle', + 'images_desktop', [ - 'label' => __( 'Subtitle', 'cube' ), - 'type' => Controls_Manager::TEXTAREA, - 'placeholder' => __( 'Enter your subtitle', 'cube' ), - 'default' => '', + 'label' => __( 'Desktop Images (1920px × 912px)', 'cube' ), + 'type' => Controls_Manager::GALLERY, + 'default' => [], + 'show_label' => true, ] ); $this->add_control( - 'images', + 'images_mobile', [ - 'label' => __( 'Slideshow Images', 'cube' ), - 'type' => Controls_Manager::REPEATER, - 'fields' => [ - [ - 'name' => 'desktop', - 'label' => __('Desktop image (1920px × 912px)', 'cube'), - 'label_block' => true, - 'type' => Controls_Manager::MEDIA, - 'default' => [ - 'url' => Utils::get_placeholder_image_src(), - ], - ], - [ - 'name' => 'mobile', - 'label' => __('Mobile image (portrait orientation)', 'cube'), - 'label_block' => true, - 'type' => Controls_Manager::MEDIA, - 'default' => [ - 'url' => Utils::get_placeholder_image_src(), - ], - ], - ], - 'title_field' => '', + 'label' => __( 'Mobile Images (portrait orientation)', 'cube' ), + 'type' => Controls_Manager::GALLERY, + 'default' => [], + 'show_label' => true, ] ); - $this->end_controls_section(); } @@ -131,14 +113,14 @@ class HeaderSlideshow extends Widget_Base { protected function render() { $id = 'header_slideshow_' . $this->get_id(); - $title = $this->get_settings('title'); - $subtitle = $this->get_settings('subtitle'); - $images = $this->get_settings('images'); + $content_image = $this->get_settings('content_image'); + $images_desktop = $this->get_settings('images_desktop'); + $images_mobile = $this->get_settings('images_mobile'); - if (!$images || count($images) < 1) return false; // Must have images to display + if (!$images_desktop || count($images_desktop) < 1) return false; // Must have images to display // Use first image in gallery to set size of slideshow - $image_meta = wp_get_attachment_metadata($images[0]['id']); + $image_meta = wp_get_attachment_metadata($images_desktop[0]['id']); $image_ratio = round($image_meta['height'] / $image_meta['width'] * 100, 2) . '%'; // When this element is present, add a class to the body so the header can be styled differently (transparent background) @@ -152,16 +134,18 @@ class HeaderSlideshow extends Widget_Base {
- $image): ?> + $desktop_image): ?>
- 0): ?> -
- + +
+
+ - 0): ?> -
- +
+
@@ -177,12 +161,14 @@ class HeaderSlideshow extends Widget_Base { */ ?> -
-

- - -

-
+ 0): ?> + + <?= __('Bienvenue au CCV Montpellier - centre de chirurgie vertébrale de Montpellier') ?> +
diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/NewsBanner.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/NewsBanner.php index 3b1ba3a..2d19caa 100644 --- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/NewsBanner.php +++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/NewsBanner.php @@ -88,7 +88,7 @@ class NewsBanner extends Widget_Base { if ($post && isset($post[0]['post_title'])) { - echo '
'; + echo '
'; echo ''. $post[0]['post_title'] .''; echo ''. __("Voir toute l'actualité", 'cube') .''; echo '
'; diff --git a/wp-content/themes/CCV/app/filters.php b/wp-content/themes/CCV/app/filters.php index 0ccd7ec..d017f94 100644 --- a/wp-content/themes/CCV/app/filters.php +++ b/wp-content/themes/CCV/app/filters.php @@ -6,5 +6,5 @@ namespace App; * Add "… Continued" to the excerpt */ add_filter('excerpt_more', function () { - return ' … ' . __('Continued', 'sage') . ''; + return '…'; }); 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 ce5a668..d69a895 100644 --- a/wp-content/themes/CCV/resources/assets/scripts/header-slideshow.js +++ b/wp-content/themes/CCV/resources/assets/scripts/header-slideshow.js @@ -12,10 +12,6 @@ import debounce from 'lodash.debounce'; initSlideshow(); - // Todo: handle resizing here for small screens - scale content (origin: bottom left) so it always fits... - // Todo: when scaling, set content div to 100% and title element to display inline-block to keep correct appearance. - - function initSlideshow() { let slideshowDots = document.createElement('ul'); slideshowDots.className = 'header-slideshow-dots'; @@ -36,40 +32,8 @@ import debounce from 'lodash.debounce'; clearInterval(slideInterval); // Stop autoplay showSlide($(this).data('slide')); }); - - // Handle resizing when window resizes - $(window).on('resize', debounce(resizeSlideshow, 100)); - resizeSlideshow(); - } - - function resizeSlideshow() { - const content = $scope.find('.header-slideshow-content'); - const title = $scope.find('.header-slideshow-title'); - const resizeBreakpoint = 1000; // When to start resizing - const targetWidth = 650; // The max width of the title block + spacing - let windowWidth = $(window).width(); - - - if (windowWidth > resizeBreakpoint) { - content.attr('style', ''); - title.attr('style', ''); - } else { - let scale = Math.min(1, windowWidth / targetWidth); - - content.css({ - transform: `scale(${scale})`, - transformOrigin: 'bottom left', - width: '100%', - margin: '0' - }); - title.css({ - display: 'inline-block' - }) - } - } - function showSlide(index) { $(slides[currentSlide]).removeClass('showing'); $scope.find(`[data-slide="${currentSlide}"]`).removeClass('active'); diff --git a/wp-content/themes/CCV/resources/assets/styles/app.styl b/wp-content/themes/CCV/resources/assets/styles/app.styl index 8808208..19d8eac 100644 --- a/wp-content/themes/CCV/resources/assets/styles/app.styl +++ b/wp-content/themes/CCV/resources/assets/styles/app.styl @@ -2,6 +2,8 @@ @tailwind base @tailwind components +/*! purgecss start ignore */ + // Stylus Setup @import 'common/setup' @import 'common/mixins' @@ -19,6 +21,8 @@ @import 'widgets/*' //@import 'pages/*' +/*! purgecss end ignore */ + // Utilities go last in source order so they can // override other classes with the same specificity @tailwind utilities diff --git a/wp-content/themes/CCV/resources/assets/styles/components/navigation.styl b/wp-content/themes/CCV/resources/assets/styles/components/navigation.styl index bb7c0ee..d4f8580 100644 --- a/wp-content/themes/CCV/resources/assets/styles/components/navigation.styl +++ b/wp-content/themes/CCV/resources/assets/styles/components/navigation.styl @@ -11,7 +11,7 @@ @apply border-b-2 border-transparent // Reserve space for active border @apply py-1 leading-tight // Adjust active border spacing - &.current-menu-item + &.current-menu-item, &.current-menu-parent @apply border-pink &:last-child diff --git a/wp-content/themes/CCV/resources/assets/styles/components/news.styl b/wp-content/themes/CCV/resources/assets/styles/components/news.styl index 29904f8..d190c76 100644 --- a/wp-content/themes/CCV/resources/assets/styles/components/news.styl +++ b/wp-content/themes/CCV/resources/assets/styles/components/news.styl @@ -4,6 +4,7 @@ @apply bg-gray-300 bg-cover bg-center @apply w-full constrain(margin-right, 5vw) + constrain(margin-bottom, 5vw) max-width: 336px &-sizer 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 6ae591c..c1e8afb 100644 --- a/wp-content/themes/CCV/resources/assets/styles/components/sections.styl +++ b/wp-content/themes/CCV/resources/assets/styles/components/sections.styl @@ -3,8 +3,8 @@ +below($breakpoint-columns) .elementor-column width: 100% !important - &:not(:last-of-type) - margin-bottom: 7.5vw + //&:not(:last-of-type) + // margin-bottom: 7.5vw // There's a toggle in the editor so we can disable // this margin between columns when stacking vertically 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 98fa370..35c7ce4 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 @@ -19,7 +19,7 @@ $title_bg = rgba(#fff, 0.88) // Change to portrait oriented images for small screens +below($breakpoint-slideshow-images) - padding-bottom: 148% !important // Based off mockup: 555px / 375px + padding-bottom: 140% !important // Based off mockup: 525px / 375px &-image position: absolute @@ -61,7 +61,7 @@ $title_bg = rgba(#fff, 0.88) z-index: 15 +below($breakpoint-slideshow) - bottom: 1em + bottom: 1.5em li @apply bg-purple-dark @@ -77,58 +77,21 @@ $title_bg = rgba(#fff, 0.88) &-content + width: 50% // Size ratio for intermediate screens + max-width: 620px !important z-index: 10 position: absolute - constrain(left, 5vw) - constrain(bottom, 10vw) + constrain(bottom, 9.2vw) + left: 6.4vw // Not using constrain because this shouldn't be capped on lower limits - .elementor-editor-active &, .elementor-editor-preview & - visibility: visible // Animation doesn't trigger in the editor for some reason so just show it + +above($content-max-width) + left: 126px // From mockup +below($breakpoint-slideshow) bottom: 4em - // ToDo: see how this will work for translations - maybe it's more practical to use an SVG here instead of all this? - // Note: for the title to have a semi-transparent background, - // we're limited by the font properties because the inline - // backgrounds can't overlap so we need to get the line-height - // and padding just right. Maybe it would be better if it was - // solid white... More details: - // https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align - &-title - .header-slideshow & // Extra specificity needed to override generic headings - position: relative - line-height: 1.27 - padding-right: 1.5rem // To match inline text below - margin-left: 0 + +below($breakpoint-slideshow-images) + width: 75% - &:before - top: 40px - left: -36px - width: 48px - height: 5px - - // For multi-line padded text effect - // Ref: https://css-tricks.com/multi-line-padded-text/ - &-text - font-size: 68px fixed // Don't use REMs because we will scale this later with JS - box-decoration-break: clone - white-space: nowrap - display: inline - padding: 0 1.5rem - background-color: $title_bg - - - // Need to position this absolutely so it sits properly - // right at the bottom but without overlapping... - // (due to also having a semi-transparent background) - &-subtitle - background-color: $title_bg - position: absolute - top: 100% - left: 0 - width: 100% - font-size: 23px fixed - letter-spacing: 0.15px - white-space: nowrap - padding: 0 1.5rem 0.5em + .elementor-editor-active &, .elementor-editor-preview & + visibility: visible // Animation doesn't trigger in the editor for some reason so just show it 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 df0fab8..4ce1019 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 @@ -42,6 +42,10 @@ &:hover @apply text-pink + +below(900px) + svg + width: 20px + &-prev left: 0.5rem &-next diff --git a/wp-content/themes/CCV/resources/views/partials/content-single.blade.php b/wp-content/themes/CCV/resources/views/partials/content-single.blade.php index e1b8052..e2ffd23 100644 --- a/wp-content/themes/CCV/resources/views/partials/content-single.blade.php +++ b/wp-content/themes/CCV/resources/views/partials/content-single.blade.php @@ -1,5 +1,5 @@ -
{{-- diff --git a/wp-content/themes/CCV/resources/views/partials/content.blade.php b/wp-content/themes/CCV/resources/views/partials/content.blade.php index bc12184..ce62e9f 100644 --- a/wp-content/themes/CCV/resources/views/partials/content.blade.php +++ b/wp-content/themes/CCV/resources/views/partials/content.blade.php @@ -17,8 +17,11 @@ @php(the_excerpt()) -

- @svg('arrow', 'h-3 mr-2 fill-current') Lire la suite +

+ + @svg('arrow', 'h-3 mr-2 fill-current') + +

diff --git a/wp-content/themes/CCV/tailwind.config.js b/wp-content/themes/CCV/tailwind.config.js index 5607fb2..11f1ca0 100644 --- a/wp-content/themes/CCV/tailwind.config.js +++ b/wp-content/themes/CCV/tailwind.config.js @@ -10,7 +10,7 @@ module.exports = { // the sm: prefix in Tailwind. Maybe there's a better name for this breakpoint but for now it's 'sm'. // Sizes should be listed largest to smallest so they are generated in this order, allowing smaller // breakpoints to take precedence over larger ones (eg. xs:p-1 should override sm:p-2) - //'md': {'max': '1023px'}, // => @media (max-width: 1023px) { ... } + 'md': {'max': '1023px'}, // => @media (max-width: 1023px) { ... } 'sm': {'max': '767px'}, // => @media (max-width: 767px) { ... } 'xs': {'max': '499px'}, // => @media (max-width: 499px) { ... } }, diff --git a/wp-content/themes/CCV/webpack.mix.js b/wp-content/themes/CCV/webpack.mix.js index c7f649c..a47bcf6 100644 --- a/wp-content/themes/CCV/webpack.mix.js +++ b/wp-content/themes/CCV/webpack.mix.js @@ -72,6 +72,10 @@ mix.purgeCss({ ], defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [], + globs: [ + path.join(__dirname, '../../mu-plugins/cube/**/*.php'), // Some classes (eg. for widgets) might be present only here + ], + /* | Add classes, IDs, or selectors that which do not exist in your views or | scripts. By default, We have whitelisted classes generated by WordPress. @@ -81,5 +85,6 @@ mix.purgeCss({ ], whitelistPatterns: [ ...whitelistPatterns, + /mm.*/, // MMenu ], });