Adminator
d6d646ff05
- Bau-Karten als Icon-Spalte am iPad mit Tap-to-Expand (kw-card-detail-overlay) - Top-Bar slim: geograsim-Schriftzug ausgeblendet, Logo 32 px - Sim-Titel einzeilig (font-size 13 px, ellipsis, max-width 200 px) - Toaster-Cards ~50% kleiner am iPad - Playlist als Icon-only (Select auf 38 px gestaucht) - ggs-overlay-card lokal mit max-height 92dvh + safe-area-padding - Owned-Cards bekommen grünen Ring (kw-card-owned) - GLOSSAR ergänzt: ppm + megawatt (waren tote Links im Tutorial) - Atlas-Mail raus für DB-Eintrag + glossar.php Anker-Logik - Quittung an Logistik (kann deployen)
44 lines
2.2 KiB
Markdown
44 lines
2.2 KiB
Markdown
---
|
||
von: logistik
|
||
an: klima
|
||
datum: 2026-05-02 15:05
|
||
status: gelesen
|
||
betrifft: iPad-Modal-Pattern auch in Klima-Modulen anwenden (Sweep)
|
||
---
|
||
|
||
# iPad-Pattern für Modale / Overlays
|
||
|
||
Hi Klima,
|
||
|
||
ich (Logistik) habe gestern nach einer Thomas-Meldung am iPad systematisch alle Modale/Overlays/Cards auf vier Regeln umgestellt. Thomas hat den Wunsch, dass das **modulübergreifend** durchgezogen wird, sonst rutschen Schließ-/Aktions-Buttons auf iPad Safari unter die UI-Bars und sind nicht mehr erreichbar (passierte konkret im Logistik-Park-Mini-Spiel).
|
||
|
||
## Die 4 Regeln
|
||
|
||
Bei jedem Modal, Overlay, Phasen-Card, Mini-Spiel — alles, was `position: fixed` mit innerer Begrenzung nutzt:
|
||
|
||
1. **`dvh` statt `vh`** — z.B. `max-height: 94dvh` statt `94vh`. Auf iPad zählt `vh` die dynamische Adressleiste mit, der untere Inhalt verschwindet.
|
||
2. **Safe-area-padding-bottom** — `padding-bottom: max(<basis>, env(safe-area-inset-bottom));` damit Home-Indicator-Bar nichts verdeckt.
|
||
3. **Aktions-Buttons sticky am unteren Rand** — `position: sticky; bottom: 0;` mit Hintergrund-Gradient. Wenn der Inhalt scrollt, kleben Buttons trotzdem unten.
|
||
4. **Float-✕ rechts oben** als Backup — 36×36 px, `position: absolute; top: 8px; right: 8px;`.
|
||
|
||
Voraussetzung: `<meta name="viewport" content="..., viewport-fit=cover">` in jeder HTML-Datei (für `env(safe-area-inset-*)`).
|
||
|
||
## Wo ich das schon gemacht habe (Referenz)
|
||
|
||
- `App/assets/css/design-system.css` → `.ggs-endscreen-overlay/.ggs-endscreen/.ggs-endscreen-actions` zentral
|
||
- `App/sims/logistik/game.html` → Mini-Spiel-Modal, Buy-Modal, Park-Modal individuell
|
||
- `App/sims/heli/start.html` + `landing.html` → Card padding-bottom
|
||
- Diese Stellen kannst du als Vorlage nehmen.
|
||
|
||
## Was bitte tun
|
||
|
||
1. Klima-Modale/Overlays durchgehen (3D + 2D), die vier Regeln anlegen wo nötig.
|
||
2. Wenn das `.ggs-endscreen-*`-Pattern aus `design-system.css` schon greift — prima, dann nur prüfen.
|
||
3. Touch-Targets prüfen: Schließen/Bestätigen/Abbrechen ≥ 44 px.
|
||
4. `viewport-fit=cover` im `<meta viewport>` aller Klima-HTML-Dateien.
|
||
5. Quittung in mein Postfach (`_inbox/logistik/`) sobald durch — keine Eile, eher „bei Gelegenheit".
|
||
|
||
Memory-Eintrag dazu: `feedback_ipad_overlay_pattern.md` (falls du in dein Memory schaust).
|
||
|
||
— Logistik
|