From 66b159b3bddd3c4bf37bad1158e3fd1040cfc51b Mon Sep 17 00:00:00 2001 From: 3dtours Date: Tue, 6 Oct 2026 18:22:40 +0700 Subject: [PATCH] library: centre the quarter-turn pair on the stage bar The bar under the picture is the grid it needs to be: equal free tracks either side of the two buttons land them on the picture's own centre whatever OPEN and the stars measure, and the pair keeps the ends it does not own. Under 700px the stage is too narrow for one line, so the bar wraps as it did and the lines it wraps to are centred. --- docker/frontend/src/Library.tsx | 14 ++++++++------ docker/frontend/src/styles/app.css | 19 +++++++++++++++++++ 2 files changed, 27 insertions(+), 6 deletions(-) diff --git a/docker/frontend/src/Library.tsx b/docker/frontend/src/Library.tsx index fab3aa4..696fb13 100644 --- a/docker/frontend/src/Library.tsx +++ b/docker/frontend/src/Library.tsx @@ -1635,34 +1635,36 @@ export function Library() { angle — the next visit, the next scan and the studio all read it off the row, so it is never turned twice. Two buttons and not a dial: a quarter is the - only turn a photo is ever out by. */} + only turn a photo is ever out by. They sit on the + centre of the bar, over the middle of the picture + above them, because they are what the eye comes down + to after it; the score stays out at the edge. */} - {/* The frame's own score, and the only place one is given: the star that is lit is the score it has, and the star under the click is the score it gets — diff --git a/docker/frontend/src/styles/app.css b/docker/frontend/src/styles/app.css index 4bcfde6..dee6d69 100644 --- a/docker/frontend/src/styles/app.css +++ b/docker/frontend/src/styles/app.css @@ -1180,6 +1180,21 @@ button.hint:disabled { cursor: default; } .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; } +/* The bar under the stage is four tracks — a free one to either side of the two + quarter-turns, so the pair lands on the picture's own centre whatever the + OPEN button and the stars happen to measure, and they stay at the ends they + belong to. Equal `1fr` either side is what does it; a spacer could not, since + the two end blocks are not the same width. */ +.lib-root .adm-stage > .chip-row { display: grid; grid-template-columns: 1fr auto auto 1fr; align-items: center; } +.lib-root .adm-stage > .chip-row > .btn { justify-self: start; } +.lib-root .adm-stage > .chip-row > .lib-stars { justify-self: end; } +/* Under ~700px of window the stage is narrower than those four need on one line, + and a grid would run the stars off the edge of it rather than wrap. It goes + back to the flex row it was — the lines it wraps to are centred under the + picture, so nothing slides off and the pair still sits in the middle. */ +@media (max-width: 700px) { + .lib-root .adm-stage > .chip-row { display: flex; justify-content: center; } +} /* 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; } @@ -1212,6 +1227,10 @@ button.hint:disabled { cursor: default; } /* The views are a glyph each (a frame, a wall of thumbs), so the row stays a row when the window is narrow. */ .lib-icon { padding: 5px 8px; justify-content: center; } +/* The two quarter-turn buttons under the stage: a bigger glyph than a view icon, + so the padding grows with it — the target is what the thumb aims at, and these + are pressed far more often than a view is switched. */ +.chip.lib-turn { padding: 7px 12px; } /* A folder's own menu, on a right click. Fixed, so the tree's own scroll cannot clip it; the position is clamped to the window when it is drawn. Sized after a catalogue's own menu rather than after a page's: it hangs off a