mirror of
https://github.com/lrnselfreliance/wrolpi.git
synced 2026-10-26 19:01:39 -04:00
e46a44d253
Four defects on /videos, /docs and /archives. Titles were invisible outside light. `.card-link` carried a literal `color: black` from before the themes existed -- about 1.1:1 on the dark, night and amber panels. It applies to every card title and to the channel/author/domain line beside it. The date was fine, since it takes `--muted` from the card body, which is what made this look like a card bug rather than a link bug. Titles now take `--text`: they are links, but they are the card's text, not a wall of blue. Posters were cropped, not mis-proportioned. The image carried a fixed 290x163 box; a card in the default grid is about 233px wide and Mantine's Card sets `overflow: hidden`, so the browser painted the middle 233px of a 290px image. The ratio was right in the layout tree and wrong on screen. Replaced with caps on both axes -- the card's width and `--card-poster-max-height: 200px` -- with `width`/`height` left `auto` so the pair behaves as "contain". Bounding the width alone was tried first and is not enough: a square thumbnail then stands as tall as the card is wide, and a portrait book cover taller still. The meta line was foot-anchored, so on /docs a PDF with no author had its date shoved up to 55px below the title, at the bottom of a card that was tall only because of its neighbour in the row. It now sits directly under the title. Archive cards read buttons-then-domain, because the buttons were children and the meta was what got pushed to the foot. Card gains an `actions` slot, rendered last and anchored to the foot, so a row lines its buttons up however many lines each title took. Gallery gains a poster row covering all five ratios and a row showing meta/actions against unequal titles. 1076 jest tests, 145 in ui-layout.cy.js, clean build. Every new guard was checked against a planted regression: dropping the height cap reddens the square and portrait cases and leaves 16:9 green; `width: 100%` reddens containment; restoring `color: black` reddens dark/night/amber and leaves light green; re-anchoring the meta and swapping the slot order redden both the jest order test and the cypress geometry tests. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> |
||
|---|---|---|
| .. | ||
| admin | ||
| calculators | ||
| collections | ||
| inventory | ||
| ui | ||
| AddToPlaylist.js | ||
| Apps.js | ||
| Archive.js | ||
| ArchivePreview.js | ||
| BulkTagModal.js | ||
| BulkTagModal.test.js | ||
| Calculators.js | ||
| CbzViewer.js | ||
| Channels.cy.js | ||
| Channels.js | ||
| Common.js | ||
| Common.test.js | ||
| DatesSelector.js | ||
| DesktopToggle.test.js | ||
| Docs.js | ||
| DomainEditPage.test.js | ||
| DomainsPage.test.js | ||
| DomainTagging.test.js | ||
| DonatePage.js | ||
| Download.cy.js | ||
| Download.js | ||
| Download.test.js | ||
| ErrorBoundary.js | ||
| FileBrowser.js | ||
| FileBrowser.test.js | ||
| FilePreview.js | ||
| FilePreview.test.js | ||
| Files.js | ||
| Flasher.js | ||
| Flasher.test.js | ||
| Headline.js | ||
| HelpModal.js | ||
| KeyboardShortcutsProvider.js | ||
| Map.js | ||
| MapSearchView.js | ||
| MapViewer.js | ||
| Nav.js | ||
| otp.js | ||
| otp.test.js | ||
| Placeholder.js | ||
| Playlists.js | ||
| Playlists.test.js | ||
| Search.js | ||
| SearchFilterModal.test.js | ||
| Share.js | ||
| ShortcutHint.js | ||
| SortableTable.js | ||
| Tables.js | ||
| TaggedDeleteConfirmModal.js | ||
| TaggedDeleteConfirmModal.test.js | ||
| Theme.tsx | ||
| ThemeProvider.test.js | ||
| ThemeSamplePage.js | ||
| Upload.js | ||
| Vars.js | ||
| VideoPlayer.js | ||
| VideoPlayer.test.js | ||
| Videos.js | ||
| VncToggle.test.js | ||
| Zim.js | ||