glitch-university/gupi-osint-board
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve timeline date legibility

Browse Source
This commit is contained in:
gitprov
2026-08-15 09:13:30 +02:00
parent d99deb3c06
commit eeaa4138fa
2 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
e2e/board.smoke.spec.ts
+2
View File
@@ -32,6 +32,8 @@ test('move, folder expansion, empty-board pan, desktop wheel zoom, mobile pinch,
timeline: Number.parseInt(getComputedStyle(document.querySelector('.timeline')!).zIndex, 10), timeline: Number.parseInt(getComputedStyle(document.querySelector('.timeline')!).zIndex, 10),
})) }))
expect(temporalLayering.links).toBeGreaterThan(temporalLayering.timeline) expect(temporalLayering.links).toBeGreaterThan(temporalLayering.timeline)
expect(await page.locator('.timeline .year').first().evaluate(element => Number.parseFloat(getComputedStyle(element).fontSize))).toBeGreaterThanOrEqual(12)
expect(await page.locator('.timeline-label button').evaluate(element => Number.parseFloat(getComputedStyle(element).fontSize))).toBeGreaterThanOrEqual(11)
await expect(page.locator('.documents-panel')).toHaveClass(/\bclosed\b/) await expect(page.locator('.documents-panel')).toHaveClass(/\bclosed\b/)
await expect(page.locator('.brief-panel')).toBeVisible() await expect(page.locator('.brief-panel')).toBeVisible()
await expect(page.getByRole('button', { name: 'Case brief', exact: true })).toContainText('2') await expect(page.getByRole('button', { name: 'Case brief', exact: true })).toContainText('2')
src/styles.css
+2 -2
View File
@@ -196,10 +196,10 @@ button:focus-visible { outline: 2px solid #e99a44; outline-offset: 2px; }
.timeline { background: #0d231e; border-top: 1px solid #3c544d; display: grid; grid-template-columns: 180px 1fr 165px; align-items: center; padding: 0 25px; z-index: 8; } .timeline { background: #0d231e; border-top: 1px solid #3c544d; display: grid; grid-template-columns: 180px 1fr 165px; align-items: center; padding: 0 25px; z-index: 8; }
.temporal-links { position: fixed; z-index: 9; inset: 0; width: 100vw; height: 100vh; pointer-events: none; overflow: visible; }.temporal-links line { stroke: #8b9792; stroke-width: 1; opacity: .42; vector-effect: non-scaling-stroke; } .temporal-links { position: fixed; z-index: 9; inset: 0; width: 100vw; height: 100vh; pointer-events: none; overflow: visible; }.temporal-links line { stroke: #8b9792; stroke-width: 1; opacity: .42; vector-effect: non-scaling-stroke; }
.timeline-label { border-right: 1px solid #314a43; height: 67px; display: flex; flex-direction: column; justify-content: center; } .timeline-label { border-right: 1px solid #314a43; height: 67px; display: flex; flex-direction: column; justify-content: center; }
.timeline-label b { font: 600 14px IBM Plex Mono; margin: 4px 0; }.timeline-label button { width: max-content; max-width: 170px; padding: 0; overflow: hidden; color: #a07142; background: transparent; border: 0; text-overflow: ellipsis; white-space: nowrap; text-align: left; cursor: pointer; font: 8px IBM Plex Mono; } .timeline-label b { font: 600 15px IBM Plex Mono; margin: 4px 0; }.timeline-label button { width: max-content; max-width: 170px; padding: 1px 0; overflow: hidden; color: #d29a61; background: transparent; border: 0; text-overflow: ellipsis; white-space: nowrap; text-align: left; cursor: pointer; font: 500 11px IBM Plex Mono; }
.timeline-track { height: 75px; margin: 0 43px; position: relative; } .timeline-track { height: 75px; margin: 0 43px; position: relative; }
.axis { position: absolute; left: 0; right: 0; top: 45px; height: 1px; background: #61736d; } .axis { position: absolute; left: 0; right: 0; top: 45px; height: 1px; background: #61736d; }
.year { position: absolute; top: 53px; transform: translateX(-50%); font: 9px IBM Plex Mono; color: #6f8981; } .year { position: absolute; top: 53px; transform: translateX(-50%); color: #b7c7c1; font: 600 12px IBM Plex Mono; letter-spacing: .02em; text-shadow: 0 1px 1px #020907; }
.year::before { content: ''; position: absolute; left: 50%; top: -9px; height: 5px; border-left: 1px solid #6a7e78; } .year::before { content: ''; position: absolute; left: 50%; top: -9px; height: 5px; border-left: 1px solid #6a7e78; }
.marker { position: absolute; width: 19px; height: 29px; transform: translateX(-50%); border: 0; background: transparent; cursor: pointer; padding: 0; } .marker { position: absolute; width: 19px; height: 29px; transform: translateX(-50%); border: 0; background: transparent; cursor: pointer; padding: 0; }
.marker i { display: block; width: 10px; height: 10px; border: 2px solid #8eb3a7; background: #16352e; rotate: 45deg; box-shadow: 0 0 0 3px #0d231e; } .marker i { display: block; width: 10px; height: 10px; border: 2px solid #8eb3a7; background: #16352e; rotate: 45deg; box-shadow: 0 0 0 3px #0d231e; }