fix(images): concept Load more focus, empty state and review rulings
Review of #249 C2: - Load more and Retry focus the first appended image, as the concept does (app.js loadMoreImages). Focus moves without scrolling so the visible cards keep their place (bounded-DOM anchor), and only while focus is still on the pressed control: a viewer or a field the user moved to keeps it. When a last page adds nothing and the button hides, focus goes to the last image, never to the page; a failed page focuses Retry. - The concept's empty state beside the grid: .empty "No matching images. Try another search or category." - D17: the caption date shows only under Newest first (", YYYY" outside the current year) and is hidden under Oldest first and the name and rating sorts. - en-US number grouping in the embedded count too. - Refine "Folder" defaults to the concept's "All output folders". It is not narrowed by Source: the concept has no Source field, and the list holds every source's folders, so any pair can be chosen in one dialog. - The shared toast moves to toast.mjs; library-editor re-exports it. - The D32 overlay (extreme zoom) wraps the layout segmented control and the continuation row instead of pushing them out of the 390px column. - The legacy gallery checks moved to Overview's "Open existing image gallery" card (D29). Mapping additions: grid with no results -> .empty concept copy beside the grid; Load more press -> focus the first new image (concept).
This commit is contained in:
@@ -59,9 +59,11 @@ main:focus-visible { outline: 2px solid var(--ca-focus); outline-offset: 4px; }
|
||||
.infinite-continuation button[aria-disabled="true"] { opacity: .55; cursor: wait; }
|
||||
/* #249 D14: the scope chip names real sources and folders, which can be far longer than "All output folders". */
|
||||
.filter-row span.chip { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
|
||||
/* #249 D31: at extreme zoom the 390px shell is narrower than the concept's three layout buttons; they wrap instead of
|
||||
/* #249 D32: at extreme zoom the 390px shell is narrower than the concept's three layout buttons; they wrap instead of
|
||||
scrolling the page sideways (they never wrap while they fit). */
|
||||
.segmented { flex-wrap: wrap; max-width: 100%; }
|
||||
/* #249 D32: likewise the continuation's text and Load more wrap instead of pushing the button out of the column. */
|
||||
.infinite-continuation { flex-wrap: wrap; }
|
||||
|
||||
/* Interim page guards: concept element rules (`.ca-tools dialog`, `pre`) now reach production dialogs and prompt text
|
||||
that keep their own design until their page PR rebuilds them in concept markup. */
|
||||
|
||||
Reference in New Issue
Block a user