feat(accessibility): larger touch zones (#106)

IGNF · Jul 24, 2024 · a4803f5 · a4803f5
1 parent 6ca0e41
commit a4803f5
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 24 deletions.
diff --git a/src/css/map-buttons.css b/src/css/map-buttons.css
@@ -10,6 +10,7 @@
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
   z-index: 200;
   border: 1px solid white;
+  padding: 3px;
 }
 
 #backTopLeftBtn {
@@ -18,6 +19,7 @@
   left: calc(15px + var(--safe-area-inset-left));
   background-image: url("assets/map-buttons/back.svg");
   z-index: 3003;
+  padding: 0;
 }
 
 #bottomButtons {
@@ -30,7 +32,7 @@
 #layerManagerBtn {
   background-image: url("assets/map-buttons/layers.svg");
   position: absolute;
-  bottom: 50px;
+  bottom: 56px;
 }
 
 #layerManagerBtn.active {
@@ -50,32 +52,34 @@
   position: absolute;
   left: 15px;
   bottom: 0;
+  background-size: 70px;
 }
 
 #sideBySideRightLayer {
   background-image: url("assets/map-buttons/compare/compare-layer-right.svg");
   position: absolute;
   right: 15px;
   bottom: 0;
+  background-size: 70px;
 }
 
 #compareMode {
   position: fixed;
   top: calc(10px + var(--safe-area-inset-top));
   right: calc(15px + var(--safe-area-inset-left));
-  width: 120px;
-  height: 40px;
+  width: 150px;
+  height: 50px;
   display: flex;
   flex-direction: row;
   z-index: 2;
 }
 
 #compareMode > div {
-  width: 40px;
-  height: 40px;
+  width: 50px;
+  height: 50px;
   background-position: center;
   background-repeat: no-repeat;
-  background-size: 40px;
+  background-size: 50px;
   filter: grayscale(1);
 }
 
@@ -124,7 +128,7 @@
 #compassBtn {
   background-image: url("assets/map-buttons/compass.svg");
   position: absolute;
-  bottom: 100px;
+  bottom: 112px;
 }
 
 #filterPoiBtn {
@@ -139,6 +143,7 @@
   background-position: 13px center;
   width: 70px;
   transition: top 0.15s, transform 0.5s;
+  font-size: 14px;
 }
 
 #interactivityBtn {
@@ -150,8 +155,8 @@
   overflow: hidden;
   background-color: #fff0;
   border-radius: 31px;
-  width: 54px;
-  height: 54px;
+  width: 60px;
+  height: 60px;
   font-family: "Open Sans Semibold";
   display: flex;
   align-items: center;
@@ -176,9 +181,8 @@
 }
 
 #routeDrawMode {
-  width: 135px;
+  width: 145px;
   justify-content: space-between;
-  font-size: 11px;
   position: relative;
 }
 
@@ -223,8 +227,6 @@
 
 #routeDrawHelp {
   background-color: var(--dark-green);
-  width: 34px;
-  height: 34px;
   color: white;
   border: unset;
   justify-content: center;
@@ -237,6 +239,7 @@
   font-family: "Open Sans Semibold";
   margin-right: 6px;
   right: unset;
+  font-size: 13px;
 }
 
 #routeDrawEdit {
@@ -306,7 +309,7 @@
 
 #routeDrawEdit > .button > span {
   position: absolute;
-  bottom: 10px;
+  bottom: 6px;
   width: 42px;
   display: flex;
   justify-content: center;

diff --git a/src/css/map.css b/src/css/map.css
@@ -17,7 +17,7 @@
 }
 
 #bottomButtons > .maplibregl-control-container > .maplibregl-ctrl-bottom-left {
-  bottom: 50px;
+  bottom: 56px;
 }
 
 #routeDrawBtns.d-none + .maplibregl-control-container > .maplibregl-ctrl-bottom-left {

diff --git a/src/css/nav.css b/src/css/nav.css
@@ -6,7 +6,7 @@
     height: 60px ;
     font-size: 12px;
     background-color: white;
-    padding: 10px 0px max(calc(var(--safe-area-inset-bottom) - 10px - var(--nav-bar-height)), 0px) 0px;
+    padding: 8px 0px max(calc(var(--safe-area-inset-bottom) - 10px - var(--nav-bar-height)), 0px) 0px;
     z-index: 3002;
     flex-direction: row;
     align-items: center;
@@ -39,9 +39,10 @@
 
 .navitembtn > div {
     margin-bottom: 5px;
-    height: 42px;
-    width: 42px;
-    flex-shrink: 0
+    height: 48px;
+    width: 48px;
+    flex-shrink: 0;
+    background-size: 48px;
 }
 
 .navbar.hoverable:focus-within > .navitembtn,
@@ -95,7 +96,7 @@
 .subnav {
     position: absolute;
     background-color: var(--false-white);
-    bottom: calc(70px + max(calc(var(--safe-area-inset-bottom) - 10px - var(--nav-bar-height)), 0px));
+    bottom: calc(68px + max(calc(var(--safe-area-inset-bottom) - 10px - var(--nav-bar-height)), 0px));
     left: -100%;
     transition: transform 0.2s;
     transition-timing-function: ease-out;

diff --git a/src/js/nav.js b/src/js/nav.js
@@ -182,15 +182,13 @@ class MenuNavigation {
       break;
     case "compareLayers1":
       DOM.$tabContainer.style.removeProperty("top");
-      DOM.$bottomButtons.style.removeProperty("bottom");
       DOM.$compareLayers2Window.classList.add("d-none");
       DOM.$compareLayers1Window.classList.remove("d-none");
       DOM.$sideBySideLeftLayer.classList.add("d-none");
       Globals.currentScrollIndex = 2;
       break;
     case "compareLayers2":
       DOM.$tabContainer.style.removeProperty("top");
-      DOM.$bottomButtons.style.removeProperty("bottom");
       DOM.$compareLayers1Window.classList.add("d-none");
       DOM.$compareLayers2Window.classList.remove("d-none");
       DOM.$sideBySideRightLayer.classList.add("d-none");
@@ -424,7 +422,6 @@ class MenuNavigation {
       break;
     case "compareLayers1":
       DOM.$tabContainer.style.top = "100vh";
-      DOM.$bottomButtons.style.bottom = "calc(42px + var(--safe-area-inset-bottom))";
       DOM.$compareLayers1Window.classList.add("d-none");
       DOM.$sideBySideLeftLayer.classList.remove("d-none");
       Globals.currentScrollIndex = 0;
@@ -433,7 +430,6 @@ class MenuNavigation {
       break;
     case "compareLayers2":
       DOM.$tabContainer.style.top = "100vh";
-      DOM.$bottomButtons.style.bottom = "calc(42px + var(--safe-area-inset-bottom))";
       DOM.$sideBySideLeftLayer.style.removeProperty("left");
       DOM.$compareLayers2Window.classList.add("d-none");
       DOM.$sideBySideRightLayer.classList.remove("d-none");