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

fix(timeline): keep the axis spine behind the in-flow content (REQ-006)

Browse Source 
The absolutely-positioned spine ::before painted above the in-flow centered
content (density strips, event pills), drawing the line through them. Give
.timeline-axis a stacking context and the spine z-index:-1 so the line is
always background; cards, pills, strips, dots and badges ride on top.

Refs #833
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-06-14 11:38:32 +02:00
parent 217508ddb2
commit 8029bdec92
2 changed files with 13 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -90,6 +90,14 @@ const isEmpty = $derived(timeline.years.length === 0 && timeline.undated.length
{/if} {/if}
<style> <style>
/* Establish a stacking context so the spine (z-index: -1) sits behind the
in-flow cards/pills/strips but still in front of the canvas — the line is
always background; the badges, dots and markers ride on top of it. */
.timeline-axis {
position: relative;
z-index: 0;
}
/* Phone (< 1024px): a single left-anchored spine. Desktop (≥ 1024px): a /* Phone (< 1024px): a single left-anchored spine. Desktop (≥ 1024px): a
centered spine the bands' alternating cards sit on either side of. The centered spine the bands' alternating cards sit on either side of. The
spine is decorative — the chronology lives in the <ol> DOM order. */ spine is decorative — the chronology lives in the <ol> DOM order. */
@@ -100,6 +108,7 @@ const isEmpty = $derived(timeline.years.length === 0 && timeline.undated.length
bottom: 0; bottom: 0;
left: 0.5rem; left: 0.5rem;
width: 2px; width: 2px;
z-index: -1;
/* Three-stop life-thread: mint → navy → slate. Slate lives only as /* Three-stop life-thread: mint → navy → slate. Slate lives only as
--c-tag-slate (there is no --palette-slate). REQ-006/013. */ --c-tag-slate (there is no --palette-slate). REQ-006/013. */
background: linear-gradient(var(--palette-mint), var(--palette-navy), var(--c-tag-slate)); background: linear-gradient(var(--palette-mint), var(--palette-navy), var(--c-tag-slate));

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

@@ -254,10 +254,13 @@ describe('TimelineView', () => {
}); });
const axis = document.querySelector('.timeline-axis') as HTMLElement; const axis = document.querySelector('.timeline-axis') as HTMLElement;
expect(axis).not.toBeNull(); expect(axis).not.toBeNull();
const bg = getComputedStyle(axis, '::before').backgroundImage; const before = getComputedStyle(axis, '::before');
const bg = before.backgroundImage;
expect(bg).toContain('gradient'); expect(bg).toContain('gradient');
// three colour stops: mint, navy, slate // three colour stops: mint, navy, slate
expect((bg.match(/rgb/g) ?? []).length).toBe(3); expect((bg.match(/rgb/g) ?? []).length).toBe(3);
// the spine is always background: behind the in-flow cards/pills/strips.
expect(before.zIndex).toBe('-1');
} finally { } finally {
root.style.removeProperty('--palette-mint'); root.style.removeProperty('--palette-mint');
root.style.removeProperty('--palette-navy'); root.style.removeProperty('--palette-navy');