Repository: internetarchive/openlibrary

Issue:
My Books Page: mobile Redesign 
<!-- What problem are we solving? What does the experience look like today? What are the symptoms? -->


Designs: https://www.figma.com/proto/KE0BoBAlMPzPHbhvVblKS8/My-Books-Page-Prototype-Flows?node-id=332%3A80&scaling=scale-down&page-id=277%3A2&starting-point-node-id=332%3A80&show-proto-sidebar=1

Implement designs from #6875

![image](https://user-images.githubusercontent.com/6251786/210882500-8f77b6f9-ed1f-4aa0-b917-98e491218841.png)

## Problem

Currently the My Books page (e.g. https://openlibrary.org/account/books) navigation has not been styled for accessibility on mobile. The desktop sidebar navigation, on mobile, takes up nearly half of the page. It becomes unclear to some patrons that it is a navigation menu v. the page's content:

<img width="400px" src="https://user-images.githubusercontent.com/978325/183764247-8fa54446-f12f-4eba-ad27-03545b436e5f.png">

## Possible Solution

We're exploring a redesign of the My Books page (mobile + navigation):
* https://www.figma.com/file/32L8oj6wNwydCTZVp4Vcfr/Open-Library?node-id=0%3A1
* @szgrune do you have an updated figma link to add here?

![www figma com_file_32L8oj6wNwydCTZVp4Vcfr_Open-Library_node-id=0%3A1 (1)](https://user-images.githubusercontent.com/978325/191989506-59509d23-aa9a-4771-bbce-4f521050f4fe.png)
![www figma com_file_32L8oj6wNwydCTZVp4Vcfr_Open-Library_node-id=0%3A1 (2)](https://user-images.githubusercontent.com/978325/191989497-0fcb8594-775c-4db0-a2c2-070b5888291d.png)
![www figma com_file_32L8oj6wNwydCTZVp4Vcfr_Open-Library_node-id=0%3A1 (3)](https://user-images.githubusercontent.com/978325/191989483-66de1d0b-efcc-478d-8b29-655c79268261.png)

## Subtasks
* [x] #6858
* [x] Test + choose a design ([Design](https://user-images.githubusercontent.com/978325/209074998-ae84170a-846a-4e6c-86c1-6e84f2e27fb4.png))
* [x] #7376

### Relevant url?
<!-- `https://openlibrary.org/...` -->

https://openlibrary.org/account/books

### Details

- **Logged in (Y/N)?**
- **Browser type/version?**
- **Operating system?**
- **Environment (prod/dev/local)?** prod
<!-- If not sure, put prod -->

### Proposal & Constraints
<!-- What is the proposed solution / implementation? Is there a precedent of this approach succeeding elsewhere? -->

### Related files
<!-- Files related to this issue; this is super useful for new contributors who might want to help! If you're not sure, leave this blank; a maintainer will add them. -->

### Stakeholders
<!-- @ tag stakeholders of this bug -->



Discussion:
Any specific subtask that is open to be assigned?
Hi @lakshya-dhariwal -- @szgrune may be able to help advise further! We just finished a redesign for desktop and the next step is to improve mobile
@szgrune can you direct me to some specific issue
@lakshya-dhariwal I think a great first step would be to take a look at the recently merged Desktop My Books PR.

You can try it here: https://staging.openlibrary.org/account/books

The mobile version should have a breakpoint which toggles `.mybooks-details` to be `display: none` and on `.mybooks-menu` removes the `height: 21vh;` limit.

This **first** stage hides the My Books desktop page and only shows the My Books menu.
<img width="338" alt="Screenshot 2022-12-21 at 10 54 11 PM" src="https://user-images.githubusercontent.com/978325/209075260-5e806107-ae52-47a7-82ce-b83618dfe82f.png">


We'd love help creating a PR for phase 1 if you'd like to give it a try!

The **second** phase will be a mobile redesign of `.mybooks-menu` based on @szgrune's designs (which goes into effect when a mobile breakpoint is hit in css):
<img width="209" alt="Screenshot 2022-12-21 at 10 52 10 PM" src="https://user-images.githubusercontent.com/978325/209074998-ae84170a-846a-4e6c-86c1-6e84f2e27fb4.png">

Resolving patch:
diff --git a/openlibrary/plugins/upstream/mybooks.py b/openlibrary/plugins/upstream/mybooks.py
--- a/openlibrary/plugins/upstream/mybooks.py
+++ b/openlibrary/plugins/upstream/mybooks.py
@@ -313,13 +313,13 @@ def get_shelf(name, page=1):
             # Ideally, do all 3 lookups in one add_availability call
             want_to_read.docs = add_availability(
                 [d for d in want_to_read.docs if d.get('title')]
-            )[:4]
+            )[:5]
             currently_reading.docs = add_availability(
                 [d for d in currently_reading.docs if d.get('title')]
-            )[:4]
+            )[:5]
             already_read.docs = add_availability(
                 [d for d in already_read.docs if d.get('title')]
-            )[:4]
+            )[:5]
 
             # Marshal loans into homogeneous data that carousel can render
             loans = get_loans_of_user(logged_in_user.key)


Test patch: