Skip to content

Fixed arrow alignment in covers modal#10169

Merged
cdrini merged 2 commits intointernetarchive:masterfrom
Craig-Rosario:fix-alignment
Jan 9, 2025
Merged

Fixed arrow alignment in covers modal#10169
cdrini merged 2 commits intointernetarchive:masterfrom
Craig-Rosario:fix-alignment

Conversation

@Craig-Rosario
Copy link
Contributor

@Craig-Rosario Craig-Rosario commented Dec 19, 2024

Closes #10134

Align/Fix the navigation arrows, positioning them on the sides of the covers for better usability.

Technical

Testing

  1. Go to the add-cover section of a book (eg. https://openlibrary.org/works/OL69166W/Italian_journeys/add-cover)

Screenshot

Before:
Screenshot 2024-12-19 121132

After:
Screenshot 2024-12-19 121909

Stakeholders

@mekarpeles

@codecov-commenter
Copy link

codecov-commenter commented Dec 20, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 17.59%. Comparing base (347bff9) to head (a5b8930).
Report is 254 commits behind head on master.

Additional details and impacted files
@@            Coverage Diff             @@
##           master   #10169      +/-   ##
==========================================
+ Coverage   17.12%   17.59%   +0.46%     
==========================================
  Files          89       88       -1     
  Lines        4752     4769      +17     
  Branches      831      847      +16     
==========================================
+ Hits          814      839      +25     
+ Misses       3428     3411      -17     
- Partials      510      519       +9     

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

@cdrini cdrini changed the title fixed arrow alignment fixed arrow alignment in covers modal Dec 30, 2024
@cdrini cdrini changed the title fixed arrow alignment in covers modal Fixed arrow alignment in covers modal Dec 30, 2024

.slick-next
{
right: -25px;
Copy link
Member

Choose a reason for hiding this comment

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

This may affect the buttons on other pages as well (e.g. the homepage) so we may have to do some testing

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah, some testing may be required, because when the value is:
right: -25px

some part of the arrow actually clips out of the box.

Copy link
Collaborator

@cdrini cdrini left a comment

Choose a reason for hiding this comment

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

Ah, the issue here is that the CSS meant for the "Use this image" button are also applying to the left/right button. Because of this css rule: .ol-cover-form .carousel button. Changing the rule to .ol-cover-form .carousel .cta-btn should fix the issue 👍 That's a preferable approach, since it makes fewer changes, and is less likely to affect other parts of the page and cause bugs.

@cdrini cdrini added the Needs: Submitter Input Waiting on input from the creator of the issue/pr [managed] label Jan 7, 2025
@github-actions github-actions bot removed the Needs: Submitter Input Waiting on input from the creator of the issue/pr [managed] label Jan 8, 2025
@Craig-Rosario
Copy link
Contributor Author

Yeah, made the necessary changes, works great now. Also adjusted the z-index to ensure it doesn’t interfere with the book image.
Screenshot 2025-01-09 010138

Copy link
Collaborator

@cdrini cdrini left a comment

Choose a reason for hiding this comment

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

Looks great! Thank you @Craig-Rosario !

image
image

@cdrini cdrini merged commit 8803918 into internetarchive:master Jan 9, 2025
4 checks passed
@Craig-Rosario
Copy link
Contributor Author

No worries, glad I could help😊

@Craig-Rosario Craig-Rosario deleted the fix-alignment branch January 9, 2025 15:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Return cover selector navigation to right and left placement

4 participants