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

feat(person): render precise life dates on cards, hover card, and mention dropdown

Browse Source 
Cards compose aria-hidden * / † glyphs in markup so screen readers only
announce the dates; PersonSummaryDTO list card stays year-shaped by
design (ADR-039). MentionDropdown subtitle wraps instead of truncating
so DAY-precision ranges fit at 320px.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-06-12 18:14:20 +02:00
committed by marcel
parent adac1b1f99
commit 0e7095fee6
10 changed files with 254 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,8 @@
<script lang="ts">
import { m } from '$lib/paraglide/messages.js';
import { formatLifeDateRange } from '$lib/person/personLifeDates';
import { formatLifeDate } from '$lib/person/personLifeDates';
import PersonTypeBadge from '$lib/person/PersonTypeBadge.svelte';
import type { DatePrecision } from '$lib/shared/utils/documentDate';
let {
person,
@@ -15,12 +16,17 @@ let {
personType?: string | null;
title?: string | null;
alias?: string | null;
birthYear?: number | null;
deathYear?: number | null;
birthDate?: string | null;
birthDatePrecision?: DatePrecision | null;
deathDate?: string | null;
deathDatePrecision?: DatePrecision | null;
notes?: string | null;
};
canWrite: boolean;
} = $props();
const birthText = $derived(formatLifeDate(person.birthDate, person.birthDatePrecision));
const deathText = $derived(formatLifeDate(person.deathDate, person.deathDatePrecision));
</script>
<div class="overflow-hidden rounded-sm border border-line bg-surface shadow-sm">
@@ -91,10 +97,16 @@ let {
<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}
<!-- Life dates — centered; glyphs aria-hidden so screen readers only hear the dates -->
{#if birthText || deathText}
<p class="mb-4 text-center font-sans text-sm text-ink-3">
{formatLifeDateRange(person.birthYear, person.deathYear)}
{#if birthText}
<span aria-hidden="true">*</span> {birthText}
{/if}
{#if birthText && deathText}–{/if}
{#if deathText}
<span aria-hidden="true">†</span> {deathText}
{/if}
</p>
{:else}
<div class="mb-4"></div>