From f08b9fb922b751910a1eb6280a4050d0b6f65f8f Mon Sep 17 00:00:00 2001 From: soufiane Date: Tue, 16 May 2023 17:28:03 +0200 Subject: [PATCH] wip #5812 @6:30 --- wp-content/mu-plugins/cube/Init.php | 3 +- .../cube/Widgets/AssociationSectionImage.php | 4 +- .../mu-plugins/cube/Widgets/FormattedText.php | 75 +++++++++++++++---- .../mu-plugins/cube/Widgets/StickyNav.php | 1 + .../resources/styles/common/global.sass | 9 ++- .../resources/styles/common/helpers.sass | 4 +- .../resources/styles/partials/header.scss | 1 + .../styles/partials/home-carousel.sass | 3 +- .../styles/widgets/blockAssociation.sass | 2 +- .../styles/widgets/blockOrganisation.sass | 19 +++-- .../resources/styles/widgets/blockText.sass | 59 +++++++++++++-- .../styles/widgets/blocktextbtn.sass | 11 ++- .../resources/styles/widgets/stickyNav.sass | 23 ++++-- .../views/widgets/text-image.blade.php | 25 +++++++ 14 files changed, 198 insertions(+), 41 deletions(-) create mode 100644 wp-content/themes/sycomore-fondation/resources/views/widgets/text-image.blade.php diff --git a/wp-content/mu-plugins/cube/Init.php b/wp-content/mu-plugins/cube/Init.php index 5b7a177..cfac9e3 100644 --- a/wp-content/mu-plugins/cube/Init.php +++ b/wp-content/mu-plugins/cube/Init.php @@ -56,7 +56,7 @@ class Setup { // Add our custom layout controls to the "Layout" section in the "Advanced" tab of each element // Note: for normal widgets, section_id for the Layout section is '_section_style', // while for containers, it is called 'section_layout' (due to different implementation of Containers) - if (in_array($section_id, ['section_style_image'])) { + if (in_array($section_id, ['section_style_image','cube-formatted-text.default'])) { $element->add_control( 'responsive', [ @@ -214,6 +214,7 @@ class Setup { 'l-2xl' => 'L ↔ 2XL (38px — 86px)', '2xl-custom' => '2XL (72px — 86px)', '36-126' => '(36px — 126px)', + '74-126' => '(74px - 126px)', '2xl-5xl' => '2XL ↔ 5XL (72px — 126px)' ]; } diff --git a/wp-content/mu-plugins/cube/Widgets/AssociationSectionImage.php b/wp-content/mu-plugins/cube/Widgets/AssociationSectionImage.php index 7d7cacd..7825d39 100644 --- a/wp-content/mu-plugins/cube/Widgets/AssociationSectionImage.php +++ b/wp-content/mu-plugins/cube/Widgets/AssociationSectionImage.php @@ -208,7 +208,9 @@ class AssociationSectionImage extends _Base { ?> Tout afficher "; + if(sizeof($items) > 11) { + echo ""; + } echo ""; } } \ No newline at end of file diff --git a/wp-content/mu-plugins/cube/Widgets/FormattedText.php b/wp-content/mu-plugins/cube/Widgets/FormattedText.php index f17b4f6..6ce7fda 100644 --- a/wp-content/mu-plugins/cube/Widgets/FormattedText.php +++ b/wp-content/mu-plugins/cube/Widgets/FormattedText.php @@ -28,6 +28,16 @@ class FormattedText extends _Base { ); } protected function controls() { + $this->add_control( + 'above_title', + [ + 'label' => __( 'Above title', 'elementor' ), + 'type' => Controls_Manager::TEXT, + 'placeholder' => __( 'Enter your above title', 'elementor' ), + 'default' => 'Abovetitle', + ] + ); + $this->add_control( 'title', [ @@ -85,9 +95,53 @@ class FormattedText extends _Base { ut aliquip ex ea commodo consequat.', ] ); + + $this->add_control( + 'image', + [ + 'label' => esc_html__( 'Choose Image', 'textdomain' ), + 'type' => Controls_Manager::MEDIA, + 'default' => [ + 'url' => \Elementor\Utils::get_placeholder_image_src(), + ], + ] + ); + + $this->add_control( + 'gallery_position', + [ + 'label' => esc_html__( 'Position', 'elementor' ), + 'type' => Controls_Manager::SELECT, + 'default' => 'gallery-right', + 'options' => [ + 'gallery-right' => 'right', + 'gallery-left' => 'left', + ], + ] + ); } protected function styleControls() { + $this->add_control( + 'text_color', + [ + 'label' => esc_html__( 'Abovetitle text Color', 'cube' ), + 'type' => Controls_Manager::COLOR, + 'selectors' => [ + '{{WRAPPER}} .highlight' => 'color: {{VALUE}}', + ], + ] + ); + $this->add_control( + 'color', + [ + 'label' => esc_html__( 'Abovetitle background color', 'cube' ), + 'type' => Controls_Manager::COLOR, + 'selectors' => [ + '{{WRAPPER}} .highlight-bar' => 'background-color: {{VALUE}}', + ], + ] + ); $this->add_control( 'text_size', [ @@ -132,11 +186,6 @@ class FormattedText extends _Base { */ protected function render() { - $title = $this->get_settings('title'); - $title_tag = $this->get_settings('title_tag'); - $subtitle = $this->get_settings('subtitle'); - $subtitle_tag = $this->get_settings('subtitle_tag'); - $body = $this->parse_text_editor($this->get_settings('body')); $size = $this->get_settings('text_size') ? $this->get_settings('text_size') : 'large'; $size_classes = [ @@ -144,22 +193,16 @@ class FormattedText extends _Base { 'large' => 'text-lg', ]; - // Inline Editing settings - $this->add_inline_editing_attributes('title', 'none'); - $this->add_inline_editing_attributes('subtitle', 'none'); - $this->add_inline_editing_attributes('body', 'none'); - // CSS Classes for elements $this->add_render_attribute('title', 'class', ["text-block-title font-bold text-xl $size_classes[$size]"]); $this->add_render_attribute('subtitle', 'class', ["text-block-subtitle font-bold text-md"]); $this->add_render_attribute('body', 'class', ['text-block-body']); + $settings = $this->get_controls_settings(); + $attributes = $this->get_render_attributes(); + // Rendered content - echo '
'; - if (!empty($title)) echo "<{$title_tag} {$this->get_render_attribute_string('title')}>$title"; - if (!empty($subtitle)) echo "<{$subtitle_tag} {$this->get_render_attribute_string('subtitle')}>$subtitle"; - if (!empty($body)) echo "
get_render_attribute_string('body')}>$body
"; - echo '
'; + echo view("widgets/text-image", compact("settings", "attributes")); } protected function backboneTemplate(){ ?> @@ -208,6 +251,6 @@ class FormattedText extends _Base { * @access protected */ protected function content_template() { - self::backboneTemplate(); + //self::backboneTemplate(); } } \ No newline at end of file diff --git a/wp-content/mu-plugins/cube/Widgets/StickyNav.php b/wp-content/mu-plugins/cube/Widgets/StickyNav.php index 8c85a53..6b694ee 100644 --- a/wp-content/mu-plugins/cube/Widgets/StickyNav.php +++ b/wp-content/mu-plugins/cube/Widgets/StickyNav.php @@ -35,6 +35,7 @@ class StickyNav extends CarouselHome } echo '
+

'.$item['title'].'

'.$item['text'].' diff --git a/wp-content/themes/sycomore-fondation/resources/styles/common/global.sass b/wp-content/themes/sycomore-fondation/resources/styles/common/global.sass index cd60573..de71853 100644 --- a/wp-content/themes/sycomore-fondation/resources/styles/common/global.sass +++ b/wp-content/themes/sycomore-fondation/resources/styles/common/global.sass @@ -70,8 +70,11 @@ p //display: grid !important body:not(.home) + .elementor-section:nth-child(1) + margin-bottom: 36px .elementor-section:nth-child(2) - margin-top: -84px + +screen-size(small-desktop) + margin-top: -112px h1,h2,h3,h4,h5,h6 &:not(.highlight) @@ -87,3 +90,7 @@ body,p,a .gallery-columns-2 display: flex align-items: center + +.elementor-widget-cube-highlight-title + +screen-size(small-desktop, 'max') + width: 100% !important diff --git a/wp-content/themes/sycomore-fondation/resources/styles/common/helpers.sass b/wp-content/themes/sycomore-fondation/resources/styles/common/helpers.sass index 8d0ef63..9e3cfa3 100644 --- a/wp-content/themes/sycomore-fondation/resources/styles/common/helpers.sass +++ b/wp-content/themes/sycomore-fondation/resources/styles/common/helpers.sass @@ -58,8 +58,9 @@ $textPositions: ('left','center','right') --space-2xs-xs: clamp(0.50rem, calc(0.42rem + 0.39vw), 0.75rem) --space-xs-s: clamp(0.75rem, calc(0.67rem + 0.39vw), 1.00rem) --space-s-m: clamp(1.00rem, calc(0.84rem + 0.78vw), 1.50rem) + --space-s-m-2: clamp(0.88rem, calc(0.71rem + 0.71vw), 1.31rem) --space-m-l: clamp(1.50rem, calc(1.32rem + 0.81vw), 2.00rem) - --space-l-xl: clamp(2.13rem, calc(1.11rem + 5.08vw), 5.38rem) + --space-l-xl: clamp(2.125rem, calc(1.11rem + 5.08vw), 5.38rem) --space-xl-2xl: clamp(3.00rem, calc(2.69rem + 1.56vw), 4.00rem) --space-2xl-3xl: clamp(4.00rem, calc(3.38rem + 3.13vw), 6.00rem) --space-3xl-4xl: clamp(6.00rem, calc(5.69rem + 1.56vw), 7.00rem) @@ -79,6 +80,7 @@ $textPositions: ('left','center','right') --space-20-44: clamp(1.25rem, calc(0.70rem + 2.44vw), 2.75rem) --space-36-126: clamp(2.25rem, calc(0.19rem + 9.15vw), 7.88rem) + --space-74-126: clamp(4.63rem, calc(3.44rem + 5.28vw), 7.88rem) --space-56-128: clamp(3.50rem, calc(1.85rem + 7.32vw), 8.00rem) --step--2: clamp(1.93rem, calc(1.58rem + 1.74vw), 3.04rem) diff --git a/wp-content/themes/sycomore-fondation/resources/styles/partials/header.scss b/wp-content/themes/sycomore-fondation/resources/styles/partials/header.scss index 2a388c6..ef6167a 100644 --- a/wp-content/themes/sycomore-fondation/resources/styles/partials/header.scss +++ b/wp-content/themes/sycomore-fondation/resources/styles/partials/header.scss @@ -3,6 +3,7 @@ header.banner { width: 100%; z-index: 99; transition: all .3s; + top: 0; img { width: 100%; transition: all .3s; diff --git a/wp-content/themes/sycomore-fondation/resources/styles/partials/home-carousel.sass b/wp-content/themes/sycomore-fondation/resources/styles/partials/home-carousel.sass index 9a6da85..8a98dd3 100644 --- a/wp-content/themes/sycomore-fondation/resources/styles/partials/home-carousel.sass +++ b/wp-content/themes/sycomore-fondation/resources/styles/partials/home-carousel.sass @@ -1,6 +1,7 @@ .home-carousel position: relative - height: 100vh //798px + height: 0 //87vh //798px + padding-bottom: 42.25% overflow: hidden .carousel &-slide diff --git a/wp-content/themes/sycomore-fondation/resources/styles/widgets/blockAssociation.sass b/wp-content/themes/sycomore-fondation/resources/styles/widgets/blockAssociation.sass index eb51270..9a0f4bc 100644 --- a/wp-content/themes/sycomore-fondation/resources/styles/widgets/blockAssociation.sass +++ b/wp-content/themes/sycomore-fondation/resources/styles/widgets/blockAssociation.sass @@ -40,6 +40,6 @@ li width: 100% +screen-size(tablet, 'max') - &:nth-child(n + 2) + &:nth-child(n + 11) display: none visibility: hidden diff --git a/wp-content/themes/sycomore-fondation/resources/styles/widgets/blockOrganisation.sass b/wp-content/themes/sycomore-fondation/resources/styles/widgets/blockOrganisation.sass index a7f8483..ed92608 100644 --- a/wp-content/themes/sycomore-fondation/resources/styles/widgets/blockOrganisation.sass +++ b/wp-content/themes/sycomore-fondation/resources/styles/widgets/blockOrganisation.sass @@ -1,12 +1,17 @@ .elementor-widget-cube-organisation .elementor-widget-container display: grid - grid-template-columns: repeat(2, 1fr) - +gap + grid-gap: 38px 0 + +screen-size(small-desktop) + grid-template-columns: repeat(2, 1fr) + +gap .organisation-gallery display: grid - grid-template-columns: repeat(3, 1fr) - +special-gap(2.976) + grid-template-columns: repeat(2, 1fr) + grid-gap: 37px 18px + +screen-size(phone) + grid-template-columns: repeat(3, 1fr) + +special-gap(2.976) .img-container height: 0 border-radius: 3px @@ -33,5 +38,9 @@ .elementor-widget-cube-organisation .text-block - width: 66.666666% margin: 0 auto + display: flex + flex-direction: column + word-break: break-word + +screen-size(small-desktop) + width: 66.666666% diff --git a/wp-content/themes/sycomore-fondation/resources/styles/widgets/blockText.sass b/wp-content/themes/sycomore-fondation/resources/styles/widgets/blockText.sass index 724a94b..002db7c 100644 --- a/wp-content/themes/sycomore-fondation/resources/styles/widgets/blockText.sass +++ b/wp-content/themes/sycomore-fondation/resources/styles/widgets/blockText.sass @@ -1,13 +1,56 @@ -.elementor-col-50 - .elementor-widget-cube-highlight-title, - .elementor-widget-cube-formatted-text, - .elementor-widget-cube-textwith-btn, - .elementor-widget-text-editor, - .elementor-widget-cube-textwith-btn - width: 83.33% - margin: 0 auto +.elementor-section + &.first //"first" class is added in section edit + .text-block + &-above-title + margin-bottom: var(--space-l-xl) .text-block + display: grid + +special-gap(0) + +screen-size(small-desktop) + grid-template-columns: repeat(12, 1fr) + //grid-template-rows: 1fr auto auto 1fr + align-items: center + height: fit-content &-title, &-subtitle margin-bottom: 21px + &.gallery-left + +screen-size(small-desktop) + .text-block + &-above-title + grid-area: 1 / 8 / 2 / 12 + &-image + grid-area: 1 / 1 / 6 / 7 + &-title + grid-area: 2 / 8 / 3 / 12 + &-subtitle + grid-area: 3 / 8 / 4 / 12 + &-body + grid-area: 4 / 8 / 5 / 12 + .text-block-above-title + margin-bottom: 38px + +screen-size(small-desktop) + margin-bottom: 43px + + &.gallery-right + +screen-size(small-desktop) + .text-block + &-above-title + grid-area: 1 / 2 / 2 / 6 + &-image + grid-area: 1 / 7 / 6 / 13 + &-title + grid-area: 2 / 2 / 3 / 6 + &-subtitle + grid-area: 3 / 2 / 4 / 6 + &-body + grid-area: 4 / 2 / 5 / 6 + + &-image + align-self: flex-start + +screen-size(small-desktop, 'max') + margin-bottom: 18px + + &-subtitle + font-size: 20px diff --git a/wp-content/themes/sycomore-fondation/resources/styles/widgets/blocktextbtn.sass b/wp-content/themes/sycomore-fondation/resources/styles/widgets/blocktextbtn.sass index 5e49027..86703a3 100644 --- a/wp-content/themes/sycomore-fondation/resources/styles/widgets/blocktextbtn.sass +++ b/wp-content/themes/sycomore-fondation/resources/styles/widgets/blocktextbtn.sass @@ -1,9 +1,11 @@ .text-blockbtn display: grid + +special-gap(0) +screen-size(small-desktop) grid-template-columns: repeat(12, 1fr) + grid-template-rows: 1fr auto auto 1fr align-items: center - +special-gap(0) + height: fit-content &.gallery-left +screen-size(small-desktop) .text-blockbtn @@ -35,6 +37,8 @@ &-above-title position: relative width: max-content + align-self: end + margin-bottom: var(--space-s-m-2) &:after content: "" position: absolute @@ -45,5 +49,10 @@ background-color: inherit &-title margin-bottom: 21px + &-gallery + +screen-size(small-desktop, 'max') + margin-bottom: 18px &-body margin-bottom: 24px + &-btn + align-self: start diff --git a/wp-content/themes/sycomore-fondation/resources/styles/widgets/stickyNav.sass b/wp-content/themes/sycomore-fondation/resources/styles/widgets/stickyNav.sass index e4107d0..9fda70c 100644 --- a/wp-content/themes/sycomore-fondation/resources/styles/widgets/stickyNav.sass +++ b/wp-content/themes/sycomore-fondation/resources/styles/widgets/stickyNav.sass @@ -1,18 +1,27 @@ .sticky-nav display: grid - grid-template-columns: repeat(2, 1fr) + +screen-size(small-desktop) + grid-template-columns: repeat(2, 1fr) .leftside - width: 66.66% + width: 100% margin: 0 auto + +screen-size(small-desktop) + width: 66.66% .text - margin-bottom: var(--space-56-128) + margin-bottom: clamp(3.50rem, calc(-2.54rem + 26.83vw), 20.00rem) * transition: all .3s &:not(.active) - * - color: #DDDDDD + +screen-size(small-desktop) + * + color: #DDDDDD h3 margin-bottom: var(--space-m-l) + img + display: block + margin-bottom: 18px + +screen-size(small-desktop) + display: none .rightside position: sticky @@ -20,6 +29,10 @@ height: 0 padding-bottom: 107.3% margin-top: calc(-32px - var(--space-l-2xl)) + display: none + +screen-size(small-desktop) + margin-left: 10px + display: block img position: absolute top: 0 diff --git a/wp-content/themes/sycomore-fondation/resources/views/widgets/text-image.blade.php b/wp-content/themes/sycomore-fondation/resources/views/widgets/text-image.blade.php new file mode 100644 index 0000000..3aaa56f --- /dev/null +++ b/wp-content/themes/sycomore-fondation/resources/views/widgets/text-image.blade.php @@ -0,0 +1,25 @@ +

+

+ {{ $settings['above_title'] }} + +

+ +
+ +
+ + @if($settings['title']) + <{{$settings['title_tag']}} class="{{implode(' ',$attributes['title']['class'])}}"> + {!! $settings['title'] !!} + + @endif + + @if($settings['subtitle']) + <{{$settings['subtitle_tag']}} class={{implode(' ',$attributes['subtitle']['class'])}}> + {!! $settings['subtitle'] !!} + + @endif + +
{!! $settings['body'] !!}
+ +
-- 2.39.5