fix(big-fonts): display issues

IGNF · Oct 2, 2024 · 6c68ec6 · 6c68ec6
1 parent bc693b2
commit 6c68ec6
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 9 deletions.
diff --git a/src/css/index.css b/src/css/index.css
@@ -40,6 +40,10 @@
     to { opacity: 1; }
 }
 
+:root {
+  --text-zoom: 1;
+}
+
 * {
   -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
   overscroll-behavior: none;
@@ -184,14 +188,14 @@ textarea:focus + .dsign-form-label {
 
 .toggleSlider::after {
   content: "1 0";
-  display: block;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   width: 36px;
   height: 21px;
-  line-height: 21px;
   color: var(--black);
-  font-size: 12px;
+  font-size: calc(12px / var(--text-zoom));
   font-family: "Open Sans Semibold";
-  text-align: center;
   word-spacing: 6px;
 }
 

diff --git a/src/css/nav.css b/src/css/nav.css
@@ -29,6 +29,7 @@
     align-items: center;
     height: 64px;
     justify-content: center;
+    padding: 0;
 }
 
 .navitembtn > span {

diff --git a/src/css/poi.css b/src/css/poi.css
@@ -47,7 +47,7 @@
 .divPOIDisplayGoBackTime > span:last-child {
     padding-left: 28px;
     margin-top: 8px;
-    max-width: 65%;
+    max-width: 90%;
     background-image: url("assets/comparePoi.svg");
     background-repeat: no-repeat;
     background-size: 18px;

diff --git a/src/css/route-draw.css b/src/css/route-draw.css
@@ -22,6 +22,8 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  flex-wrap: wrap-reverse;
+  row-gap: 15px;
 }
 
 #routeDrawMode {

diff --git a/src/js/event-listeners.js b/src/js/event-listeners.js
@@ -270,10 +270,12 @@ function addListeners() {
       return;
     }
     TextZoom.getPreferred().then(value => {
+      const newValue = Math.min(1.5, value.value);
       TextZoom.set({
-        value: Math.min(1.5, value.value)
+        value: newValue
       });
-      document.documentElement.style.fontSize = `calc(13px * ${value.value})`;
+      document.documentElement.style.fontSize = `calc(13px * ${newValue})`;
+      document.documentElement.style.setProperty("--text-zoom", newValue);
     });
   });
 

diff --git a/src/js/index.js b/src/js/index.js
@@ -103,10 +103,12 @@ function app() {
     }, 500);
     if (Capacitor.getPlatform() !== "web") {
       TextZoom.getPreferred().then(value => {
+        const newValue = Math.min(1.5, value.value);
         TextZoom.set({
-          value: Math.min(1.5, value.value)
+          value: newValue
         });
-        document.documentElement.style.fontSize = `calc(13px * ${value.value})`;
+        document.documentElement.style.fontSize = `calc(13px * ${newValue})`;
+        document.documentElement.style.setProperty("--text-zoom", newValue);
       });
     }
     if (!localStorage.getItem("hasBeenLaunched")) {