fix(btns): display issues for layerManager and compare

Author: azarz

src/css/map-buttons.css

@@ -48,6 +48,10 @@
   top: calc(76px + var(--safe-area-inset-top));
 }
 
+#layerManagerBtn.highest {
+  top: calc(10px + var(--safe-area-inset-top));
+}
+
 #layerManagerBtn.active {
   background-image: url("assets/map-buttons/layers-w.svg");
   background-color: var(--dark-green);
@@ -417,6 +421,7 @@
   background-color: unset;
   position: absolute;
   bottom: 66px;
+  transition: opacity 0.5s,
 }
 
 .maplibregl-ctrl-bottom-right > .maplibregl-ctrl:has(.maplibregl-ctrl-shrink) {

src/js/event-listeners.js

@@ -268,6 +268,7 @@ function addListeners() {
     DOM.$bottomButtons.classList.remove("opacity0");
     DOM.$routeDrawEdit.classList.remove("opacity0");
     DOM.$filterPoiBtn.classList.remove("opacity0");
+    DOM.$layerManagerBtn.classList.remove("opacity0");
     if (DOM.$fullScreenBtn) {
       DOM.$fullScreenBtn.classList.remove("opacity0");
     }
@@ -276,6 +277,7 @@ function addListeners() {
       DOM.$bottomButtons.classList.add("opacity0");
       DOM.$routeDrawEdit.classList.add("opacity0");
       DOM.$filterPoiBtn.classList.add("opacity0");
+      DOM.$layerManagerBtn.classList.add("opacity0");
       if (DOM.$fullScreenBtn) {
         DOM.$fullScreenBtn.classList.add("opacity0");
       }

src/js/nav.js

@@ -266,6 +266,7 @@ class MenuNavigation {
       DOM.$bottomButtons.classList.add("compare");
       DOM.$bottomButtons.classList.add("compareWidth");
       DOM.$bottomButtons.querySelector(".maplibregl-ctrl-bottom-left").classList.add("d-none");
+      DOM.$bottomButtons.querySelector(".maplibregl-ctrl-bottom-right").classList.add("d-none");
       Globals.compare.show();
       Globals.interactivityIndicator.hardDisable();
       Globals.currentScrollIndex = 0;
@@ -300,9 +301,9 @@ class MenuNavigation {
       Globals.routeDraw.deactivate();
       DOM.$search.classList.add("d-none");
       DOM.$filterPoiBtn.classList.add("higher");
+      DOM.$layerManagerBtn.classList.add("highest");
       DOM.$backTopLeftBtn.classList.remove("d-none");
       DOM.$filterPoiBtn.classList.add("d-none");
-      DOM.$fullScreenBtn.classList.add("d-none");
       Globals.currentScrollIndex = 2;
       break;
     case "layerManager":
@@ -341,7 +342,7 @@ class MenuNavigation {
       Globals.backButtonState = "isochrone-" + previousBackState;
       DOM.$search.classList.add("d-none");
       DOM.$filterPoiBtn.classList.add("d-none");
-      DOM.$fullScreenBtn.classList.add("highest");
+      DOM.$layerManagerBtn.classList.add("highest");
       DOM.$backTopLeftBtn.classList.remove("d-none");
       Globals.interactivityIndicator.hardDisable();
       Globals.currentScrollIndex = 1;
@@ -547,6 +548,7 @@ class MenuNavigation {
       DOM.$bottomButtons.classList.remove("compare");
       DOM.$bottomButtons.classList.add("compareWidth");
       DOM.$bottomButtons.querySelector(".maplibregl-ctrl-bottom-left").classList.remove("d-none");
+      DOM.$bottomButtons.querySelector(".maplibregl-ctrl-bottom-right").classList.remove("d-none");
       Globals.compare.hide();
       Globals.interactivityIndicator.enable();
       break;
@@ -581,10 +583,9 @@ class MenuNavigation {
     case "poi":
       DOM.$search.classList.remove("d-none");
       DOM.$filterPoiBtn.classList.remove("higher");
-      DOM.$layerManagerBtn.classList.remove("higher");
       DOM.$backTopLeftBtn.classList.add("d-none");
       DOM.$filterPoiBtn.classList.remove("d-none");
-      DOM.$fullScreenBtn.classList.remove("d-none");
+      DOM.$layerManagerBtn.classList.remove("highest");
       break;
     case "layerManager":
       DOM.$search.classList.remove("d-none");
@@ -608,7 +609,7 @@ class MenuNavigation {
       // FIXME mettre en place une méthode sur la classe Searchs
       DOM.$search.classList.remove("d-none");
       DOM.$filterPoiBtn.classList.remove("d-none");
-      DOM.$fullScreenBtn.classList.remove("highest");
+      DOM.$layerManagerBtn.classList.remove("highest");
       DOM.$backTopLeftBtn.classList.add("d-none");
       Globals.isochrone.clear();
       Globals.isochrone.clearForm();