Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Add yearly reading goals to mobile My Books page #10168

Open
2 tasks
jimchamp opened this issue Dec 18, 2024 · 6 comments · May be fixed by #10208
Open
2 tasks

Add yearly reading goals to mobile My Books page #10168

jimchamp opened this issue Dec 18, 2024 · 6 comments · May be fixed by #10208
Assignees
@sumana-2705
Labels
Fellowship Opportunity Good First Issue Easy issue. Good for newcomers. [managed] Lead: @jimchamp Issues overseen by Jim (Front-end Lead, BookNotes) [managed] Priority: 3 Issues that we can consider at our leisure. [managed] Team: Front-end Issues belonging to the Front-end team [experimental tag] Theme: My Books Type: Feature Request Issue describes a feature or enhancement we'd like to implement. [managed]

Comments

@jimchamp
Copy link
Collaborator

Proposal

At some point, the yearly reading goals affordances were removed from the My Books page for small screen sizes. As a result, patrons can no longer set a yearly reading goal when browsing the site on their phones.

The reading goal affordances were recently moved to the sidebar for desktop views (related PR). Mobile views do not display the sidebar, so the reading goal affordances will need to be placed somewhere else on the page. Adding them between the "Privacy Settings" chip and the "My Loans" link seems like a good place for now.

Screenshot 2024-12-18 134131

Justification

A solution to this issue will allow our patrons to set reading goals from their phones.

Breakdown

Requirements Checklist

  • Yearly reading goal CTA link and progress bar are present on the logged-in patron's My Books page in mobile views
  • Duplicate markup for the yearly reading goal affordances, if any, are moved to a new template in openlibrary/templates/check_ins

Related files

  • Existing templates for yearly reading goals can be found here
  • Markup for yearly reading goal affordances that are found in the sidebar can be found here

Stakeholders

Instructions for Contributors

Please run these commands to ensure your repository is up to date before creating a new branch to work on this issue and each time after pushing code to Github, because the pre-commit bot may add commits to your PRs upstream.
@jimchamp jimchamp added Type: Feature Request Issue describes a feature or enhancement we'd like to implement. [managed] Priority: 3 Issues that we can consider at our leisure. [managed] Good First Issue Easy issue. Good for newcomers. [managed] Lead: @jimchamp Issues overseen by Jim (Front-end Lead, BookNotes) [managed] Theme: My Books Team: Front-end Issues belonging to the Front-end team [experimental tag] labels Dec 18, 2024
@sumana-2705
Copy link

@jimchamp can I work on this issue?

@jimchamp
Copy link
Collaborator Author

@sumana-2705, of course! Let me know if you have any questions about anything.

@mekarpeles
Copy link
Member

@sumana-2705 as a first step, feel free to share any designs you think may be effective for implementing this and we can offer you feedback.

Here's how it currently looks on desktop:
Screenshot 2024-12-23 at 11 34 14 AM

Perhaps something like this (keep the footprint as small as possible) that also says the year, like "YYYY reading goal:"
Screenshot 2024-12-23 at 11 42 44 AM

@mekarpeles
Copy link
Member

mekarpeles commented Dec 23, 2024 •
edited
Loading

Better yet, on mobile it may be easier, more consistent, a better experience, and a better use of space if we did something like this (instead of adding more clutter):

Screenshot 2024-12-23 at 11 47 03 AM

@sumana-2705
Copy link

Yeah @mekarpeles I was also thinking about the same idea as you have suggested. Thank you for your support. It has taken a few days for me to understand and set up the website in my local machine. I'll soon open a PR as you have suggested.

@github-actions github-actions bot added the Needs: Response Issues which require feedback from lead label Dec 25, 2024
@mekarpeles
Copy link
Member

@sumana-2705 if you have any questions, please let me know :)

@mekarpeles mekarpeles removed the Needs: Response Issues which require feedback from lead label Dec 26, 2024
@sumana-2705 sumana-2705 linked a pull request Dec 27, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@sumana-2705 sumana-2705

Labels
Fellowship Opportunity Good First Issue Easy issue. Good for newcomers. [managed] Lead: @jimchamp Issues overseen by Jim (Front-end Lead, BookNotes) [managed] Priority: 3 Issues that we can consider at our leisure. [managed] Team: Front-end Issues belonging to the Front-end team [experimental tag] Theme: My Books Type: Feature Request Issue describes a feature or enhancement we'd like to implement. [managed]
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Added yearly goal affordances to mobile view in my books page sumana-2705/openlibrary
3 participants
@mekarpeles @jimchamp @sumana-2705