From 38a39cc8ee25c67d8e79dab64622b5d6a67ef11d Mon Sep 17 00:00:00 2001 From: azarz Date: Thu, 30 Nov 2023 15:54:23 +0100 Subject: [PATCH] fix(ios): display bugs --- src/css/alt-menu.css | 2 +- src/css/directions.css | 1 + src/css/isochrone.css | 1 + src/css/map-buttons.css | 24 ++++++++++++------------ src/css/map.css | 6 +++--- src/css/media-queries.css | 4 ++-- src/css/nav.css | 11 +++++------ src/css/search.css | 6 +++--- src/css/tabs.css | 2 +- src/html/index.html | 2 +- src/js/index.js | 3 ++- 11 files changed, 32 insertions(+), 30 deletions(-) diff --git a/src/css/alt-menu.css b/src/css/alt-menu.css index 69536953..aa39efc3 100644 --- a/src/css/alt-menu.css +++ b/src/css/alt-menu.css @@ -54,7 +54,7 @@ #altMenuContainer { z-index: 3001; height: auto; - top: 68px; + top: calc(68px + env(safe-area-inset-top)); display: flex; width: 100%; position: absolute diff --git a/src/css/directions.css b/src/css/directions.css index 29948b4a..2805dd18 100644 --- a/src/css/directions.css +++ b/src/css/directions.css @@ -6,6 +6,7 @@ * compute */ .btnDirectionsCompute { + appearance: unset; /* for ios */ display: block; margin: auto; border: none; diff --git a/src/css/isochrone.css b/src/css/isochrone.css index e37ac758..935bec21 100644 --- a/src/css/isochrone.css +++ b/src/css/isochrone.css @@ -36,6 +36,7 @@ * compute */ .btnIsochroneCompute { + appearance: unset; /* for ios */ display: block; margin: auto; border: none; diff --git a/src/css/map-buttons.css b/src/css/map-buttons.css index 0fe05f23..0756d435 100644 --- a/src/css/map-buttons.css +++ b/src/css/map-buttons.css @@ -10,8 +10,8 @@ width: 20px; height: 20px; z-index: 3001; - top: 10px; - left: 10px; + top: calc(10px + env(safe-area-inset-top)); + left: calc(10px + env(safe-area-inset-left)); background-image: url("assets/back.svg"); background-position: center; background-repeat: no-repeat; @@ -37,43 +37,43 @@ #layerManagerBtn { background-image: url("assets/layers.svg"); position: absolute; - bottom: 180px; + bottom: calc(180px + env(safe-area-inset-bottom)); } #geolocateBtn { background-image: url("assets/localisation.svg"); position: absolute; - bottom: 130px; + bottom: calc(130px + env(safe-area-inset-bottom)); } #sideBySideBtn { background-image: url("assets/compare.svg"); position: absolute; left: 15px; - bottom: 130px; + bottom: calc(130px + env(safe-area-inset-bottom)); } #compassBtn { background-image: url("assets/compass.svg"); position: absolute; - bottom: 225px; + bottom: calc(225px + env(safe-area-inset-bottom)); } -@media (min-width: 615px), screen and ((min-aspect-ratio: 1/1) and (min-width:400px)) { +@media (min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px) { #layerManagerBtn { - bottom: 65px; + bottom: calc(65px + env(safe-area-inset-bottom)); } #geolocateBtn { - bottom: 15px; + bottom: calc(15px + env(safe-area-inset-bottom)); } #sideBySideBtn { - left: 90px; - bottom: 65px; + left: calc(90px + env(safe-area-inset-left)); + bottom: calc(65px + env(safe-area-inset-bottom)); } #compassBtn { - top: 15px; + top: calc(15px + env(safe-area-inset-top)); } } diff --git a/src/css/map.css b/src/css/map.css index 2a9b04f3..18311455 100644 --- a/src/css/map.css +++ b/src/css/map.css @@ -34,7 +34,7 @@ /* Map */ .map { - height: calc(100vh - 78px); + height: calc(100vh - 78px - env(safe-area-inset-bottom)); width: 100vw; flex-grow: 1; position: fixed; @@ -46,10 +46,10 @@ flex-direction: column; } -@media (min-width: 615px), screen and ((min-aspect-ratio: 1/1) and (min-width:400px)) { +@media (min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px) { #map { height: 100vh; - width: calc(100vw - 75px); + width: calc(100vw - 75px - env(safe-area-inset-left)); right: 0; } } diff --git a/src/css/media-queries.css b/src/css/media-queries.css index 8f25b1f9..0be03551 100644 --- a/src/css/media-queries.css +++ b/src/css/media-queries.css @@ -1,9 +1,9 @@ /* mode paysage et écrans larges */ -@media (min-width: 615px), screen and ((min-aspect-ratio: 1/1) and (min-width:400px)) { +@media (min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px) { #tabContainer { width: 50%; height: fit-content; top: 100%; - left: 75px; + left: calc(75px + env(safe-area-inset-left)); } } diff --git a/src/css/nav.css b/src/css/nav.css index 1f0bcd31..ced02a11 100644 --- a/src/css/nav.css +++ b/src/css/nav.css @@ -1,10 +1,9 @@ #navContainer { display: flex; position: absolute; - bottom: 0px; - top: calc(100% - 78px); + top: calc(100% - 78px - env(safe-area-inset-bottom)); width: 100%; - height: 60px; + height: calc(60px + env(safe-area-inset-bottom)); font-size: 12px; background-color: white; padding: 10px 0px 8px 0px; @@ -78,7 +77,7 @@ .subnav { position: absolute; background-color: #f4f6f8; - bottom: 78px; + bottom: calc(78px + env(safe-area-inset-bottom)); left: -100%; transition: transform 0.2s; transition-timing-function: ease-out; @@ -178,12 +177,12 @@ background-image: url(../html/img/tracer.svg); } -@media (min-width: 615px), screen and ((min-aspect-ratio: 1/1) and (min-width:400px)) { +@media (min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px) { #navContainer { flex-direction: column; width: 75px; height: 100vh; - left: 0; + left: env(safe-area-inset-left); top: 0; box-sizing: border-box; } diff --git a/src/css/search.css b/src/css/search.css index 692b4147..a505cd78 100644 --- a/src/css/search.css +++ b/src/css/search.css @@ -1,6 +1,6 @@ #searchContainer { position: fixed; - top: 0; + top: env(safe-area-inset-top); width: 100%; z-index: 3000; height: 40px; @@ -139,9 +139,9 @@ background-image: url("assets/close.svg"); } -@media (min-width: 615px), screen and ((min-aspect-ratio: 1/1) and (min-width:400px)) { +@media (min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px) { #searchContainer { width: 40%; - left: 85px; + left: calc(85px + env(safe-area-inset-left)); } } diff --git a/src/css/tabs.css b/src/css/tabs.css index 1f111777..8a040fbc 100644 --- a/src/css/tabs.css +++ b/src/css/tabs.css @@ -48,7 +48,7 @@ /* Bottom menu */ #tabContainer { position: absolute; - top: calc(100% - 78px); + top: calc(100% - 78px - env(safe-area-inset-bottom)); height: fit-content; width: 100%; background-color: #f4f6f8; diff --git a/src/html/index.html b/src/html/index.html index 47207e60..b9bf935e 100644 --- a/src/html/index.html +++ b/src/html/index.html @@ -4,7 +4,7 @@ - + Géoportail diff --git a/src/js/index.js b/src/js/index.js index e25d81e2..a99ad3f9 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -143,7 +143,8 @@ function app() { // Initialisation du menu de navigation Globals.menu = new MenuNavigation(); Globals.menu.show(); - + // HACK: Nécessaire pour iOS qui ne met pas à jour la taille de l'écran au lancement... + setTimeout(() => Globals.map.resize(), 100); } app();