Skip to content

Add spine width based on edition page count #10918

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

harleenkaur2003
Copy link

Closes #2143

Feature: Adds a visual right-side spine on edition pages based on number of pages.

Technical

Title: Add Visual Right Spine Based on Edition Page Count

Description:

This PR introduces a visual enhancement on the edition page by rendering a right-side book spine that dynamically varies in width according to the book’s page count.
As the Open Library development environment was not functioning correctly on my system despite multiple setup attempts, I implemented and tested this feature in a mock HTML + CSS environment instead.

The spine's width is calculated using this logic:

0–49 pages → no spine

50–199 pages → 10px

200–499 pages → 20px

500–999 pages → 30px

1000–1499 pages → 40px

1500+ pages → 50px

The fallback behavior has been taken care of - if the number_of_pages field is missing, the book will render only the cover without any visual spine.

I’ve attempted to replicate the exact spine styling (including the texture and color gradient) from the demo shared in the issue. Please note, this implementation covers only the right-side spine visual. The bottom spine (as shown in the original demo) has not been implemented at this stage. If you believe it's critical for the visual completeness of the feature, I’d be happy to attempt that part as well in a future update.

Since this mock was developed outside the Open Library environment, I request @cdrini to verify and test the visual behavior on their system to ensure the integration works as expected with real edition data.

Testing

  • Go to an edition page with edition.number_of_pages set.
  • Check that the right-side spine is displayed with width as per the page count.
  • Try with books that have no number_of_pages to confirm fallback works (only the cover is shown).
  • Review the spine’s texture and positioning (should match the intended 3D effect from the original issue demo).

Screenshot

50–199 pages
Screenshot (20)

500–999 pages
WhatsApp Image 2025-06-10 at 02 39 14_fd329fc6

1500+ pages
WhatsApp Image 2025-06-10 at 02 37 08_4c2a4215

Stakeholders

@cdrini

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.

Add pages visual to edition book covers
2 participants