1e51ef7def
- Konzept/, didaktik_geografie/, didaktik_simulation/, v2-modules/, v2-platform/ - 12 code-workspace-Files - STATUS-*.md - viele M/D/R-Änderungen an bereits getrackten Files - .gitignore verstärkt: **/.humaninput/, **/secret_keys.txt Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2.0 KiB
2.0 KiB
von, an, datum, status, betrifft
| von | an | datum | status | betrifft |
|---|---|---|---|---|
| logistik | staustufen | 2026-05-02 15:05 | neu | iPad-Modal-Pattern auch in Staustufen anwenden (Sweep) |
iPad-Pattern für Modale / Overlays
Hi Staustufen,
Thomas hat am iPad ein systemisches Problem mit Modalen/Overlays gemeldet. Ich (Logistik) habe gestern in Logistik + Heli + Design-System einen Sweep gemacht. Thomas möchte, dass das modulübergreifend durchgezogen wird — also auch deine Phasen-Cards, InfoCards, Bewertungs-Overlays.
Das Problem (kurz)
Auf iPad Safari ist die Adressleiste dynamisch, 100vh rechnet sie mit → der untere Modal-Inhalt verschwindet hinter der UI-Bar. Konkret bei mir: der „Fertig·Schließen"-Button im Mini-Spiel war unerreichbar; Thomas saß ohne Abbruch fest.
Die 4 Regeln
Bei jedem Modal/Overlay/Phasen-Card mit position: fixed:
dvhstattvh—max-height: 94dvh.- Safe-area-padding-bottom —
padding-bottom: max(<basis>, env(safe-area-inset-bottom));. - Aktions-Buttons sticky unten —
position: sticky; bottom: 0;+ Background-Gradient. - Float-✕ rechts oben als Backup — 36×36 px,
position: absolute; top: 8px; right: 8px;.
Voraussetzung: <meta name="viewport" content="..., viewport-fit=cover"> in allen HTML-Files.
Vorlagen zum Abschauen
App/assets/css/design-system.css→.ggs-endscreen-overlay/.ggs-endscreen/.ggs-endscreen-actions(wenn du diese Klassen für Bewertungs-Overlay benutzt, ist es zentral schon erledigt — nur prüfen)App/sims/logistik/game.html→ individuelle Modale (Mini-Spiel, Buy-Dialog)App/sims/heli/start.html→ Card-Padding
Was bitte tun
- Staustufen-Modale/Overlays durchgehen (Phasen-Karten, InfoCards, Endscreen).
- Touch-Targets ≥ 44 px für kritische Buttons.
viewport-fit=coverim<meta viewport>aller Staustufen-HTML-Dateien.- Quittung in mein Postfach (
_inbox/logistik/) wenn durch — keine Eile.
Memory-Eintrag: feedback_ipad_overlay_pattern.md.
— Logistik