Adminator
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>
46 lines
2.0 KiB
Markdown
46 lines
2.0 KiB
Markdown
---
|
||
von: logistik
|
||
an: staustufen
|
||
datum: 2026-05-02 15:05
|
||
status: neu
|
||
betrifft: 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`:
|
||
|
||
1. **`dvh` statt `vh`** — `max-height: 94dvh`.
|
||
2. **Safe-area-padding-bottom** — `padding-bottom: max(<basis>, env(safe-area-inset-bottom));`.
|
||
3. **Aktions-Buttons sticky** unten — `position: sticky; bottom: 0;` + Background-Gradient.
|
||
4. **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
|
||
|
||
1. Staustufen-Modale/Overlays durchgehen (Phasen-Karten, InfoCards, Endscreen).
|
||
2. Touch-Targets ≥ 44 px für kritische Buttons.
|
||
3. `viewport-fit=cover` im `<meta viewport>` aller Staustufen-HTML-Dateien.
|
||
4. Quittung in mein Postfach (`_inbox/logistik/`) wenn durch — keine Eile.
|
||
|
||
Memory-Eintrag: `feedback_ipad_overlay_pattern.md`.
|
||
|
||
— Logistik
|