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

@@ -32,42 +32,9 @@ export const useLayoutStore = defineStore('layout', {
             animationToggle.classList.remove('hidden');
             setTimeout(() => {
                 listeEtape.classList.remove('retracted');
-                this.checkIfEtapeListeShouldScroll();
             }, 300);
             this.isEtapeListRetracted = false;
         },
-        checkIfEtapeListeShouldScroll() {
-          const listeEtape = document.querySelector('#etapes-liste');
-          const column = document.querySelector('.layout__region--third');
-          
-          const columnRect = column.getBoundingClientRect();
-          
-          const listeEtapeContentRect = document.querySelector('#etapes-liste .item-list').getBoundingClientRect();
-          const headerRect = document.querySelector('.layout-container > header').getBoundingClientRect();
-          const animationToggleRect = document.querySelector('.animation-toggle-container').getBoundingClientRect();
-
-          const isIntersecting = headerRect.bottom >= (columnRect.height - listeEtapeContentRect.height) / 2;    
-
-          if (isIntersecting) {
-            this.enableEtapeListeScroll(listeEtape, column, headerRect.height, animationToggleRect.top);
-          } else {
-            this.disableEtapeListeScroll(listeEtape, column);
-          }
-        },
-        enableEtapeListeScroll(listeEtape, column, headerHeight, animationToggleTop) {
-          listeEtape.classList.add('scrollable');
-          column.classList.add('liste-etapes-scrollable');
-
-          listeEtape.style.marginTop = `${headerHeight}px`;
-          listeEtape.style.maxHeight = `calc(100vh - (100vh - ${animationToggleTop}px) - ${headerHeight}px)`;          
-        },
-        disableEtapeListeScroll(listeEtape, column) {
-          listeEtape.classList.remove('scrollable');
-          column.classList.remove('liste-etapes-scrollable');
-
-          listeEtape.style.marginTop = 'unset';
-          listeEtape.style.maxHeight = 'unset';
-        },
         setUpHamburgerToggle(menuBurger, menuContainer) {
           const menuTitle = document.querySelector('#menu-title');
           const menuH2 = document.querySelector('#menu > h2');

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

@@ -32,11 +32,6 @@ export function handleReactiveness() {
     });
   })();
 
-  layoutStore.checkIfEtapeListeShouldScroll();
-
-  window.addEventListener('resize', () => {
-    layoutStore.checkIfEtapeListeShouldScroll();
-  });
 }
 
 export function setMenuToggle() {

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

@@ -53,7 +53,7 @@ body{
   .layout-container {
     > header {
       z-index: 2;
-      position: fixed;
+      position: relative;
       > div {
         padding: $body-margin-y $body-margin-x 0 $body-margin-x;
         display: grid;
@@ -567,9 +567,6 @@ body{
                 max-width: 25%;
                 // grid-column: 16 / span 1;
               }
-              &.liste-etapes-scrollable {
-                align-items: start;
-              }
               @media screen and (min-width: $desktop-min-width) {
                 background: linear-gradient(to right, transparent, #faf1eb);
                 grid-column: 11 / span 6;
@@ -593,20 +590,6 @@ body{
                 &.disapeared {
                   display: none;
                 }
-                &.scrollable {
-                  overflow-y: scroll;
-                  mask-image: linear-gradient(
-                    to bottom,
-                    transparent 0%,
-                    black 7%,
-                    black 85%,
-                    transparent 100%
-                  );
-                  ul {
-                    // padding-top: 0.5rem;
-                    padding-bottom: 1rem;
-                  }
-                }
                 ul {
                   list-style: none;
                   > li {
@@ -763,13 +746,6 @@ body{
                   transition: transform 0.3s ease-out;
                 }
               }
-              .transparent-gradient {
-                position:absolute;
-                z-index:2;
-                right:0; bottom:0; left:0;
-                height:200px;
-                background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
-              }
             }
             > #content-modale {
               padding-bottom: 20vh;
@@ -1271,10 +1247,10 @@ body{
               }
             }
             > #animation-toggle {
-              transition: opacity 0.3s ease-out;
               @media screen and (min-width: $desktop-min-width) {
                 z-index: 5;
               }
+              transition: opacity 0.3s ease-out;
               &.hidden {
                 opacity: 0;
               }