From 2c0ab79dcd8af74bab69947328740932073cd974 Mon Sep 17 00:00:00 2001 From: Richard Date: Fri, 11 Sep 2026 10:33:41 +0200 Subject: [PATCH] WebUI-Kopfleiste: Aufklappmenues statt elf Tabs Umsetzung von #541, folgt auf #532. Elf Tabs nebeneinander waren nicht mehr zu ueberblicken. Die Leiste hat jetzt vier Eintraege, gruppiert nach dem, was man dort tut: - Dashboard - Analytics: Analytics, Accounting, Supervisor - Module: Moduleinstellungen (die allgemeine Modulansicht), danach alle Module - Einstellungen: Einstellungen, Jobs, Konten, Terminal / Logs Supervisor und Accounting stehen unter Analytics und zusaetzlich in der Modulliste, weil dort alle Module stehen sollen. Hervorgehoben wird das Oberelement nur an ihrem Hauptplatz (Analytics); der zweite Zugang traegt data-secondary. Sonst leuchteten bei geoeffnetem Supervisor zwei Menues. switchView() findet den aktiven Eintrag jetzt ueber data-view statt ueber eine Teilzeichenkette im onclick-Attribut. Das alte Verfahren hing am Zufall der Namen: Eine Ansicht, deren Name in einer anderen enthalten ist, haette beide markiert. Die Modulliste zeigt den Zustand aus /api/modules: Ein deaktiviertes Modul erscheint ausgegraut mit "deaktiviert" und ist nicht anklickbar, statt in eine leere Ansicht zu fuehren. Ein Modul, das der Server fuehrt, fuer das es im WebUI aber keine Ansicht gibt, wird mit "keine Ansicht" gelistet. Bedienbar mit Maus und Tastatur: Klick ausserhalb und Esc schliessen (Esc gibt den Fokus ans Oberelement zurueck), Pfeil nach unten oeffnet und springt in das Menue, Pfeiltasten laufen um und ueberspringen deaktivierte Eintraege, Tab verlaesst das Menue. aria-haspopup, aria-expanded und aria-current sind gesetzt. Unter 760 px haengen die Menues an der ganzen Leiste statt am Eintrag. Bei 400 px ragte "Module" sonst 35 px ueber den rechten Rand. Ein Nachmessen per Skript taugt dagegen nicht: In der Mobilansicht waechst der Layout-Viewport mit dem Ueberstand mit, und die Messung meldet genau dann "passt". Die Modulansicht heisst jetzt wie ihr Menueeintrag "Moduleinstellungen". Geprueft auf der Linux-Test-VM im Browser: Alle 12 Eintraege schalten die richtige Ansicht und heben das richtige Oberelement hervor, das Menue schliesst danach; Tastaturbedienung, deaktiviertes und unbekanntes Modul (simuliert) verhalten sich wie beschrieben. Vermessen bei 400, 700, 768 und 1024 px: kein Menue ragt aus dem Fenster, die Seite scrollt nie waagerecht. 556 von 556 Tests bestanden. Co-Authored-By: Claude Opus 5 --- src/PolyTrader.Web/wwwroot/css/app.css | 141 ++++++++++++++++++++++++ src/PolyTrader.Web/wwwroot/index.html | 61 ++++++++--- src/PolyTrader.Web/wwwroot/js/app.js | 146 ++++++++++++++++++++++++- 3 files changed, 331 insertions(+), 17 deletions(-) diff --git a/src/PolyTrader.Web/wwwroot/css/app.css b/src/PolyTrader.Web/wwwroot/css/app.css index ec91599..9b782ee 100644 --- a/src/PolyTrader.Web/wwwroot/css/app.css +++ b/src/PolyTrader.Web/wwwroot/css/app.css @@ -94,6 +94,147 @@ body { background: var(--accent-soft); } +/* Aufklappmenues der Kopfleiste (#541) */ +.nav-dropdown { + position: relative; +} + +.nav-dropdown-toggle { + display: inline-flex; + align-items: center; + gap: 7px; +} + +/* Winkel statt Zeichen: "▾" sitzt je nach Schrift unterschiedlich hoch. */ +.nav-dropdown-toggle::after { + content: ""; + width: 6px; + height: 6px; + border-right: 1.5px solid currentColor; + border-bottom: 1.5px solid currentColor; + transform: translateY(-2px) rotate(45deg); + transition: transform 0.15s; +} + +.nav-dropdown-toggle[aria-expanded="true"]::after { + transform: translateY(1px) rotate(225deg); +} + +.nav-dropdown-toggle[aria-expanded="true"]:not(.active) { + color: var(--text); + background: var(--surface-alt); +} + +.nav-menu { + position: absolute; + top: calc(100% + 6px); + left: 0; + min-width: 220px; + max-width: calc(100vw - 16px); + display: flex; + flex-direction: column; + gap: 1px; + padding: 6px; + background: var(--card); + border: 1px solid var(--divider); + border-radius: 8px; + box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45); + z-index: 200; +} + +/* Ohne diese Regel gewinnt display:flex gegen das hidden-Attribut. */ +.nav-menu[hidden] { + display: none; +} + +.nav-menu-group { + display: flex; + flex-direction: column; + gap: 1px; +} + +.nav-menu-item { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + width: 100%; + padding: 8px 10px; + background: transparent; + border: none; + border-radius: 6px; + color: var(--text); + font: inherit; + font-size: 14px; + text-align: left; + white-space: nowrap; + cursor: pointer; +} + +.nav-menu-item:hover:not(:disabled) { + background: var(--surface-alt); +} + +.nav-menu-item:focus-visible { + outline: 2px solid var(--accent); + outline-offset: -2px; +} + +.nav-menu-item.active { + color: var(--accent); + background: var(--accent-soft); +} + +.nav-menu-item:disabled { + color: var(--muted); + cursor: not-allowed; + opacity: 0.7; +} + +.nav-menu-hint { + font-size: 11px; + color: var(--muted); +} + +.nav-menu-sep { + height: 1px; + margin: 5px 4px; + background: var(--border); +} + +.nav-menu-label { + padding: 4px 10px 2px; + font-size: 11px; + font-weight: 600; + letter-spacing: 0.04em; + text-transform: uppercase; + color: var(--muted); +} + +/* Schmale Fenster: Ein Menue, das am Oberelement klebt, ragt dort ueber den rechten Rand - + bei 400 px stand "Module" 35 px heraus. Nachmessen per Skript taugt als Abhilfe nicht: + Auf Mobilgeraeten waechst der Layout-Viewport mit dem Ueberstand mit, und die Messung meldet + genau dann "passt". Deshalb haengen die Menues hier an der ganzen Leiste statt am einzelnen + Eintrag. Ab 760 px passt die angeheftete Form: gemessen bei 768 px endet das aeusserste + Menue bei 701 px. */ +@media (max-width: 760px) { + .header-nav { + position: relative; + } + + .nav-dropdown { + position: static; + } + + .nav-menu { + left: 0; + right: 0; + top: calc(100% + 2px); + min-width: 0; + max-width: none; + } +} + .header-actions { display: flex; align-items: center; diff --git a/src/PolyTrader.Web/wwwroot/index.html b/src/PolyTrader.Web/wwwroot/index.html index 1d1e936..a35cad7 100644 --- a/src/PolyTrader.Web/wwwroot/index.html +++ b/src/PolyTrader.Web/wwwroot/index.html @@ -14,18 +14,53 @@ WebGUI -