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

feat: Briefwechsel hero redesign — discovery framing + padding #186

Merged
marcel merged 21 commits from feat/issue-179-briefwechsel-hero into main 2026-04-07 09:07:23 +02:00
Conversation 19 Commits 21 Files Changed 25 +39 -25
2 changed files with 39 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 001e875f31 - Show all commits

34
frontend/src/routes/briefwechsel/ConversationTimeline.svelte
View File

@@ -84,8 +84,24 @@ const newDocUrl = $derived(
aria-label="Briefverteilung in diesem Zeitraum: {outCount} von {senderName ?? ''}, {inCount} von {receiverName ?? ''}" aria-label="Briefverteilung in diesem Zeitraum: {outCount} von {senderName ?? ''}, {inCount} von {receiverName ?? ''}"
> >
<div class="flex justify-between text-sm font-bold"> <div class="flex justify-between text-sm font-bold">
<span class="text-primary">{outCount} von {shortSenderName} →</span> <span class="inline-flex items-center gap-1 text-primary"
<span class="text-accent">{inCount} von {shortReceiverName} ←</span> >{outCount} von {shortSenderName}
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Right-MD.svg"
alt=""
aria-hidden="true"
class="inline h-3.5 w-3.5 opacity-60"
/></span
>
<span class="inline-flex items-center gap-1 text-accent"
>{inCount} von {shortReceiverName}
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Left-MD.svg"
alt=""
aria-hidden="true"
class="inline h-3.5 w-3.5 opacity-60"
/></span
>
</div> </div>
<div class="flex h-[5px] overflow-hidden rounded-full bg-line"> <div class="flex h-[5px] overflow-hidden rounded-full bg-line">
<div class="h-full bg-primary transition-all" style="width: {outPct}%"></div> <div class="h-full bg-primary transition-all" style="width: {outPct}%"></div>
@@ -115,14 +131,14 @@ const newDocUrl = $derived(
class:border-l-primary={isOut} class:border-l-primary={isOut}
class:border-l-accent={!isOut} class:border-l-accent={!isOut}
> >
<span <img
class="w-[16px] shrink-0 text-sm font-black" src={isOut
class:text-primary={isOut} ? '/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Right-MD.svg'
class:text-accent={!isOut} : '/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Left-MD.svg'}
alt=""
aria-hidden="true" aria-hidden="true"
> class="h-4 w-4 shrink-0 opacity-60"
{isOut ? '→' : '←'} />
</span>
<div class="min-w-0 flex-1"> <div class="min-w-0 flex-1">
<div class="mb-[2px] truncate text-sm font-bold text-ink"> <div class="mb-[2px] truncate text-sm font-bold text-ink">

30
frontend/src/routes/briefwechsel/CorrespondenzPersonBar.svelte
View File

@@ -91,22 +91,20 @@ function handleSuggestionSelect(id: string) {
class:pointer-events-none={!swapVisible} class:pointer-events-none={!swapVisible}
tabindex={swapVisible ? 0 : -1} tabindex={swapVisible ? 0 : -1}
> >
<svg <div class="-my-1 flex flex-col items-center">
xmlns="http://www.w3.org/2000/svg" <img
width="14" src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Right-MD.svg"
height="14" alt=""
viewBox="0 0 24 24" aria-hidden="true"
fill="none" class="h-3.5 w-3.5 opacity-60"
stroke="currentColor" />
stroke-width="2" <img
stroke-linecap="round" src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Left-MD.svg"
stroke-linejoin="round" alt=""
aria-hidden="true" aria-hidden="true"
class="rotate-90" class="h-3.5 w-3.5 opacity-60"
> />
<path d="M7 16V4m0 0L3 8m4-4l4 4" /> </div>
<path d="M17 8v12m0 0l4-4m-4 4l-4-4" />
</svg>
</button> </button>
<!-- Korrespondent field --> <!-- Korrespondent field -->