peter
78fdcda6bb
- Channel page: the banner and identity block fold away once the grid scrolls (ui/scrollFold: folds past 32px only if the page can stay scrolled, unfolds at the very top) and the name rides in the tab row. One Back button in both states keeps its focus; folded at a tablet width the actions wrap instead of pushing the page sideways. - Plex movie and show pages: the TMDB facts over the key crew are the hero's second column (plexDetailAside), the keywords sit under the text; the show page shows them for the first time, with the same three toggles. A collection's hero is sized to its text. - YouTube player, 1280px and wider: the title, channel, actions, description and queue sit in a side panel beside the video, which takes the window's height (1438x809 at 1920x911, was ~1008 wide). The wheel scrolls that panel while it can and turns the volume elsewhere. - DESIGN.md decision log: the keywords' place under the text.
25 lines
1.2 KiB
TypeScript
25 lines
1.2 KiB
TypeScript
// E31 (the owner's pick): the channel page's tall header folds to one row once the grid scrolls. The header
|
|
// is fixed, so folding gives the scroller its height back — these are the rules that keep that from
|
|
// flickering on a page barely taller than the window.
|
|
import { describe, expect, it } from "vitest";
|
|
import { FOLD_AT, nextFolded } from "./scrollFold";
|
|
|
|
const SAVING = 200;
|
|
|
|
describe("nextFolded", () => {
|
|
it("folds once the content scrolls past the fold point", () => {
|
|
expect(nextFolded(false, { top: FOLD_AT + 1, room: 5000 }, SAVING)).toBe(true);
|
|
expect(nextFolded(false, { top: FOLD_AT, room: 5000 }, SAVING)).toBe(false);
|
|
});
|
|
|
|
it("does not fold a page that could not stay scrolled once the header gave its height back", () => {
|
|
expect(nextFolded(false, { top: 100, room: SAVING + FOLD_AT }, SAVING)).toBe(false);
|
|
expect(nextFolded(false, { top: 100, room: SAVING + FOLD_AT + 1 }, SAVING)).toBe(true);
|
|
});
|
|
|
|
it("stays folded until the very top, not back at the fold point", () => {
|
|
expect(nextFolded(true, { top: 1, room: 5000 }, SAVING)).toBe(true);
|
|
expect(nextFolded(true, { top: 0, room: 5000 }, SAVING)).toBe(false);
|
|
});
|
|
});
|