mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-11-13 15:51:00 +00:00
Maurice
c204a25a9c
The app shows the touch shell at every size now, an iPad's and an unfolded foldable's included, instead of switching to the desktop pages from 768px. One route tree survives rotation, Split View, Stage Manager and folding, and the app's own features (Wallet, sharing into a trip, the edge swipe back) are there on the big screen too. Two size classes drive the layout (hooks/sizeClass.ts, Tailwind variants wide: and split:): - wide (600pt and taller than a phone on its side): a glass navigation rail on the leading edge replaces the dock and holds every destination with its name; sheets become centred form sheets; the trip's More menu is a popover beside the rail; lists keep a readable measure; dashboard, journey and vacay get columns; full-bleed maps run under the floating rail. - split (900pt): the trip's plan, places or road trip chain sit in a pane beside the map, which follows the plan's day; the list/map switch hides and shows the pane like a sidebar; on a foldable that reports its fold the pane ends at the fold. Settings show their sections beside the page and the dashboard keeps its widgets in a column of their own. A hardware keyboard gets the shortcuts an iPad app has (⌘1 to ⌘9 for the sections, ⌘N, ⌘, , ⌥←/⌥→ through the days, ⌃⌘S for the pane, ⌘[ back), answered by the page or, with a binary that has the keyCommands feature, handed to it as native key commands. The day strip fades at an edge that runs on, journey cards grow on a wide window and a card without a photo takes the day's colour, and the Leaflet map measures itself again when its box changes size.
34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
import { act } from '@testing-library/react';
|
||
import { SPLIT_QUERY, WIDE_QUERY } from '../../src/hooks/sizeClass';
|
||
|
||
/**
|
||
* The touch shell's size class in tests (src/hooks/sizeClass.ts).
|
||
*
|
||
* jsdom's window is 1024×768, which the real queries would read as an iPad, so
|
||
* every phone test would run the wide layout. tests/setup.ts answers the two
|
||
* size-class queries from here instead: compact unless a test sets another,
|
||
* and back to compact after each test.
|
||
*/
|
||
export type TestSizeClass = 'compact' | 'wide' | 'split';
|
||
|
||
let current: TestSizeClass = 'compact';
|
||
|
||
export function sizeClassMatches(query: string): boolean | null {
|
||
if (query === WIDE_QUERY) return current !== 'compact';
|
||
if (query === SPLIT_QUERY) return current === 'split';
|
||
return null;
|
||
}
|
||
|
||
/** Switches the size class; the hooks follow as they would a rotation or a fold. */
|
||
export function setSizeClass(next: TestSizeClass): void {
|
||
act(() => {
|
||
current = next;
|
||
window.dispatchEvent(new Event('resize'));
|
||
});
|
||
}
|
||
|
||
/** Called by tests/setup.ts after each test. */
|
||
export function resetSizeClass(): void {
|
||
current = 'compact';
|
||
}
|