code_public/lidar_rendu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Regrouper les réglages de la carte dans un panneau unique à onglets, volet en bas sur téléphone

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Antoine Jacquin
2026-09-27 18:00:59 +02:00
parent b975ed272a
commit b24ebcd83a
4 changed files with 362 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
lidar_pipeline/web/map.css
View File

@ -62,8 +62,8 @@ html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(-
border: 1px solid var(--border); border-radius: var(--r-md);
box-shadow: var(--shadow-lg);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#layercard { left: 12px; bottom: 12px; width: 320px; max-width: calc(100vw - 24px); }
#tilecard { left: 12px; top: 12px; width: 340px; max-width: calc(100vw - 24px);
/* Fiche de dalle : à droite du panneau (ordinateur), en haut (téléphone). */
#tilecard { left: max(var(--sp-3), var(--panel-w)); top: 12px; width: 340px; max-width: calc(100vw - 24px);
max-height: calc(100vh - 24px); overflow-y: auto; }
.info-sec { margin-top: 10px; }
.info-sec h4 { margin: 0 0 4px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em;
@ -74,18 +74,11 @@ html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(-
.info-dl { display: inline-block; margin-top: 6px; padding: 6px 10px; border-radius: var(--r-sm);
background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); text-decoration: none; font-weight: 600; }
.info-dl:hover { background: color-mix(in srgb, var(--accent) 30%, transparent); }
#rose { right: 12px; bottom: 190px; padding: 8px 8px 6px; display: flex; flex-direction: column;
align-items: center; gap: 2px; z-index: var(--z-map-ui); }
#rose canvas { width: 132px; height: 132px; }
.rose-cap { font-size: var(--fs-xs); text-align: center; color: var(--text); line-height: 1.3; }
.rose-cap { font-size: var(--fs-xs); color: var(--text); line-height: 1.3; }
.rose-cap span { color: var(--muted); font-size: var(--fs-xs); }
#usecard { left: 50%; top: 12px; transform: translateX(-50%); width: min(560px, calc(100vw - 24px)); z-index: var(--z-popup); }
.card-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.card-title { font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.card-stat { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); }
.card-body { padding: 6px 8px 8px; max-height: min(60vh, 520px); overflow-y: auto; }
#layercard.collapsed .card-body { display: none; }
#layercard.collapsed #cardToggle { transform: rotate(-90deg); }
.card-foot { display: flex; gap: 8px; padding: 8px 4px 2px; margin-top: 6px; border-top: 1px solid var(--border); }
/* --- composants communs --------------------------------------------------- */
@ -96,6 +89,7 @@ html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(-
.btn:disabled, button:disabled { opacity: 0.5; cursor: default; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn-primary:hover { filter: brightness(1.08); }
.btn.accent, .btn.busy { border-color: var(--accent); color: var(--accent); }
.btn-ghost { background: transparent; }
.btn-icon { min-height: 0; padding: var(--sp-1) var(--sp-2); border: none; background: none;
color: var(--muted); font-size: var(--fs-lg); }
@ -150,14 +144,23 @@ input[type="range"]::-moz-range-thumb { width: 10px; height: 10px; border-radius
.eye.on { color: var(--accent); }
.eye svg { width: 16px; height: 16px; }
.layer-name { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.base-row .layer-name { color: var(--text); cursor: pointer; }
.base-row:not(.on) .layer-name { color: var(--muted); }
.pct { font-size: var(--fs-xs); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
#tools { position: fixed; right: 12px; bottom: 12px; z-index: var(--z-panel); display: flex; flex-direction: column; gap: 6px; }
#tools { position: fixed; right: var(--sp-3); bottom: calc(var(--sheet-h) + var(--sp-3));
z-index: var(--z-map-ui); display: flex; flex-direction: column; gap: var(--sp-2); }
@media (max-width: 720px) {
#tools { top: var(--sp-3); bottom: auto; }
}
/* L'attribution Leaflet reste en bas à droite : les outils passent au-dessus. */
@media (min-width: 721px) { #tools { bottom: 44px; } }
#tools button { width: 38px; height: 38px; padding: 0; font-size: var(--fs-lg); background: var(--surface);
border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
/* Indicateur de chargement : tuiles restantes pour finir la vue courante
(fond + LiDAR), barre de progression du lot en cours. */
.tileload { position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: var(--z-loading);
.tileload { position: fixed; left: calc(var(--panel-w) + (100vw - var(--panel-w)) / 2); top: auto;
bottom: calc(var(--sheet-h) + var(--sp-3)); transform: translateX(-50%); z-index: var(--z-loading);
display: flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: var(--r-full);
background: var(--surface); border: 1px solid var(--border); font-size: var(--fs-sm);
box-shadow: var(--shadow-sm); pointer-events: none;
@ -172,7 +175,8 @@ input[type="range"]::-moz-range-thumb { width: 10px; height: 10px; border-radius
overflow: hidden; flex: none; }
.tl-bar span { display: block; height: 100%; width: 0; background: var(--accent);
transition: width 0.2s ease; }
.toast { position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: var(--z-toast);
.toast { position: fixed; left: calc(var(--panel-w) + (100vw - var(--panel-w)) / 2);
bottom: calc(var(--sheet-h) + 56px); transform: translateX(-50%); z-index: var(--z-toast);
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
padding: 7px 12px; font-size: var(--fs-sm); color: var(--text); max-width: 80vw; text-align: center; }
@ -186,23 +190,12 @@ input[type="range"]::-moz-range-thumb { width: 10px; height: 10px; border-radius
.leaflet-control-attribution a { color: var(--accent) !important; }
/* --- génération de tuiles ------------------------------------------------ */
#gencard { right: 12px; top: 56px; width: 340px; max-width: calc(100vw - 24px); }
#printcard { right: 60px; bottom: 12px; width: 340px; max-width: calc(100vw - 84px); }
.print-msg { font-size: var(--fs-sm); margin-left: 8px; }
.print-handle { display: flex; align-items: center; justify-content: center; cursor: move;
font-size: var(--fs-lg); color: #1b1b1b; background: var(--print); border: 2px solid #1b1b1b;
border-radius: var(--r-full); box-shadow: 0 1px 6px rgba(0,0,0,0.5); }
body.drawing { cursor: crosshair !important; }
body.drawing .leaflet-container { cursor: crosshair !important; }
/* Barre de génération : en HAUT à droite de l'écran, boutons accentués —
c'est l'entrée principale du traitement, elle ne se confond pas avec les
icônes de navigation (zoom/GPS) du coin bas droit. */
#gentools { position: fixed; top: 12px; right: 12px; z-index: var(--z-panel); display: flex; gap: 8px; }
#gentools button { background: var(--surface); color: var(--accent); border: 1px solid var(--accent);
border-radius: var(--r-md); padding: 8px 14px; font: inherit; font-size: var(--fs-md); font-weight: 600;
box-shadow: var(--shadow-sm); }
#gentools button:hover { background: var(--accent); color: var(--on-accent); }
#gentools button.accent { background: var(--accent); color: var(--on-accent); }
.gen-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 6px;
align-items: center; margin: 4px 0; font-size: var(--fs-xs); color: var(--muted); }
.chk { display: flex; gap: 7px; align-items: center; font-size: var(--fs-xs);
@ -221,9 +214,54 @@ body.drawing .leaflet-container { cursor: crosshair !important; }
.gen-frame-pending { stroke: var(--gen-pending); fill: color-mix(in srgb, var(--gen-pending) 8%, transparent); stroke-dasharray: 6 4; }
.gen-frame-failed { stroke: var(--gen-failed); fill: color-mix(in srgb, var(--gen-failed) 20%, transparent); }
.gen-sel { stroke: var(--accent); fill: color-mix(in srgb, var(--accent) 12%, transparent); cursor: pointer; }
/* --- panneau unique à onglets ------------------------------------------------
Ordinateur : colonne à gauche, repliable en bande d'icônes.
Téléphone : volet en bas à trois hauteurs (fermé / mi-hauteur / plein). */
#panel { position: fixed; z-index: var(--z-panel); display: flex; flex-direction: column;
background: var(--surface); color: var(--text); border: 1px solid var(--border);
box-shadow: var(--shadow-lg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
left: var(--sp-3); top: var(--sp-3); bottom: var(--sp-3); width: 340px; border-radius: var(--r-md); }
.panel-head { display: flex; align-items: center; gap: var(--sp-1); padding: var(--sp-2);
border-bottom: 1px solid var(--border); }
.panel-tabs { display: flex; gap: var(--sp-1); flex: 1; min-width: 0; }
.panel-tabs button { flex: 1; min-width: 0; flex-direction: column; gap: 0; min-height: 44px;
padding: var(--sp-1); border: none; background: transparent; color: var(--muted); }
.panel-tabs button[aria-selected="true"] { background: var(--surface-2); color: var(--accent); }
.tab-ico { font-size: var(--fs-lg); line-height: 1.1; }
.tab-lbl { font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.panel-body { flex: 1; overflow-y: auto; padding: var(--sp-3); overscroll-behavior: contain; }
.panel-body section > * + * { margin-top: var(--sp-2); }
.panel-stat { font-size: var(--fs-sm); color: var(--muted); }
.sec-title { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--muted); margin-top: var(--sp-4); }
.legend { display: flex; align-items: center; gap: var(--sp-3); }
.legend canvas { width: 96px; height: 96px; flex: none; }
.sheet-grip { display: none; }
#panel.collapsed { width: 60px; }
#panel.collapsed .panel-body, #panel.collapsed .tab-lbl { display: none; }
#panel.collapsed .panel-head { flex-direction: column; border-bottom: none; }
#panel.collapsed .panel-tabs { flex-direction: column; align-self: stretch; }
#panel.collapsed #panelCollapse { transform: rotate(180deg); }
/* La carte, l'échelle et les messages se décalent de la largeur du panneau. */
body { --panel-w: 364px; --sheet-h: 0px; }
body.panel-collapsed { --panel-w: 84px; }
.leaflet-bottom.leaflet-left { left: var(--panel-w); }
@media (max-width: 720px) {
#layercard { width: calc(100vw - 24px); }
#tilecard { width: calc(100vw - 24px); }
#gencard { width: calc(100vw - 24px); }
#printcard { width: calc(100vw - 84px); }
body, body.panel-collapsed { --panel-w: 0px; }
#panel, #panel.collapsed { left: 0; right: 0; top: auto; bottom: 0; width: auto;
border-radius: var(--r-md) var(--r-md) 0 0; border-bottom: none; transition: height 0.2s ease; }
#panel[data-sheet="closed"] { height: 72px; }
#panel[data-sheet="half"] { height: 45vh; }
#panel[data-sheet="full"] { height: calc(100vh - var(--sp-4)); }
#panel[data-sheet="closed"] .panel-body { display: none; }
#panelCollapse { display: none; }
.sheet-grip { display: flex; justify-content: center; padding: var(--sp-2) 0 0; cursor: grab; touch-action: none; }
.sheet-grip span { width: 36px; height: 4px; border-radius: var(--r-full); background: var(--muted); }
.panel-head { padding: var(--sp-1) var(--sp-2); }
.leaflet-bottom { bottom: var(--sheet-h); }
/* Attribution sur toute la largeur : l'échelle passe au-dessus d'elle,
l'indicateur de chargement en haut de l'écran (à gauche des outils). */
.leaflet-bottom.leaflet-left .leaflet-control-scale { margin-bottom: 28px; }
.tileload { top: var(--sp-3); bottom: auto; }
}