Redesign: gemeinsames Design-System für Frontend und Backend #1

Merged

friloo merged 2 commits from redesign/design-system into main 2026-09-23 06:16:42 +00:00

Conversation 0 Commits 2 Files changed 45 +2461 -1744

friloo commented 2026-09-22 20:34:12 +00:00

Owner

Copy link

Frontend, Login/Installer/Updater und der komplette Admin-Bereich nutzen jetzt ein Stylesheet (assets/global.css) statt pro Seite dupliziertem Inline-CSS.

Design-System

• Tokens für Flächen, Text, Linien, Marke, Status, Radien, Schatten und Layout-Maße
• Dark Mode ausschließlich über Tokens – keine !important-Overrides mehr
• Komponenten: Buttons, Formularfelder, Cards, Tabellen, Badges, Alerts, Tabs, Pagination, Modals, Toasts, Statistik-Kacheln, Empty States
• Schrift Inter mit System-Fallback

Oberfläche

• Neue Admin-Shell: durchgehende Sidebar mit Marke, gruppierter Navigation und Benutzerbereich; schlanke Topbar mit Breadcrumb
• Dashboard mit ruhigen KPI-Kacheln (Farbe trägt das Icon-Chip) und Charts in Theme-Farben
• Öffentliche Voucher-Seite: App-Topbar, klare Formularstruktur, Ticket-Darstellung des Codes mit QR
• Login/Passwort/2FA: zweispaltiges Auth-Layout bzw. Fokus-Karten
• Updater und Wartungsmodus im gleichen Look (Wartungsseite bleibt eigenständig ohne externe Abhängigkeiten)
• Emoji-Icons in der UI durch Font-Awesome-Icons ersetzt

Nebenbei behoben

• Falscher SRI-Hash blockierte qrcode.min.js – QR-Codes wurden auf der Voucher-Seite und bei der 2FA-Einrichtung nie gerendert
• assets/global.css wurde in mehreren Admin-Seiten über einen falschen Pfad eingebunden ($adminBase = '' statt '../')
• TinyMCE lädt ohne API-Key die GPL-Variante von cdnjs – kein "valid API key required"-Banner mehr
• Tabellen in Cards scrollen horizontal statt zu überlaufen

Screenshots

Alle Screenshots in docs/screenshots neu aus der laufenden Anwendung erstellt (1200 px @2×), README um den Abschnitt „Design-System" ergänzt und auf Version 2.5.0 gehoben.

🤖 Generated with Claude Code

Frontend, Login/Installer/Updater und der komplette Admin-Bereich nutzen jetzt **ein** Stylesheet (`assets/global.css`) statt pro Seite dupliziertem Inline-CSS. ## Design-System - Tokens für Flächen, Text, Linien, Marke, Status, Radien, Schatten und Layout-Maße - Dark Mode ausschließlich über Tokens – keine `!important`-Overrides mehr - Komponenten: Buttons, Formularfelder, Cards, Tabellen, Badges, Alerts, Tabs, Pagination, Modals, Toasts, Statistik-Kacheln, Empty States - Schrift Inter mit System-Fallback ## Oberfläche - Neue Admin-Shell: durchgehende Sidebar mit Marke, gruppierter Navigation und Benutzerbereich; schlanke Topbar mit Breadcrumb - Dashboard mit ruhigen KPI-Kacheln (Farbe trägt das Icon-Chip) und Charts in Theme-Farben - Öffentliche Voucher-Seite: App-Topbar, klare Formularstruktur, Ticket-Darstellung des Codes mit QR - Login/Passwort/2FA: zweispaltiges Auth-Layout bzw. Fokus-Karten - Updater und Wartungsmodus im gleichen Look (Wartungsseite bleibt eigenständig ohne externe Abhängigkeiten) - Emoji-Icons in der UI durch Font-Awesome-Icons ersetzt ## Nebenbei behoben - Falscher SRI-Hash blockierte `qrcode.min.js` – QR-Codes wurden auf der Voucher-Seite und bei der 2FA-Einrichtung nie gerendert - `assets/global.css` wurde in mehreren Admin-Seiten über einen falschen Pfad eingebunden (`$adminBase = ''` statt `'../'`) - TinyMCE lädt ohne API-Key die GPL-Variante von cdnjs – kein "valid API key required"-Banner mehr - Tabellen in Cards scrollen horizontal statt zu überlaufen ## Screenshots Alle Screenshots in `docs/screenshots` neu aus der laufenden Anwendung erstellt (1200 px @2×), README um den Abschnitt „Design-System" ergänzt und auf Version 2.5.0 gehoben. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

friloo added 1 commit 2026-09-22 20:34:12 +00:00

Redesign: gemeinsames Design-System für Frontend und Backend ... 498c7e28e0

Frontend, Login/Installer/Updater und der komplette Admin-Bereich nutzen
jetzt ein einziges Stylesheet (assets/global.css) statt pro Seite
dupliziertem Inline-CSS.

Design-System
- Tokens für Flächen, Text, Linien, Marke, Status, Radien, Schatten und
  Layout-Maße; Dark Mode ausschließlich über Tokens (keine !important-
  Overrides mehr)
- Komponenten: Buttons, Formularfelder, Cards, Tabellen, Badges, Alerts,
  Tabs, Pagination, Modals, Toasts, Statistik-Kacheln, Empty States
- Schrift Inter mit System-Fallback

Oberfläche
- Admin-Shell neu: durchgehende Sidebar mit Marke, gruppierter Navigation
  und Benutzerbereich; schlanke Topbar mit Breadcrumb
- Dashboard: ruhige KPI-Kacheln mit Icon-Chips, Charts an Theme-Farben
  gekoppelt
- Öffentliche Voucher-Seite: App-Topbar, klare Formularstruktur und
  Ticket-Darstellung des erstellten Codes inkl. QR-Code
- Login/Passwort/2FA: zweispaltiges Auth-Layout bzw. Fokus-Karten
- Updater und Wartungsmodus im gleichen Look (Wartungsseite bleibt
  bewusst eigenständig ohne externe Abhängigkeiten)
- Emoji-Icons in der UI durch Font-Awesome-Icons ersetzt

Nebenbei behoben
- Falscher SRI-Hash blockierte qrcode.min.js – QR-Codes wurden auf der
  Voucher-Seite und bei der 2FA-Einrichtung nie gerendert
- assets/global.css wurde in mehreren Admin-Seiten über einen falschen
  Pfad eingebunden ($adminBase = '' statt '../')
- TinyMCE lädt ohne API-Key jetzt die GPL-Variante von cdnjs – kein
  "valid API key required"-Banner mehr im Einstellungs-Editor
- Tabellen in Cards scrollen horizontal statt zu überlaufen

Screenshots in docs/screenshots neu erstellt, README aktualisiert (neuer
Abschnitt "Design-System", Version 2.5.0).

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

friloo added 1 commit 2026-09-22 20:40:57 +00:00

Login-Seite individualisierbar (Branding, Texte, Hintergrund) ... 9a4b2e1cd4

Neuer Einstellungs-Tab "Login-Seite" (Administration → Einstellungen):

- Firmenname und eigenes Logo für die Anmeldeseite
- Überschrift, Beschreibungstext, Stichpunkte (eine Zeile je Punkt) und
  Fußzeile frei setzbar
- Hintergrundbild für die linke Bildspalte, alternativ Farbverlauf mit
  Farbwähler (Start-/Endfarbe) sowie einstellbarer Abdunklung für die
  Lesbarkeit auf hellen Bildern
- Bildspalte abschaltbar: dann zentrierte Anmeldekarte auf dem
  App-Hintergrund
- "Vorschau öffnen" zeigt die Login-Seite als angemeldeter Admin
  (login.php?preview=1), ohne die Sitzung zu beenden

Alle Felder sind optional; leere Werte fallen auf die bisherigen
Standardtexte und -farben zurück. Bestehende Installationen sehen
unverändert aus, es ist keine Migration nötig.

README um den Abschnitt "Login-Seite individualisieren" mit Beispiel-
Screenshots ergänzt.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

friloo merged commit ba90ffef03 into main 2026-09-23 06:16:42 +00:00

friloo referenced this pull request from a commit 2026-09-23 06:16:44 +00:00

Merge pull request 'Redesign: gemeinsames Design-System für Frontend und Backend' (#1) from redesign/design-system into main

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels

No items

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: friloo/Unifi-Voucher-Tool#1

No description provided.