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>
<meta charset="UTF-8" />
<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>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

6
frontend/src/App.css
View File

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

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

@@ -1,7 +1,7 @@
/* ── Placeholder avant chargement du style ── */
.smap-placeholder {
width: 100%;
height: 100vh;
height: 100dvh;
background: #3ab5e6; /* couleur océan = pas de flash blanc */
}
@@ -19,8 +19,8 @@
/* ── Indicateur fraîcheur données ── */
.smap-freshness {
position: absolute;
bottom: 28px;
left: 10px;
bottom: max(28px, calc(28px + env(safe-area-inset-bottom)));
left: max(10px, calc(10px + env(safe-area-inset-left)));
background: rgba(255, 255, 255, 0.82);
backdrop-filter: blur(4px);
border-radius: 6px;
@@ -31,6 +31,12 @@
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 ── */
.smap-marker {
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)}
mapStyle={mapStyle}
maxBounds={MAX_BOUNDS}
style={{ width: '100%', height: '100vh' }}
style={{ width: '100%', height: '100dvh' }}
>
<NavigationControl position="bottom-right" />

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

@@ -367,8 +367,10 @@
transform: none;
width: 100%;
border-radius: 20px 20px 0 0;
max-height: 70vh;
max-height: 70dvh;
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__details { grid-template-columns: 1fr; }