3dtours/RecipesCam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: keep the catalogue on one screen

Browse Source 
Pin the thumbnail strip to the bottom edge of the window, let the wall
of thumbs scroll inside the stage with its own scrollbar, and letterbox
the preview so the frame fits the screen instead of growing the page.
This commit is contained in:
3dtours
2026-09-28 18:21:22 +07:00
parent d1abda141a
commit 12936731b3
2 changed files with 28 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docker/frontend/src/Library.tsx
+1 -1
View File
@@ -217,7 +217,7 @@ export function Library() {
);
return (
<div className="adm">
<div className="adm lib-root">
<header className="adm-bar">
<a className="adm-brand" href="/">
<img src="/assets/RecipesCamIcon.png" alt="" width="26" height="26" />
docker/frontend/src/styles/app.css
+27
View File
@@ -994,6 +994,33 @@ input[type="range"] { width: 100%; accent-color: var(--accent); }
.adm-danger { color: var(--danger); border-color: var(--border); }
.adm-danger:hover:not(:disabled) { border-color: var(--danger); }
/* The catalogue is one screen and never grows: the frame on the stage, the tree
beside it, and the strip pinned to the bottom edge. Whatever overflows scrolls
inside its own panel, so the page itself has no scrollbar to hide the strip
below the fold. Scoped to `.lib-root` — /admin shares the .adm-* blocks and
still scrolls as a page. */
.lib-root { display: flex; flex-direction: column; height: 100%; overflow: hidden; padding-bottom: 12px; }
.lib-root .adm-frame { flex: 1 1 auto; min-height: 0; }
.lib-root .adm-pane { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.lib-root .adm-note { flex: 0 0 auto; }
/* The column: title and the folder's own chips stay put, the split takes what
is left, the strip keeps its natural height on the bottom. */
.lib-root .adm-col { flex: 1 1 auto; min-height: 0; }
.lib-root .adm-col > .adm-split { flex: 1 1 auto; min-height: 0; align-items: stretch; }
.lib-root .adm-col > .adm-filmstrip { flex: 0 0 auto; }
.lib-root .adm-album-list { max-height: none; flex: 1 1 auto; min-height: 0; }
.lib-root .adm-stage { min-height: 0; overflow: hidden; }
/* The frame fills the stage and the stage fits the window: `object-fit` letterboxes
it inside that box, so a 3:2 or a 4:3 frame stays whole and never pushes the
strip off screen. */
.lib-root .adm-stage-img { flex: 1 1 auto; min-height: 0; width: 100%; aspect-ratio: auto; object-fit: contain; }
.lib-root .adm-stage > .lib-noimg { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
.lib-root .adm-stage > .adm-meta,
.lib-root .adm-stage > .chip-row { flex: 0 0 auto; }
/* All thumbs: the wall scrolls down inside the stage, and its own scrollbar on
the right edge is what reaches the frames below. */
.lib-root .adm-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 6px; }
/* Settings drawer: the tabs that organise the page, plus the three panels. */
/* The management frame: a bordered box whose left column is the menu and whose
right side is the pane for the chosen section. */