From 52462d3c23ab0c1b6f5d5657e0426f380cf19c8c Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Wed, 6 Nov 2019 18:51:30 +0100 Subject: [PATCH] WIP #3053 --- .../mu-plugins/cube/src/Elementor/Setup.php | 3 +- .../src/Elementor/Widgets/BackgroundImage.php | 11 +- .../cube/src/Elementor/Widgets/PeopleGrid.php | 103 ++++++++++++++++++ .../cube/src/Elementor/Widgets/PictoGrid.php | 1 + .../CCV/resources/assets/styles/app.styl | 1 + .../resources/assets/styles/common/admin.styl | 11 ++ .../assets/styles/common/layout.styl | 19 ++-- .../assets/styles/components/buttons.styl | 18 ++- .../assets/styles/widgets/image.styl | 16 +++ .../assets/styles/widgets/people-grid.styl | 26 +++++ .../assets/styles/widgets/picto-grid.styl | 6 +- .../assets/styles/widgets/text-block.styl | 73 +++++++------ .../views/widgets/people-grid.blade.php | 14 +++ .../views/widgets/picto-grid.blade.php | 4 +- 14 files changed, 250 insertions(+), 56 deletions(-) create mode 100644 wp-content/mu-plugins/cube/src/Elementor/Widgets/PeopleGrid.php create mode 100644 wp-content/themes/CCV/resources/assets/styles/common/admin.styl create mode 100644 wp-content/themes/CCV/resources/assets/styles/widgets/image.styl create mode 100644 wp-content/themes/CCV/resources/assets/styles/widgets/people-grid.styl create mode 100644 wp-content/themes/CCV/resources/views/widgets/people-grid.blade.php diff --git a/wp-content/mu-plugins/cube/src/Elementor/Setup.php b/wp-content/mu-plugins/cube/src/Elementor/Setup.php index aa49981..0f7c816 100644 --- a/wp-content/mu-plugins/cube/src/Elementor/Setup.php +++ b/wp-content/mu-plugins/cube/src/Elementor/Setup.php @@ -30,12 +30,13 @@ class Setup { $elementor = Plugin::$instance; - $elementor->widgets_manager->register_widget_type( new Widgets\BackgroundImage() ); $elementor->widgets_manager->register_widget_type( new Widgets\TextBlock() ); + $elementor->widgets_manager->register_widget_type( new Widgets\BackgroundImage() ); $elementor->widgets_manager->register_widget_type( new Widgets\HeaderSlideshow() ); $elementor->widgets_manager->register_widget_type( new Widgets\NewsBanner() ); $elementor->widgets_manager->register_widget_type( new Widgets\LinkCarousel() ); $elementor->widgets_manager->register_widget_type( new Widgets\PictoGrid() ); + $elementor->widgets_manager->register_widget_type( new Widgets\PeopleGrid() ); } protected function _customise_sections() { diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/BackgroundImage.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/BackgroundImage.php index d502e1e..0ce61a0 100644 --- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/BackgroundImage.php +++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/BackgroundImage.php @@ -96,8 +96,15 @@ class BackgroundImage extends _Base { $image = $this->get_settings('image'); $bg_position = $this->get_settings('background_position'); - $meta = wp_get_attachment_metadata($image['id']); - $ratio = $meta['height'] / $meta['width'] * 100 .'%'; + + if (is_numeric($image['id'])) { + $meta = wp_get_attachment_metadata($image['id']); + $ratio = $meta['height'] / $meta['width'] * 100 . '%'; + } else { + // No image set, use fallback + $image['url'] = Utils::get_placeholder_image_src(); + $ratio = '100%'; + } echo '
'; diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/PeopleGrid.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/PeopleGrid.php new file mode 100644 index 0000000..74293c7 --- /dev/null +++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/PeopleGrid.php @@ -0,0 +1,103 @@ +start_controls_section( + 'section_content', + [ + 'label' => __( 'People Grid', 'cube' ), + ] + ); + + $this->add_control( + 'people', + [ + 'label' => __( 'People', 'cube' ), + 'type' => Controls_Manager::REPEATER, + 'fields' => [ + [ + 'name' => 'photo', + 'label' => __('Photo', 'cube'), + 'label_block' => true, + 'type' => Controls_Manager::MEDIA, + 'default' => [ + 'url' => Utils::get_placeholder_image_src(), + ], + ], + [ + 'name' => 'name', + 'label' => __( 'Nom', 'cube' ), + 'type' => Controls_Manager::TEXTAREA, + 'label_block' => true, + 'default' => '', + ], + [ + 'name' => 'details', + 'label' => __( 'Détails', 'cube' ), + 'type' => Controls_Manager::TEXTAREA, + 'label_block' => true, + 'default' => '', + ], + ], + 'title_field' => '{{{ name }}}', + ] + ); + $this->end_controls_section(); + + $this->common_controls(); + } + /** + * Render the widget output on the frontend. + * Written in PHP and used to generate the final HTML. + * + * @since 1.0.0 + * @access protected + */ + protected function render() { + $people = $this->get_settings('people'); + echo view('widgets/people-grid', compact('people')); + } +} diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/PictoGrid.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/PictoGrid.php index f3fa5c7..715690e 100644 --- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/PictoGrid.php +++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/PictoGrid.php @@ -79,6 +79,7 @@ class PictoGrid extends _Base { 'label' => __( 'Description', 'cube' ), 'type' => Controls_Manager::TEXTAREA, 'label_block' => true, + 'default' => '', ], ], 'title_field' => '{{{ description }}}', diff --git a/wp-content/themes/CCV/resources/assets/styles/app.styl b/wp-content/themes/CCV/resources/assets/styles/app.styl index 19d8eac..4c376f9 100644 --- a/wp-content/themes/CCV/resources/assets/styles/app.styl +++ b/wp-content/themes/CCV/resources/assets/styles/app.styl @@ -9,6 +9,7 @@ @import 'common/mixins' @import 'common/debug' @import 'common/global' +@import 'common/admin' @import 'common/layout' @import 'common/spacing' @import 'common/animations' diff --git a/wp-content/themes/CCV/resources/assets/styles/common/admin.styl b/wp-content/themes/CCV/resources/assets/styles/common/admin.styl new file mode 100644 index 0000000..0f94c90 --- /dev/null +++ b/wp-content/themes/CCV/resources/assets/styles/common/admin.styl @@ -0,0 +1,11 @@ +// Tiny MCE editor styles in Elementor editor +// Most styles for editor set in text-block.styl body... +#tinymce + @apply font-body p-3 + + // Normally the lists have no margin and the bullet > image sits + // in the spacing gutter created by the text-block. In the context + // of the editor, it would be hidden so we indent it to make it + // visible while editing... + ul + margin-left: 1.3em diff --git a/wp-content/themes/CCV/resources/assets/styles/common/layout.styl b/wp-content/themes/CCV/resources/assets/styles/common/layout.styl index d48d482..bc168e1 100644 --- a/wp-content/themes/CCV/resources/assets/styles/common/layout.styl +++ b/wp-content/themes/CCV/resources/assets/styles/common/layout.styl @@ -8,14 +8,8 @@ .container, .elementor-section-boxed > .elementor-container - //horizontal-spacing() center($content-max-width) - // Account for the extra padding Elementor adds with the "extended" column gap (15px) - &.elementor-column-gap-extended - padding-left: s('calc(%s - 15px)', $horizontal-gutter) - padding-right: @padding-left - // Nested containers should have no padding .elementor-container, &.elementor-column-gap-no padding-left: 0 @@ -35,7 +29,12 @@ .elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-element-populated padding: 0 -.elementor-column-gap-wide > .elementor-row > .elementor-column > .elementor-element-populated - +below(450px) - padding-left: 0 - padding-right: 0 +.elementor-section-boxed > .elementor-column-gap-wide + horizontal-spacing(-2.5vw, margin) // Negative margins to pull back horizontal padding added to child columns below + > .elementor-row > .elementor-column > .elementor-element-populated + horizontal-spacing(2.5vw) + padding-top: 0 + padding-bottom: 0 + //+below(450px) + // padding-left: 0 + // padding-right: 0 diff --git a/wp-content/themes/CCV/resources/assets/styles/components/buttons.styl b/wp-content/themes/CCV/resources/assets/styles/components/buttons.styl index 15fd73d..61691f5 100644 --- a/wp-content/themes/CCV/resources/assets/styles/components/buttons.styl +++ b/wp-content/themes/CCV/resources/assets/styles/components/buttons.styl @@ -1,8 +1,9 @@ // Buttons -.btn +.btn, +.elementor-widget-button a.elementor-button @apply relative inline-block overflow-hidden - @apply bg-pink text-white + @apply bg-pink text-white rounded-none @apply font-bold text-xs uppercase @apply px-10 py-3 font-smoothing() @@ -11,8 +12,17 @@ &:hover @apply bg-teal - &-text - @apply z-10 relative + &.elementor-size-sm + @apply text-sm + &.elementor-size-md + @apply text-base + &.elementor-size-lg + @apply text-lg + &.elementor-size-xl + @apply text-xl + + //&-text + // @apply z-10 relative //&-no-hover:before // display: none diff --git a/wp-content/themes/CCV/resources/assets/styles/widgets/image.styl b/wp-content/themes/CCV/resources/assets/styles/widgets/image.styl new file mode 100644 index 0000000..d972227 --- /dev/null +++ b/wp-content/themes/CCV/resources/assets/styles/widgets/image.styl @@ -0,0 +1,16 @@ +// Elementor Image Widget overrides +.elementor-image + .wp-caption + display: flex + flex-direction: column-reverse + align-items: flex-start + + .wp-caption-text + @apply text-lg mb-2 flex items-center + color: currentColor + + &:before + @apply inline-block bg-pink mr-2 + content: '' + constrain(width, 2.5vw) + height: 4px diff --git a/wp-content/themes/CCV/resources/assets/styles/widgets/people-grid.styl b/wp-content/themes/CCV/resources/assets/styles/widgets/people-grid.styl new file mode 100644 index 0000000..14f4808 --- /dev/null +++ b/wp-content/themes/CCV/resources/assets/styles/widgets/people-grid.styl @@ -0,0 +1,26 @@ +.people-grid + display: grid + grid-template-columns: repeat(3, 1fr) + constrain(grid-gap, 5vw) + + +below(768px) + grid-template-columns: repeat(2, 1fr) + +below(500px) + grid-template-columns: 1fr + + &-item + @apply text-center + + &-photo + @apply bg-light bg-cover bg-center bg-no-repeat rounded-full mx-auto + max-width: 288px + + &-sizer + padding-bottom: 100% // Ratio based sizing to make a square + + &-name + @apply font-body text-lg mt-4 + + &-details + @apply mx-auto + max-width: 280px diff --git a/wp-content/themes/CCV/resources/assets/styles/widgets/picto-grid.styl b/wp-content/themes/CCV/resources/assets/styles/widgets/picto-grid.styl index 9e88033..3ca6144 100644 --- a/wp-content/themes/CCV/resources/assets/styles/widgets/picto-grid.styl +++ b/wp-content/themes/CCV/resources/assets/styles/widgets/picto-grid.styl @@ -2,7 +2,6 @@ display: grid grid-template-columns: repeat(4, 1fr) constrain(grid-gap, 5vw) - horizontal-spacing(5vw, margin) +below(900px) grid-template-columns: repeat(3, 1fr) @@ -38,6 +37,11 @@ max-height: 40% margin-bottom: 0.5em + // Allow image to be bigger if there's no title below it + &:last-child + max-height: none + margin-bottom: 0 + &-title flex: 0 0 auto color: #fff diff --git a/wp-content/themes/CCV/resources/assets/styles/widgets/text-block.styl b/wp-content/themes/CCV/resources/assets/styles/widgets/text-block.styl index 41008d5..de313fb 100644 --- a/wp-content/themes/CCV/resources/assets/styles/widgets/text-block.styl +++ b/wp-content/themes/CCV/resources/assets/styles/widgets/text-block.styl @@ -27,49 +27,50 @@ //&:last-child // margin-bottom: 0 - &-body - font-weight: 300 - //margin-top: r(40px) + &-cta + @apply antialiased + margin-top: r(30px) - // If the body is the first child, there's no title - // so we don't want the top margin... - //&:first-child - // margin-top: 0 + // If the CTA is the first child, it means it is the only element + // in the text block so we don't want the top margin... + &:first-child + margin-top: 0 - > * + * // Automatic spacing between direct child elements - margin-top: 1.5em +// Not nested so that we can share these styles with TinyMCE +.text-block-body, #tinymce + font-weight: 300 + //margin-top: r(40px) - h3 - @apply font-body font-medium text-lg + // If the body is the first child, there's no title + // so we don't want the top margin... + //&:first-child + // margin-top: 0 - a - @apply text-pink + > * + * // Automatic spacing between direct child elements + margin-top: 1.5em - &:hover - @apply text-teal + h3 + @apply font-body font-medium text-lg - b, strong - font-weight: 400 + a + @apply text-pink - li - position: relative + &:hover + @apply text-teal - &:before - content: '' - position: absolute - top: 0.4em - left: -1.3em - width: 7px - height: 13px - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14'%3E%3Cpath stroke='%23ff078b' stroke-width='2' stroke-linecap='round' d='M1 1l6 6M1 13l6-6'/%3E%3C/svg%3E") - background-repeat: no-repeat - background-size: contain + b, strong + font-weight: 400 - &-cta - @apply antialiased - margin-top: r(30px) + li + position: relative - // If the CTA is the first child, it means it is the only element - // in the text block so we don't want the top margin... - &:first-child - margin-top: 0 + &:before + content: '' + position: absolute + top: 0.4em + left: -1.3em + width: 7px + height: 13px + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14'%3E%3Cpath stroke='%23ff078b' stroke-width='2' stroke-linecap='round' d='M1 1l6 6M1 13l6-6'/%3E%3C/svg%3E") + background-repeat: no-repeat + background-size: contain diff --git a/wp-content/themes/CCV/resources/views/widgets/people-grid.blade.php b/wp-content/themes/CCV/resources/views/widgets/people-grid.blade.php new file mode 100644 index 0000000..fdb42fa --- /dev/null +++ b/wp-content/themes/CCV/resources/views/widgets/people-grid.blade.php @@ -0,0 +1,14 @@ +{{-- PEOPLE GRID --}} +
+ @foreach ($people as $person) +
+
+
+
+

{!! $person['name'] !!}

+ @if ($person['details']) +

{!! nl2br($person['details']) !!}

+ @endif +
+ @endforeach +
diff --git a/wp-content/themes/CCV/resources/views/widgets/picto-grid.blade.php b/wp-content/themes/CCV/resources/views/widgets/picto-grid.blade.php index ae54635..f7c595d 100644 --- a/wp-content/themes/CCV/resources/views/widgets/picto-grid.blade.php +++ b/wp-content/themes/CCV/resources/views/widgets/picto-grid.blade.php @@ -9,11 +9,11 @@ @endif @if ($item['title']) -

{{ $item['title'] }}

+

{!! nl2br($item['title']) !!}

@endif -

{{ $item['description'] }}

+

{!! nl2br($item['description']) !!}

@endforeach -- 2.39.5