From dfa236390d7b7f2168264bc9f8157f319555dc5f Mon Sep 17 00:00:00 2001 From: Florian Heinz Date: Thu, 22 Oct 2026 20:54:46 +0200 Subject: [PATCH] Release 0.5.6 --- docs/ACCEPTANCE.md | 24 +++ docs/STATUS.md | 18 ++ package-lock.json | 4 +- package.json | 2 +- src/app.css | 305 +++++++++++++++++++++++++++------ src/routes/fundus/+page.svelte | 222 +++++++++++++----------- 6 files changed, 418 insertions(+), 157 deletions(-) diff --git a/docs/ACCEPTANCE.md b/docs/ACCEPTANCE.md index aafc76d..95457d2 100644 --- a/docs/ACCEPTANCE.md +++ b/docs/ACCEPTANCE.md @@ -257,3 +257,27 @@ programmatisch geprüft - vollständige Unit- und E2E-Matrix gemäß Auftrag nicht erneut ausgeführt - `git diff --check`: erfolgreich + +## Oberflächenkorrektur 0.5.6 + +| Kriterium | Nachweis | Stand | +| --------------------------------------------- | ------------------------------------------------------------------------------------------------- | --------------------- | +| Gold-/Violettlicht und Glasflächen sichtbar | Fundus und Editor in Light/Dark auf Desktop und Mobil visuell sowie über berechnete Werte geprüft | erfüllt am 22.10.2026 | +| Schreibflächen ruhig und eindeutig abgegrenzt | deckende Feldfarbe, Kontur und goldener Fokus im geöffneten Piece-Editor geprüft | erfüllt am 22.10.2026 | +| Neuanlage und Suche unmittelbar erreichbar | sichtbare Fundusaktionen sowie geöffnete Vorlagenauswahl auf Desktop und Mobil geprüft | erfüllt am 22.10.2026 | +| Zusatzfilter und Zeilenaktionen zugänglich | native Aufklappelemente für Filter und Aktionen per Browserinteraktion geprüft | erfüllt am 22.10.2026 | +| Funduszeilen per Tastatur zu öffnen | erster Titeleintrag fokussiert, mit Eingabetaste geöffnet und Editoraufruf geprüft | erfüllt am 22.10.2026 | +| Lightmode und Smartphone ohne Seitenüberlauf | Chromium-Messung bei 1440 × 1000 und 390 × 844 Pixeln in beiden Themes | erfüllt am 22.10.2026 | + +## Ausgeführte Prüfungen Oberflächenkorrektur 0.5.6 + +- `npm run check`: 0 Fehler und 0 Warnungen +- gezielter Chromium-Lauf für Fundus und geöffneten Piece-Editor bei + 1440 × 1000 und 390 × 844 Pixeln in Light/Dark ohne Konsolenfehler oder + horizontalen Seitenüberlauf +- Neuanlage, Zusatzfilter, Aktionsmenü, Tastaturöffnung, Glaswerte und goldener + Fokus automatisiert kontrolliert; alle erzeugten Desktop-/Mobilaufnahmen + visuell geprüft +- Produktionsbuild sowie vollständige Unit- und E2E-Matrix gemäß Auftrag nicht + ausgeführt +- `git diff --check`: erfolgreich diff --git a/docs/STATUS.md b/docs/STATUS.md index bb66e04..270b198 100644 --- a/docs/STATUS.md +++ b/docs/STATUS.md @@ -7,6 +7,24 @@ Anmeldung, Rollen, persistente Inhaltsbearbeitung, Sendungsplanung, Live-Steuerung, Präsentationsausgabe und lokaler Betriebsweg sind dokumentiert. Etappe 6 wurde nicht begonnen. +## Oberflächenkorrektur 0.5.6 + +- sichtbare statische Gold- und Blauviolettlichter hinter den halbtransparenten + Navigations- und Editorflächen +- klarere Glaswirkung in Navigation sowie Kopf, Tabs und Fuß des Piece-Editors; + Schreibflächen bleiben deckend, ruhig und goldfokussiert +- Fundus mit dauerhaft sichtbarer Suche und Neuanlage, aufklappbaren Zusatzfiltern + und inhaltsorientierten, vollständig anklickbaren Zeilen +- vorhandene Vorschaubilder beziehungsweise kleine Symbolplatzhalter sowie + gebündelte Menüs für Duplizieren und Archivieren +- bestehende Server-Actions, Filterlogik und Editor-Bereiche unverändert + +Geprüft wurden `npm run check` sowie Fundus und geöffneter Piece-Editor in +Chromium bei 1440 × 1000 und 390 × 844 Pixeln in Light/Dark. Die gezielte +Kontrolle umfasste Tastaturöffnung, Menüs, Fokus, Glaswerte, Seitenüberlauf und +visuell geprüfte Screenshots. Produktionsbuild und vollständige Testmatrix wurden +gemäß Auftrag nicht ausgeführt. + ## Oberflächenkorrektur 0.5.5 - dunkle Grundfläche mit sehr zurückhaltenden Gold-/Cyan-Lichtfeldern innerhalb diff --git a/package-lock.json b/package-lock.json index f7b5d84..e0009be 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "sendewerk", - "version": "0.5.5", + "version": "0.5.6", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "sendewerk", - "version": "0.5.5", + "version": "0.5.6", "dependencies": { "@node-rs/argon2": "^2.2.2", "better-sqlite3": "^13.0.3", diff --git a/package.json b/package.json index 3ce7914..216ed73 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "sendewerk", "private": true, - "version": "0.5.5", + "version": "0.5.6", "type": "module", "engines": { "node": ">=22.17 <25" diff --git a/src/app.css b/src/app.css index 54c2c34..5434e9f 100644 --- a/src/app.css +++ b/src/app.css @@ -16,6 +16,7 @@ --panel-soft: rgb(226 233 242 / 72%); --glass: rgb(252 254 255 / 68%); --glass-strong: rgb(250 252 255 / 84%); + --glass-chrome: rgb(252 254 255 / 74%); --field: #f8fbfe; --text: #172033; --text-muted: #5d6a7d; @@ -50,7 +51,8 @@ --panel-strong: #111d30; --panel-soft: rgb(28 43 65 / 62%); --glass: rgb(15 27 46 / 62%); - --glass-strong: rgb(17 30 51 / 82%); + --glass-strong: rgb(17 30 51 / 78%); + --glass-chrome: rgb(15 27 46 / 68%); --field: #101a2b; --text: #fff7e8; --text-muted: #a9b6c8; @@ -89,14 +91,14 @@ body { min-height: 100vh; background: radial-gradient( - ellipse 62rem 38rem at 88% -8%, - color-mix(in srgb, var(--gold) 7%, transparent), - transparent 70% + ellipse 58rem 42rem at 2% -8%, + color-mix(in srgb, var(--gold) 18%, transparent), + transparent 68% ), radial-gradient( - ellipse 54rem 42rem at 4% 48%, - color-mix(in srgb, var(--accent) 6%, transparent), - transparent 72% + ellipse 54rem 44rem at 96% 24%, + color-mix(in srgb, #6659b8 14%, transparent), + transparent 70% ), var(--bg); background-attachment: fixed; @@ -176,7 +178,10 @@ textarea:focus { padding: 1.25rem 0.85rem 1rem; border-right: 1px solid color-mix(in srgb, var(--gold) 20%, var(--line)); background: var(--glass); - box-shadow: 10px 0 34px rgb(0 0 0 / 12%); + box-shadow: + inset -1px 0 rgb(255 255 255 / 8%), + 10px 0 34px rgb(0 0 0 / 12%); + -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3); overflow-y: auto; } @@ -520,7 +525,7 @@ textarea:focus { .piece-grid { display: grid; gap: 0; - overflow: hidden; + overflow: visible; border: 1px solid var(--line); border-radius: var(--radius-medium); background: var(--glass); @@ -2048,24 +2053,53 @@ textarea:focus { } .template-picker { - margin-bottom: 0.85rem; - border: 1px solid var(--line); - border-radius: var(--radius-medium); - background: var(--panel); + position: relative; + z-index: 8; } .template-picker summary { - padding: 0.75rem 0.9rem; + display: flex; + min-height: 2.5rem; + align-items: center; + gap: 0.35rem; + padding: 0.55rem 0.8rem; + border-radius: 0.72rem; + background: var(--primary); + box-shadow: 0 8px 22px color-mix(in srgb, var(--gold) 20%, transparent); + color: var(--primary-text); cursor: pointer; + list-style: none; font-size: 0.8rem; font-weight: 720; } +.template-picker summary::-webkit-details-marker, +.filter-picker summary::-webkit-details-marker, +.piece-actions summary::-webkit-details-marker { + display: none; +} + +.fundus-heading-actions { + display: flex; + align-items: center; + gap: 0.55rem; +} + .template-grid { + position: absolute; + top: calc(100% + 0.5rem); + right: 0; display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); + width: min(42rem, calc(100vw - var(--sidebar-width) - 4rem)); + grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; - padding: 0 0.75rem 0.75rem; + padding: 0.7rem; + border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--line)); + border-radius: var(--radius-medium); + background: var(--glass-strong); + box-shadow: var(--shadow); + -webkit-backdrop-filter: blur(22px) saturate(1.18); + backdrop-filter: blur(22px) saturate(1.18); } .template-grid button { @@ -2089,14 +2123,65 @@ textarea:focus { } .library-filters { - display: grid; - grid-template-columns: minmax(15rem, 1.5fr) repeat(4, minmax(7rem, 0.65fr)) auto auto; - align-items: end; - gap: 0.55rem; - margin-bottom: 0.75rem; + position: relative; + z-index: 6; + margin-bottom: 0.85rem; } -.library-filters > label:not(.search-field) { +.fundus-search-row { + display: flex; + align-items: center; + gap: 0.55rem; +} + +.fundus-search-row .search-field { + width: min(100%, 34rem); +} + +.filter-picker { + position: relative; +} + +.filter-picker summary { + display: flex; + min-height: 2.5rem; + align-items: center; + gap: 0.4rem; + padding: 0.45rem 0.72rem; + border: 1px solid var(--line); + border-radius: 0.72rem; + background: var(--glass); + color: var(--text-muted); + cursor: pointer; + list-style: none; + font-size: 0.75rem; + font-weight: 700; + white-space: nowrap; +} + +.filter-picker[open] summary { + border-color: color-mix(in srgb, var(--gold) 46%, var(--line)); + color: var(--text); +} + +.filter-panel { + position: absolute; + top: calc(100% + 0.5rem); + right: 0; + display: grid; + width: min(38rem, calc(100vw - var(--sidebar-width) - 4rem)); + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0.7rem; + padding: 0.8rem; + border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line)); + border-radius: var(--radius-medium); + background: var(--glass-strong); + box-shadow: var(--shadow); + -webkit-backdrop-filter: blur(22px) saturate(1.18); + backdrop-filter: blur(22px) saturate(1.18); +} + +.filter-panel > label { display: grid; gap: 0.2rem; color: var(--text-muted); @@ -2104,7 +2189,7 @@ textarea:focus { font-weight: 700; } -.library-filters select { +.filter-panel select { min-width: 0; height: 2.5rem; padding: 0.35rem 0.5rem; @@ -2135,15 +2220,26 @@ textarea:focus { .library-filter-options { display: flex; + grid-column: 1 / -1; flex-wrap: wrap; - gap: 0.15rem 1rem; - margin: -0.35rem 0 0.75rem; + gap: 0.4rem 1rem; + margin: 0; } .library-filter-options .filter-checkbox { margin: 0; } +.filter-actions { + display: flex; + grid-column: 1 / -1; + align-items: center; + justify-content: flex-end; + gap: 0.45rem; + padding-top: 0.65rem; + border-top: 1px solid var(--line); +} + .piece-usage-history { margin-top: 0.35rem; color: var(--text-muted); @@ -2192,9 +2288,14 @@ textarea:focus { } .piece-card { + position: relative; grid-template-columns: auto minmax(0, 1.65fr) minmax(8rem, 0.85fr) minmax(9rem, auto) auto; } +.piece-card:has(.piece-actions[open]) { + z-index: 5; +} + .piece-thumbnail { width: 3.8rem; height: 3.8rem; @@ -2207,20 +2308,80 @@ textarea:focus { place-items: center; background: var(--panel-soft); color: var(--text-faint); - font-size: 0.75rem; - font-weight: 800; + border: 1px solid var(--line); } -.piece-primary h2 a:hover { +.piece-thumbnail-placeholder svg { + width: 1.35rem; + height: 1.35rem; + stroke: currentColor; + stroke-linecap: round; + stroke-linejoin: round; + stroke-width: 1.5; +} + +.piece-primary h2 a:hover, +.piece-card:focus-within .piece-primary h2 a { color: var(--accent); } +.piece-primary h2 a::after { + position: absolute; + inset: 0; + content: ''; +} + +.piece-card :is(a, button, input, summary) { + position: relative; + z-index: 2; +} + .piece-actions { - display: flex; - align-items: center; - flex-wrap: wrap; - justify-content: flex-end; - gap: 0.55rem; + position: relative; + z-index: 4; +} + +.piece-actions summary { + display: grid; + width: 2.2rem; + height: 2.2rem; + place-items: center; + border: 1px solid var(--line); + border-radius: 0.68rem; + background: var(--glass-strong); + color: var(--text-muted); + cursor: pointer; + list-style: none; + font-size: 0.65rem; + letter-spacing: 0.08em; +} + +.piece-actions[open] summary { + border-color: color-mix(in srgb, var(--gold) 46%, var(--line)); + color: var(--text); +} + +.piece-actions-popover { + position: absolute; + top: calc(100% + 0.35rem); + right: 0; + z-index: 5; + display: grid; + min-width: 9.5rem; + gap: 0.15rem; + padding: 0.35rem; + border: 1px solid var(--line); + border-radius: 0.72rem; + background: var(--glass-strong); + box-shadow: var(--shadow); + -webkit-backdrop-filter: blur(18px) saturate(1.15); + backdrop-filter: blur(18px) saturate(1.15); +} + +.piece-actions-popover button { + width: 100%; + justify-content: flex-start; + padding: 0.5rem 0.6rem; } .danger-text { @@ -3418,6 +3579,7 @@ textarea:focus { background: var(--glass-strong); box-shadow: var(--shadow-large); color: var(--text); + -webkit-backdrop-filter: blur(28px) saturate(1.12); backdrop-filter: blur(28px) saturate(1.12); } @@ -3438,7 +3600,9 @@ textarea:focus { gap: 1rem; padding: 0.9rem 1rem 0.75rem; border-bottom: 1px solid var(--line); - background: color-mix(in srgb, var(--glass-strong) 88%, transparent); + background: var(--glass-chrome); + box-shadow: inset 0 1px rgb(255 255 255 / 10%); + -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.12); } @@ -3486,7 +3650,8 @@ textarea:focus { gap: 0.25rem; padding: 0.45rem 1rem; border-bottom: 1px solid var(--line); - background: color-mix(in srgb, var(--glass-strong) 88%, transparent); + background: var(--glass-chrome); + -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.12); } @@ -3513,7 +3678,7 @@ textarea:focus { padding: clamp(0.85rem, 2vw, 1.4rem); overflow: auto; overscroll-behavior: contain; - background: color-mix(in srgb, var(--bg) 76%, transparent); + background: color-mix(in srgb, var(--bg) 88%, transparent); } .piece-dialog-form { @@ -3626,6 +3791,7 @@ textarea:focus { border: 1px solid var(--line-strong); border-radius: var(--radius-small); background: var(--field); + box-shadow: inset 0 1px 2px rgb(0 0 0 / 5%); color: var(--text); font: inherit; font-size: 0.88rem; @@ -3810,8 +3976,11 @@ textarea:focus { gap: 0.8rem; padding: 0.65rem 1rem; border-top: 1px solid var(--line); - background: color-mix(in srgb, var(--glass-strong) 90%, transparent); - box-shadow: 0 -10px 30px rgb(0 0 0 / 10%); + background: var(--glass-chrome); + box-shadow: + inset 0 -1px rgb(255 255 255 / 8%), + 0 -10px 30px rgb(0 0 0 / 10%); + -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.12); } @@ -4327,12 +4496,6 @@ textarea:focus { } @media (max-width: 72rem) { - .library-filters { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - .library-filters .search-field { - grid-column: 1 / -1; - } .piece-card { grid-template-columns: auto minmax(0, 1fr) minmax(8rem, 0.7fr) auto; } @@ -4405,6 +4568,7 @@ textarea:focus { border-bottom: 1px solid color-mix(in srgb, var(--gold) 18%, var(--line)); background: var(--glass); box-shadow: 0 8px 28px rgb(0 0 0 / 12%); + -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(24px) saturate(1.2); } .mobile-header .theme-toggle { @@ -4428,6 +4592,7 @@ textarea:focus { border-top: 1px solid color-mix(in srgb, var(--gold) 18%, var(--line)); background: var(--glass); box-shadow: 0 -8px 28px rgb(0 0 0 / 12%); + -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(24px) saturate(1.2); } .mobile-navigation:has(a:nth-child(5)) { @@ -4467,7 +4632,6 @@ textarea:focus { .template-grid, .two-columns, .markdown-grid, - .library-filters, .capture-form, .upload-form, .source-row { @@ -4481,7 +4645,6 @@ textarea:focus { .builder-filter { grid-template-columns: 1fr; } - .library-filters .search-field, .wide-field { grid-column: auto; } @@ -4742,6 +4905,44 @@ textarea:focus { align-items: stretch; flex-direction: column; } + .split-heading { + align-items: flex-start; + flex-direction: column; + } + .fundus-heading-actions { + width: 100%; + } + .template-picker { + margin-left: auto; + } + .template-grid, + .filter-panel { + position: absolute; + top: calc(100% + 0.5rem); + right: 0; + left: auto; + width: calc(100vw - 2rem); + max-height: calc(100dvh - var(--mobile-header) - var(--mobile-nav) - 1rem); + overflow-y: auto; + } + .fundus-search-row { + align-items: stretch; + flex-wrap: wrap; + } + .fundus-search-row .search-field { + width: 100%; + flex: 1 0 100%; + } + .filter-picker { + margin-left: auto; + } + .filter-panel { + grid-template-columns: 1fr; + } + .library-filter-options, + .filter-actions { + grid-column: auto; + } .search-field { width: 100%; } @@ -4775,7 +4976,9 @@ textarea:focus { height: 8rem; } .piece-thumbnail-placeholder { - display: none; + display: grid; + width: 3.25rem; + height: 3.25rem; } .piece-card:last-child { border-bottom: 1px solid var(--line); @@ -4806,11 +5009,9 @@ textarea:focus { justify-content: flex-start; } .piece-actions { - display: flex; - align-items: center; - flex-wrap: wrap; - justify-content: flex-start; - gap: 0.7rem; + position: absolute; + top: 0.8rem; + right: 0.8rem; } .show-summary { width: 100%; diff --git a/src/routes/fundus/+page.svelte b/src/routes/fundus/+page.svelte index b226f8b..f8ab173 100644 --- a/src/routes/fundus/+page.svelte +++ b/src/routes/fundus/+page.svelte @@ -59,101 +59,112 @@

Fundus

Vorbereitete Inhalte für kommende Sendungen.

-
- {visiblePieces.length}Inhalte +
+
+ {visiblePieces.length}Inhalte +
+
+ Neues Piece +
+ {#each data.templates as template (template.id)} +
+ + +
+ {/each} +
+
{#if form?.error}{/if} {#if form?.success}
{form.success}
{/if} -
- Neues Piece anlegen -
- {#each data.templates as template (template.id)} -
- - -
- {/each} -
-
-
- - - - - - - +
+ + +
+ Weitere Filter +
+ + + + +
+ + +
+
+ + +
+
+
+
-
- - -
{#if visiblePieces.length}
@@ -166,9 +177,12 @@ class="piece-thumbnail" src={`/media/${piece.mediaId}`} alt="" - />{:else}{/if} + />{:else}{/if}

{piece.title}

{piece.summary || 'Noch keine Kurzbeschreibung.'}

@@ -193,22 +207,26 @@ >
-
- Bearbeiten -
- -
-
- -
-
+
+ +
+
+ +
+
+ +
+
+
{/each}