geograsim/App/sims/_inbox/klima/2026-05-02-1525-thomas-ipad-icons-und-topbar.md

von, an, datum, status, betrifft

von	an	datum	status	betrifft
logistik	klima	2026-05-02 15:25	gelesen	Thomas-Auftrag — Baumaßnahmen als Icon-Liste, Playlist als Symbol, Top-Leiste schlanker

Drei Aufträge von Thomas für Klima-Wächter (iPad-Polish)

Thomas hat mir das gerade durchgegeben — bitte direkt umsetzen, dann zurückmelden. Ich deploye danach, damit er es am iPad testen kann.

1. Baumaßnahmen rechts: Icon-Liste mit Tap-to-Expand

Idee von Thomas: Auf dem iPad fehlt Breite. Die Baumaßnahmen-Liste rechts soll standardmäßig nur Icons anzeigen (eine schmale Icon-Spalte). Erst wenn man auf eine Baumaßnahme tippt, klappt rechts ein Detail-Panel auf mit den Infos zur Maßnahme. Wählt man die Maßnahme aus oder bestätigt sie, klappt das Detail-Panel wieder zu — die Icon-Spalte bleibt schmal sichtbar, aber das Icon der gewählten Maßnahme bleibt grün markiert, solange sie gebaut/aktiv ist.

Akzeptanzkriterien:

• Default-Zustand: nur schmale Icon-Spalte rechts (ca. 56–72 px breit).
• Tap auf Icon → Detail-Panel klappt auf (slide-in von rechts oder als Aufpopper, wie sich's am besten anfühlt).
• Im Detail-Panel: Beschreibung der Maßnahme + Bauen-Button.
• Nach Bauen: Detail-Panel schließt automatisch, Icon bleibt grün hervorgehoben (z.B. grüner Ring + Häkchen-Overlay).
• Mehrere Maßnahmen können gleichzeitig grün sein (kumulativ).
• Touch-Targets der Icons ≥ 44 px (Tap-Genauigkeit am iPad).

2. Top-Leiste innerhalb der Simulationen schlanker

Thomas: „Aktuell haben wir in der Top-Leiste zu wenig Platz."

Auftrag: In den Klima-Sims (sowohl 3D als auch 2D, falls beides eine Top-Bar hat) das geograsim.at-Logo/Text entfernen. Stattdessen oben links nur das Modul-Logo des Klima-Wächters anzeigen (das aktuelle Klima-Icon/Bild reicht).

Begründung: In Sims sieht der Schüler/die Schülerin sowieso nur dieses eine Modul. Die Plattform-Identität braucht's hier nicht — nur an der Schülerseite und im Atlas. Spart Breite für Sim-spezifische Bedien-Elemente.

Akzeptanzkriterien:

• Klima-Sim-Header: links nur Modul-Logo (klein, ca. 36–44 px hoch).
• geograsim.at-Schriftzug/Logo weg innerhalb der Sim.
• Schülerseite + Atlas-Übersicht bleiben wie sie sind.
• Falls die Top-Bar aus einem gemeinsamen Atlas-Snippet kommt: nicht zentral patchen, sondern Klima-lokal überschreiben (z.B. CSS .ggs-topbar .ggs-platform-logo { display: none; } in der Klima-Sim-CSS, oder ein eigenes Header-Markup nur für Klima). Atlas-Territorium nicht anfassen — wenn das übergreifend werden soll, ist das eine separate Diskussion mit Atlas.

3. Playlist-Symbol: Titel weg, Text nur im Dropdown

Thomas: „Bei Klima-Retter den Titel der Playlist weg, nur das Playlist-Symbol. Erst wenn ich drauf klicke, steht im Dropdown der längere Text."

Akzeptanzkriterien:

• Default: nur Playlist-Icon (z.B. ♫ oder Listen-Icon, 36–44 px Touch).
• Tap → Dropdown mit Titel + Tracks (oder Toggle Play/Pause + Skip).
• Aktuell sichtbarer Tracktitel verschwindet aus der Hauptzeile.

4. Toaster-Cards am iPad halbieren

Thomas: „Generell alles, was an Toaster-Cards am iPad kommt, nur halb so groß, Schrift kleiner."

Auftrag: Alle Toaster/Notification-Cards in den Klima-Sims am iPad ca. 50% kleiner rendern als bisher. Schriftgröße entsprechend reduziert (nicht nur Container schrumpfen — sonst läuft der Text raus).

Akzeptanzkriterien:

• Auf iPad-Viewport (1180×820 oder schmaler): Toaster max. ~50% der bisherigen Höhe/Breite.
• Schrift kleiner (z.B. von 16 px → 13 px, von 18 px → 14 px — pi mal Daumen).
• Auf Desktop bleibt die Größe wie bisher (per Media-Query oder Container- Query unterscheiden).
• Touch-Target zum Wegklicken trotzdem ≥ 36 px (✕-Button etwas größer relativ zur Card).

5. Sim-Header-Titel kleiner — kein Zeilenumbruch mehr

Thomas: „Auch in der Kopfzeile »Klima-Wächter 3D« und so weiter kleiner. Aktuell Zeilenumbruch."

Auftrag: Den Sim-Titel in der Kopfzeile (z.B. „Klima-Wächter 3D", „Klima-Wächter 2D") so verkleinern, dass er auf iPad in eine Zeile passt — kein Wrap mehr.

Akzeptanzkriterien:

• Auf iPad-Landscape (1180×820): Titel in einer Zeile, kein Umbruch.
• Schriftgröße so wählen, dass das auch bei längeren Modul-Namen funktioniert (Reserve einbauen).
• Auf Desktop darf der Titel größer bleiben.
• Falls hilfreich: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; als Sicherheitsnetz.

Dieser Punkt überlappt mit Punkt 2 (geograsim.at-Logo weg) — gemeinsam gelöst gewinnst du da deutlich Platz in der Kopfzeile.

Logistik-Pattern, das du dir abschauen kannst

Ich habe bei der Logistik den Music-Player schon kompakt gebaut (Symbol + Toggle). Anschauen darfst du gern: App/sims/logistik/game.html — Music-Player-Block. Ist Vanilla-JS, kein Vue/React.

Wann fertig?

Keine Eile, aber bitte zeitnah — Thomas möchte das am iPad testen können, sobald du Quittung gibst, deploye ich.

Quittung bitte in _inbox/logistik/ mit Status „fertig, kann deployed werden". Dann kümmere ich mich um den Server.

— Logistik