feat(tabs): header always visible (#102)

IGNF · Jul 23, 2024 · 7bab4bf · 7bab4bf
1 parent ee2ca2e
commit 7bab4bf
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 2 deletions.
diff --git a/src/css/layer-manager.css b/src/css/layer-manager.css
@@ -38,6 +38,13 @@
   border-bottom: 2px solid var(--grey-2);
   font-family: "Fira Sans SemiBold";
   font-size: 15px;
+  position: sticky;
+  top: calc(39px + var(--safe-area-inset-top));
+}
+
+.scrolledMax .layer-tabs-label {
+  background-color: var(--false-white);
+  z-index: 3000;
 }
 
 .layer-tabs-input:checked + .layer-tabs-label {

diff --git a/src/css/my-account.css b/src/css/my-account.css
@@ -122,7 +122,7 @@
 #myaccount-routes {
   flex-grow: 1;
   height: calc(100% - 37px);
-  overflow-y: visible;
+  overflow-y: scroll;
 }
 
 #myaccountRouteList {

diff --git a/src/css/tabs.css b/src/css/tabs.css
@@ -69,6 +69,25 @@
 #tabHeader {
   width: 100%;
   height: 40px;
+  position: sticky;
+  top: var(--safe-area-inset-top);
+  background-color: inherit;
+}
+
+.scrolledMax > #tabHeader {
+  z-index: 3000;
+}
+
+.scrolledMax::before {
+  content: "";
+  display: block;
+  padding: var(--safe-area-inset-top);
+  background-color: inherit;
+  width: inherit;
+  z-index: 3000;
+  position: fixed;
+  top: 0;
+  left: 0;
 }
 
 #tabHandle {
@@ -81,6 +100,10 @@
   flex-shrink: 0;
 }
 
+.scrolledMax > #tabHeader > #tabHandle {
+  background-image: url(../html/img/navheaderarrow.svg);
+}
+
 #sheetClose,
 #tabClose {
   width: 35px;
@@ -89,7 +112,7 @@
   background-image: url(./assets/close.svg);
   flex-shrink: 0;
   position: absolute;
-  right: 15px;
+  right: 0px;
   top: 5px;
 }
 

diff --git a/src/html/img/navheaderarrow.svg b/src/html/img/navheaderarrow.svg
diff --git a/src/js/event-listeners.js b/src/js/event-listeners.js
@@ -244,6 +244,11 @@ function addListeners() {
     });
   });
 
+  const handleScrollDown = () => {
+    Globals.currentScrollIndex = 1;
+    Globals.menu.updateScrollAnchors();
+  };
+
   window.addEventListener("scroll", () => {
     DOM.$bottomButtons.style.removeProperty("transform");
     DOM.$routeDrawEdit.style.removeProperty("transform");
@@ -254,6 +259,14 @@ function addListeners() {
       DOM.$routeDrawEdit.style.transform = "translateX(100vw)";
       DOM.$filterPoiBtn.style.transform = "translateY(-100vh)";
     }
+    const inset = Math.round(parseFloat(getComputedStyle(document.body).getPropertyValue("--safe-area-inset-top").slice(0, -2)));
+    if (window.scrollY >= window.innerHeight - 72 - inset) {
+      DOM.$tabContainer.classList.add("scrolledMax");
+      document.getElementById("tabHandle").addEventListener("click", handleScrollDown);
+    } else {
+      DOM.$tabContainer.classList.remove("scrolledMax");
+      document.getElementById("tabHandle").removeEventListener("click", handleScrollDown);
+    }
   });
 
   // Partage par liens