hnzio/sendewerk
1
0 Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases 28 Wiki Activity

Release 0.5.6

Browse Source
This commit is contained in:
hnzio committed 2026-10-22 20:54:46 +02:00
1 parent b2467b87f5
commit dfa236390d
6 files changed
+418 -157
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/ACCEPTANCE.md
+24
View File
@@ -257,3 +257,27 @@
programmatisch geprüft programmatisch geprüft
- vollständige Unit- und E2E-Matrix gemäß Auftrag nicht erneut ausgeführt - vollständige Unit- und E2E-Matrix gemäß Auftrag nicht erneut ausgeführt
- `git diff --check`: erfolgreich - `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
docs/STATUS.md
+18
View File
@@ -7,6 +7,24 @@ Anmeldung, Rollen, persistente Inhaltsbearbeitung, Sendungsplanung,
Live-Steuerung, Präsentationsausgabe und lokaler Betriebsweg sind dokumentiert. Live-Steuerung, Präsentationsausgabe und lokaler Betriebsweg sind dokumentiert.
Etappe 6 wurde nicht begonnen. 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 ## Oberflächenkorrektur 0.5.5
- dunkle Grundfläche mit sehr zurückhaltenden Gold-/Cyan-Lichtfeldern innerhalb - dunkle Grundfläche mit sehr zurückhaltenden Gold-/Cyan-Lichtfeldern innerhalb
package-lock.json
Generated
+2 -2
View File
@@ -1,12 +1,12 @@
{ {
"name": "sendewerk", "name": "sendewerk",
"version": "0.5.5", "version": "0.5.6",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "sendewerk", "name": "sendewerk",
"version": "0.5.5", "version": "0.5.6",
"dependencies": { "dependencies": {
"@node-rs/argon2": "^2.2.2", "@node-rs/argon2": "^2.2.2",
"better-sqlite3": "^13.0.3", "better-sqlite3": "^13.0.3",
package.json
+1 -1
View File
@@ -1,7 +1,7 @@
{ {
"name": "sendewerk", "name": "sendewerk",
"private": true, "private": true,
"version": "0.5.5", "version": "0.5.6",
"type": "module", "type": "module",
"engines": { "engines": {
"node": ">=22.17 <25" "node": ">=22.17 <25"
src/app.css
+253 -52
View File
@@ -16,6 +16,7 @@
--panel-soft: rgb(226 233 242 / 72%); --panel-soft: rgb(226 233 242 / 72%);
--glass: rgb(252 254 255 / 68%); --glass: rgb(252 254 255 / 68%);
--glass-strong: rgb(250 252 255 / 84%); --glass-strong: rgb(250 252 255 / 84%);
--glass-chrome: rgb(252 254 255 / 74%);
--field: #f8fbfe; --field: #f8fbfe;
--text: #172033; --text: #172033;
--text-muted: #5d6a7d; --text-muted: #5d6a7d;
@@ -50,7 +51,8 @@
--panel-strong: #111d30; --panel-strong: #111d30;
--panel-soft: rgb(28 43 65 / 62%); --panel-soft: rgb(28 43 65 / 62%);
--glass: rgb(15 27 46 / 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; --field: #101a2b;
--text: #fff7e8; --text: #fff7e8;
--text-muted: #a9b6c8; --text-muted: #a9b6c8;
@@ -89,14 +91,14 @@ body {
min-height: 100vh; min-height: 100vh;
background: background:
radial-gradient( radial-gradient(
ellipse 62rem 38rem at 88% -8%, ellipse 58rem 42rem at 2% -8%,
color-mix(in srgb, var(--gold) 7%, transparent), color-mix(in srgb, var(--gold) 18%, transparent),
transparent 70% transparent 68%
), ),
radial-gradient( radial-gradient(
ellipse 54rem 42rem at 4% 48%, ellipse 54rem 44rem at 96% 24%,
color-mix(in srgb, var(--accent) 6%, transparent), color-mix(in srgb, #6659b8 14%, transparent),
transparent 72% transparent 70%
), ),
var(--bg); var(--bg);
background-attachment: fixed; background-attachment: fixed;
@@ -176,7 +178,10 @@ textarea:focus {
padding: 1.25rem 0.85rem 1rem; padding: 1.25rem 0.85rem 1rem;
border-right: 1px solid color-mix(in srgb, var(--gold) 20%, var(--line)); border-right: 1px solid color-mix(in srgb, var(--gold) 20%, var(--line));
background: var(--glass); 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); backdrop-filter: blur(24px) saturate(1.3);
overflow-y: auto; overflow-y: auto;
} }
@@ -520,7 +525,7 @@ textarea:focus {
.piece-grid { .piece-grid {
display: grid; display: grid;
gap: 0; gap: 0;
overflow: hidden; overflow: visible;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: var(--radius-medium); border-radius: var(--radius-medium);
background: var(--glass); background: var(--glass);
@@ -2048,24 +2053,53 @@ textarea:focus {
} }
.template-picker { .template-picker {
margin-bottom: 0.85rem; position: relative;
border: 1px solid var(--line); z-index: 8;
border-radius: var(--radius-medium);
background: var(--panel);
} }
.template-picker summary { .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; cursor: pointer;
list-style: none;
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 720; 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 { .template-grid {
position: absolute;
top: calc(100% + 0.5rem);
right: 0;
display: grid; 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; 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 { .template-grid button {
@@ -2089,14 +2123,65 @@ textarea:focus {
} }
.library-filters { .library-filters {
display: grid; position: relative;
grid-template-columns: minmax(15rem, 1.5fr) repeat(4, minmax(7rem, 0.65fr)) auto auto; z-index: 6;
align-items: end; margin-bottom: 0.85rem;
gap: 0.55rem;
margin-bottom: 0.75rem;
} }
.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; display: grid;
gap: 0.2rem; gap: 0.2rem;
color: var(--text-muted); color: var(--text-muted);
@@ -2104,7 +2189,7 @@ textarea:focus {
font-weight: 700; font-weight: 700;
} }
.library-filters select { .filter-panel select {
min-width: 0; min-width: 0;
height: 2.5rem; height: 2.5rem;
padding: 0.35rem 0.5rem; padding: 0.35rem 0.5rem;
@@ -2135,15 +2220,26 @@ textarea:focus {
.library-filter-options { .library-filter-options {
display: flex; display: flex;
grid-column: 1 / -1;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.15rem 1rem; gap: 0.4rem 1rem;
margin: -0.35rem 0 0.75rem; margin: 0;
} }
.library-filter-options .filter-checkbox { .library-filter-options .filter-checkbox {
margin: 0; 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 { .piece-usage-history {
margin-top: 0.35rem; margin-top: 0.35rem;
color: var(--text-muted); color: var(--text-muted);
@@ -2192,9 +2288,14 @@ textarea:focus {
} }
.piece-card { .piece-card {
position: relative;
grid-template-columns: auto minmax(0, 1.65fr) minmax(8rem, 0.85fr) minmax(9rem, auto) auto; 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 { .piece-thumbnail {
width: 3.8rem; width: 3.8rem;
height: 3.8rem; height: 3.8rem;
@@ -2207,20 +2308,80 @@ textarea:focus {
place-items: center; place-items: center;
background: var(--panel-soft); background: var(--panel-soft);
color: var(--text-faint); color: var(--text-faint);
font-size: 0.75rem; border: 1px solid var(--line);
font-weight: 800;
} }
.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); 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 { .piece-actions {
display: flex; position: relative;
align-items: center; z-index: 4;
flex-wrap: wrap; }
justify-content: flex-end;
gap: 0.55rem; .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 { .danger-text {
@@ -3418,6 +3579,7 @@ textarea:focus {
background: var(--glass-strong); background: var(--glass-strong);
box-shadow: var(--shadow-large); box-shadow: var(--shadow-large);
color: var(--text); color: var(--text);
-webkit-backdrop-filter: blur(28px) saturate(1.12);
backdrop-filter: blur(28px) saturate(1.12); backdrop-filter: blur(28px) saturate(1.12);
} }
@@ -3438,7 +3600,9 @@ textarea:focus {
gap: 1rem; gap: 1rem;
padding: 0.9rem 1rem 0.75rem; padding: 0.9rem 1rem 0.75rem;
border-bottom: 1px solid var(--line); 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); backdrop-filter: blur(20px) saturate(1.12);
} }
@@ -3486,7 +3650,8 @@ textarea:focus {
gap: 0.25rem; gap: 0.25rem;
padding: 0.45rem 1rem; padding: 0.45rem 1rem;
border-bottom: 1px solid var(--line); 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); backdrop-filter: blur(20px) saturate(1.12);
} }
@@ -3513,7 +3678,7 @@ textarea:focus {
padding: clamp(0.85rem, 2vw, 1.4rem); padding: clamp(0.85rem, 2vw, 1.4rem);
overflow: auto; overflow: auto;
overscroll-behavior: contain; overscroll-behavior: contain;
background: color-mix(in srgb, var(--bg) 76%, transparent); background: color-mix(in srgb, var(--bg) 88%, transparent);
} }
.piece-dialog-form { .piece-dialog-form {
@@ -3626,6 +3791,7 @@ textarea:focus {
border: 1px solid var(--line-strong); border: 1px solid var(--line-strong);
border-radius: var(--radius-small); border-radius: var(--radius-small);
background: var(--field); background: var(--field);
box-shadow: inset 0 1px 2px rgb(0 0 0 / 5%);
color: var(--text); color: var(--text);
font: inherit; font: inherit;
font-size: 0.88rem; font-size: 0.88rem;
@@ -3810,8 +3976,11 @@ textarea:focus {
gap: 0.8rem; gap: 0.8rem;
padding: 0.65rem 1rem; padding: 0.65rem 1rem;
border-top: 1px solid var(--line); border-top: 1px solid var(--line);
background: color-mix(in srgb, var(--glass-strong) 90%, transparent); background: var(--glass-chrome);
box-shadow: 0 -10px 30px rgb(0 0 0 / 10%); 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); backdrop-filter: blur(20px) saturate(1.12);
} }
@@ -4327,12 +4496,6 @@ textarea:focus {
} }
@media (max-width: 72rem) { @media (max-width: 72rem) {
.library-filters {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.library-filters .search-field {
grid-column: 1 / -1;
}
.piece-card { .piece-card {
grid-template-columns: auto minmax(0, 1fr) minmax(8rem, 0.7fr) auto; 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)); border-bottom: 1px solid color-mix(in srgb, var(--gold) 18%, var(--line));
background: var(--glass); background: var(--glass);
box-shadow: 0 8px 28px rgb(0 0 0 / 12%); 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); backdrop-filter: blur(24px) saturate(1.2);
} }
.mobile-header .theme-toggle { .mobile-header .theme-toggle {
@@ -4428,6 +4592,7 @@ textarea:focus {
border-top: 1px solid color-mix(in srgb, var(--gold) 18%, var(--line)); border-top: 1px solid color-mix(in srgb, var(--gold) 18%, var(--line));
background: var(--glass); background: var(--glass);
box-shadow: 0 -8px 28px rgb(0 0 0 / 12%); 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); backdrop-filter: blur(24px) saturate(1.2);
} }
.mobile-navigation:has(a:nth-child(5)) { .mobile-navigation:has(a:nth-child(5)) {
@@ -4467,7 +4632,6 @@ textarea:focus {
.template-grid, .template-grid,
.two-columns, .two-columns,
.markdown-grid, .markdown-grid,
.library-filters,
.capture-form, .capture-form,
.upload-form, .upload-form,
.source-row { .source-row {
@@ -4481,7 +4645,6 @@ textarea:focus {
.builder-filter { .builder-filter {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.library-filters .search-field,
.wide-field { .wide-field {
grid-column: auto; grid-column: auto;
} }
@@ -4742,6 +4905,44 @@ textarea:focus {
align-items: stretch; align-items: stretch;
flex-direction: column; 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 { .search-field {
width: 100%; width: 100%;
} }
@@ -4775,7 +4976,9 @@ textarea:focus {
height: 8rem; height: 8rem;
} }
.piece-thumbnail-placeholder { .piece-thumbnail-placeholder {
display: none; display: grid;
width: 3.25rem;
height: 3.25rem;
} }
.piece-card:last-child { .piece-card:last-child {
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--line);
@@ -4806,11 +5009,9 @@ textarea:focus {
justify-content: flex-start; justify-content: flex-start;
} }
.piece-actions { .piece-actions {
display: flex; position: absolute;
align-items: center; top: 0.8rem;
flex-wrap: wrap; right: 0.8rem;
justify-content: flex-start;
gap: 0.7rem;
} }
.show-summary { .show-summary {
width: 100%; width: 100%;
src/routes/fundus/+page.svelte
+120 -102
View File
@@ -59,101 +59,112 @@
<h1>Fundus</h1> <h1>Fundus</h1>
<p class="page-intro">Vorbereitete Inhalte für kommende Sendungen.</p> <p class="page-intro">Vorbereitete Inhalte für kommende Sendungen.</p>
</div> </div>
<div class="heading-stat" aria-label={`${visiblePieces.length} gefundene Inhalte`}> <div class="fundus-heading-actions">
<strong>{visiblePieces.length}</strong><span>Inhalte</span> <div class="heading-stat" aria-label={`${visiblePieces.length} gefundene Inhalte`}>
<strong>{visiblePieces.length}</strong><span>Inhalte</span>
</div>
<details class="template-picker">
<summary><span aria-hidden="true">＋</span> Neues Piece</summary>
<div class="template-grid">
{#each data.templates as template (template.id)}
<form method="POST" action="?/create">
<input type="hidden" name="template" value={template.id} />
<button type="submit"
><strong>{template.name}</strong><span>{template.description}</span></button
>
</form>
{/each}
</div>
</details>
</div> </div>
</header> </header>
{#if form?.error}<div class="form-message error" role="alert">{form.error}</div>{/if} {#if form?.error}<div class="form-message error" role="alert">{form.error}</div>{/if}
{#if form?.success}<div class="form-message success" role="status">{form.success}</div>{/if} {#if form?.success}<div class="form-message success" role="status">{form.success}</div>{/if}
<details class="template-picker">
<summary>Neues Piece anlegen</summary>
<div class="template-grid">
{#each data.templates as template (template.id)}
<form method="POST" action="?/create">
<input type="hidden" name="template" value={template.id} />
<button type="submit"
><strong>{template.name}</strong><span>{template.description}</span></button
>
</form>
{/each}
</div>
</details>
<form <form
id="library-filters" id="library-filters"
class="library-filters" class="library-filters"
method="GET" method="GET"
aria-label="Fundus durchsuchen und filtern" aria-label="Fundus durchsuchen und filtern"
> >
<label class="search-field" <div class="fundus-search-row">
><span aria-hidden="true">⌕</span><span class="sr-only">Fundus durchsuchen</span><input <label class="search-field"
name="q" ><span aria-hidden="true">⌕</span><span class="sr-only">Fundus durchsuchen</span><input
type="search" name="q"
value={data.filters.query} type="search"
placeholder="Titel, Quelle oder Thema suchen" value={data.filters.query}
/></label placeholder="Titel, Quelle oder Thema suchen"
> /></label
<label >
><span>Status</span><select name="status" <button class="secondary-button" type="submit">Suchen</button>
><option value="">Alle</option><option <details class="filter-picker">
value="ready" <summary><span aria-hidden="true">≡</span> Weitere Filter</summary>
selected={data.filters.status === 'ready'}>Sendefertig</option <div class="filter-panel">
><option value="preparing" selected={data.filters.status === 'preparing'}>In Arbeit</option <label
></select ><span>Status</span><select name="status"
></label ><option value="">Alle</option><option
> value="ready"
<label selected={data.filters.status === 'ready'}>Sendefertig</option
><span>Format</span><select name="format" ><option value="preparing" selected={data.filters.status === 'preparing'}
><option value="">Alle</option>{#each data.taxonomy.formats as item (item.id)}<option >In Arbeit</option
value={item.id} ></select
selected={data.filters.formatId === item.id}>{item.name}</option ></label
>{/each}</select >
></label <label
> ><span>Format</span><select name="format"
<label ><option value="">Alle</option>{#each data.taxonomy.formats as item (item.id)}<option
><span>Thema</span><select name="topic" value={item.id}
><option value="">Alle</option>{#each data.taxonomy.topics as item (item.id)}<option selected={data.filters.formatId === item.id}>{item.name}</option
value={item.id} >{/each}</select
selected={data.filters.topicId === item.id}>{item.name}</option ></label
>{/each}</select >
></label <label
> ><span>Thema</span><select name="topic"
<label ><option value="">Alle</option>{#each data.taxonomy.topics as item (item.id)}<option
><span>Abschnitt</span><select name="category" value={item.id}
><option value="">Alle</option>{#each data.taxonomy.categories as item (item.id)}<option selected={data.filters.topicId === item.id}>{item.name}</option
value={item.id} >{/each}</select
selected={data.filters.categoryId === item.id}>{item.name}</option ></label
>{/each}</select >
></label <label
> ><span>Abschnitt</span><select name="category"
<button class="secondary-button" type="submit">Anwenden</button> ><option value="">Alle</option
<button class="text-button" type="button" onclick={resetFilters}>Zurücksetzen</button> >{#each data.taxonomy.categories as item (item.id)}<option
value={item.id}
selected={data.filters.categoryId === item.id}>{item.name}</option
>{/each}</select
></label
>
<div class="library-filter-options" aria-label="Fundusauswahl erweitern">
<label class="filter-checkbox">
<input
type="checkbox"
name="includeUsed"
value="1"
checked={showUsedPieces}
onchange={(event) => setSourceFilter('includeUsed', event.currentTarget.checked)}
/>
<span>Auch verwendete Inhalte zeigen</span>
</label>
<label class="filter-checkbox">
<input
type="checkbox"
name="includePlanned"
value="1"
checked={showPlannedPieces}
onchange={(event) => setSourceFilter('includePlanned', event.currentTarget.checked)}
/>
<span>Auch eingeplante Inhalte zeigen</span>
</label>
</div>
<div class="filter-actions">
<button class="secondary-button" type="submit">Filter anwenden</button>
<button class="text-button" type="button" onclick={resetFilters}>Zurücksetzen</button>
</div>
</div>
</details>
</div>
</form> </form>
<div class="library-filter-options" aria-label="Fundusauswahl erweitern">
<label class="filter-checkbox">
<input
type="checkbox"
name="includeUsed"
value="1"
form="library-filters"
checked={showUsedPieces}
onchange={(event) => setSourceFilter('includeUsed', event.currentTarget.checked)}
/>
<span>Auch verwendete Inhalte zeigen</span>
</label>
<label class="filter-checkbox">
<input
type="checkbox"
name="includePlanned"
value="1"
form="library-filters"
checked={showPlannedPieces}
onchange={(event) => setSourceFilter('includePlanned', event.currentTarget.checked)}
/>
<span>Auch eingeplante Inhalte zeigen</span>
</label>
</div>
{#if visiblePieces.length} {#if visiblePieces.length}
<div class="piece-grid"> <div class="piece-grid">
@@ -166,9 +177,12 @@
class="piece-thumbnail" class="piece-thumbnail"
src={`/media/${piece.mediaId}`} src={`/media/${piece.mediaId}`}
alt="" alt=""
/>{:else}<span class="piece-thumbnail piece-thumbnail-placeholder" aria-hidden="true" />{:else}<span class="piece-thumbnail piece-thumbnail-placeholder" aria-hidden="true">
>S</span <svg viewBox="0 0 24 24" fill="none">
>{/if} <path d="M4.5 6.5h15v11h-15zM7.5 14l3-3 2.2 2.2 1.8-1.7 2.5 2.5" />
<circle cx="15.8" cy="9.2" r="1.2" />
</svg>
</span>{/if}
<div class="piece-primary"> <div class="piece-primary">
<h2><a href={resolve('/fundus/[id]', { id: piece.id })}>{piece.title}</a></h2> <h2><a href={resolve('/fundus/[id]', { id: piece.id })}>{piece.title}</a></h2>
<p>{piece.summary || 'Noch keine Kurzbeschreibung.'}</p> <p>{piece.summary || 'Noch keine Kurzbeschreibung.'}</p>
@@ -193,22 +207,26 @@
></span ></span
> >
</div> </div>
<div class="piece-actions"> <details class="piece-actions">
<a class="text-link" href={resolve('/fundus/[id]', { id: piece.id })}>Bearbeiten</a> <summary aria-label={`Aktionen für ${piece.title}`}
<form method="POST" action="?/duplicate"> ><span aria-hidden="true">•••</span></summary
<input type="hidden" name="pieceId" value={piece.id} /><button >
class="text-button" <div class="piece-actions-popover">
type="submit">Duplizieren</button <form method="POST" action="?/duplicate">
> <input type="hidden" name="pieceId" value={piece.id} /><button
</form> class="text-button"
<form method="POST" action="?/archive"> type="submit">Duplizieren</button
<input type="hidden" name="pieceId" value={piece.id} /><input >
type="hidden" </form>
name="revision" <form method="POST" action="?/archive">
value={piece.revision} <input type="hidden" name="pieceId" value={piece.id} /><input
/><button class="text-button danger-text" type="submit">Archivieren</button> type="hidden"
</form> name="revision"
</div> value={piece.revision}
/><button class="text-button danger-text" type="submit">Archivieren</button>
</form>
</div>
</details>
</article> </article>
{/each} {/each}
</div> </div>