rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Radar-Timeline: Slider-Scrubbing gefixt + Breite/Höhe an Status-Pill

Browse source 
- Scrub-Bug: _radarPause() setzte slider.value zurück, BEVOR der gezogene Wert
  gelesen wurde → sprang immer auf 'jetzt'. Jetzt Wert zuerst lesen. Scrubben
  stoppt Play + zeigt den Frame der Position (verifiziert: Klick 20%→Frame 2,
  Setter→5→Frame 5).
- Breite per JS an .map-statusbar angeglichen (gleiche linke + rechte Kante),
  Höhe/Optik an die Pill (kleinerer Play-Button, flacher).
This commit is contained in:
rene 2026-06-05 20:39:41 +02:00
parent ea2cdd4f89
commit ac187dc740
7 changed files with 31 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

17
backend/static/css/components.css
View file

@ -3053,17 +3053,18 @@ html.modal-open {
.map-legend::-webkit-scrollbar { display: none; }
/* Regenradar-Zeitleiste (RainViewer: ~2h Vergangenheit + ~30min Nowcast, Play/Pause + Slider) */
/* Optik wie die Status-Pill darunter (hell/cremefarben, Blur, Border), direkt darüber gesetzt. */
/* Optik + Maße wie die Status-Pill darunter: gleiche linke Kante (var(--space-3)); die Breite wird
per JS an die Pill angeglichen (gleiche rechte Kante). Höhe wie die Pill. */
.map-radar-timeline {
position: absolute;
left: var(--space-3);
right: 88px; /* Platz für die Ecken-FABs (Speed-Dial / Zurück) rechts */
bottom: calc(var(--space-3) + 40px); /* unmittelbar über der Status-Pill */
width: min(320px, calc(100% - 100px)); /* Fallback; JS setzt = Pill-Breite */
bottom: calc(var(--space-3) + 34px); /* unmittelbar über der Status-Pill */
z-index: 900;
display: flex;
align-items:center;
gap: 8px;
padding: 4px 12px 4px 5px;
gap: 7px;
padding: 3px 12px 3px 4px;
border-radius: var(--radius-full);
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(4px);
@ -3071,6 +3072,7 @@ html.modal-open {
border: 1px solid var(--c-border-light);
color: var(--c-text);
pointer-events: auto;
box-sizing: border-box;
}
:root[data-theme="dark"] .map-radar-timeline {
background: rgba(24, 20, 16, 0.92);
@ -3078,19 +3080,20 @@ html.modal-open {
}
.rdr-play {
flex-shrink: 0;
width: 30px; height: 30px;
width: 24px; height: 24px;
border: none; border-radius: 50%;
background: var(--c-surface-2);
color: var(--c-text); cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.rdr-play svg { width: 14px; height: 14px; }
.rdr-play:active { background: var(--c-border); }
.rdr-slider { flex: 1; min-width: 0; height: 4px; accent-color: var(--c-primary); cursor: pointer; }
.rdr-time {
flex-shrink: 0;
font-size: 11px; font-weight: 600;
font-variant-numeric: tabular-nums;
min-width: 78px; text-align: right; color: var(--c-text-secondary);
min-width: 74px; text-align: right; color: var(--c-text-secondary);
}
.rdr-time.is-forecast { color: var(--c-primary); } /* Nowcast/Vorhersage-Frames hervorgehoben */