bulle conceptuelle

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 %}