Redesign Locate button as "Check Options" with on-site anchor navigation#12191
Draft
mekarpeles wants to merge 2 commits intomasterfrom
Draft
Redesign Locate button as "Check Options" with on-site anchor navigation#12191mekarpeles wants to merge 2 commits intomasterfrom
mekarpeles wants to merge 2 commits intomasterfrom
Conversation
…ion (#12105) Replaces the "Locate" CTA button (which sent patrons off-site to WorldCat) with a "Check Options" button that keeps patrons on Open Library by navigating to the edition page's vendor/library section via an anchor link. Changes: - LocateButton.html: rename label to "Check Options", update href from `/books/{key}/-/borrow?action=locate` to `/books/{key}#check-options`, remove `target="_blank"` and `cta-btn--external` class, update analytics tracking attribute to `CTAClick|CheckOptions` - databarWork.html: add `id="check-options"` to `.panel.desktop-vendor` so the sidebar vendor/library section is a named anchor target - view.html: add `id="check-options"` to `.panel.mobile-vendor` so the responsive mobile equivalent is also reachable as an anchor target - read-panel.css: add `@keyframes check-options-highlight` glow animation (uses `var(--primary-blue)`, fades out over 3s) and `:target` rules for `.desktop-vendor` and `.mobile-vendor` with `scroll-margin-top: 80px` to clear the sticky header; add `scroll-behavior: smooth` to `html` - borrow.py: remove the dead `action == 'locate'` → WorldCat redirect Approach follows the pattern established in PR #7125 (star ratings scroll/highlight).
mekarpeles
force-pushed
the
12105/redesign/locate-btn
branch
from
5ca4d7a to
fd45cd1
Compare
for more information, see https://pre-commit.ci
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #12105
Summary
/books/{key}/-/borrow?action=locate) to an on-site anchor (/books/{key}#check-options) that scrolls to the edition page's vendor/library sectionid="check-options"to both.panel.desktop-vendor(sidebar, shown on desktop) and.panel.mobile-vendor(main content, shown on mobile) so the anchor works at all breakpoints:target+@keyframes) usingvar(--primary-blue)to visually highlight the section on arrival — same pattern as PR Clicking Book Page Star Ratings summary goes to ratings section #7125 (star ratings)action == 'locate'→ WorldCat server-side redirect inborrow.pyFiles Changed
openlibrary/macros/LocateButton.htmltarget="_blank"/cta-btn--external, update analytics keyopenlibrary/macros/databarWork.htmlid="check-options"to.desktop-vendoropenlibrary/templates/type/edition/view.htmlid="check-options"to.mobile-vendorstatic/css/components/read-panel.css:targetrules + smooth scrollopenlibrary/plugins/upstream/borrow.pyaction=locateWorldCat redirectTest plan
.mobile-vendoris the visible target and also receives the glowdata-ol-link-track="CTAClick|CheckOptions"fires on click/books/{key}/-/borrow?action=locateURL no longer redirects to WorldCat (404 or falls through to borrow handler)Reference