5831/feature/unified read button dropdown by SivanC · Pull Request #9544 · internetarchive/openlibrary

SivanC · 2024-07-09T19:47:38Z

Opening draft PR after suggested during today's community call (July 9 2024).

Feature/refactor: Condenses several "read-y" actions (Read/Borrow/Listen, Search Inside, Download, Check Nearby Libraries) into a dropdown.

Technical

Complete overhaul of macros/ReadButton.html and new CSS in generic-dropper.less to facilitate a details element-based implementation of a button with dropdown.

Testing

WIP

Screenshot

WIP

Stakeholders

@mekarpeles @jimchamp

static/css/components/generic-dropper.less

openlibrary/macros/LocateButton.html

Progress towards reworking the read button, currently with major styling issues and lack of functionality. Fix mistyped class name Change from cta-button-groupp to cta-button-group Reduce HTML, overwrite styling Remove some unnecessary div/span tags to simplify the HTML. Overwrite general CSS styling related to margins and list-style with specific rules. Add temp icons and dropper arrow Add temporary icons to the content buttons, and also replace and improve the dropper arrow. Restructure cta button and dropper Move the cta button outside of the summary tag in order to give the summary::after pseudo-element its own container for styling purposes. Has the side effect of moving the dropped content to appear directly below the dropper button, and not align with the left side of the cta button as before. [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci Fix positioning of dropper content Change position of dropper content to be aligned with left edge of read button as it was before restructuring of the element hierarchy. Change dropper hover behavior, realign dropper arrow Remove gray color when hovering over dropper content, add dark blue hover color to dropper button; change padding and margin rules to make summary element same size and shape as details element; fix misaligned open dropper arrow. Add icons, listen option Add four new icons to static/images/icons (listen, search, download, and map). Add link to read aloud audio to content dropper Listen button. Make listen option conditional Re-add coniditonal to check for listen-ability of work. Listen button does not show up in content dropper if there is no read aloud option available. Add scroll, highlight to check nearby libraries Clicking the check nearby libraries header in the read button will smoothly scroll the user to the check nearby libraries panel and highlight it with a border animation. See PR 7125 for similar implementation with star ratings. Remove scroll and highlight from check nearby libraries button Remove the scroll to CNL panel and border highlight/pulse after clicking the check nearby libraries button in the dropdown. No longer necessary since the goal of the button is to take the user to a worldcat link for now instead of having multiple options. Minor alignment fixes

Add a Check Nearby Libraries option to the read button dropper if an OCLC or ISBN identifier exists for an edition. Not satisfied with this solution as it adds another argument to LoanStatus.html calls, will probably be changed Rewrite dropper worldcat logic Switch from passing an edition to LoanStatus to using its existing doc parameter when attempting to grab OCLC and ISBN identifiers for generating a worldcat url. Wasn't able to test many situations such as multiple editions with different availability of OCLC/ISBN, etc., so will need further testing in a more robust environment. Light CSS refactor, remove overly specific styles Slightly change read-panel.less (removing .Tools from a styling rule, removing unused summary style rule) to lower specificity requirements in generic-dropper.less and integrate previously isolated rules into main styling block. More specificity fixes Specificity fix fix Remove extra line that unintentionally increased specificity Switch to borrow endpoint-based Worldcat link Refactor the Check Nearby Libraries button (and rename it) to use the OLID instead of OCLC/ISBN/title identifier, making it more robust. Now goes to a new LocateButton.html macro instead of WorldcatURL.html as well. Clarify variable name Change variable from olid to edition_key to make its contents more clear CSS adjustments Adjust width of dropper content to account for shortened longest button label. Return 10px bottom margin to Not in Library button that was removed when .Tools was removed from the main read-panel.less styling rules. Fix Locate Button Redirection Change from using work_key to doc.key in LoanStatus.html to retrieve the correct OLID for searching Worldcat Remove locate link in edition box, locate button fix Remove the worldcat link directly below the Not In Library button in the edition box on the books page, since it is replaced by the locate button. Fix locate button macro complaining about possibility of non-string value for edition key

Simplify HTML structure with the removal of superfluous classes and divs from ReadButton.html and LocateButton.html macros. Simplify or remove many CSS styling rules, move away from mixin-focused styling and unnecessary class descriptors. Overhaul rules for dropper menu positioning to attach it more firmly to details element. [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci Add internationalization wrapper for dropdown buttons [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci

Add search inside functionality and input box styling to the read button. Remove Search inside button from books page read column. [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci Update search inside CSS in dropper Change search inside form input element to take up whole box in dropper, add highlight on hover, group search inside-related style rules in dropper menu for clarity. Pre-commit specificity fixes Remove descending specificity, add comments to break down stylesheet sections, remove overly specific rules

Remove locate button macro and references in other files, since it has been moved to another branch as part of internetarchive#9952 Smooth hover transition for Search Inside box CSS Adjustments Fix a litany of minor styling issues Restore and remove search inside from Read Button Dropper Fix read button dropper width in edition table

… macro

static/css/components/generic-dropper.less

static/css/components/editions.less

SivanC · 2025-01-19T23:20:46Z

static/css/components/editions.less

    td.icon.read {
      order: 3;
-      .read {
+      ul.read {


Same as above

SivanC · 2025-01-19T23:26:41Z

@mekarpeles I think it's ready for testing! There's a couple unresolved issues I noticed that I listed in the issue, but other than that things seem operational. I've had a harder time testing in the search results and with print-disabled but should be easier on testing.

codecov-commenter · 2025-01-24T17:25:56Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 17.27%. Comparing base (9c5cd67) to head (a4063fa).
Report is 497 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #9544      +/-   ##
==========================================
- Coverage   17.43%   17.27%   -0.17%     
==========================================
  Files          88       87       -1     
  Lines        4811     4845      +34     
  Branches      853      860       +7     
==========================================
- Hits          839      837       -2     
- Misses       3447     3477      +30     
- Partials      525      531       +6

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

mekarpeles · 2025-01-24T17:54:56Z

homepage carousels seem to be getting broken droppers

z-index on the editions table

bonus: can we decrease icons to 1.25 instead of 1.5 and align text vertically? Can we target a size for the children in the dropper of want to read button?
@cdrini is there a recipe to prevent ILE click handler from firing on specific elements?

SivanC · 2025-01-26T00:10:38Z

@mekarpeles Everything but arrows on carousels should be fixed!

Adjust icon size, text vertical positioning, and z-level bug with multiple droppers on top of each other.

mekarpeles · 2025-03-05T00:21:27Z

When we merge, we should squash with this message:

## Implement Unified Read Button Changes

Creates a Unified Read Button Dropper that works across the Books Page, Authors Page, and Search Page. This includes the Book Page editions table.

Currently uses a conditional check to avoid rendering in carousels because (a) carousels have not yet been made #10472 Edition-Aware and also because the styling is broken.

The dropper shows the right primary action based on the case (e.g. Borrow, Read, Special Access)

The dropdown options (which display in cases other than carousels) show `locate` and `listen` where applicable, with icons, and will soon show `search inside` and `download` options.

We switched the Locate feature to use a new /borrow?action=locate method if an OCLC or ISBN identifier exists for an edition and simplified the code logic away from WorldcatURL.html.

mekarpeles · 2025-03-05T00:22:25Z

One final error:

When the patron is pd we should prefer "Special Access" to "Borrow"

Here's an example of what I mean -- in this case, all the books that say Borrow should actually say Special Access, because print disabled patrons will get to jump the line and access, even if it's available and borrowable.

SivanC force-pushed the 5831/feature/unified-read-button-dropdown branch from 1bdefa4 to e2c8bba Compare August 7, 2024 18:18

SivanC force-pushed the 5831/feature/unified-read-button-dropdown branch from 6829c7d to d98df44 Compare August 20, 2024 06:28

SivanC commented Aug 23, 2024

View reviewed changes

static/css/components/generic-dropper.less Outdated Show resolved Hide resolved

SivanC force-pushed the 5831/feature/unified-read-button-dropdown branch from 49bff57 to 5cc732a Compare September 25, 2024 20:03

mekarpeles reviewed Oct 5, 2024

View reviewed changes

openlibrary/macros/LocateButton.html Outdated Show resolved Hide resolved

SivanC force-pushed the 5831/feature/unified-read-button-dropdown branch from 828eedd to d26c347 Compare October 12, 2024 21:46

SivanC force-pushed the 5831/feature/unified-read-button-dropdown branch 2 times, most recently from bbfb5f5 to 9213b63 Compare January 17, 2025 22:26

SivanC added 9 commits January 17, 2025 14:30

Fix read dropdown in search, preview button CSS

f2f1bfc

Integrate locate button into read dropper, add icon option for locate…

9213b63

… macro

Mobile CSS somewhat-fixes

78de48c

Switch to flexbox for dropdown arrow centering

7e20dc5

SivanC commented Jan 18, 2025

View reviewed changes

static/css/components/generic-dropper.less Outdated Show resolved Hide resolved

SivanC commented Jan 19, 2025

View reviewed changes

static/css/components/editions.less Show resolved Hide resolved

SivanC commented Jan 19, 2025

View reviewed changes

static/css/components/editions.less

td.icon.read {

order: 3;

.read {

ul.read {

Copy link

Contributor Author

SivanC Jan 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above

SivanC marked this pull request as ready for review January 19, 2025 23:21

Fix dropper menu styling in mobile editions table

83f0bb9

mekarpeles self-assigned this Jan 21, 2025

testing css specificity fix

44e7e3a

SivanC added 2 commits January 25, 2025 16:13

Fix dropper button click-through on search page

16269e3

Dropper menu css fixes

bf25f5a

Adjust icon size, text vertical positioning, and z-level bug with multiple droppers on top of each other.

SivanC and others added 4 commits January 25, 2025 16:32

Fix search page dropper menu positioning rule

5b28e1f

Update comment in LoanStatus

ec8776a

fix carousels

cc60246

Update bundlesize.config.json

96680ed

mekarpeles added 2 commits March 4, 2025 19:29

For pd, display special access instead of borrow

82cc04e

roll back pd change

a4063fa

mekarpeles merged commit 1009c8b into internetarchive:master Mar 5, 2025
5 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

5831/feature/unified read button dropdown#9544

5831/feature/unified read button dropdown#9544
mekarpeles merged 19 commits intointernetarchive:masterfrom
SivanC:5831/feature/unified-read-button-dropdown

SivanC commented Jul 9, 2024

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

SivanC Jan 19, 2025

Uh oh!

SivanC commented Jan 19, 2025

Uh oh!

codecov-commenter commented Jan 24, 2025 •

edited

Loading

Uh oh!

mekarpeles commented Jan 24, 2025 •

edited

Loading

Uh oh!

SivanC commented Jan 26, 2025 •

edited

Loading

Uh oh!

mekarpeles commented Mar 5, 2025

Uh oh!

mekarpeles commented Mar 5, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

SivanC commented Jul 9, 2024

Technical

Testing

Screenshot

Stakeholders

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

SivanC Jan 19, 2025

Choose a reason for hiding this comment

Uh oh!

SivanC commented Jan 19, 2025

Uh oh!

codecov-commenter commented Jan 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

mekarpeles commented Jan 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

SivanC commented Jan 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mekarpeles commented Mar 5, 2025

Uh oh!

mekarpeles commented Mar 5, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

codecov-commenter commented Jan 24, 2025 •

edited

Loading

mekarpeles commented Jan 24, 2025 •

edited

Loading

SivanC commented Jan 26, 2025 •

edited

Loading