marcel/familienarchiv
1
0
Fork 0
Code Issues 104 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(persons): align pages with Concept A spec — card layout, stats bar, status labels, save button
Some checks failed
CI / Unit & Component Tests (push) Has been cancelled
Details
CI / Backend Unit Tests (push) Has been cancelled
Details
CI / E2E Tests (push) Has been cancelled
Details
CI / Unit & Component Tests (pull_request) Failing after 2m26s
Details
CI / Backend Unit Tests (pull_request) Failing after 2m23s
Details
CI / E2E Tests (pull_request) Failing after 44m45s
Details

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-03-29 20:27:22 +02:00
parent 241e4874ad
commit 27d7225330
8 changed files with 142 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
frontend/src/routes/persons/[id]/PersonCard.svelte
View File

@@ -19,81 +19,70 @@ let {
} = $props();
</script>
<div class="mb-10 overflow-hidden rounded-sm border border-line bg-surface shadow-sm">
<div class="h-2 w-full bg-primary"></div>
<div class="overflow-hidden rounded-sm border border-line bg-surface shadow-sm">
<!-- Navy top accent bar -->
<div class="h-1.5 w-full bg-primary"></div>
<div class="p-8 md:p-10">
<!-- View Mode -->
<div class="flex flex-col items-start gap-8 md:flex-row">
<div class="flex-shrink-0">
<div
class="flex h-24 w-24 items-center justify-center rounded-full border border-line bg-muted text-ink"
>
<span class="font-serif text-3xl">{person.firstName[0]}{person.lastName[0]}</span>
</div>
</div>
<div class="w-full flex-1">
<div class="mb-8 flex items-start justify-between border-b border-line-2 pb-4">
<h1 class="font-serif text-4xl text-ink">
{person.firstName}
{person.lastName}
</h1>
<div class="ml-4 flex flex-shrink-0 items-center gap-2">
{#if canWrite}
<a
href="/persons/{person.id}/edit"
class="inline-flex items-center gap-1.5 rounded border border-line px-3 py-1.5 text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:border-primary hover:text-ink"
>
<img
src="/degruyter-icons/Simple/Small-16px/SVG/Action/Edit-Content-SM.svg"
alt=""
aria-hidden="true"
class="h-3.5 w-3.5"
/>
{m.btn_edit()}
</a>
{/if}
</div>
</div>
<div class="grid grid-cols-1 gap-8 md:grid-cols-2">
{#if person.alias}
<div>
<span
class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
>{m.form_label_alias()}</span
>
<span class="block font-serif text-lg text-ink italic">"{person.alias}"</span>
</div>
{/if}
{#if person.birthYear || person.deathYear}
<div>
<span
class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
>
{#if person.birthYear && person.deathYear}{m.person_label_birth_year()} / {m.person_label_death_year()}{:else if person.birthYear}{m.person_label_birth_year()}{:else}{m.person_label_death_year()}{/if}
</span>
<span class="block font-serif text-lg text-ink">
{formatLifeDateRange(person.birthYear, person.deathYear)}
</span>
</div>
{/if}
{#if person.notes}
<div class="md:col-span-2">
<span
class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
>{m.person_label_notes()}</span
>
<p class="font-serif text-base whitespace-pre-wrap text-ink">
{person.notes}
</p>
</div>
{/if}
</div>
<div class="p-6">
<!-- Avatar — navy circle, centered -->
<div class="mb-4 flex justify-center">
<div
class="flex h-16 w-16 items-center justify-center rounded-full bg-primary font-serif text-xl font-bold text-primary-fg"
>
{person.firstName[0]}{person.lastName[0]}
</div>
</div>
<!-- Name — centered, serif -->
<h1 class="mb-1 text-center font-serif text-xl font-bold text-ink">
{person.firstName}
{person.lastName}
</h1>
<!-- Alias — centered, italic -->
{#if person.alias}
<p class="mb-1 text-center font-sans text-sm text-ink-2 italic">„{person.alias}"</p>
{/if}
<!-- Life dates — centered -->
{#if person.birthYear || person.deathYear}
<p class="mb-4 text-center font-sans text-sm text-ink-3">
{formatLifeDateRange(person.birthYear, person.deathYear)}
</p>
{:else}
<div class="mb-4"></div>
{/if}
<!-- Notes -->
{#if person.notes}
<div class="mb-4">
<span
class="mb-1 block font-sans text-[10px] font-bold tracking-widest text-ink-3 uppercase"
>
{m.person_label_notes()}
</span>
<p
class="rounded border border-line bg-muted p-3 font-sans text-sm leading-relaxed text-ink-2"
>
{person.notes}
</p>
</div>
{/if}
<!-- Edit button — full width, outlined -->
{#if canWrite}
<a
href="/persons/{person.id}/edit"
class="flex w-full items-center justify-center gap-1.5 rounded border border-line px-3 py-2 font-sans text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:border-primary hover:text-ink"
>
<img
src="/degruyter-icons/Simple/Small-16px/SVG/Action/Edit-Content-SM.svg"
alt=""
aria-hidden="true"
class="h-3.5 w-3.5"
/>
{m.btn_edit()}
</a>
{/if}
</div>
</div>

3
frontend/src/routes/persons/[id]/PersonDocumentList.svelte
View File

@@ -2,6 +2,7 @@
import { m } from '$lib/paraglide/messages.js';
import { formatDate } from '$lib/utils/date';
import { sortDocumentsByDate, type SortDir } from '$lib/utils/sort';
import { formatDocumentStatus } from '$lib/utils/documentStatusLabel';
const DOCS_PREVIEW_LIMIT = 5;
@@ -106,7 +107,7 @@ const visibleDocuments = $derived(
? 'border-accent/50 bg-accent/20 text-ink'
: 'border-yellow-200 bg-yellow-50 text-yellow-800'}"
>
{doc.status}
{formatDocumentStatus(doc.status)}
</span>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Right-MD.svg"

2
frontend/src/routes/persons/[id]/edit/PersonEditSaveBar.svelte
View File

@@ -16,6 +16,6 @@ let { discardHref }: { discardHref: string } = $props();
formaction="?/update"
class="rounded bg-primary px-6 py-2 text-sm font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/80"
>
{m.btn_save()}
{m.person_save_changes()}
</button>
</div>