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

feat(ui): Korrespondenz redesign — compact strip, log cards, single-person mode #164

Merged
marcel merged 32 commits from feat/issue-162-korrespondenz-redesign into main 2026-03-30 21:38:23 +02:00
Conversation 6 Commits 32 Files Changed 56 +8 -8
3 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a3a7af123d - Show all commits

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

@@ -130,7 +130,7 @@ function clickOutside(node: HTMLElement) {
<label
for={name}
class={compact
? 'block text-[7px] font-extrabold tracking-[0.5px] text-ink-3 uppercase'
? 'block text-xs font-bold tracking-wide text-ink-3 uppercase'
: 'block text-sm font-medium text-ink-2'}
>{label}</label
>
@@ -146,7 +146,7 @@ function clickOutside(node: HTMLElement) {
onfocus={handleFocus}
placeholder={placeholder ?? m.comp_typeahead_placeholder()}
class={compact
? 'block h-[30px] w-full rounded-[3px] border-[1.5px] border-line bg-surface px-[7px] text-[9px] text-ink placeholder:text-ink-3 focus:border-primary focus:outline-none'
? 'mt-1 block h-9 w-full rounded border border-line bg-surface px-2 text-sm text-ink placeholder:text-ink-3 focus:border-primary focus:outline-none'
: 'mt-1 block w-full rounded-md border border-line bg-surface p-2 text-ink shadow-sm placeholder:text-ink-3 focus:border-accent focus:ring-accent'}
/>

10
frontend/src/routes/korrespondenz/CorrespondenzFilterControls.svelte
View File

@@ -39,7 +39,7 @@ let isActive = $derived(!!(fromDate || toDate || sortDir !== 'DESC'));
aria-disabled={!senderId}
>
<!-- Period label -->
<span class="hidden text-[7px] font-extrabold tracking-[0.5px] text-ink-3 uppercase sm:block">
<span class="hidden text-xs font-bold tracking-wide text-ink-3 uppercase sm:block">
{conv_strip_period()}
</span>
@@ -50,7 +50,7 @@ let isActive = $derived(!!(fromDate || toDate || sortDir !== 'DESC'));
onchange={() => onapplyFilters()}
placeholder={conv_strip_from_placeholder()}
aria-label="Von"
class="h-[22px] min-h-[44px] w-[80px] rounded-[3px] border-[1.5px] bg-surface px-1 text-[8px] text-ink focus:outline-none sm:min-h-0"
class="h-8 min-h-[44px] w-[100px] rounded border bg-surface px-2 text-xs text-ink focus:outline-none sm:min-h-0"
class:border-primary={!!fromDate}
class:border-line={!fromDate}
/>
@@ -64,7 +64,7 @@ let isActive = $derived(!!(fromDate || toDate || sortDir !== 'DESC'));
onchange={() => onapplyFilters()}
placeholder={conv_strip_to_placeholder()}
aria-label="Bis"
class="h-[22px] min-h-[44px] w-[80px] rounded-[3px] border-[1.5px] bg-surface px-1 text-[8px] text-ink focus:outline-none sm:min-h-0"
class="h-8 min-h-[44px] w-[100px] rounded border bg-surface px-2 text-xs text-ink focus:outline-none sm:min-h-0"
class:border-primary={!!toDate}
class:border-line={!toDate}
/>
@@ -72,7 +72,7 @@ let isActive = $derived(!!(fromDate || toDate || sortDir !== 'DESC'));
<!-- Document count -->
<span
data-testid="conv-strip-count"
class="ml-auto text-[8px] font-bold"
class="ml-auto text-xs font-bold"
class:text-primary={hasDateFilter}
class:text-ink-3={!hasDateFilter}
>
@@ -86,7 +86,7 @@ let isActive = $derived(!!(fromDate || toDate || sortDir !== 'DESC'));
aria-label="Sortierung umkehren"
aria-pressed={sortDir === 'ASC'}
onclick={ontoggleSort}
class="flex h-[22px] min-h-[44px] items-center gap-1 rounded-[3px] border-[1.5px] px-2 text-[8px] font-bold sm:min-h-0"
class="flex h-8 min-h-[44px] items-center gap-1 rounded border px-3 text-xs font-bold sm:min-h-0"
class:border-primary={isActive}
class:text-primary={isActive}
class:border-line={!isActive}

2
frontend/src/routes/korrespondenz/CorrespondenzPersonBar.svelte
View File

@@ -55,7 +55,7 @@ function handleSuggestionSelect(id: string) {
type="button"
aria-label="Personen tauschen"
onclick={onswapPersons}
class="mb-[1px] flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-[3px] border border-line bg-surface text-ink-3 transition-colors hover:border-primary hover:text-primary"
class="flex h-9 w-9 shrink-0 items-center justify-center rounded border border-line bg-surface text-ink-3 transition-colors hover:border-primary hover:text-primary"
class:opacity-0={!swapVisible}
class:pointer-events-none={!swapVisible}
tabindex={swapVisible ? 0 : -1}