flip-flop partie cards

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

@@ -43,8 +43,9 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
     function init () {
       console.log('MathalloTheme init()')
       initBurgerMenu();
+      initPartieFrontBackCardSwitch();
       initBgAnime()
-      initVues()
+      // initVues()
     }
 
     function initBurgerMenu() {
@@ -56,6 +57,23 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
       })
     }
 
+    function initPartieFrontBackCardSwitch() {
+      let principes_pratique = document.getElementById('partie-principes-pratique');
+      let cards = principes_pratique.getElementsByClassName('field-card');
+      console.log('cards', cards);
+      for (const card of cards) {
+        card.addEventListener('mousemove', function (e) {
+          console.log(this, e);
+          for (const child of this.parentElement.children){
+            child.classList.add('back-card')
+            child.classList.remove('front-card');
+          }
+          this.classList.add('front-card')
+          this.classList.remove('back-card')
+        })
+      }
+    }
+
     function initBgAnime(){
       // gsap.to('body', {
       //   scrollTrigger: 'main[role="main"]', // start animation when ".box" enters the viewport
@@ -70,19 +88,19 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
       // });
     }
 
-    function initVues(){
-      console.log('initVues');
+    // function initVues(){
+    //   console.log('initVues');
       
-      // initVueContent();
+    //   // initVueContent();
 
 
-    }
+    // }
 
-    function initVueContent(){
-      createApp(Content).mount('main[role="main"]');
+    // function initVueContent(){
+    //   createApp(Content).mount('main[role="main"]');
 
-      // processEtapeLinks();
-    }
+    //   // processEtapeLinks();
+    // }
 
 
     // function onClickEtapeLink(e){

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

@@ -294,12 +294,15 @@ main[role="main"]{
     article.node-type-chapitre{
       
     }
+
+    // Page Chapitres
     section.parties{
       display: flex;
       gap: 2em;
       padding:1em;
     }
 
+    // Page Partie
     section.field-card{
       @include card;
 
@@ -351,6 +354,41 @@ main[role="main"]{
         }
       }
     }
+    div#partie-principes-pratique{
+      position: relative;
+      display: flex;
+      gap: 0px;
+      section.field-card{
+        @mixin front-card{
+          z-index: 2;
+          background-color: #fff;
+        }
+        @mixin back-card{
+          z-index: 1;
+          background-color: #eee;
+        }
+
+        &.field-principes-reflexion{
+          @include front-card();
+        }
+        &.field-en-pratique{
+          margin-left: -50%;
+          margin-top: 7em;
+          @include back-card();
+        }
+        &.field-principes-reflexion,
+        &.field-en-pratique{
+          transition: background-color 0.25s ease-out;
+          &.back-card{
+            @include back-card();
+          }
+          &.front-card{
+            @include front-card();
+          }
+        }
+
+      }
+    }
 
     // HOME
     div.views-home-chapitres{

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

@@ -80,12 +80,17 @@
   </div>
 
 </article>
-{% if content.field_principes_reflexions %}
-  <section class="field-card field-principes-reflexion">{{ content.field_principes_reflexions }}</section>
-{% endif %}
 
-{% if content.field_en_pratique %}
-  <section class="field-card field-en-pratique">{{ content.field_en_pratique }}</section>
+{% if content.field_principes_reflexions or content.field_en_pratique %}
+  <div id="partie-principes-pratique">
+    {% if content.field_principes_reflexions %}
+      <section class="field-card field-principes-reflexion">{{ content.field_principes_reflexions }}</section>
+    {% endif %}
+
+    {% if content.field_en_pratique %}
+      <section class="field-card field-en-pratique">{{ content.field_en_pratique }}</section>
+    {% endif %}
+  </div>
 {% endif %}
 
 {% if content.field_ressources %}