feat(landscape): main menu scrollable. fix(isochrone): display in lan…

…dscape mode
IGNF · Feb 12, 2024 · cdcf097 · cdcf097
1 parent 74a12bd
commit cdcf097
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 67 deletions.
diff --git a/src/css/map-buttons.css b/src/css/map-buttons.css
@@ -344,10 +344,11 @@
   }
 
   #bottomButtons {
-    position: absolute;
+    position: fixed;
     bottom: calc(42px + var(--safe-area-inset-bottom));
     width: calc(100vw - 75px - var(--safe-area-inset-left) - var(--safe-area-inset-right));
     right: var(--safe-area-inset-right);
+    z-index: 2500;
   }
 
   #interactivityBtn {
@@ -356,24 +357,18 @@
 
   #filterPoiBtn {
     top: calc(10px + var(--safe-area-inset-top));
+    position: fixed;
   }
 
   #routeDrawEdit {
-    flex-direction: column;
-    bottom: calc(93px + var(--safe-area-inset-bottom));
-    width: unset;
-    height: calc(100vh - 84px - 30px - var(--safe-area-inset-bottom) - var(--safe-area-inset-top));
+    position: fixed;
+    flex-direction: row;
+    bottom: calc(15px + var(--safe-area-inset-bottom));
+    width: calc(100vw - calc(min(50vw, calc(100vh + var(--safe-area-inset-left) + 42px))) - 30px);
+    height: 82px;
     left: calc(min(50vw, calc(100vh + var(--safe-area-inset-left) + 42px)) + 15px);
     transform: unset;
   }
-  @media (min-height: 615px) {
-    #routeDrawEdit {
-      flex-direction: row;
-      bottom: calc(15px + var(--safe-area-inset-bottom));
-      width: calc(100vw - calc(min(50vw, calc(100vh + var(--safe-area-inset-left) + 42px))) - 30px);
-      height: 82px;
-    }
-  }
 
   #routeDrawEdit > .button {
     margin-bottom: 12px;
@@ -390,7 +385,7 @@
 
   #mapCenter {
     top: calc(50vh - 25px);
-    right: calc((100vw - 75px - var(--safe-area-inset-left))/2 - 25px);
+    right: calc((100vw - 25px));
   }
 
   #mapCenterMenu {

diff --git a/src/css/map.css b/src/css/map.css
@@ -57,7 +57,7 @@
 @media (min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
   #map {
     height: 100vh;
-    width: calc(100vw - 75px - var(--safe-area-inset-left));
+    width: 100vw;
     right: 0;
   }
 }
diff --git a/src/css/media-queries.css b/src/css/media-queries.css
@@ -2,15 +2,12 @@
 @media (min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
   #tabContainer {
     width: min(50vw, calc(100vh + var(--safe-area-inset-left) + 42px));
-    height: 100vh;
-    top: 100%;
     left: 0;
-    overflow-y: scroll;
-    border-top-right-radius: 0px;
     border-top-left-radius: 0px;
-    z-index: 300;
+    z-index: 2550;
     padding: 0 15px 15px calc(var(--safe-area-inset-left) + 42px);
     transition: top 0.3s;
+    display: none;
 }
 
   #informationsWindow,
@@ -23,8 +20,4 @@
   #routeDrawWindow {
     margin-top: 20px;
   }
-
-  body {
-    overflow-y: hidden;
-  }
 }
diff --git a/src/css/nav.css b/src/css/nav.css
@@ -192,9 +192,11 @@
     border-radius: 0;
     top: 100%;
     left: 75px;
+    display: none;
   }
 
   .navbar.hoverable:hover .subnav {
     transform: translate(0, -100%);
+    display: flex;
   }
 }
diff --git a/src/css/tabs.css b/src/css/tabs.css
@@ -26,33 +26,6 @@
   overflow-x: hidden;
 }
 
-#informationsWindow::after,
-#isochroneWindow::after,
-#directionsWindow::after,
-#positionWindow::after,
-#layerManagerWindow::after,
-#poiWindow::after,
-#routeDrawWindow::after,
-#directionsWindow::after {
-  content: "";
-  pointer-events: none;
-  position: sticky;
-  z-index: 6;
-  bottom: 0;
-  width: 100%;
-  height: 25px;
-  background: linear-gradient(#fff0, #f4f6f8);
-  opacity: 1;
-  visibility: visible;
-  display: block;
-}
-
-#routeDrawWindow::after,
-#directionsResultsWindow::after {
-  background: linear-gradient(#fff0, white);
-}
-
-
 .windowClose {
   width: 34px;
   height: 34px;

diff --git a/src/js/event-listeners.js b/src/js/event-listeners.js
@@ -127,9 +127,7 @@ function addListeners() {
       } else {
         DOM.$bottomButtons.style.left = "min(50vw, calc(100vh + var(--safe-area-inset-left) + 42px))";
         DOM.$bottomButtons.style.width = "auto";
-        if (window.matchMedia("(min-height: 615px)").matches) {
-          DOM.$bottomButtons.style.bottom = "calc(142px + var(--safe-area-inset-bottom))";
-        }
+        DOM.$bottomButtons.style.bottom = "calc(142px + var(--safe-area-inset-bottom))";
       }
     }
     if (["selectOnMapDirections", "selectOnMapIsochrone", "selectOnMapLandmark", "compare"].includes(Globals.backButtonState)) {

diff --git a/src/js/globals.js b/src/js/globals.js
@@ -85,7 +85,6 @@ let signalement = null;
 let maxScroll = (document.scrollingElement.scrollHeight - document.scrollingElement.clientHeight);
 let anchors = [0, maxScroll / 2.5, maxScroll];
 let currentScrollIndex = 0;
-let currentScroll = window.scrollY;
 
 export default {
   map,
@@ -104,7 +103,6 @@ export default {
   currentScrollIndex,
   maxScroll,
   anchors,
-  currentScroll,
   directions,
   isochrone,
   position,

diff --git a/src/js/isochrone/isochrone.js b/src/js/isochrone/isochrone.js
@@ -299,8 +299,17 @@ class Isochrone {
     // bbox
     var bbox = getBoundingBox(this.polygon.geometry.coordinates[0]);
     // deplacement de la carte sur l'emprise des résultats
+    var padding;
+    // gestion du mode paysage / écran large
+    if (window.matchMedia("(min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches) {
+      var paddingLeft = parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-inset-left").slice(0, -2)) +
+                  Math.min(window.innerHeight, window.innerWidth/2) + 42;
+      padding = {top: 20, right: 20, bottom: 20, left: paddingLeft};
+    } else {
+      padding = {top: 80, right: 20, bottom: 120, left: 20};
+    }
     this.map.fitBounds(bbox, {
-      padding: 20
+      padding: padding
     });
 
     if (this.poi) {
@@ -319,6 +328,9 @@ class Isochrone {
       .addTo(this.map);
 
     Globals.currentScrollIndex = 0;
+    if (window.matchMedia("(min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches) {
+      Globals.currentScrollIndex = 1;
+    }
     Globals.menu.updateScrollAnchors();
     this.__unsetComputeButtonLoading();
     this.interactive(false);

diff --git a/src/js/nav.js b/src/js/nav.js
@@ -165,7 +165,7 @@ class MenuNavigation {
       DOM.$compareLayers2Window.classList.remove("d-none");
       DOM.$sideBySideRightLayer.classList.add("d-none");
       if (window.matchMedia("(min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches) {
-        DOM.$sideBySideLeftLayer.style.left = "min(50vw, calc(100vh + var(--safe-area-inset-left) - 20px))";
+        DOM.$sideBySideLeftLayer.style.left = "min(50vw, calc(100vh + var(--safe-area-inset-left) - 50px))";
       }
       Globals.currentScrollIndex = 2;
       break;
@@ -207,9 +207,7 @@ class MenuNavigation {
       } else {
         DOM.$bottomButtons.style.left = "min(50vw, calc(100vh + var(--safe-area-inset-left) + 42px))";
         DOM.$bottomButtons.style.width = "auto";
-        if (window.matchMedia("(min-height: 615px)").matches) {
-          DOM.$bottomButtons.style.bottom = "calc(142px + var(--safe-area-inset-bottom))";
-        }
+        DOM.$bottomButtons.style.bottom = "calc(142px + var(--safe-area-inset-bottom))";
       }
       DOM.$tabContainer.style.backgroundColor = "white";
       DOM.$sideBySideBtn.classList.add("d-none");
@@ -420,9 +418,7 @@ class MenuNavigation {
       } else {
         DOM.$bottomButtons.style.left = "min(50vw, calc(100vh + var(--safe-area-inset-left) + 42px))";
         DOM.$bottomButtons.style.width = "auto";
-        if (window.matchMedia("(min-height: 615px)").matches) {
-          DOM.$bottomButtons.style.bottom = "calc(142px + var(--safe-area-inset-bottom))";
-        }
+        DOM.$bottomButtons.style.bottom = "calc(142px + var(--safe-area-inset-bottom))";
       }
       isSpecific = true;
       isFinished = true;
@@ -654,6 +650,9 @@ class MenuNavigation {
   updateScrollAnchors() {
     Globals.maxScroll = (document.scrollingElement.scrollHeight - document.scrollingElement.clientHeight);
     Globals.anchors = [0, Globals.maxScroll / 2.5, Globals.maxScroll];
+    if (window.matchMedia("(min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches) {
+      Globals.anchors = [0, document.scrollingElement.clientHeight - 72, Globals.maxScroll];
+    }
     this.#scrollTo(Globals.anchors[Globals.currentScrollIndex]);
   }
 
@@ -666,14 +665,13 @@ class MenuNavigation {
   /** ... */
   #scrollTo(value) {
     if (Globals.backButtonState !== "compare") {
-      DOM.$tabContainer.style.removeProperty("top");
+      DOM.$tabContainer.style.removeProperty("display");
     }
     if (window.matchMedia("(min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches) {
       if (Globals.currentScrollIndex == 0) {
         return;
       }
-      DOM.$tabContainer.style.top = 0;
-      return;
+      DOM.$tabContainer.style.display = "flex";
     }
     window.scroll({
       top: value,