fix(korrespondenz): flush strips to top, larger year divider and row text
- Wrap strips in -mt-6 to negate main's py-6 top padding; strips now flush at top - Year divider: text-2xl font-black for the year number (was text-[15px]) - Year count and all log row meta text: text-sm minimum (was text-xs) - Asymmetry bar counts: text-sm (was text-[10px]) - No-results box: replace hardcoded hex with theme tokens Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
@@ -86,36 +86,39 @@ function selectPerson(id: string) {
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Strip: Row 1 — full width, no container -->
|
||||
<CorrespondenzPersonBar
|
||||
bind:senderId={senderId}
|
||||
bind:receiverId={receiverId}
|
||||
initialSenderName={data.initialValues.senderName}
|
||||
initialReceiverName={data.initialValues.receiverName}
|
||||
onapplyFilters={applyFilters}
|
||||
onswapPersons={swapPersons}
|
||||
/>
|
||||
|
||||
<!-- Strip: Row 2 — full width -->
|
||||
<CorrespondenzFilterControls
|
||||
senderId={senderId}
|
||||
bind:fromDate={fromDate}
|
||||
bind:toDate={toDate}
|
||||
bind:sortDir={sortDir}
|
||||
documentCount={data.documents.length}
|
||||
onapplyFilters={applyFilters}
|
||||
ontoggleSort={toggleSort}
|
||||
/>
|
||||
|
||||
<!-- Single-person hint bar -->
|
||||
{#if isSinglePerson}
|
||||
<SinglePersonHintBar
|
||||
senderName={senderName}
|
||||
fromDate={fromDate || undefined}
|
||||
toDate={toDate || undefined}
|
||||
sortDir={sortDir}
|
||||
<!-- Strips — pulled up to negate main's py-6 top padding so they sit flush -->
|
||||
<div class="-mt-6">
|
||||
<!-- Strip: Row 1 — full width, no container -->
|
||||
<CorrespondenzPersonBar
|
||||
bind:senderId={senderId}
|
||||
bind:receiverId={receiverId}
|
||||
initialSenderName={data.initialValues.senderName}
|
||||
initialReceiverName={data.initialValues.receiverName}
|
||||
onapplyFilters={applyFilters}
|
||||
onswapPersons={swapPersons}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<!-- Strip: Row 2 — full width -->
|
||||
<CorrespondenzFilterControls
|
||||
senderId={senderId}
|
||||
bind:fromDate={fromDate}
|
||||
bind:toDate={toDate}
|
||||
bind:sortDir={sortDir}
|
||||
documentCount={data.documents.length}
|
||||
onapplyFilters={applyFilters}
|
||||
ontoggleSort={toggleSort}
|
||||
/>
|
||||
|
||||
<!-- Single-person hint bar -->
|
||||
{#if isSinglePerson}
|
||||
<SinglePersonHintBar
|
||||
senderName={senderName}
|
||||
fromDate={fromDate || undefined}
|
||||
toDate={toDate || undefined}
|
||||
sortDir={sortDir}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Content area with padding -->
|
||||
<div class="px-[18px] py-[14px]">
|
||||
@@ -123,10 +126,10 @@ function selectPerson(id: string) {
|
||||
<CorrespondenzEmptyState onSelectPerson={selectPerson} />
|
||||
{:else if data.documents.length === 0}
|
||||
<div
|
||||
class="flex flex-col items-center justify-center rounded-sm border border-[#E0DDD6] bg-[#F7F5F2] py-24 text-center shadow-sm"
|
||||
class="flex flex-col items-center justify-center rounded-sm border border-line bg-muted py-24 text-center shadow-sm"
|
||||
>
|
||||
<p class="font-serif text-[#333]">{m.conv_no_results_heading()}</p>
|
||||
<p class="mt-2 text-sm text-[#888]">{m.conv_no_results_text()}</p>
|
||||
<p class="font-serif text-ink">{m.conv_no_results_heading()}</p>
|
||||
<p class="mt-2 text-sm text-ink-3">{m.conv_no_results_text()}</p>
|
||||
</div>
|
||||
{:else}
|
||||
<ConversationTimeline
|
||||
|
||||
@@ -84,7 +84,7 @@ const newDocUrl = $derived(
|
||||
role="img"
|
||||
aria-label="Briefverteilung in diesem Zeitraum: {outCount} von {senderName ?? ''}, {inCount} von {receiverName ?? ''}"
|
||||
>
|
||||
<div class="flex justify-between text-[10px] font-bold">
|
||||
<div class="flex justify-between text-sm font-bold">
|
||||
<span class="text-primary">{outCount} von {shortSenderName} →</span>
|
||||
<span class="text-accent">{inCount} von {shortReceiverName} ←</span>
|
||||
</div>
|
||||
@@ -100,10 +100,10 @@ const newDocUrl = $derived(
|
||||
{#if showYearDivider && year !== null}
|
||||
<div
|
||||
data-testid="year-divider"
|
||||
class="flex items-baseline gap-2 border-t-2 border-b border-line bg-muted px-[14px] py-[6px]"
|
||||
class="flex items-baseline gap-3 border-t-2 border-b border-line bg-muted px-[14px] py-[8px]"
|
||||
>
|
||||
<span class="text-[15px] leading-none font-black tracking-tight text-primary">{year}</span>
|
||||
<span class="text-[10px] font-bold text-ink-3">{countsByYear.get(year) ?? 0} Briefe</span>
|
||||
<span class="text-2xl font-black tracking-tight text-primary">{year}</span>
|
||||
<span class="text-sm font-bold text-ink-3">{countsByYear.get(year) ?? 0} Briefe</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -117,7 +117,7 @@ const newDocUrl = $derived(
|
||||
class:border-l-accent={!isOut}
|
||||
>
|
||||
<span
|
||||
class="w-[14px] shrink-0 text-xs font-black"
|
||||
class="w-[16px] shrink-0 text-sm font-black"
|
||||
class:text-primary={isOut}
|
||||
class:text-accent={!isOut}
|
||||
aria-hidden="true"
|
||||
@@ -129,7 +129,7 @@ const newDocUrl = $derived(
|
||||
<div class="mb-[2px] truncate text-sm font-bold text-ink">
|
||||
{doc.title || doc.originalFilename}
|
||||
</div>
|
||||
<div class="flex items-center gap-[5px] text-xs text-ink-3">
|
||||
<div class="flex items-center gap-[5px] text-sm text-ink-3">
|
||||
<span>{doc.documentDate ? formatDate(doc.documentDate) : '—'}</span>
|
||||
{#if doc.location}
|
||||
<span class="text-line">·</span>
|
||||
@@ -147,7 +147,7 @@ const newDocUrl = $derived(
|
||||
</div>
|
||||
|
||||
<span
|
||||
class="shrink-0 text-ink-3 opacity-0 transition-opacity group-hover:opacity-100"
|
||||
class="shrink-0 text-sm text-ink-3 opacity-0 transition-opacity group-hover:opacity-100"
|
||||
aria-hidden="true">›</span
|
||||
>
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user