]> _ Git - sycomore-fondation.git/commitdiff
wip #5812 @6:30
authorsoufiane <soufiane@cubedesigners.com>
Tue, 16 May 2023 15:28:03 +0000 (17:28 +0200)
committersoufiane <soufiane@cubedesigners.com>
Tue, 16 May 2023 15:28:03 +0000 (17:28 +0200)
14 files changed:
wp-content/mu-plugins/cube/Init.php
wp-content/mu-plugins/cube/Widgets/AssociationSectionImage.php
wp-content/mu-plugins/cube/Widgets/FormattedText.php
wp-content/mu-plugins/cube/Widgets/StickyNav.php
wp-content/themes/sycomore-fondation/resources/styles/common/global.sass
wp-content/themes/sycomore-fondation/resources/styles/common/helpers.sass
wp-content/themes/sycomore-fondation/resources/styles/partials/header.scss
wp-content/themes/sycomore-fondation/resources/styles/partials/home-carousel.sass
wp-content/themes/sycomore-fondation/resources/styles/widgets/blockAssociation.sass
wp-content/themes/sycomore-fondation/resources/styles/widgets/blockOrganisation.sass
wp-content/themes/sycomore-fondation/resources/styles/widgets/blockText.sass
wp-content/themes/sycomore-fondation/resources/styles/widgets/blocktextbtn.sass
wp-content/themes/sycomore-fondation/resources/styles/widgets/stickyNav.sass
wp-content/themes/sycomore-fondation/resources/views/widgets/text-image.blade.php [new file with mode: 0644]

index 5b7a17700d278fe5b5228c89dcdb69b3f63b1614..cfac9e3959b56852271ad785b2061d9c0dc2a5d4 100644 (file)
@@ -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)'
         ];
     }
index 7d7cacda60d152caaf02e850a868eb672ff7e305..7825d391348799ccec0303c78e1585895133f8f0 100644 (file)
@@ -208,7 +208,9 @@ class AssociationSectionImage extends _Base {
             ?>
             </{$html_tag[$marker_type]}>
         <?php
-        echo "<button class='btn display-all-lists'>Tout afficher <span class='counter'></span></button>";
+        if(sizeof($items) > 11) {
+            echo "<button class='btn display-all-lists'>Tout afficher <span class='counter'></span></button>";
+        }
         echo "</div>";
     }
 }
\ No newline at end of file
index f17b4f64543bf0f4bfe489908ffc62566d701264..6ce7fdaf8adc79426af802b2e9649c847c9c72d2 100644 (file)
@@ -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 '<div class="text-block">';
-        if (!empty($title)) echo "<{$title_tag} {$this->get_render_attribute_string('title')}>$title</{$title_tag}>";
-        if (!empty($subtitle)) echo "<{$subtitle_tag} {$this->get_render_attribute_string('subtitle')}>$subtitle</{$subtitle_tag}>";
-        if (!empty($body)) echo "<div {$this->get_render_attribute_string('body')}>$body</div>";
-        echo '</div>';
+        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
index 8c85a5397a553bd64125c8f92e3b4e014e58089c..6b694eef9ef4abc9054cb482771c41717941b312 100644 (file)
@@ -35,6 +35,7 @@ class StickyNav extends CarouselHome
                     }
                     echo '
                     <div class="text '.$active.'">
+                        <img src="'.$item['background_image']['url'].'" />
                         <h3 class="text-2xl">'.$item['title'].'</h3>
                         <p>
                             '.$item['text'].'
index cd60573b9b1c4ab5d0292e3828b154a7a80b8e7e..de71853354e9b9f33fa93a1d79cbd032a39a2c81 100644 (file)
@@ -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
index 8d0ef639307f73bd94dc0a0663367af38e042967..9e3cfa3a0f1dff8bf2de1097660afc87b51e735a 100644 (file)
@@ -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)
index 2a388c64bd1c76db8d183a39b8b75915c9644b81..ef6167a518729cd5e02a546aa7245e2b772d3015 100644 (file)
@@ -3,6 +3,7 @@ header.banner {
   width: 100%;
   z-index: 99;
   transition: all .3s;
+  top: 0;
   img {
     width: 100%;
     transition: all .3s;
index 9a6da856d446ec3231699d494f8d69cb0c9f1731..8a98dd3659e0ae007b3599207eb71568023e52d8 100644 (file)
@@ -1,6 +1,7 @@
 .home-carousel
   position: relative
-  height: 100vh //798px
+  height: 0 //87vh //798px
+  padding-bottom: 42.25%
   overflow: hidden
   .carousel
     &-slide
index eb51270eecc0c0b08368827f52b6784ef6aef6d6..9a0f4bcb40900605f7814a4d07cfbb5115adcc04 100644 (file)
@@ -40,6 +40,6 @@
     li
       width: 100%
       +screen-size(tablet, 'max')
-        &:nth-child(n + 2)
+        &:nth-child(n + 11)
           display: none
           visibility: hidden
index a7f84836ad0a45b7c731ec57f60951df23014cfe..ed92608646ed3df09bdf60a8201b2af8c3aee7db 100644 (file)
@@ -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%
index 724a94be198959114b56edde2345217a74707be5..002db7cb1a0e831a38a25482a30a1db7bd613960 100644 (file)
@@ -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
index 5e49027a94608556aa0a03eb1ba66bda5380fc3e..86703a31829a5145b4b51ab000dff77d73f6216a 100644 (file)
@@ -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
       background-color: inherit
   &-title
     margin-bottom: 21px
+  &-gallery
+    +screen-size(small-desktop, 'max')
+      margin-bottom: 18px
   &-body
     margin-bottom: 24px
+  &-btn
+    align-self: start
index e4107d09c4e04327192c49eec2f6c520dc3a74e4..9fda70c214d76f27ebe52861f00d713f0f7fa2e2 100644 (file)
@@ -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
     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 (file)
index 0000000..3aaa56f
--- /dev/null
@@ -0,0 +1,25 @@
+<div class="text-block {{ $settings['gallery_position'] }}">
+  <p class="text-block-above-title highlight text-lg relative font-bold">
+    <span class='relative z-1'>{{ $settings['above_title'] }}</span>
+    <span class='highlight-bar'></span>
+  </p>
+
+  <div class="text-block-image">
+      <img class="" src="{{ $settings['image']['url'] }}" />
+  </div>
+
+  @if($settings['title'])
+    <{{$settings['title_tag']}} class="{{implode(' ',$attributes['title']['class'])}}">
+      {!! $settings['title'] !!}
+    </{{$settings['title_tag']}}>
+  @endif
+
+  @if($settings['subtitle'])
+    <{{$settings['subtitle_tag']}} class={{implode(' ',$attributes['subtitle']['class'])}}>
+      {!! $settings['subtitle'] !!}
+    </{{$settings['subtitle_tag']}}>
+  @endif
+
+  <div class="{{implode(' ',$attributes['body']['class'])}}">{!! $settings['body'] !!}</div>
+
+</div>