virtual-bookshelf
virtual-bookshelf copied to clipboard
Fix: Title length issue and overlap with author
I really liked this project (well done by the way!) and wanted to work on the title issue.
My goal was to allow up to 220 character-long titles, without overflowing the parent container or overlapping with the author's initials. Of course, this can further be adjusted to accommodate even longer titles.
The approach is a JS/CSS combination, by dynamically adjusting the font size, adding a little bit of padding at the bottom, and evaluating the min/max spine height accordingly.
Looking forward to hearing your thoughts!
Hey, thank you for the contribution! I like this idea and it seems to work well. There are cases where the title still overlaps with the author's initials though.
If you take a look at PR #5 you'll see we're thinking of just truncating the title if it's over a certain character length. And PR #7 seems to be a mix of your solution and truncation, though I think I prefer your implementation of dynamic font-size and padding better.
Curious to hear what you think. Thanks
I did have a look at PR #5, but I am generally not fond of truncating text with an ellipsis in this context. The idea behind my PR is that the dev that is using this component can easily tap into the settings and modify them to their liking, without obscuring the title's text content.
This could be done by either adjusting the randomHeight's lower and upper limits (if the adjustment is needed), or by tapping into the adjustTextStyle and providing their preferable font size and padding-bottom.
If you have any suggestions or ideas on how to further improve this, I'd certainly be interested to have a look!