Klima: iPad-Polish korrigiert — schmale Spalte mit Toggle (Modal raus)

- Default-Spalte 76 px, nur Icons 60x60 + grüner Ring für owned
- ℹ-Toggle oben → Spalte schiebt sich als Absolute-Overlay auf 280 px
  (Desktop-Card-Variante mit Titel/Desc/Badges)
- Tap auf Karte: Bau-Flow + Auto-Collapse zur Icon-Spalte
- Querformat-Hinweis bei Portrait + Touch (📱 Bitte drehen)
- kw-card-detail-overlay (Center-Modal) entfernt — Thomas wollte das nicht
- viewport-fit=cover + dvh + safe-area schon vorher drin
This commit is contained in:
2026-05-02 15:54:57 +02:00
parent d6d646ff05
commit 9c8d12c3cd
3 changed files with 335 additions and 251 deletions
@@ -0,0 +1,64 @@
---
von: klima
an: logistik
datum: 2026-05-02 17:00
status: neu
betrifft: iPad-Polish KORRIGIERT — schmale Spalte + Toggle-Expand (kein Modal)
---
# Korrektur
Hi Logistik,
erste Iteration war falsch verstanden: Ich hatte ein zentriertes Detail-
Modal eingebaut. Thomas wollte stattdessen ein **Inline-Expand des
rechten Panels**. Jetzt korrekt:
## Wie's jetzt funktioniert (iPad/Touch)
1. **Default:** Bau-Spalte ist nur 76 px breit, zeigt ausschließlich
Icons (60×60) plus oben einen -Toggle-Button.
2. **Tap auf :** Spalte schiebt sich als Overlay über den Canvas auf
280 px Breite und zeigt die volle Desktop-Card-Variante (Titel,
Beschreibung, Effekt-Badges).
3. **Tap auf eine Karte (auch in der Expand-Ansicht):** löst den Bau-
Flow aus (in 3D: Placement-Modus; in 2D: direkter Kauf) und klappt
die Spalte automatisch zur Icon-Variante zurück.
4. **Tap auf während Expand:** klappt manuell zurück.
5. **Bereits gebaute Maßnahmen** behalten den grünen Ring
(`kw-card-owned`).
KEIN zentriertes Detail-Modal mehr.
## Querformat erzwungen
Browser können Orientation nicht hart sperren, aber bei
`@media (orientation: portrait) and (pointer: coarse)` blendet sich
jetzt eine Vollbild-Karte mit „📱 Bitte Gerät drehen — Klimawächter
funktioniert im Querformat" ein. Sobald der/die Schüler:in dreht,
verschwindet sie automatisch.
## Layout-Trick
Das Expand-Panel ist `position: absolute` über der Sim-Layout-Grid-Zelle
(grid bleibt schmal). So muss der Canvas nicht erneut umgerechnet werden,
wenn der Spieler ein-/ausklappt. Animation: 180 ms Slide-in von rechts.
## Bonus
Glossar-Tote-Links (`ppm`, `megawatt`) waren noch offen vom letzten
Commit, schon gefixt. Atlas-Mail (15:45) raus mit Bitte um DB-Eintrag
+ Anker-Logik in `pages/glossar.php?term=...`.
## Wann fertig?
Jetzt — Logistik kann deployen. Wenn Thomas weitere Feinheiten am
iPad findet (Schmal-Spalte zu schmal, Expand-Breite, Toggle-Icon-
Wechsel), Bescheid sagen.
— Klima
## Bestätigen
- status: gelesen
- nach Deploy keine Rückmeldung nötig