fix(css): compare left button not correctly placed

IGNF · Feb 15, 2024 · 2cc3692 · 2cc3692
1 parent a169518
commit 2cc3692
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
diff --git a/src/css/map-buttons.css b/src/css/map-buttons.css
@@ -379,10 +379,6 @@
     bottom: -40px;
   }
 
-  #sideBySideLeftLayer {
-    left: -60px;
-  }
-
   #mapCenter {
     top: calc(50vh - 25px);
     right: calc((100vw - 25px));

diff --git a/src/js/event-listeners.js b/src/js/event-listeners.js
@@ -136,7 +136,13 @@ function addListeners() {
     if (Globals.backButtonState === "compareLayers2") {
       DOM.$sideBySideLeftLayer.style.removeProperty("left");
       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 = "calc(50% + 15px)";
+      }
+    }
+    if (["compare", "compareLayers1", "compareLayers2"].includes(Globals.backButtonState)) {
+      DOM.$bottomButtons.style.removeProperty("width");
+      if (window.matchMedia("(min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches) {
+        DOM.$bottomButtons.style.width = "calc(100vw - var(--safe-area-inset-left) - var(--safe-area-inset-right))";
       }
     }
     Globals.menu.updateScrollAnchors();

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) - 50px))";
+        DOM.$sideBySideLeftLayer.style.left = "calc(50% + 15px)";
       }
       Globals.currentScrollIndex = 2;
       break;
@@ -181,6 +181,9 @@ class MenuNavigation {
       DOM.$sideBySideRightLayer.classList.remove("d-none");
       DOM.$tabContainer.style.top = "100vh";
       DOM.$bottomButtons.style.bottom = "calc(42px + var(--safe-area-inset-bottom))";
+      if (window.matchMedia("(min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches) {
+        DOM.$bottomButtons.style.width = "calc(100vw - var(--safe-area-inset-left) - var(--safe-area-inset-right))";
+      }
       DOM.$bottomButtons.querySelector(".maplibregl-control-container").classList.add("d-none");
       Globals.compare.show();
       Globals.interactivityIndicator.hardDisable();
@@ -403,6 +406,7 @@ class MenuNavigation {
       DOM.$sideBySideRightLayer.classList.add("d-none");
       DOM.$tabContainer.style.removeProperty("top");
       DOM.$bottomButtons.style.removeProperty("bottom");
+      DOM.$bottomButtons.style.removeProperty("width");
       DOM.$bottomButtons.querySelector(".maplibregl-control-container").classList.remove("d-none");
       Globals.compare.hide();
       Globals.interactivityIndicator.enable();