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

Restore /zeitstrahl Datum-mode visual fidelity to the Concept-A spec (#833) #836

Merged
marcel merged 23 commits from feat/issue-833-zeitstrahl-fidelity into main 2026-06-14 14:12:42 +02:00
Conversation 8 Commits 23 Files Changed 23 +28 -1
2 changed files with 28 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit bfe66569d7 - Show all commits

4
frontend/src/lib/timeline/TimelineView.svelte
View File

@@ -100,7 +100,9 @@ const isEmpty = $derived(timeline.years.length === 0 && timeline.undated.length
bottom: 0; bottom: 0;
left: 0.5rem; left: 0.5rem;
width: 2px; width: 2px;
background: linear-gradient(var(--palette-mint), var(--palette-navy)); /* Three-stop life-thread: mint → navy → slate. Slate lives only as
--c-tag-slate (there is no --palette-slate). REQ-006/013. */
background: linear-gradient(var(--palette-mint), var(--palette-navy), var(--c-tag-slate));
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {

25
frontend/src/lib/timeline/TimelineView.svelte.spec.ts
View File

@@ -240,6 +240,31 @@ describe('TimelineView', () => {
expect(document.body.textContent).toContain('Geburt'); expect(document.body.textContent).toContain('Geburt');
}); });
it('paints the axis with a three-stop mint→navy→slate gradient (REQ-006)', () => {
// The palette tokens live in layout.css, which component tests don't load,
// so define exactly the three the gradient must reference; an undefined
// fourth token would invalidate the declaration and yield "none".
const root = document.documentElement;
root.style.setProperty('--palette-mint', '#a1dcd8');
root.style.setProperty('--palette-navy', '#012851');
root.style.setProperty('--c-tag-slate', '#607080');
try {
render(TimelineView, {
timeline: makeTimelineDTO({ years: [makeYear(1914, [makeEntry()])] })
});
const axis = document.querySelector('.timeline-axis') as HTMLElement;
expect(axis).not.toBeNull();
const bg = getComputedStyle(axis, '::before').backgroundImage;
expect(bg).toContain('gradient');
// three colour stops: mint, navy, slate
expect((bg.match(/rgb/g) ?? []).length).toBe(3);
} finally {
root.style.removeProperty('--palette-mint');
root.style.removeProperty('--palette-navy');
root.style.removeProperty('--c-tag-slate');
}
});
it('places consecutive letter cards on alternating sides (REQ-004 surrogate)', () => { it('places consecutive letter cards on alternating sides (REQ-004 surrogate)', () => {
const letters = Array.from({ length: 4 }, (_, i) => makeEntry({ documentId: `d${i}` })); const letters = Array.from({ length: 4 }, (_, i) => makeEntry({ documentId: `d${i}` }));
render(TimelineView, { timeline: makeTimelineDTO({ years: [makeYear(1909, letters)] }) }); render(TimelineView, { timeline: makeTimelineDTO({ years: [makeYear(1909, letters)] }) });