52827ccc87
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>
29 lines
1.2 KiB
TypeScript
29 lines
1.2 KiB
TypeScript
import { browser } from '$app/environment';
|
||
import { fetchDensity, type DensityFilters } from '$lib/document/timeline';
|
||
import type { PageLoad } from './$types';
|
||
|
||
export const load: PageLoad = async ({ url, fetch, data }) => {
|
||
const view = url.searchParams.get('view');
|
||
// 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');
|
||
const filters: DensityFilters = {
|
||
q: url.searchParams.get('q') ?? undefined,
|
||
senderId: url.searchParams.get('senderId') ?? undefined,
|
||
receiverId: url.searchParams.get('receiverId') ?? undefined,
|
||
tags: url.searchParams.getAll('tag'),
|
||
tagQ: url.searchParams.get('tagQ') ?? undefined,
|
||
status: url.searchParams.get('status') ?? undefined,
|
||
tagOp: tagOp === 'OR' ? 'OR' : 'AND'
|
||
};
|
||
|
||
const density = await fetchDensity(fetch, view, isDesktop, filters);
|
||
const zoomFrom = url.searchParams.get('zoomFrom');
|
||
const zoomTo = url.searchParams.get('zoomTo');
|
||
|
||
return { ...data, ...density, zoomFrom, zoomTo };
|
||
};
|