From d5277e56b6d1a62acf1347a41b9112a0daa1e333 Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Mon, 4 Nov 2019 18:11:32 +0100 Subject: [PATCH] WIP #3053 --- .../mu-plugins/cube/src/Elementor/Setup.php | 1 + .../cube/src/Elementor/Widgets/PictoGrid.php | 108 ++++++++++++++++++ .../assets/styles/components/buttons.styl | 52 +++++---- .../assets/styles/components/footer.styl | 4 + .../assets/styles/components/navigation.styl | 4 +- .../assets/styles/widgets/picto-grid.styl | 51 +++++++++ .../assets/styles/widgets/text-block.styl | 5 +- .../resources/views/partials/footer.blade.php | 4 +- .../resources/views/partials/header.blade.php | 4 +- .../views/widgets/picto-grid.blade.php | 19 +++ wp-content/themes/CCV/tailwind.config.js | 2 + 11 files changed, 223 insertions(+), 31 deletions(-) create mode 100644 wp-content/mu-plugins/cube/src/Elementor/Widgets/PictoGrid.php create mode 100644 wp-content/themes/CCV/resources/assets/styles/components/footer.styl create mode 100644 wp-content/themes/CCV/resources/assets/styles/widgets/picto-grid.styl create mode 100644 wp-content/themes/CCV/resources/views/widgets/picto-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 be3f0db..aa49981 100644 --- a/wp-content/mu-plugins/cube/src/Elementor/Setup.php +++ b/wp-content/mu-plugins/cube/src/Elementor/Setup.php @@ -35,6 +35,7 @@ class Setup { $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() ); } protected function _customise_sections() { diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/PictoGrid.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/PictoGrid.php new file mode 100644 index 0000000..5225308 --- /dev/null +++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/PictoGrid.php @@ -0,0 +1,108 @@ +start_controls_section( + 'section_content', + [ + 'label' => __( 'Picto Grid', 'cube' ), + ] + ); + + $this->add_control( + 'items', + [ + 'label' => __( 'Pictogrammes', 'cube' ), + 'type' => Controls_Manager::REPEATER, + 'fields' => [ + [ + 'name' => 'image', + 'label' => __('Pictogramme', 'cube'), + 'label_block' => true, + 'type' => Controls_Manager::MEDIA, + 'default' => [ + 'url' => Utils::get_placeholder_image_src(), + ], + ], + [ + 'name' => 'title', + 'label' => __( 'Titre', 'cube' ), + 'type' => Controls_Manager::TEXTAREA, + 'label_block' => true, + 'default' => '', + ], + [ + 'name' => 'description', + 'label' => __( 'Description', 'cube' ), + 'type' => Controls_Manager::TEXTAREA, + 'label_block' => true, + ], + ], + 'title_field' => '{{{ title }}}', + ] + ); + $this->end_controls_section(); + + + } + /** + * 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() { + $items = $this->get_settings('items'); + echo view('widgets/picto-grid', compact('items')); + } +} 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 8527e28..15fd73d 100644 --- a/wp-content/themes/CCV/resources/assets/styles/components/buttons.styl +++ b/wp-content/themes/CCV/resources/assets/styles/components/buttons.styl @@ -6,16 +6,20 @@ @apply font-bold text-xs uppercase @apply px-10 py-3 font-smoothing() + transition: background-color 0.25s + + &:hover + @apply bg-teal &-text @apply z-10 relative - &-no-hover:before - display: none - - &:hover:before - transform: scaleX(1) - opacity: 1 + //&-no-hover:before + // display: none + // + //&:hover:before + // transform: scaleX(1) + // opacity: 1 //&:before // content: '' @@ -31,22 +35,22 @@ // transition: transform 0.2s ease-out // Circle hover effect - &:hover:before - transform: scale(1.1) translateY(-50%) - opacity: 1 - - &:before - content: '' - position: absolute - top: 50% - left: 0 - z-index: 1 - background-color: rgba(#fff, 0.15) - width: 100% - padding-bottom: 100% - border-radius: 50% - transform: scale(0) translateY(-50%) - transform-origin: top center - transition: all 0.2s ease-out - opacity: 0 + //&:hover:before + // transform: scale(1.1) translateY(-50%) + // opacity: 1 + // + //&:before + // content: '' + // position: absolute + // top: 50% + // left: 0 + // z-index: 1 + // background-color: rgba(#fff, 0.15) + // width: 100% + // padding-bottom: 100% + // border-radius: 50% + // transform: scale(0) translateY(-50%) + // transform-origin: top center + // transition: all 0.2s ease-out + // opacity: 0 diff --git a/wp-content/themes/CCV/resources/assets/styles/components/footer.styl b/wp-content/themes/CCV/resources/assets/styles/components/footer.styl new file mode 100644 index 0000000..f4fe007 --- /dev/null +++ b/wp-content/themes/CCV/resources/assets/styles/components/footer.styl @@ -0,0 +1,4 @@ +.site-footer + a:not(.btn) + &:hover + @apply text-pink 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 d4f8580..039ab50 100644 --- a/wp-content/themes/CCV/resources/assets/styles/components/navigation.styl +++ b/wp-content/themes/CCV/resources/assets/styles/components/navigation.styl @@ -55,10 +55,10 @@ a @apply text-white @apply block py-2 px-4 m-0 + transition: background-color 0.25s &:hover - @apply text-white - background-color: rgba(#fff, 0.2) + @apply text-white bg-pink-light // Language switcher and action buttons 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 new file mode 100644 index 0000000..4e80b05 --- /dev/null +++ b/wp-content/themes/CCV/resources/assets/styles/widgets/picto-grid.styl @@ -0,0 +1,51 @@ +.picto-grid + display: grid + // Automatic number of columns based on number of children + // but with a min-width to stop them getting too small... + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) + + &-image-wrapper + position: relative + max-width: 195px + border-radius: 50% + background-color: #585666 + margin: 0 auto + + &-sizer + padding-bottom: 100% // Ratio based sizing to make a square + + &-image-content + position: absolute + top: 0 + left: 0 + width: 100% + height: 100% + display: flex + flex-direction: column + align-items: center + justify-content: center + + &-image + flex: 0 0 auto + max-width: 60% !important + justify-self: end + margin-bottom: 1em + + &-title + flex: 0 0 auto + color: #fff + font-size: 24px + text-align: center + + &-description + text-align: center + + &:before + @apply bg-pink + content: '' + display: block + width: 48px + height: 5px + margin: 1em auto + + 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 a0f5a70..ca0481e 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 @@ -38,7 +38,10 @@ @apply font-medium text-lg a - color: theme('colors.pink') + @apply text-pink + + &:hover + @apply text-teal b, strong font-weight: 400 diff --git a/wp-content/themes/CCV/resources/views/partials/footer.blade.php b/wp-content/themes/CCV/resources/views/partials/footer.blade.php index 9f34deb..f95bd0c 100644 --- a/wp-content/themes/CCV/resources/views/partials/footer.blade.php +++ b/wp-content/themes/CCV/resources/views/partials/footer.blade.php @@ -1,4 +1,4 @@ -