feat(directions): all details allways scrollable

IGNF · Dec 9, 2024 · 9fe1567 · 9fe1567
1 parent 062dd91
commit 9fe1567
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/src/css/directions-results.css b/src/css/directions-results.css
@@ -120,7 +120,7 @@
   display: none;
   position: relative;
   flex-direction: column;
-  max-height: calc(100vh - 180px);
+  max-height: calc(100vh - 155px - var(--safe-area-inset-top));
   overflow-y: scroll;
   border-top: 1px solid var(--grey-2);
   font-family: "Open Sans";
@@ -130,6 +130,10 @@
   display: flex;
 }
 
+#tabContainer:has(#directionsShowDetail:checked) {
+  height: 100vh;
+}
+
 .divDirectionsDetailsItem {
   display: flex;
   flex-direction: row;

diff --git a/src/js/event-listeners.js b/src/js/event-listeners.js
@@ -241,6 +241,7 @@ function addListeners() {
   };
 
   window.addEventListener("scroll", () => {
+    /* Gestion de la disparition des boutons au scroll */
     DOM.$bottomButtons.classList.remove("opacity0");
     DOM.$routeDrawEdit.classList.remove("opacity0");
     DOM.$filterPoiBtn.classList.remove("opacity0");
@@ -256,6 +257,8 @@ function addListeners() {
         DOM.$fullScreenBtn.classList.add("opacity0");
       }
     }
+
+    /* Gestion de l'état ScrolledMax du panneau */
     const insetTop = Math.round(parseFloat(getComputedStyle(document.body).getPropertyValue("--safe-area-inset-top").slice(0, -2)));
     const insetBottom = parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-inset-bottom").slice(0, -2));
     const navHeight = parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--nav-bar-height").slice(0, -2));
@@ -267,6 +270,14 @@ function addListeners() {
       DOM.$tabContainer.classList.remove("scrolledMax");
       document.getElementById("tabHandle").removeEventListener("click", handleScrollDown);
     }
+
+    /* Gestion de la hauteur des détails du résultat du calcul d'iti */
+    const directionsListDetails = document.getElementById("directionsListDetails");
+    if (directionsListDetails) {
+      const resultHeight = window.scrollY - 72;
+      directionsListDetails.style.flexBasis = `${resultHeight}px`;
+    }
+
   });
 
   // Partage par liens