Skip to content

feat(gallery): browse controls and interaction feel - #301

Closed
TMHSDigital wants to merge 1 commit into
feat/gallery-detail-navfrom
feat/gallery-browse-controls
Closed

TMHSDigital wants to merge 1 commit into
feat/gallery-detail-navfrom
feat/gallery-browse-controls

Conversation

@TMHSDigital

Copy link
Copy Markdown
Owner

Summary

PR 2 of 3 in the website QoL pass. Stacked on #300. Review after #300; once #300 squash-merges, this will be rebased onto main.

  • Kind switch: All / Examples / Showcase (#k=). The showcase chip leaves the topic row; legacy #tag=showcase (used by the landing page) resolves to the Showcase switch.
  • Multi-tag: chips toggle and combine with AND (#tag=a,b); unknown tags are dropped; the mobile Tags toggle names every active tag; a deep-linked chip is scrolled into view in the strip.
  • Sort: Gallery order / Name A–Z (#s=az), reordering DOM nodes from the original order.
  • Feel: hash write on search debounced 250 ms; card renders fade in once decoded (already-complete images are marked immediately so nothing stays hidden; no-JS unaffected, gated on html.js); a restrained hover zoom that reduced-motion disables (replaces a dead .card:hover{transform:none} rule); focus rings inset on segmented controls so overflow:hidden no longer clips them; README prose capped at 75ch; a tighter sticky bar under 560px (search on its own row; count visually hidden but still a live region).
  • examples/gallery.json description updated: showcase is found via the switch, not a tag.

Evidence

Proven by live run (local server, Playwright/Chromium):

  • #tag=showcase → Showcase active, 36 of 88 shown, all data-kind=showcase, no showcase chip.
  • mesh → 54, + export → 36; independently computed AND count = 36; hash #tag=mesh,export; toggle "Tags: mesh + export".
  • A–Z sort: DOM order equals sorted names; back to default restores the first card.
  • Search: hash unchanged immediately after input, q=gear present after 400 ms.
  • Fresh load #k=examples&tag=mesh,bogus&s=az → 18 cards, all examples, first attribute-domain-shear, bogus dropped.
  • 375px: no horizontal overflow (scrollWidth 360), sticky controls 116px tall.
  • Build deterministic; docs/gallery regenerated.

By inspection only: the reduced-motion and no-JS CSS paths.

🤖 Generated with Claude Code

Showcase pieces were reachable only through a "showcase" topic chip, one
tag could be active at a time, and the grid had one fixed order. The
index now has an All / Examples / Showcase switch, AND-combined topic
chips, and a Gallery order / Name A-Z sort, all mirrored in the URL hash
(k=, tag=a,b, s=). Legacy #tag=showcase links, the landing page's among
them, resolve to the Showcase switch so no inbound link breaks.

Search no longer rewrites the hash on every keystroke, card renders fade
in once decoded, hover gets a restrained zoom that reduced-motion turns
off (replacing a rule that disabled a transform nobody set), focus rings
sit inside segmented controls instead of being clipped, README prose is
capped at a readable measure, and the sticky bar packs tighter on phones.

Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>
Signed-off-by: TMHSDigital <[email protected]>
@github-actions github-actions Bot added examples Runnable smoke-gated examples under examples/ documentation Improvements or additions to documentation labels Sep 27, 2026
@TMHSDigital
TMHSDigital deleted the branch feat/gallery-detail-nav September 27, 2026 13:39
@TMHSDigital

Copy link
Copy Markdown
Owner Author

Superseded by #303 — GitHub closed this PR when its base branch was deleted on the #300 merge. Same branch, same content, now targeting main.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

documentation Improvements or additions to documentation examples Runnable smoke-gated examples under examples/

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant