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
CI / Backend Unit Tests (push) Has been cancelled
CI / E2E Tests (push) Has been cancelled
CI / Unit & Component Tests (pull_request) Failing after 2m26s
CI / Backend Unit Tests (pull_request) Failing after 2m23s
CI / E2E Tests (pull_request) Failing after 44m45s
Some checks failed
CI / Unit & Component Tests (push) Has been cancelled
CI / Backend Unit Tests (push) Has been cancelled
CI / E2E Tests (push) Has been cancelled
CI / Unit & Component Tests (pull_request) Failing after 2m26s
CI / Backend Unit Tests (pull_request) Failing after 2m23s
CI / E2E Tests (pull_request) Failing after 44m45s
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
@@ -11,7 +11,6 @@ let { data } = $props();
|
||||
let q = $state(untrack(() => data.q || ''));
|
||||
let qFocused = $state(false);
|
||||
|
||||
// Sync URL → local state after navigation, but not while the user is typing.
|
||||
$effect(() => {
|
||||
if (!qFocused) q = data.q || '';
|
||||
});
|
||||
@@ -31,41 +30,22 @@ function handleSearch() {
|
||||
</svelte:head>
|
||||
|
||||
<div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
|
||||
<!-- Header Area -->
|
||||
<div
|
||||
class="mb-10 flex flex-col justify-between gap-6 border-b border-ink/10 pb-6 md:flex-row md:items-end"
|
||||
>
|
||||
<!-- Header: title+stats on left, search+CTA on right -->
|
||||
<div class="mb-10 flex flex-wrap items-end justify-between gap-4 border-b border-ink/10 pb-6">
|
||||
<div>
|
||||
<h1 class="font-serif text-3xl font-medium text-ink">{m.persons_heading()}</h1>
|
||||
<p class="mt-2 max-w-xl font-sans text-sm text-ink-2">
|
||||
{m.persons_subtitle()}
|
||||
</p>
|
||||
<div class="mt-1">
|
||||
<h1 class="font-serif text-3xl font-medium text-ink">{m.page_title_persons()}</h1>
|
||||
<div class="mt-2">
|
||||
<PersonsStatsBar
|
||||
totalPersons={data.stats.totalPersons ?? 0}
|
||||
totalDocuments={data.stats.totalDocuments ?? 0}
|
||||
/>
|
||||
</div>
|
||||
{#if data.canWrite}
|
||||
<a
|
||||
href="/persons/new"
|
||||
class="mt-3 inline-flex items-center gap-1 text-sm font-medium text-ink-2 transition-colors hover:text-ink"
|
||||
>
|
||||
<img
|
||||
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Add/Add-General-MD.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="h-4 w-4"
|
||||
/>
|
||||
{m.persons_btn_new()}
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Search Input -->
|
||||
<div class="w-full md:w-80">
|
||||
<label for="search" class="sr-only">Suche</label>
|
||||
<div class="flex items-center gap-3">
|
||||
<!-- Search -->
|
||||
<div class="relative">
|
||||
<label for="search" class="sr-only">Suche</label>
|
||||
<input
|
||||
id="search"
|
||||
type="text"
|
||||
@@ -74,7 +54,7 @@ function handleSearch() {
|
||||
oninput={handleSearch}
|
||||
onfocus={() => (qFocused = true)}
|
||||
onblur={() => (qFocused = false)}
|
||||
class="block w-full rounded-sm border border-line bg-surface py-2.5 pr-10 pl-4 font-sans text-sm text-ink placeholder-ink-3 shadow-sm focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
|
||||
class="block w-56 rounded-sm border border-line bg-surface py-2.5 pr-10 pl-4 font-sans text-sm text-ink placeholder-ink-3 shadow-sm focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
|
||||
/>
|
||||
<div
|
||||
class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-ink-3"
|
||||
@@ -87,54 +67,67 @@ function handleSearch() {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- New person CTA -->
|
||||
{#if data.canWrite}
|
||||
<a
|
||||
href="/persons/new"
|
||||
class="inline-flex items-center gap-1.5 rounded-sm bg-primary px-4 py-2.5 font-sans text-sm font-bold tracking-wide text-primary-fg transition-colors hover:bg-primary/80"
|
||||
>
|
||||
<img
|
||||
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Add/Add-General-MD.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="h-4 w-4"
|
||||
/>
|
||||
{m.persons_btn_new()}
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if data.persons.length === 0}
|
||||
<PersonsEmptyState />
|
||||
{:else}
|
||||
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{#each data.persons as person (person.id)}
|
||||
<a href="/persons/{person.id}" class="group block h-full">
|
||||
<a href="/persons/{person.id}" class="group block">
|
||||
<div
|
||||
class="relative flex h-full items-center gap-4 overflow-hidden rounded border border-line bg-surface p-6 shadow-sm transition-all duration-200 hover:border-primary hover:shadow-md"
|
||||
class="flex h-full flex-col items-center gap-2 rounded border border-line bg-surface px-4 py-6 text-center shadow-sm transition-all duration-200 hover:border-l-4 hover:border-accent hover:shadow-md"
|
||||
>
|
||||
<!-- Decorative Accent on Hover -->
|
||||
<div
|
||||
class="absolute top-0 bottom-0 left-0 w-1 bg-primary opacity-0 transition-opacity group-hover:opacity-100"
|
||||
></div>
|
||||
|
||||
<!-- Avatar -->
|
||||
<div class="flex-shrink-0">
|
||||
<div
|
||||
class="flex h-12 w-12 items-center justify-center rounded-full bg-primary font-serif text-lg text-primary-fg transition-colors group-hover:bg-accent group-hover:text-ink"
|
||||
>
|
||||
{person.firstName?.[0]}{person.lastName?.[0]}
|
||||
</div>
|
||||
<div
|
||||
class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-primary font-serif text-base font-bold text-primary-fg transition-colors"
|
||||
>
|
||||
{person.firstName?.[0]}{person.lastName?.[0]}
|
||||
</div>
|
||||
|
||||
<!-- Info -->
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="truncate font-serif text-base font-medium text-ink group-hover:underline">
|
||||
{person.firstName}
|
||||
{person.lastName}
|
||||
<!-- Name -->
|
||||
<p class="font-serif text-sm font-bold text-ink group-hover:underline">
|
||||
{person.firstName}
|
||||
{person.lastName}
|
||||
</p>
|
||||
|
||||
<!-- Alias -->
|
||||
{#if person.alias}
|
||||
<p class="font-sans text-xs text-ink-2 italic">„{person.alias}"</p>
|
||||
{/if}
|
||||
|
||||
<!-- Life dates -->
|
||||
{#if person.birthYear || person.deathYear}
|
||||
<p class="font-sans text-[11px] text-ink-3">
|
||||
{formatLifeDateRange(person.birthYear, person.deathYear)}
|
||||
</p>
|
||||
{#if person.alias}
|
||||
<p class="mt-0.5 truncate font-sans text-xs text-ink-2 italic">"{person.alias}"</p>
|
||||
{/if}
|
||||
{#if person.birthYear || person.deathYear}
|
||||
<p class="mt-0.5 font-sans text-xs text-ink-3">
|
||||
{formatLifeDateRange(person.birthYear, person.deathYear)}
|
||||
</p>
|
||||
{/if}
|
||||
{#if (person.documentCount ?? 0) > 0}
|
||||
<span
|
||||
class="mt-1.5 inline-flex items-center rounded-full bg-primary px-2 py-0.5 font-sans text-[10px] font-bold text-primary-fg"
|
||||
>
|
||||
{person.documentCount}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Doc count chip -->
|
||||
{#if (person.documentCount ?? 0) > 0}
|
||||
<span
|
||||
class="mt-1 inline-flex items-center rounded-full border border-line bg-muted px-2.5 py-0.5 font-sans text-[11px] font-semibold text-ink-2"
|
||||
>
|
||||
{person.documentCount} docs
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
|
||||
Reference in New Issue
Block a user