From fd47910d092c61b93f2953e3697bbe37b6d7ff6f Mon Sep 17 00:00:00 2001 From: Florian Heinz Date: Sat, 24 Oct 2026 19:09:44 +0200 Subject: [PATCH] Refine live controls and compact show cards --- docs/ACCEPTANCE.md | 41 ++++++++---- docs/RELEASE_NOTES.md | 17 +++-- docs/STATUS.md | 12 +++- src/app.css | 83 ++++++++++++++++++++---- src/routes/live/+page.svelte | 122 ++++++++++++++++++++++++++--------- 5 files changed, 211 insertions(+), 64 deletions(-) diff --git a/docs/ACCEPTANCE.md b/docs/ACCEPTANCE.md index c3fa586..5aa7a47 100644 --- a/docs/ACCEPTANCE.md +++ b/docs/ACCEPTANCE.md @@ -466,20 +466,21 @@ ## Erweiterte Live-Steuerung 0.5.12 -| Kriterium | Stand | -| ---------------------------------------------- | ----------------------------- | -| Gemeinsame persistente Pause | implementiert, nicht geprüft | -| Abschnitts- und Gesamtreset bleiben unabhängig | implementiert, nicht geprüft | -| Gesamt-/Restzeit ohne Doppelerfassung | implementiert, nicht geprüft | -| Ende, Wiederaufnahme und neuer Lauf getrennt | implementiert, nicht geprüft | -| Privates Feld „Interaktion“ durch alle Kopien | implementiert, nicht geprüft | -| Öffentliche Positivliste unverändert | implementiert, nicht geprüft | -| Classic-Regular-Icons und Drawer-Schließen | implementiert, nicht geprüft | +| Kriterium | Stand | +| ---------------------------------------------- | ---------------------------- | +| Gemeinsame persistente Pause | implementiert, nicht geprüft | +| Abschnitts- und Gesamtreset bleiben unabhängig | implementiert, nicht geprüft | +| Gesamt-/Restzeit ohne Doppelerfassung | implementiert, nicht geprüft | +| Ende, Wiederaufnahme und neuer Lauf getrennt | implementiert, nicht geprüft | +| Privates Feld „Interaktion“ durch alle Kopien | implementiert, nicht geprüft | +| Öffentliche Positivliste unverändert | implementiert, nicht geprüft | +| Classic-Regular-Icons und Drawer-Schließen | gezielt im Browser geprüft | -Für diese Erweiterung wurden auf ausdrücklichen Auftrag keine Tests erstellt und -keine Typ-, Test-, Build-, Migrations- oder Browserläufe ausgeführt. Die oben -dokumentierten früheren Prüfungen von 0.5.12 wurden nicht als Nachweis für die -neuen Funktionen wiederverwendet. +Für die ursprüngliche Erweiterung wurden auf ausdrücklichen Auftrag zunächst +keine Prüfungen ausgeführt. Die nachfolgenden Korrekturen weisen inzwischen +Migration, Typen, Build, bestehendes Liveverhalten und die betroffenen +Oberflächen gezielt nach; die übrigen neuen Timer- und Statusfälle bleiben ohne +vollständige erneute Matrix. ## Live-500-Korrektur 0.5.12 @@ -491,3 +492,17 @@ neuen Funktionen wiederverwendet. - `npm run check`: 0 Fehler und 0 Warnungen. - `npm run test:unit -- --run src/lib/server/live.spec.ts`: 6 Tests erfolgreich. - `npm run build`: erfolgreich mit `@sveltejs/adapter-node`. + +## Live-Icons und kompakte Sendungskarten 0.5.12 + +- `npm run check`: 0 Fehler und 0 Warnungen. +- `npm run test:unit -- --run src/lib/server/live.spec.ts`: 6 Tests erfolgreich. +- `npm run build`: erfolgreich mit `@sveltejs/adapter-node`. +- Gezielter Chromium-Ablauf der Sendungsübersicht mit Desktopkalender, mobiler + Agenda und Rückkehr zur Liste: erfolgreich. +- Vollständiger bestehender Live-Regie-Ablauf einschließlich 900 × 450, + 670 × 450 und 390 × 700 Pixeln: erfolgreich; Iconleiste, Kopfhöhe, + Viewportgrenzen und horizontaler Überlauf geprüft. +- Zusätzliche visuelle Chromium-Prüfung bei 656 × 400 und 390 × 700 Pixeln: + Sendungskarte unter 130 Pixel hoch, Menü-/Ausgabe-/Timericons sichtbar und + Pausebutton wechselt bedienbar zu Fortsetzen. diff --git a/docs/RELEASE_NOTES.md b/docs/RELEASE_NOTES.md index bd18f18..1ea864a 100644 --- a/docs/RELEASE_NOTES.md +++ b/docs/RELEASE_NOTES.md @@ -12,6 +12,10 @@ Livezustände bleiben technisch getrennt. ### Highlights +- Ausgabe, Gesamtzeit, Abschnittszeit und Menü tragen in der Live-Kopfleiste + jetzt die passenden lokalen Classic-Regular-Icons. Pause beziehungsweise + Fortsetzen ist zusätzlich als direkter Iconbutton neben der Abschnittszeit + erreichbar. - Die Live-Regie verwendet die gesamte Fensterfläche ohne normale App-Seitenleiste, mobilen App-Header oder Bottomnavigation. - Zwei kompakte Kopfzeilen halten Abschnitt, „Danach“, Menü, Ausgabe, @@ -94,6 +98,9 @@ Livezustände bleiben technisch getrennt. ### Sendungsübersicht +- Sendungskarten bleiben auf kleinen Bildschirmen kompakt: Status, Titel und + Termin stehen neben den horizontal angeordneten Abschnitts- und Zeitangaben, + statt die Karte durch vollständiges Stapeln unnötig zu erhöhen. - „Liste | Kalender“ schaltet zwischen der bekannten Sendungsliste und einer Monatsansicht um; die Auswahl bleibt am angemeldeten Konto gespeichert. - Auf dem Desktop zeigt ein vollständiges Montag-bis-Sonntag-Raster alle Termine @@ -121,11 +128,11 @@ Livezustände bleiben technisch getrennt. ### Prüfung -- Für die Timer-, Sendungssteuerungs- und Interaktionserweiterung wurden auf - ausdrücklichen Auftrag keine Tests, Builds, Migrationen oder Browserprüfungen - ausgeführt. -- Die folgenden Nachweise stammen vom vorherigen 0.5.12-Stand und decken diese - Ergänzungen nicht ab. +- Die ergänzte Iconleiste, Pause/Fortsetzen und die kompakte Sendungskarte wurden + gezielt in Chromium bei 670 × 450, 390 × 700 und 656 × 400 Pixeln geprüft. + Typprüfung, sechs Live-Verhaltenstests und Produktionsbuild sind erfolgreich. +- Die vollständige Matrix wurde für diese Ergänzung nicht erneut ausgeführt; die + folgenden Gesamtnachweise stammen vom vorherigen 0.5.12-Stand. - 44 Unit- und Verhaltenstests sowie 17 Chromium-E2E-Abläufe sind erfolgreich. - Die Live-Regie wurde bei 1440 × 900, 900 × 450, 670 × 450 und 390 × 700 Pixeln mit langen Titeln, sichtbarem Regiemenü, unabhängigen Scrollflächen und diff --git a/docs/STATUS.md b/docs/STATUS.md index 8de9e72..ded0c8a 100644 --- a/docs/STATUS.md +++ b/docs/STATUS.md @@ -9,6 +9,11 @@ Etappe 6 wurde nicht begonnen. ## Live-Regie und Sendungskalender 0.5.12 +- die Live-Kopfleiste zeigt Classic-Regular-Icons für Ausgabe, Gesamtzeit, + Abschnitt, Menü und Ablauf; Pause/Fortsetzen liegt zusätzlich als direkter, + beschrifteter Iconbutton neben der Abschnittszeit +- Sendungskarten ordnen Fakten auf kleinen Bildschirmen wieder horizontal an und + vermeiden dadurch die zuvor unnötig hohe Kartenfläche - Reparaturmigration `0014_live_show_timer_repair.sql` ergänzt fehlende Gesamttimertabellen auch dann, wenn `0013` bereits in einem früheren Zwischenstand protokolliert wurde; der 500-Fehler beim Laden von `/live` ist @@ -72,9 +77,10 @@ Etappe 6 wurde nicht begonnen. Etappe 6 bleibt unverändert unbegonnen. Die bestehende lokale Prüfmatrix umfasst 44 Verhaltenstests und 17 -Chromium-Abläufe. Für die Timer-, Sendungssteuerungs- und Interaktionserweiterung -wurden auf ausdrücklichen Auftrag keine Tests, Builds oder Browserprüfungen -ausgeführt; dieser neue Stand ist daher noch nicht verifiziert. +Chromium-Abläufe. Die nachträgliche Icon-, Pause- und Kartenkorrektur wurde +zusätzlich mit Typprüfung, sechs Live-Verhaltenstests, Produktionsbuild und +gezielten Chromium-Abläufen bei 670 × 450, 390 × 700 und 656 × 400 Pixeln +geprüft. Die vollständige Matrix wurde dafür nicht erneut ausgeführt. Reales OBS, echte YouTube-/TikTok-Wiedergabe sowie Safari auf einem iOS-Gerät bleiben mangels verfügbarer Umgebung offen. diff --git a/src/app.css b/src/app.css index f4d4bb5..5589ed8 100644 --- a/src/app.css +++ b/src/app.css @@ -1057,6 +1057,13 @@ textarea:focus { text-transform: uppercase; } +.timer-label { + display: flex; + align-items: center; + justify-content: center; + gap: 0.25rem; +} + .live-output-state strong { overflow: hidden; font-size: 0.75rem; @@ -1151,6 +1158,39 @@ textarea:focus { text-align: center; } +.section-timer-control { + display: flex; + align-items: stretch; + gap: 0.3rem; +} + +.section-timer-control form { + display: flex; +} + +.live-timer-toggle { + display: grid; + width: 2.15rem; + padding: 0; + place-items: center; + border: 1px solid var(--line); + border-radius: 0.65rem; + background: color-mix(in srgb, #d65c55 12%, var(--panel-soft)); + color: #d65c55; + cursor: pointer; + font-size: 0.85rem; +} + +.live-timer-toggle.paused { + background: color-mix(in srgb, var(--accent) 10%, var(--panel-soft)); + color: var(--accent-strong); +} + +.live-timer-toggle:hover, +.live-timer-toggle:focus-visible { + border-color: currentColor; +} + .total-countdown { color: var(--text); cursor: pointer; @@ -1185,17 +1225,20 @@ textarea:focus { color: #d24d45; } -.live-output-state > span { - width: 0.5rem; - height: 0.5rem; +.live-output-state > .live-output-icon { + display: grid; + width: 1.5rem; + height: 1.5rem; flex: 0 0 auto; - border-radius: 50%; - background: var(--text-faint); + place-items: center; + border-radius: 0.45rem; + background: var(--panel-soft); + color: var(--text-faint); } -.live-output-control.active .live-output-state > span { - background: var(--accent); - box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent) 12%, transparent); +.live-output-control.active .live-output-icon { + background: color-mix(in srgb, var(--accent) 12%, var(--panel-soft)); + color: var(--accent-strong); } .live-output-control { @@ -1256,7 +1299,10 @@ textarea:focus { } .live-menu-trigger { + display: flex; width: fit-content; + align-items: center; + gap: 0.32rem; padding: 0.48rem 0.65rem; border: 1px solid var(--line); border-radius: 0.65rem; @@ -2093,6 +2139,16 @@ textarea:focus { } } +@media (max-width: 30rem) { + .live-status-row { + grid-template-columns: minmax(0, 1fr) auto auto; + } + + .live-output-control { + grid-column: 1 / -1; + } +} + @media (max-width: 23rem) { .live-context-summary { display: grid; @@ -6296,11 +6352,16 @@ textarea:focus { .show-card, .show-card-facts { align-items: flex-start; - flex-direction: column; } .show-card-facts { - width: 100%; - gap: 0.4rem; + flex-direction: row; + align-items: center; + gap: 0.7rem; + } + .show-card-facts span { + display: flex; + align-items: baseline; + gap: 0.25rem; } .show-settings-form .wide-field, .usage-edit-form .wide-field { diff --git a/src/routes/live/+page.svelte b/src/routes/live/+page.svelte index a43da41..8f65f6f 100644 --- a/src/routes/live/+page.svelte +++ b/src/routes/live/+page.svelte @@ -431,14 +431,15 @@ aria-expanded={menuOpen} onclick={toggleLiveMenu} > - Menü + + Menü
- +
Ausgabe - + {/if}
@@ -467,8 +470,14 @@ ? 'Gelaufene Gesamtzeit, zu Restzeit wechseln' : 'Geschätzte Restzeit, zu gelaufener Zeit wechseln'} > - {timerDisplay === 'elapsed' ? 'Gelaufen' : 'Restzeit'} - {formatCountdown(timerDisplay === 'elapsed' ? totalElapsedSeconds : remainingSeconds)} + {timerDisplay === 'elapsed' ? 'Gelaufen' : 'Restzeit'} + {formatCountdown( + timerDisplay === 'elapsed' ? totalElapsedSeconds : remainingSeconds + )} {#if timerDisplay === 'remaining' && data.live.remainingEstimate.unplannedSectionCount} + {data.live.remainingEstimate.unplannedSectionCount} ungeplant -
= 0} - class:overrun={hasActiveSectionTimer && sectionRemainingSeconds < 0} - class="section-countdown" - aria-live="off" - > - Abschnitt - - {#if hasActiveSectionTimer} - {sectionRemainingSeconds < 0 - ? `+${formatCountdown(Math.abs(sectionRemainingSeconds))}` - : formatCountdown(sectionRemainingSeconds)} - {:else}Kein Countdown{/if} - +
+
= 0} + class:overrun={hasActiveSectionTimer && sectionRemainingSeconds < 0} + class="section-countdown" + aria-live="off" + > + Abschnitt + + {#if hasActiveSectionTimer} + {sectionRemainingSeconds < 0 + ? `+${formatCountdown(Math.abs(sectionRemainingSeconds))}` + : formatCountdown(sectionRemainingSeconds)} + {:else}Kein Countdown{/if} + +
+ {#if data.live.startedAtUtc && !data.live.endedAtUtc}
+ + + + +
{/if}
+ {:else if data.live.endedAtUtc}
- +
{ - if (!confirm('Neuen Durchlauf starten? Fortschritt und Zeitmessungen werden zurückgesetzt.')) event.preventDefault(); + if ( + !confirm( + 'Neuen Durchlauf starten? Fortschritt und Zeitmessungen werden zurückgesetzt.' + ) + ) + event.preventDefault(); }} > - +
{:else} -
+ @@ -616,7 +664,9 @@ - +
{/if}
- +
{ - if (!confirm('Sendung wirklich beenden? Offene Pieces bleiben offen.')) event.preventDefault(); + if (!confirm('Sendung wirklich beenden? Offene Pieces bleiben offen.')) + event.preventDefault(); }} > - +
{/if} {#if needsResume && !data.live.endedAtUtc}
-