docs: Frontend-Overhaul-Design-Spec hinzugefügt
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Alwin
parent
15fe9580f7
commit
3bdddf69c6
1 changed files with 190 additions and 0 deletions
190
docs/superpowers/specs/2026-03-24-frontend-overhaul-design.md
Normal file
190
docs/superpowers/specs/2026-03-24-frontend-overhaul-design.md
Normal file
|
|
@ -0,0 +1,190 @@
|
|||
# Frontend Overhaul Design — MORZ Infoboard
|
||||
|
||||
**Date:** 2026-03-24
|
||||
**Status:** Approved
|
||||
**Scope:** All server-rendered HTML templates in `server/backend/internal/httpapi/`
|
||||
|
||||
---
|
||||
|
||||
## Summary
|
||||
|
||||
Overhaul the frontend of the MORZ Infoboard management UI to be professional, visually polished, and fun to use — while keeping the Go server-side rendering architecture and Bulma CSS framework intact. The MORZ red accent color anchors the brand identity throughout. Tenant and screen-user views are simplified to be idiot-proof; the admin section targets computer-literate users. The playlist editor becomes more interactive with inline editing and no-reload updates.
|
||||
|
||||
---
|
||||
|
||||
## 1. Design Tokens & Global Styles
|
||||
|
||||
A shared `<style>` block (or inline in each template) provides CSS custom properties overriding Bulma defaults:
|
||||
|
||||
| Token | Value | Usage |
|
||||
|---|---|---|
|
||||
| `--morz-red` | `#E30613` | Primary accent: buttons, active tabs, badges, focus rings |
|
||||
| `--morz-red-dark` | `#B8000F` | Hover/active state for red elements |
|
||||
| `--bg` | `#F7F8FA` | Page background |
|
||||
| `--surface` | `#FFFFFF` | Cards, panels |
|
||||
| `--shadow` | `0 1px 4px rgba(0,0,0,.08)` | Card elevation |
|
||||
| `--nav-bg` | `#1A1A2E` | Top navbar background |
|
||||
| `--radius-card` | `8px` | Card border radius |
|
||||
| `--radius-btn` | `6px` | Button border radius |
|
||||
|
||||
**Typography:** `system-ui, -apple-system, "Segoe UI", sans-serif` — no web font load, familiar, fast.
|
||||
|
||||
**Bulma overrides:** Set `--bulma-primary` to `--morz-red` so all Bulma primary-colored components (buttons, links, focus) automatically pick up the brand color.
|
||||
|
||||
---
|
||||
|
||||
## 2. Navigation & Layout
|
||||
|
||||
### Top Navbar (all views)
|
||||
- Background: `#1A1A2E` (charcoal)
|
||||
- Left: "**MORZ** Infoboard" wordmark — "MORZ" in MORZ red, "Infoboard" in white
|
||||
- Right: role-dependent links (admin: "Diagnose" link) + logout button (outlined white, small)
|
||||
- Mobile: hamburger collapse
|
||||
|
||||
### Admin layout
|
||||
- Max-width container: `960px`, generous padding
|
||||
- Tab navigation: underline style (red 3px underline on active tab, not Bulma boxed tabs)
|
||||
|
||||
### Tenant/Screen-user layout
|
||||
- Same navbar without Diagnose link
|
||||
- Single-focus pages — no tabs where avoidable
|
||||
|
||||
### Responsive
|
||||
- Cards go single-column below 768px
|
||||
- Manage page: two-column layout stacks vertically on mobile
|
||||
|
||||
---
|
||||
|
||||
## 3. Login Page
|
||||
|
||||
- Full-height centered layout, off-white background
|
||||
- Card: white, `box-shadow`, `border-radius: 8px`, **4px top border in MORZ red**
|
||||
- Above form: "**MORZ** Infoboard" heading — "MORZ" in red
|
||||
- Fields: clean, red focus ring (`outline: 2px solid var(--morz-red)`)
|
||||
- Submit button: solid MORZ red, full-width, `border-radius: 6px`
|
||||
- Error: soft red background banner inside the card (no separate notification)
|
||||
- Password toggle: eye icon preserved
|
||||
|
||||
---
|
||||
|
||||
## 4. Admin Dashboard
|
||||
|
||||
### Screens Tab
|
||||
- Replaces plain striped table with a responsive card grid (3-col desktop, 2-col tablet, 1-col mobile)
|
||||
- Each screen card contains:
|
||||
- Name (bold, `1rem`)
|
||||
- Slug (monospace, muted gray)
|
||||
- Orientation badge (pill: "Querformat" / "Hochformat")
|
||||
- Online status dot (green/yellow/red)
|
||||
- Action buttons: "Playlist" (primary red, small) + "Löschen" (danger outline, small)
|
||||
- Header row above grid: "Neuer Bildschirm" button (red) + "Provisionieren" button (outlined)
|
||||
|
||||
### Users Tab
|
||||
- Stays table-based (dense data, admin-appropriate)
|
||||
- Better spacing, clear "Neuer Benutzer" button top-right
|
||||
- Per-screen user modal: visually cleaned up, same functionality
|
||||
|
||||
### Modals
|
||||
- Existing delete-confirmation and screen-users modals retained, visual polish only
|
||||
- Cards use `--radius-card`, header uses charcoal background
|
||||
|
||||
### Toast Notifications
|
||||
- Existing JS toast system retained
|
||||
- Style update: rounded pill (`border-radius: 24px`), subtle shadow, slides in from top-right with CSS transition
|
||||
|
||||
---
|
||||
|
||||
## 5. Manage / Playlist Editor
|
||||
|
||||
The primary daily-use screen. Two-column desktop layout, stacked on mobile.
|
||||
|
||||
### Left Panel — Playlist (~60% width)
|
||||
- Header: screen name + orientation icon, back-link (← Dashboard or ← Admin), screen-switcher dropdown if user has multiple screens
|
||||
- Each playlist item is a draggable card:
|
||||
- Left: drag handle (⠿ icon, cursor grab)
|
||||
- Type icon (from existing `typeIcon` template func)
|
||||
- **Title**: click to edit inline (contenteditable or small input, saves on blur via fetch POST)
|
||||
- **Duration**: click to edit inline (number input, saves on blur)
|
||||
- **Enabled toggle**: pill switch (green=on, gray=off), instant toggle via fetch POST
|
||||
- **Validity dates**: collapsed by default, expand with a chevron; date inputs shown when expanded
|
||||
- Delete button: appears on card hover (right side, red icon)
|
||||
- Disabled items: 50% opacity
|
||||
- Drag-reorder: SortableJS (already bundled at `/static/Sortable.min.js`), sends reorder fetch on drop
|
||||
- Inline save confirmation: subtle green checkmark icon fades in/out next to the field
|
||||
|
||||
### Right Panel — Media Library (~40% width)
|
||||
- Upload section: collapsed by default, expand with "+ Medium hinzufügen" button; contains drag-and-drop zone (dashed border) + file picker fallback + URL input for web type
|
||||
- Asset grid: cards with thumbnail (image/video) or type icon (PDF/web), title, type badge
|
||||
- Per-card CTA: "Hinzufügen" (red button) → becomes "✓ Hinzugefügt" (gray, disabled) if already in playlist
|
||||
- Delete asset: small trash icon on card hover
|
||||
|
||||
### Interactions (no page reloads)
|
||||
- Toggle enabled → `fetch POST /manage/{slug}/items/{id}/update`
|
||||
- Inline title/duration edit → `fetch POST` on blur
|
||||
- Reorder → `fetch POST /manage/{slug}/reorder`
|
||||
- Add to playlist → standard form POST (redirect back, which reloads — acceptable)
|
||||
- All other destructive actions retain redirect-based flow for safety
|
||||
|
||||
---
|
||||
|
||||
## 6. Tenant Dashboard
|
||||
|
||||
- Replaces two-tab layout with a single-page card-first design
|
||||
- **Screens section**: large, touch-friendly cards — screen icon, name, status dot, single CTA "Playlist bearbeiten →" (red)
|
||||
- **Media section**: below screens, or accessible via a simple toggle — drag-and-drop upload zone (dashed border), asset grid below
|
||||
- No dense tables anywhere
|
||||
- Status dots live-updated via `setInterval` fetch to player status API
|
||||
|
||||
---
|
||||
|
||||
## 7. Screen Overview (screen_users with multiple screens)
|
||||
|
||||
- Full-page grid of large tappable screen cards
|
||||
- Each card: orientation icon (large), screen name, status dot
|
||||
- One tap → direct link to `/manage/{slug}`
|
||||
- No other UI elements — maximum simplicity
|
||||
|
||||
---
|
||||
|
||||
## 8. Provision Wizard
|
||||
|
||||
Visual polish only, no functional changes:
|
||||
- Step numbers: circles in MORZ red
|
||||
- Code blocks: dark terminal style (already present, refine padding/font)
|
||||
- Copy buttons: icon-only with tooltip, confirmation checkmark on click
|
||||
- Completion card: prominent green checkmark, "Playlist befüllen →" CTA in red
|
||||
|
||||
---
|
||||
|
||||
## 9. Status Indicators
|
||||
|
||||
Live status dots used across all views (Tenant dashboard, Screen overview, Admin screen cards):
|
||||
- Green: online (last heartbeat < 2 min)
|
||||
- Yellow: stale (< 10 min)
|
||||
- Red: offline (> 10 min or never seen)
|
||||
- Implementation: small `setInterval` (30s) fetches `/api/player-status/{slug}` per visible screen and updates dot color
|
||||
|
||||
---
|
||||
|
||||
## Architecture Notes
|
||||
|
||||
- All templates remain in Go `const` string variables in their respective `templates.go` files
|
||||
- No new build step, no npm, no bundler
|
||||
- Bulma CDN link replaced with local `/static/bulma.min.css` (already present)
|
||||
- Bulma variable overrides via CSS custom properties in each template's `<style>` block
|
||||
- SortableJS already available at `/static/Sortable.min.js`
|
||||
- Inline JS kept minimal and vanilla — no new JS libraries introduced
|
||||
- CSRF tokens flow unchanged through all form POST operations
|
||||
- All existing URL routes and redirect flows preserved exactly
|
||||
|
||||
---
|
||||
|
||||
## Files to Modify
|
||||
|
||||
| File | Changes |
|
||||
|---|---|
|
||||
| `internal/httpapi/manage/templates.go` | `loginTmpl`, `adminTmpl`, `manageTmpl`, `screenOverviewTmpl`, `provisionTmpl` |
|
||||
| `internal/httpapi/tenant/templates.go` | `tenantDashTmpl` |
|
||||
| `internal/httpapi/manage/ui.go` | Inline JS fetch handlers for playlist inline editing (no new Go handlers needed — existing endpoints are sufficient) |
|
||||
|
||||
No database changes. No new API endpoints needed for the visual overhaul (existing update/reorder endpoints cover the inline editing interactions).
|
||||
Loading…
Add table
Reference in a new issue