Add spine width based on edition page count #10918
Open
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 #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
Screenshot
50–199 pages

500–999 pages

1500+ pages

Stakeholders
@cdrini