animation toggle in etape list on mobile, correction display etape list

web/themes/custom/caravane/assets/js/stores/content.js

@@ -58,8 +58,6 @@ export const useContentStore = defineStore('content', {
                             }
                         }
                       } else {
-                        console.log("partenaires");
-
                         // pour les pages partenaires
                         rawContent = await REST.get('/rest/partenaires/');
                         contentType = type;
@@ -228,7 +226,6 @@ export const useContentStore = defineStore('content', {
                     // est peut-être plus lisible que fetchFromRelationships
 
                   } else if (this.contentType === 'partenaires') {
-                    console.log(rawContent);
                     this.content.contentTitle = "Partenaires";
                     const partenairesArray = [];
                     for (let partenaire of rawContent.data) {
@@ -285,7 +282,9 @@ export const useContentStore = defineStore('content', {
                     }
                 }
             }
-
+            // TODO :
+            // get the ordered view from here
+            // /jsonapi/views/etapes/block_1?views-argument%5B0%5D=all&views-argument%5B1%5D=all
             const orderedEtapesList = document.querySelectorAll('#etapes-liste li');
             if (orderedEtapesList) {
                 for (let li of orderedEtapesList) {

web/themes/custom/caravane/assets/js/stores/layout.js

@@ -15,8 +15,9 @@ export const useLayoutStore = defineStore('layout', {
             })
             this.isEtapeListRetracted = this.isDesktop ? false : true;
         },
-        collapseEtapeListe(listeEtape) {
+        collapseEtapeListe(listeEtape, animationToggle) {
             listeEtape.classList.add('retracted');
+            animationToggle.classList.add('hidden');
             setTimeout(() => {
                 listeEtape.closest('.layout__region').classList.add('retracted');
                 listeEtape.nextElementSibling.classList.add('retracted');
@@ -24,10 +25,11 @@ export const useLayoutStore = defineStore('layout', {
             }, 300);
             this.isEtapeListRetracted = true;
         },
-        expandEtapeListe(listeEtape) {
+        expandEtapeListe(listeEtape, animationToggle) {
             listeEtape.closest('.layout__region').classList.remove('retracted');
             listeEtape.nextElementSibling.classList.remove('retracted');
             listeEtape.classList.remove('disapeared');
+            animationToggle.classList.remove('hidden');
             setTimeout(() => {
                 listeEtape.classList.remove('retracted');
             }, 300);
@@ -37,6 +39,8 @@ export const useLayoutStore = defineStore('layout', {
           const menuTitle = document.querySelector('#menu-title');
           const menuH2 = document.querySelector('#menu > h2');
 
+          menuContainer.style.display = 'none';
+
           menuBurger.addEventListener('click', (e) => {
             this.toggleHamburgerMenu(menuBurger, menuContainer, menuTitle, menuH2);
           });
@@ -61,20 +65,18 @@ export const useLayoutStore = defineStore('layout', {
         toggleHamburgerMenu(menuBurger, menuContainer, menuTitle, menuH2) {
           setTimeout(() => {
             if (!this.isHamburgerMenuOpen) menuContainer.style.display = 'block';
-            menuContainer.classList.toggle('open');
-            menuTitle.classList.toggle('open');
-            menuBurger.classList.toggle('open');
-            menuH2.classList.toggle('open');
-            // console.log('isHamburgerMenuOpen', this.isHamburgerMenuOpen);
-            console.log(this.isHamburgerMenuOpen);
-            if (this.isHamburgerMenuOpen) {
-              setTimeout(() => {
-                menuContainer.style.display = 'none';
-              }, 300);
-            }
-            console.log('TOGGLE', this.isHamburgerMenuOpen);
-            console.log('isHamburgerMenuOpen', this.isHamburgerMenuOpen);
-            this.isHamburgerMenuOpen = !this.isHamburgerMenuOpen;
+            setTimeout(() => {
+              menuContainer.classList.toggle('open');
+              menuTitle.classList.toggle('open');
+              menuBurger.classList.toggle('open');
+              menuH2.classList.toggle('open');
+              if (this.isHamburgerMenuOpen) {
+                setTimeout(() => {
+                  menuContainer.style.display = 'none';
+                }, 300);
+              }
+              this.isHamburgerMenuOpen = !this.isHamburgerMenuOpen;
+            }, 50);
           }, 50);
         }
     },

web/themes/custom/caravane/assets/js/utils/layout-setup.js

@@ -9,34 +9,36 @@ export function handleReactiveness() {
 
     const listeEtape = document.querySelector('#etapes-liste');
 
-    if (!layoutStore.isDesktop) layoutStore.collapseEtapeListe(listeEtape, layoutStore);
+    const animationToggle = document.querySelector('#animation-toggle');
+
+    if (!layoutStore.isDesktop) layoutStore.collapseEtapeListe(listeEtape, animationToggle);
 
     window.addEventListener('resize', () => {
       if (layoutStore.isDesktop && layoutStore.isEtapeListRetracted) {
-        layoutStore.expandEtapeListe(listeEtape, layoutStore);
+        layoutStore.expandEtapeListe(listeEtape, animationToggle);
       } else if (!layoutStore.isDesktop && !layoutStore.isEtapeListRetracted) {
-        layoutStore.collapseEtapeListe(listeEtape, layoutStore);
+        layoutStore.collapseEtapeListe(listeEtape, animationToggle);
       }
     });
 
-    listeToggleButton.addEventListener('click', () => {  
+    listeToggleButton.addEventListener('click', () => {
       if (!layoutStore.isDesktop) {
         if (!layoutStore.isEtapeListRetracted) {
-          layoutStore.collapseEtapeListe(listeEtape, layoutStore);
+          layoutStore.collapseEtapeListe(listeEtape, animationToggle);
         } else {
-          layoutStore.expandEtapeListe(listeEtape, layoutStore);
+          layoutStore.expandEtapeListe(listeEtape, animationToggle);
         }
-      }  
+      }
     });
   })();
- 
+
 }
 
 export function setMenuToggle() {
     const layoutStore = useLayoutStore();
     const menuBurger = document.querySelector('#hamburger');
     const menuContainer = document.querySelector('#block-caravane-mainnavigation > #menu > ul');
-    
+
     layoutStore.setUpHamburgerToggle(menuBurger, menuContainer);
 }
 
@@ -48,8 +50,8 @@ export function setHamburgerWhenLogged(drupalSettings) {
       const header = document.querySelector('.dialog-off-canvas-main-canvas');
       const headerTop = header.getBoundingClientRect().top;
 
-      menuTitle.style.top = `${headerTop}px`;        
+      menuTitle.style.top = `${headerTop}px`;
       menuBurger.style.top = `${headerTop}px`;
       menuContainer.style.paddingTop = `${headerTop}px`;
     }
-}
+}

web/themes/custom/caravane/assets/scss/main.scss

@@ -581,6 +581,9 @@ body{
                 opacity: 1;
                 display: block;
                 transition: all 0.3s ease-out;
+                @media screen and (min-width: $desktop-min-width) {
+                  max-width: 30vw;
+                }
                 &.retracted {
                   opacity: 0;
                 }
@@ -635,7 +638,7 @@ body{
                         font-family: 'Joost', sans-serif;
                         font-weight: lighter;
                         font-size: $m-font-size-mobile;
-                        align-self: end;
+                        align-self: center;
                         @media screen and (min-width: $desktop-min-width) {
                           font-size: $m-font-size-desktop;
                         }
@@ -1236,6 +1239,10 @@ body{
               @media screen and (min-width: $desktop-min-width) {
                 z-index: 5;
               }
+              transition: opacity 0.3s ease-out;
+              &.hidden {
+                opacity: 0;
+              }
               > div {
                 cursor: pointer;
                 position: fixed;
@@ -1244,11 +1251,10 @@ body{
                 z-index: 999;
                 display: flex;
                 align-items: center;
-                padding: 0.4rem 1.2rem;
+                padding: 0.1rem 1.2rem;
                 border-radius: 10rem;
                 background-color: white;
                 transition: background-color 0.3s ease-out;
-
                 > div {
                   margin-right: 1rem;
                   > p {

web/themes/custom/caravane/templates/views-view-field--block-1--etape-list.html.twig

@@ -20,12 +20,21 @@
  * @ingroup themeable
  */
 #}
-{% if output|length == 5 
+{% if output|length == 5
     and output|replace(
         {'0':'', '1':'', '2':'', '3':'', '4':'', '5':'', '6':'', '7':'', '8':'', '9':''}
-    ) == '' 
+    ) == ''
 %}
   <p>{{- output|slice(0, 2) -}}</p>
 {% else %}
-  <p>{{- output -}}</p>
+  {% set split_output = output|split('>') %}
+  <p>
+    {% if split_output|length == 7 %}
+      {{- output -}}
+    {% else %}
+      {{- split_output[0]|raw -}}>
+      {# non breaking hyphen #}
+      {{- split_output[1]|default('')|replace({'-': '‑'})|raw -}}>
+    {% endif %}
+  </p>
 {% endif %}