From 883a8146c5e28c5a1ecb77ca84e7c0d433e9732c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesko=20Ansch=C3=BCtz?= Date: Mon, 23 Mar 2026 10:55:15 +0100 Subject: [PATCH] UX Block 1: Flash-Messages, Screen-Status, Responsive-Tabellen, Navbar-Burger MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Flash-Messages nach allen Manage-Aktionen (Upload, Löschen, Speichern, Hinzufügen) - Screen-Online/Offline-Status als farbiger Punkt in Admin-Tabelle - overflow-x Wrapper für alle Tabellen (Admin, Playlist, Medienbibliothek) - Navbar-Burger für mobile Viewports in Admin und Manage - UX-Gestaltungsplan als Sektion in TODO.md eingetragen Co-Authored-By: Claude Opus 4.6 --- TODO.md | 25 ++++ .../internal/httpapi/manage/templates.go | 128 +++++++++++++++++- server/backend/internal/httpapi/manage/ui.go | 14 +- 3 files changed, 158 insertions(+), 9 deletions(-) diff --git a/TODO.md b/TODO.md index 7d377ab..c8ef7ef 100644 --- a/TODO.md +++ b/TODO.md @@ -134,6 +134,31 @@ - [ ] Update- und Release-Prozess festlegen - [ ] Langfristige Wayland-Neubewertung fuer spaetere Version vormerken +## UX-Verbesserungen (Gestaltungsplan) + +### Hohe Prioritaet + +- [ ] Flash-Messages nach Aktionen in Manage-UI (Upload, Loeschen, Speichern) — Feedback fuer den Nutzer +- [ ] Screen-Online/Offline-Status in Admin-Tabelle anzeigen (aus /status-Endpoint befuellen) +- [ ] Playlist-Tabelle in overflow-x Wrapper einwickeln (Responsive auf kleinen Screens) + +### Mittlere Prioritaet + +- [ ] Loesch-Bestaetigung: Bulma-Modal statt browser-nativer confirm()-Dialog +- [ ] Status-Page: Sprache von Englisch auf Deutsch vereinheitlichen +- [ ] Status-Page: Relative Zeitstempel statt RFC3339 ("vor 2 Minuten") +- [ ] Querlinks zwischen Admin-UI und Status-Page (Navigation) +- [ ] Bulma und SortableJS als lokale Assets einbetten statt CDN +- [ ] Player-UI: CSS-Transitions fuer sanfte Content-Wechsel (Fade statt abrupt) +- [ ] Player-UI: Erweitertes Sysinfo-Overlay (aktueller Titel, Playlist-Laenge) +- [ ] Aria-Labels fuer Loesch-Buttons und Drag-Handles (Accessibility) + +### Niedrige Prioritaet + +- [ ] Upload-Fortschrittsbalken in Manage-UI +- [ ] vars.yml Download-Button in Provision-UI statt Copy-Paste +- [ ] Toggle-Switch statt Ja/Nein-Select fuer Enabled-Feld + ## Querschnittsthemen - [ ] Datensicherung fuer Datenbank und Medien einplanen diff --git a/server/backend/internal/httpapi/manage/templates.go b/server/backend/internal/httpapi/manage/templates.go index d671750..c5e8fc2 100644 --- a/server/backend/internal/httpapi/manage/templates.go +++ b/server/backend/internal/httpapi/manage/templates.go @@ -141,23 +141,74 @@ const adminTmpl = ` -