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

feat(documents): hide timeline density widget below lg (#385)

Browse Source 
Tablet (640–1024px) is exactly the iPad audience for transcribers.
At 240 monthly bars on an 800px column the bars fall to ~3.3px wide,
well below the 44×44 touch-target floor. Bumps the visibility class
from hidden sm:block to hidden lg:block and matches the page.ts
matchMedia gate to (min-width: 1024px). Closes Leonie's tablet
touch-target finding.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-05-08 10:00:47 +02:00
parent 61d1c1793b
commit 52827ccc87
3 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/lib/document/timeline.ts
View File

@@ -193,10 +193,10 @@ export function buildDensityUrl(filters: DensityFilters = {}): string {
}
/**
* Loads the density data for the timeline widget. Mobile (sm: breakpoint and below)
* and calendar view both skip the request entirely — the widget isn't rendered
* there. A non-ok response or network failure degrades to an empty bucket list
* instead of throwing, so the document list page keeps rendering.
* Loads the density data for the timeline widget. Tablet and below (lg breakpoint,
* <1024px) and calendar view both skip the request entirely — the widget isn't
* rendered there. A non-ok response or network failure degrades to an empty
* bucket list instead of throwing, so the document list page keeps rendering.
*/
export async function fetchDensity(
fetch: typeof globalThis.fetch,

2
frontend/src/routes/documents/+page.svelte
View File

@@ -241,7 +241,7 @@ $effect(() => {
onblur={() => (qFocused = false)}
/>
<div class="mt-3 mb-4 hidden sm:block">
<div class="mt-3 mb-4 hidden lg:block">
<TimelineDensityFilter
density={data.density}
minDate={data.minDate}

4
frontend/src/routes/documents/+page.ts
View File

@@ -4,7 +4,9 @@ import type { PageLoad } from './$types';
export const load: PageLoad = async ({ url, fetch, data }) => {
const view = url.searchParams.get('view');
const isDesktop = browser && window.matchMedia('(min-width: 640px)').matches;
// Tailwind `lg` breakpoint — bars below this width fall under the 44×44 touch
// target floor (Leonie's tablet finding) and the chart skips the fetch.
const isDesktop = browser && window.matchMedia('(min-width: 1024px)').matches;
// Forward active filters (excluding from/to) so the chart matches the list.
const tagOp = url.searchParams.get('tagOp');