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

fix(ui): unify date inputs — use DateInput component on both pages
Some checks failed
CI / Unit & Component Tests (push) Has been cancelled
Details
CI / Backend Unit Tests (push) Has been cancelled
Details
CI / Unit & Component Tests (pull_request) Failing after 1m16s
Details
CI / Backend Unit Tests (pull_request) Failing after 2m23s
Details

Browse Source 
Replace native <input type="date"> on the document search page with
the custom DateInput component (German dd.mm.yyyy format with auto-dot
insertion). Align both pages' date input styling: add rounded-md,
border, bg-surface, px-3, text-ink, placeholder color, and focus ring
to match all other inputs in the card.

Refs: #179

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-06 22:46:29 +02:00
parent 2e943b7f91
commit 708d02a1f7
2 changed files with 7 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/routes/SearchFilterBar.svelte
View File

@@ -1,6 +1,7 @@
<script lang="ts">
import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
import TagInput from '$lib/components/TagInput.svelte';
import DateInput from '$lib/components/DateInput.svelte';
import SortDropdown from '$lib/components/SortDropdown.svelte';
import { slide } from 'svelte/transition';
import { m } from '$lib/paraglide/messages.js';
@@ -192,24 +193,22 @@ $effect(() => {
class="mb-2 block text-xs font-bold tracking-widest text-ink-2 uppercase"
>{m.docs_filter_label_from()}</label
>
<input
type="date"
<DateInput
id="from"
bind:value={from}
onchange={onSearch}
class="block w-full border-line py-2.5 text-sm shadow-sm"
class="block w-full rounded-md border border-line bg-surface px-3 py-2.5 text-sm text-ink shadow-sm placeholder:text-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
/>
</div>
<div>
<label for="to" class="mb-2 block text-xs font-bold tracking-widest text-ink-2 uppercase"
>{m.docs_filter_label_to()}</label
>
<input
type="date"
<DateInput
id="to"
bind:value={to}
onchange={onSearch}
class="block w-full border-line py-2.5 text-sm shadow-sm"
class="block w-full rounded-md border border-line bg-surface px-3 py-2.5 text-sm text-ink shadow-sm placeholder:text-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
/>
</div>
</div>

4
frontend/src/routes/briefwechsel/CorrespondenzFilterControls.svelte
View File

@@ -30,7 +30,7 @@ let { fromDate = $bindable(''), toDate = $bindable(''), onapplyFilters }: Props
bind:value={fromDate}
onchange={() => onapplyFilters()}
placeholder={m.conv_strip_from_placeholder()}
class="block w-full border-line px-3 py-2.5 text-sm text-ink shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
class="block w-full rounded-md border border-line bg-surface px-3 py-2.5 text-sm text-ink shadow-sm placeholder:text-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
/>
</div>
@@ -44,7 +44,7 @@ let { fromDate = $bindable(''), toDate = $bindable(''), onapplyFilters }: Props
bind:value={toDate}
onchange={() => onapplyFilters()}
placeholder={m.conv_strip_to_placeholder()}
class="block w-full border-line px-3 py-2.5 text-sm text-ink shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
class="block w-full rounded-md border border-line bg-surface px-3 py-2.5 text-sm text-ink shadow-sm placeholder:text-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
/>
</div>
</div>