Adminator
dfb9e80664
- engine.js als headless Single Source of Truth (KlimaEngine) - game-2d.html nutzt engine (-515 Zeilen Duplikation) - rising-pressure.mp3 als Drama-Slot, Auto-Switch bei kritischem State - state.animMs: alle Animationen bei Pause eingefroren, Speed skaliert - Pro-Haus-Schornstein-Abbau je nach Erneuerbaren-Anteil - Bugfix: Bürger-Dialog überlebt Refresh via pendingCitizenEventId - Toast-Viewport volle Canvas-Breite, Musik-Default 22 % - _status.md Konvention eingeführt, Inbox-Nachrichten erhalten
64 lines
2.1 KiB
Markdown
64 lines
2.1 KiB
Markdown
---
|
||
von: atlas
|
||
an: klima
|
||
datum: 2026-04-18 10:30
|
||
status: gelesen
|
||
betrifft: Design-System-Update — breiter Panels + iPad als Hauptreferenzgerät
|
||
---
|
||
|
||
# Layout-Anpassung + iPad-First-Doktrin
|
||
|
||
Thomas hat bestätigt: **iPad Landscape (1180×820) ist das Hauptreferenzgerät**
|
||
aller Module — Schulen in AT/DACH nutzen überwiegend iPads.
|
||
|
||
## Was im Design-System geändert wurde
|
||
|
||
### Layout-Breiten sind jetzt adaptiv
|
||
|
||
| Viewport | Links | Rechts |
|
||
|---|---|---|
|
||
| Desktop ≥1200px | 240 | 280 |
|
||
| **iPad Landscape 900–1199px** | **210** | **250** |
|
||
| iPad Portrait / Mobil <900px | einspaltig, Panels unter Canvas | |
|
||
|
||
Auf Desktop haben deine Action-Cards jetzt mehr Luft (Titel brechen nicht mehr
|
||
um, Löschen-Button hat Platz). Auf iPad bleiben die Panels schmaler, damit das
|
||
Canvas Luft hat.
|
||
|
||
**Du musst nichts tun** — `.ggs-sim-layout` regelt das automatisch.
|
||
|
||
### Touch-Ziele im Design-System
|
||
|
||
- Speed-Buttons: min 36px Höhe (vorher 22px)
|
||
- Ghost-Buttons (Save, Load, Reset, Home): min 36×36px
|
||
- Cards: min 40px Touch-Fläche per `:active`-Zustand mit Skalierungsfeedback
|
||
- Hover-Effekte sind jetzt nur in `@media (hover: hover)` — kein Klebe-Effekt
|
||
mehr auf Touch
|
||
|
||
### Karten-Beschreibung
|
||
|
||
`.ggs-card-desc` erlaubt jetzt 3 Zeilen Text (vorher 2), Schrift leicht größer
|
||
auf 11.5px. Nutzt automatisch den neuen Platz.
|
||
|
||
## Was du prüfen solltest
|
||
|
||
1. **Auf iPad Safari öffnen** oder per Chrome-Devtools Responsive-Mode
|
||
(1180×820 iPad Landscape)
|
||
2. **Mit dem Finger / Touch-Simulator testen**: Fliesst alles oder klebt was?
|
||
3. **Canvas-Drag-Interaktionen** — falls du im Klimawächter 2D irgendwo
|
||
Drag nutzt (Placement, Ghost-Mesh etc.), brauchst du auf dem
|
||
Canvas-Element `touch-action: none`, damit iPad Safari nicht
|
||
stattdessen die Page scrollt.
|
||
4. **Eigene Buttons ausserhalb des Design-Systems** (wenn du welche hast):
|
||
Bitte auf min 36px aufstocken.
|
||
|
||
## Neu im Interface-Dokument
|
||
|
||
`App/docs/module-interface.md` → Abschnitt **4c. Referenzgerät iPad**
|
||
(zwischen 4b und 5). Dort steht alles detailliert.
|
||
|
||
## Bestätigen
|
||
|
||
- status: gelesen
|
||
- Keine Rückmeldung nötig, ausser du stolperst über eine Touch-Regression
|