Openlibrary: Improve mobile CTA on Editions pages

[mekarpeles]

Read/borrow button appears far below the fold on mobile UI for editions page

Screenshot

Relevant url?

https://openlibrary.org/books/OL25930651M/The_Three-Body_Problem

Expectation

Show CTA much higher -- e.g. under the bookcover

Details

• Logged in (Y/N)?
• Browser type/version?
• Operating system?

Proposal & Constraints

The read/borrow CTA button may be duplicated under or above the Want to Read button and show when the right mobile breakpoints are triggered

Stakeholders

[cecyc]

I can work on this! 🙋

[xayhewalo]

@cecyc Since you volunteered to work on this project, I am making you assignee and changing the state of this project to work in progress.

[mekarpeles]

@cecyc do you have a proposal for how this should be implemented? You may want to look at macros/LoanStatus.html and how it's used already within openlibrary/templates/type/edition/view.html.

We'll probably want the LoanStatus button to be above the Want to Read -- i.e. $:render_template("lists/widget", page, include_header=False) -- button, but hidden on desktop (and visible when mobile) within the editionCover block.

If you're wondering where the read/borrow button is coming from...

openlibrary/templates/type/edition/view.html is the edition page which calls...
$:macros.databarWork(page, editions_page=True) which is in openlibrary/macros/databarWork.html which calls..
$:macros.LoanStatus(page, ctx.user, editions_page=editions_page, block_name="read-options-panel") -- this call will need to be adjusted slightly and added into the editionCover block described above.

[cecyc]

@mekarpeles thank you! I was a bit stuck trying to figure out the best way to pull in that element, but this should hopefully set me in the right path, thank you!

[cecyc]

@mekarpeles have a PR here. Let me know your thoughts! Thanks!

[mekarpeles]

We'll take a look as soon as we can! Thank you for your hard work on this @cecyc. Will merge before Oct 31