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

feat(topbar): double all font sizes and increase bar height for legibility
Some checks failed
CI / Unit & Component Tests (pull_request) Failing after 1m54s
Details
CI / Backend Unit Tests (pull_request) Failing after 2m55s
Details
CI / E2E Tests (pull_request) Failing after 1h12m45s
Details
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

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-01 08:52:23 +02:00
parent 0c40e10743
commit 1d2e6d7b86
7 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/lib/components/AnnotateHintStrip.svelte
View File

@@ -9,10 +9,10 @@ let { annotateMode }: Props = $props();
{#if annotateMode} {#if annotateMode}
<div <div
data-testid="annotate-hint-strip" data-testid="annotate-hint-strip"
class="hidden h-[18px] items-center gap-2 border-t border-dashed px-3.5 md:flex" class="hidden h-[36px] items-center gap-2 border-t border-dashed px-3.5 md:flex"
style="background: rgba(1,40,81,0.05); border-color: rgba(1,40,81,0.20)" style="background: rgba(1,40,81,0.05); border-color: rgba(1,40,81,0.20)"
> >
<span class="text-[10px] font-bold tracking-wide text-primary uppercase">Annotieren</span> <span class="text-[20px] font-bold tracking-wide text-primary uppercase">Annotieren</span>
<span class="text-[10px] text-ink-2">Klicken Sie auf einen Bereich im Dokument</span> <span class="text-[20px] text-ink-2">Klicken Sie auf einen Bereich im Dokument</span>
</div> </div>
{/if} {/if}

2
frontend/src/lib/components/DocumentStatusChip.svelte
View File

@@ -14,7 +14,7 @@ const label = $derived(statusLabel(status));
</script> </script>
<span <span
class="hidden shrink-0 md:block {dotClass} h-2.5 w-2.5 rounded-full" class="hidden shrink-0 md:block {dotClass} h-5 w-5 rounded-full"
title={label} title={label}
aria-label={label} aria-label={label}
></span> ></span>

6
frontend/src/lib/components/DocumentTopBar.svelte
View File

@@ -42,7 +42,7 @@ const longDate = $derived(doc.documentDate ? formatDate(doc.documentDate, 'long'
<div data-topbar class="border-b border-line bg-surface shadow-sm"> <div data-topbar class="border-b border-line bg-surface shadow-sm">
<!-- Main row --> <!-- Main row -->
<div class="flex h-12 shrink-0 items-center xs:h-14"> <div class="flex h-16 shrink-0 items-center xs:h-20">
<!-- Accent bar --> <!-- Accent bar -->
<div class="h-full w-[3px] shrink-0 bg-primary"></div> <div class="h-full w-[3px] shrink-0 bg-primary"></div>
@@ -66,13 +66,13 @@ const longDate = $derived(doc.documentDate ? formatDate(doc.documentDate, 'long'
<!-- Title + meta --> <!-- Title + meta -->
<div class="min-w-0 flex-1 overflow-hidden"> <div class="min-w-0 flex-1 overflow-hidden">
<h1 <h1
class="truncate font-serif text-[11px] leading-tight text-ink lg:text-[13px]" class="truncate font-serif text-[22px] leading-tight text-ink lg:text-[26px]"
title={doc.title ?? doc.originalFilename ?? ''} title={doc.title ?? doc.originalFilename ?? ''}
> >
{doc.title || doc.originalFilename} {doc.title || doc.originalFilename}
</h1> </h1>
{#if shortDate} {#if shortDate}
<p class="font-sans text-[10px] text-ink-2"> <p class="font-sans text-[20px] text-ink-2">
<span class="lg:hidden">{shortDate}</span> <span class="lg:hidden">{shortDate}</span>
<span class="hidden lg:inline">{longDate}</span> <span class="hidden lg:inline">{longDate}</span>
</p> </p>

6
frontend/src/lib/components/OverflowPillButton.svelte
View File

@@ -47,7 +47,7 @@ function handleKeydown(e: KeyboardEvent) {
aria-label="{extraCount} weitere Empfänger anzeigen" aria-label="{extraCount} weitere Empfänger anzeigen"
onclick={toggle} onclick={toggle}
onkeydown={handleKeydown} onkeydown={handleKeydown}
class="inline-flex shrink-0 items-center rounded-full border border-line bg-muted px-2 py-0.5 text-[9px] font-bold text-ink-2 hover:bg-surface focus-visible:ring-2 focus-visible:ring-primary" class="inline-flex shrink-0 items-center rounded-full border border-line bg-muted px-2 py-0.5 text-[18px] font-bold text-ink-2 hover:bg-surface focus-visible:ring-2 focus-visible:ring-primary"
> >
+{extraCount} weitere +{extraCount} weitere
</button> </button>
@@ -57,12 +57,12 @@ function handleKeydown(e: KeyboardEvent) {
role="list" role="list"
class="absolute top-full left-0 z-50 mt-1 min-w-[160px] rounded-md border border-line bg-surface p-3 shadow-lg" class="absolute top-full left-0 z-50 mt-1 min-w-[160px] rounded-md border border-line bg-surface p-3 shadow-lg"
> >
<p class="mb-2 text-[9px] font-bold tracking-wide text-ink-2 uppercase">Weitere Empfänger</p> <p class="mb-2 text-[18px] font-bold tracking-wide text-ink-2 uppercase">Weitere Empfänger</p>
{#each persons as person (person.id)} {#each persons as person (person.id)}
<div role="listitem"> <div role="listitem">
<a <a
href="/persons/{person.id}" href="/persons/{person.id}"
class="block py-0.5 text-[11px] text-ink hover:text-primary focus-visible:ring-2 focus-visible:ring-primary" class="block py-0.5 text-[22px] text-ink hover:text-primary focus-visible:ring-2 focus-visible:ring-primary"
> >
{person.firstName} {person.firstName}
{person.lastName} {person.lastName}

2
frontend/src/lib/components/OverflowPillDisplay.svelte
View File

@@ -8,7 +8,7 @@ let { extraCount }: Props = $props();
<span <span
aria-hidden="true" aria-hidden="true"
class="inline-flex shrink-0 items-center rounded-full border border-line bg-muted px-2 py-0.5 text-[9px] font-bold text-ink-2" class="inline-flex shrink-0 items-center rounded-full border border-line bg-muted px-2 py-0.5 text-[18px] font-bold text-ink-2"
> >
+{extraCount} +{extraCount}
</span> </span>

4
frontend/src/lib/components/PersonChip.svelte
View File

@@ -23,11 +23,11 @@ const initials = $derived(
class="inline-flex shrink-0 items-center gap-1.5 rounded-full border border-line bg-muted px-2 py-0.5" class="inline-flex shrink-0 items-center gap-1.5 rounded-full border border-line bg-muted px-2 py-0.5"
> >
<span <span
class="flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[8px] font-bold text-white" class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-[16px] font-bold text-white"
style="background-color: {avatarColor}" style="background-color: {avatarColor}"
aria-hidden="true" aria-hidden="true"
> >
{initials} {initials}
</span> </span>
<span class="text-[9px] font-semibold text-ink">{displayName}</span> <span class="text-[18px] font-semibold text-ink">{displayName}</span>
</span> </span>

2
frontend/src/lib/components/PersonChipRow.svelte
View File

@@ -22,7 +22,7 @@ const visibleReceivers = $derived(receivers.slice(0, 2));
{/if} {/if}
{#if sender && receivers.length > 0} {#if sender && receivers.length > 0}
<span class="shrink-0 text-[10px] text-ink-2" aria-hidden="true">→</span> <span class="shrink-0 text-[20px] text-ink-2" aria-hidden="true">→</span>
{/if} {/if}
{#each visibleReceivers as receiver, i (receiver.id)} {#each visibleReceivers as receiver, i (receiver.id)}