sffs-tt-basel/sffs-tt-issues

Fork 0

Navbar am Handy: Hamburger-Menü statt Überlauf #99

New issue

Closed

opened 2026-10-15 17:50:40 +00:00 by claude · 3 comments

claude commented

2026-10-15 17:50:40 +00:00

Collaborator

Was: Die Menüleiste im Portal bricht am Handy nicht um. Was nicht auf den Bildschirm passt, schiebt die ganze Seite nach rechts hinaus. Man muss seitlich wischen, um die hinteren Menüpunkte, den Namen und das Benutzermenü (Passwort ändern, Abmelden) zu erreichen.

Gemessen am 15.10.2026 im Portal bei 375 px Breite (document.documentElement.scrollWidth):

Sicht	Seitenbreite heute	mit „Ersatzeinsätze“ (#20)
Captain	695 px	820 px
Spielleiter	551 px	676 px

Der Überlauf bestand schon vor dem neuen Eintrag „Ersatzeinsätze“; der macht ihn um 125 px grösser.

Vorschlag (Olli, 15.10.): Am Handy ein Hamburger-Menü. Unter einer Breite (z. B. 768 px) zeigt die Leiste nur Logo und einen Menüknopf ☰; ein Tipp öffnet die Einträge untereinander mit grossen Tippflächen, darunter Name, „Passwort ändern“, „Abmelden“. Am PC bleibt alles wie heute. Gilt für alle Sichten (Verband, Spielleiter, Captain).

Vorgehen: Erst HTML-Mockup (geschlossen und offen) zur Abnahme, gebaut nach dem Merge der Ersatzeinsätze als eigener kleiner Branch.

Mockup des heutigen Zustands: docs/mockups/navbar-handy-ueberlauf.html (lokal im Repo).

**Was:** Die Menüleiste im Portal bricht am Handy nicht um. Was nicht auf den Bildschirm passt, schiebt die ganze Seite nach rechts hinaus. Man muss seitlich wischen, um die hinteren Menüpunkte, den Namen und das Benutzermenü (Passwort ändern, Abmelden) zu erreichen. **Gemessen** am 15.10.2026 im Portal bei 375 px Breite (`document.documentElement.scrollWidth`): | Sicht | Seitenbreite heute | mit „Ersatzeinsätze“ (#20) | |---|---|---| | Captain | 695 px | 820 px | | Spielleiter | 551 px | 676 px | Der Überlauf bestand schon vor dem neuen Eintrag „Ersatzeinsätze“; der macht ihn um 125 px grösser. **Vorschlag (Olli, 15.10.):** Am Handy ein Hamburger-Menü. Unter einer Breite (z. B. 768 px) zeigt die Leiste nur Logo und einen Menüknopf ☰; ein Tipp öffnet die Einträge untereinander mit grossen Tippflächen, darunter Name, „Passwort ändern“, „Abmelden“. Am PC bleibt alles wie heute. Gilt für alle Sichten (Verband, Spielleiter, Captain). **Vorgehen:** Erst HTML-Mockup (geschlossen und offen) zur Abnahme, gebaut nach dem Merge der Ersatzeinsätze als eigener kleiner Branch. **Mockup des heutigen Zustands:** `docs/mockups/navbar-handy-ueberlauf.html` (lokal im Repo).

claude added the

Kind

Bug

label

2026-10-15 17:50:40 +00:00

claude added the

Status

In Progress

label

2026-10-17 09:47:17 +00:00

claude commented

2026-10-18 07:54:21 +00:00

Author

Collaborator

Mockup abgenommen (Olli, 18.10.2026) – docs/mockups/navbar-hamburger.html: alle Sichten jeweils geschlossen und offen, Knopf oben rechts, Menü über die ganze Breite, „← Meine Bereiche“ zuoberst.

Die drei offenen Fragen sind entschieden:

Umschaltbreite: Das Menü klappt erst unter 1280 px zu, nicht schon unter 768 px. Im Nachbau ist die breiteste Leiste (mehrere Rollen) gut 1200 px breit, die Captain-Leiste rund 1070 px. Bei 768 px müsste man also auf Tablets und kleinen Laptops weiter seitlich wischen. Die genaue Zahl wird beim Bau im echten Portal gemessen; weicht sie deutlich ab, wird vorher nachgefragt.
Tipp neben das Menü: schliesst es, so wie das heutige Benutzermenü. Die Regel „kein Dialog schliesst beim Klick daneben“ gilt für Dialoge mit Eingaben, und das Menü hat keine. Zu geht es ausserdem über „✕ Schliessen“, über Esc und durch die Wahl eines Eintrags.
Knopftext: „☰ Menü“ mit dem Wort, aufgeklappt „✕ Schliessen“. Ein Symbol allein reicht nicht.

**Mockup abgenommen (Olli, 18.10.2026)** – `docs/mockups/navbar-hamburger.html`: alle Sichten jeweils geschlossen und offen, Knopf oben rechts, Menü über die ganze Breite, „← Meine Bereiche“ zuoberst. Die drei offenen Fragen sind entschieden: 1. **Umschaltbreite:** Das Menü klappt erst **unter 1280 px** zu, nicht schon unter 768 px. Im Nachbau ist die breiteste Leiste (mehrere Rollen) gut 1200 px breit, die Captain-Leiste rund 1070 px. Bei 768 px müsste man also auf Tablets und kleinen Laptops weiter seitlich wischen. Die genaue Zahl wird beim Bau im echten Portal gemessen; weicht sie deutlich ab, wird vorher nachgefragt. 2. **Tipp neben das Menü:** schliesst es, so wie das heutige Benutzermenü. Die Regel „kein Dialog schliesst beim Klick daneben“ gilt für Dialoge mit Eingaben, und das Menü hat keine. Zu geht es ausserdem über „✕ Schliessen“, über Esc und durch die Wahl eines Eintrags. 3. **Knopftext:** „☰ Menü“ mit dem Wort, aufgeklappt „✕ Schliessen“. Ein Symbol allein reicht nicht.

claude commented

2026-10-18 08:56:11 +00:00

Author

Collaborator

Nachtrag (Olli, 18.10.2026): Die Versionsangabe kommt am PC ins Benutzermenü

Gemessen im Portal ist die breiteste PC-Leiste (mehrere Rollen, Captain-Sicht) 1306 px breit. Die Leiste hat aber nie mehr als 1280 px Platz. Darum bricht „← Meine Bereiche“ dort schon heute auf zwei Zeilen um, auch auf grossen Bildschirmen.

Entschieden: Die graue Versionsangabe (z. B. „main-3d352a5“) verschwindet aus der Leiste und steht unten im Benutzermenü als „Version …“. Die breiteste Leiste braucht dann 1208 px und passt unter der Grenze von 1280 px. Das Benutzermenü wird so breit wie sein Inhalt, damit „Passwort ändern“ nicht mehr umbricht. Die Umgebung zeigt weiterhin das Wasserzeichen (STAGING/PREVIEW). Im Handy-Menü steht die Version unter „Angemeldet als“.

Mockup: docs/mockups/navbar-versionsangabe.html. Gebaut auf feature/navbar-hamburger. E2E ist zurückgestellt, solange auf Staging getestet wird.

**Nachtrag (Olli, 18.10.2026): Die Versionsangabe kommt am PC ins Benutzermenü** Gemessen im Portal ist die breiteste PC-Leiste (mehrere Rollen, Captain-Sicht) **1306 px** breit. Die Leiste hat aber nie mehr als 1280 px Platz. Darum bricht „← Meine Bereiche“ dort schon heute auf zwei Zeilen um, auch auf grossen Bildschirmen. Entschieden: Die graue Versionsangabe (z. B. „main-3d352a5“) verschwindet aus der Leiste und steht unten im Benutzermenü als „Version …“. Die breiteste Leiste braucht dann 1208 px und passt unter der Grenze von 1280 px. Das Benutzermenü wird so breit wie sein Inhalt, damit „Passwort ändern“ nicht mehr umbricht. Die Umgebung zeigt weiterhin das Wasserzeichen (STAGING/PREVIEW). Im Handy-Menü steht die Version unter „Angemeldet als“. Mockup: `docs/mockups/navbar-versionsangabe.html`. Gebaut auf `feature/navbar-hamburger`. E2E ist zurückgestellt, solange auf Staging getestet wird.

claude commented

2026-10-18 11:10:56 +00:00

Author

Collaborator

In main seit 18.10.2026 (9a01195, ADR 0030), zur Abnahme.

Unter 1280 px Breite zeigt die Leiste nur das Logo und den Knopf „☰ Menü“. Am PC bleibt sie wie bisher, die Versionsangabe steht dort jetzt unten im Benutzermenü.

Prüfschritte (am Handy, auf Staging, sobald dort main läuft):

Mit einem Captain-Login anmelden. Oben rechts steht „☰ Menü“, die Seite lässt sich nicht mehr seitlich verschieben.
Auf „☰ Menü“ tippen: Die Einträge stehen untereinander über die ganze Breite, darunter „Angemeldet als …“, „Passwort ändern“ und „Abmelden“.
Einen Eintrag wählen, zum Beispiel „Meldungen“: Die Seite wechselt, das Menü geht zu. Erneut öffnen und daneben tippen bzw. „✕ Schliessen“ drücken: Es geht ebenfalls zu.
Menü öffnen und die Zurück-Taste des Handys drücken: Die vorige Seite erscheint, das Menü ist zu.
Mit einem Login mit mehreren Rollen in die Captain-Sicht wechseln: Im Menü steht „← Meine Bereiche“ zuoberst.

Hinweis: Staging läuft im Moment noch den Stand vor Schritt 4 (2f6e738). Schritt 4 geht erst nach dem nächsten Deploy von main.

**In `main` seit 18.10.2026** (`9a01195`, [ADR 0030](https://forgejo.mydevlab.work/olli/sffs-tt-basel/src/branch/main/docs/adr/0030-navbar-unter-1280-px-als-menue.md)), zur Abnahme. Unter 1280 px Breite zeigt die Leiste nur das Logo und den Knopf „☰ Menü“. Am PC bleibt sie wie bisher, die Versionsangabe steht dort jetzt unten im Benutzermenü. **Prüfschritte** (am Handy, auf Staging, sobald dort `main` läuft): 1. Mit einem **Captain-Login** anmelden. Oben rechts steht „☰ Menü“, die Seite lässt sich nicht mehr seitlich verschieben. 2. Auf „☰ Menü“ tippen: Die Einträge stehen untereinander über die ganze Breite, darunter „Angemeldet als …“, „Passwort ändern“ und „Abmelden“. 3. Einen Eintrag wählen, zum Beispiel „Meldungen“: Die Seite wechselt, das Menü geht zu. Erneut öffnen und daneben tippen bzw. „✕ Schliessen“ drücken: Es geht ebenfalls zu. 4. Menü öffnen und die **Zurück-Taste** des Handys drücken: Die vorige Seite erscheint, das Menü ist zu. 5. Mit einem **Login mit mehreren Rollen** in die Captain-Sicht wechseln: Im Menü steht „← Meine Bereiche“ zuoberst. Hinweis: Staging läuft im Moment noch den Stand vor Schritt 4 (`2f6e738`). Schritt 4 geht erst nach dem nächsten Deploy von `main`.

claude added

and removed

labels

2026-10-18 11:10:56 +00:00