gwadaking/radarsargasses
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: corriger le masquage du bas de l'app par la barre Android

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Gwadaking
2026-04-14 17:06:06 -04:00
parent 6a6f42e55b
commit 5c860547f8
5 changed files with 17 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/index.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>Radar Sargasses Caraïbes</title> <title>Radar Sargasses Caraïbes</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

6
frontend/src/App.css
View File

@@ -10,14 +10,14 @@ body {
.app { .app {
position: relative; position: relative;
width: 100vw; width: 100vw;
height: 100vh; height: 100dvh; /* dvh = dynamic, s'adapte à la barre d'adresse mobile */
} }
/* ── Boutons flottants (signalement + info) ── */ /* ── Boutons flottants (signalement + info) ── */
.app__actions { .app__actions {
position: absolute; position: absolute;
bottom: 14px; bottom: max(14px, calc(14px + env(safe-area-inset-bottom)));
left: 16px; left: max(16px, calc(16px + env(safe-area-inset-left)));
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;

12
frontend/src/components/Map/SargassesMap.css
View File

@@ -1,7 +1,7 @@
/* ── Placeholder avant chargement du style ── */ /* ── Placeholder avant chargement du style ── */
.smap-placeholder { .smap-placeholder {
width: 100%; width: 100%;
height: 100vh; height: 100dvh;
background: #3ab5e6; /* couleur océan = pas de flash blanc */ background: #3ab5e6; /* couleur océan = pas de flash blanc */
} }
@@ -19,8 +19,8 @@
/* ── Indicateur fraîcheur données ── */ /* ── Indicateur fraîcheur données ── */
.smap-freshness { .smap-freshness {
position: absolute; position: absolute;
bottom: 28px; bottom: max(28px, calc(28px + env(safe-area-inset-bottom)));
left: 10px; left: max(10px, calc(10px + env(safe-area-inset-left)));
background: rgba(255, 255, 255, 0.82); background: rgba(255, 255, 255, 0.82);
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
border-radius: 6px; border-radius: 6px;
@@ -31,6 +31,12 @@
z-index: 10; z-index: 10;
} }
/* NavigationControl MapLibre — remonte au-dessus de la barre Android */
.maplibregl-ctrl-bottom-right {
bottom: env(safe-area-inset-bottom) !important;
right: env(safe-area-inset-right) !important;
}
/* ── Spot markers ── */ /* ── Spot markers ── */
.smap-marker { .smap-marker {
cursor: pointer; cursor: pointer;

2
frontend/src/components/Map/SargassesMap.jsx
View File

@@ -271,7 +271,7 @@ export default function SargassesMap({ onSpotSelect, selectedSpotId, activeStep,
onClick={() => onSpotSelect(null)} onClick={() => onSpotSelect(null)}
mapStyle={mapStyle} mapStyle={mapStyle}
maxBounds={MAX_BOUNDS} maxBounds={MAX_BOUNDS}
style={{ width: '100%', height: '100vh' }} style={{ width: '100%', height: '100dvh' }}
> >
<NavigationControl position="bottom-right" /> <NavigationControl position="bottom-right" />

4
frontend/src/components/SpotPanel/SpotPanel.css
View File

@@ -367,8 +367,10 @@
transform: none; transform: none;
width: 100%; width: 100%;
border-radius: 20px 20px 0 0; border-radius: 20px 20px 0 0;
max-height: 70vh; max-height: 70dvh;
overflow-y: auto; overflow-y: auto;
/* Padding bas pour ne pas se faire couper par la barre Android */
padding-bottom: max(20px, calc(20px + env(safe-area-inset-bottom)));
} }
.spot-panel__feedback-btns { flex-direction: column; } .spot-panel__feedback-btns { flex-direction: column; }
.spot-panel__details { grid-template-columns: 1fr; } .spot-panel__details { grid-template-columns: 1fr; }