bulle conceptuelle

config/sync/core.entity_form_display.node.partie.default.yml

@@ -22,8 +22,8 @@ third_party_settings:
       children:
         - group_corps
         - group_principes_reflexion_en_pra
-        - group_ressources
         - group_pour_aller_plus_loin
+        - group_ressources
       label: Tabs
       region: content
       parent_name: ''
@@ -95,7 +95,7 @@ third_party_settings:
       label: Ressources
       region: hidden
       parent_name: group_tabs
-      weight: 22
+      weight: 23
       format_type: tab
       format_settings:
         classes: ''
@@ -108,10 +108,10 @@ third_party_settings:
     group_pour_aller_plus_loin:
       children:
         - field_pour_aller_plus_loin
-      label: 'Pour aller plus loin'
+      label: 'Bulle conceptuelle'
       region: hidden
       parent_name: group_tabs
-      weight: 23
+      weight: 22
       format_type: tab
       format_settings:
         classes: ''

config/sync/core.entity_view_display.paragraph.complement.default.yml

@@ -23,14 +23,14 @@ content:
     weight: 1
     region: content
   field_liens:
-    type: link
-    label: visually_hidden
+    type: link_separate
+    label: above
     settings:
       trim_length: 80
       url_only: false
       url_plain: false
-      rel: nofollow
-      target: '0'
+      rel: '0'
+      target: _blank
     third_party_settings: {  }
     weight: 2
     region: content

config/sync/field.field.node.partie.field_pour_aller_plus_loin.yml

@@ -12,7 +12,7 @@ id: node.partie.field_pour_aller_plus_loin
 field_name: field_pour_aller_plus_loin
 entity_type: node
 bundle: partie
-label: 'Pour aller plus loin'
+label: 'Bulle conceptuelle'
 description: ''
 required: false
 translatable: false

config/sync/field.field.paragraph.complement.field_liens.yml

@@ -11,7 +11,7 @@ id: paragraph.complement.field_liens
 field_name: field_liens
 entity_type: paragraph
 bundle: complement
-label: Liens
+label: 'Pour aller plus loin'
 description: ''
 required: false
 translatable: false

web_main/themes/custom/mathallo/assets/js/main.js

@@ -319,10 +319,10 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
 
         let randoffset = 20 + Math.random() * 20;
         // left right
-        if (card.classList.contains('field-principes-reflexion')) {
+        if (card.classList.contains('field-principes-reflexion') || card.classList.contains('field-ressources')) {
           // left
           forme.style.left = `${card.offsetLeft - wh + randoffset}px`;
-        } else if(card.classList.contains('field-en-pratique')) {
+        } else if(card.classList.contains('field-en-pratique') || card.classList.contains('field-plus-loin')) {
           // right
           forme.style.left = `${card.offsetLeft + card.clientWidth - randoffset}px`;
         } else {

web_main/themes/custom/mathallo/assets/scss/main.scss

@@ -526,8 +526,8 @@ main[role="main"]{
 
 
 
-      &.field-ressources,
-      &.field-plus-loin{
+      &.field-plus-loin,
+      &.field-ressources{
         .field-label{
           @include titre_h3;
           padding-bottom: 1em;
@@ -540,8 +540,33 @@ main[role="main"]{
         }
       }
 
+      &.field-plus-loin{
+        // AKA Bulle conceptuelle
+        margin-left: 20em;
+        div.paragraph--type--complement{
+          .field_titre{
+            @include titre_h3;
+            color: $bleu_site;
+          }
+        }
+        div.field_liens{
+          margin-top: 2em;
+          div.field-label{
+            @include titre_h4;
+            padding: 0;
+          }
+          label{
+            display:block;
+            margin-top: 1em;
+          }
+          a{
+            font-size: 0.756em;
+          }
+        }
+      }
+
       &.field-ressources{
-        // margin-left: 20em;
+        margin-right: 20em;
         div.paragraph--type--ressource{
           .field_titre{
             background-color: $bleu_site;
@@ -572,15 +597,6 @@ main[role="main"]{
         }
       }
 
-      &.field-plus-loin{
-        // margin-right: 20em;
-        div.paragraph--type--complement{
-          .field_titre{
-            @include titre_h4;
-            color: $bleu_site;
-          }
-        }
-      }
 
     }
   } // div.layout-content
@@ -605,9 +621,9 @@ main[role="main"]{
       @mixin back-card{
         z-index: 1;
         background-color: rgba(247,247,247,1);
-        &>*>*{
-          // opacity: 0.6;
-        }
+        // &>*>*{
+        //   opacity: 0.6;
+        // }
         .field-label{
           color: inherit;
           font-weight: 600;

web_main/themes/custom/mathallo/templates/link-formatter-link-separate.html.twig

@@ -0,0 +1,20 @@
+{#
+/**
+ * @file
+ * Default theme implementation of a link with separate title and URL elements.
+ *
+ * Available variables:
+ * - link: The link that has already been formatted by l().
+ * - title: (optional) A descriptive or alternate title for the link, which may
+ *   be different than the actual link text.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_link_formatter_link_separate()
+ *
+ * @ingroup themeable
+ */
+#}
+{% apply spaceless %}
+  <label>{{ title }}</label>
+  {{ link }}
+{% endapply %}

web_main/themes/custom/mathallo/templates/node--partie--full.html.twig

@@ -94,10 +94,11 @@
   </div>
 {% endif %}
 
+{% if content.field_pour_aller_plus_loin %}
+  <section class="field-card field-plus-loin">{{ content.field_pour_aller_plus_loin }}</section>
+{% endif %}
+
 {% if content.field_ressources %}
   <section class="field-card field-ressources">{{ content.field_ressources }}</section>
 {% endif %}
 
-{% if content.field_pour_aller_plus_loin %}
-  <section class="field-card field-plus-loin">{{ content.field_pour_aller_plus_loin }}</section>
-{% endif %}