Add year selector to "Already Read" reading log page

[benbdeitch]

Closes #8557

This PR adds the ability to navigate to specific subsets of your already-read shelf, arranged by the year in which they were marked as read. If no books are available, the relevant dropper will not appear.

Technical

I reverted the breadcrumb_dropper in templates/books to a more generic form, instead adding two other files that fill it out with specific sets of values.

Testing

Add books to different years of your 'already-read' shelf, and the dropper will appear. The pages that it navigates to already exist, though they were only accessible by URL manipulation before now.

Stakeholders

@jimchamp

[jimchamp]

Thanks for updating this, @benbdeitch.

Due to errors, I wasn't able to run this locally. Errors are related to the new get_year_dict function:

Aside from this, I have some suggestions:

1. We want to populate the selector with years that the patron has set a yearly reading goal. Use YearlyReadingGoals.select_by_username() to find each year that a patron has set a goal. If you want, you can add an order kwarg, which defaults to year ASC. This way, you can pass order='year DESC' to get the years in your desired order.
2. Store the reading goals in the MyBooksTemplate object as a property. It can be called something like reading_goals. Initialize this as an empty list. Also, create a selected_year property and initialize it as None.
3. In mybooks_readinglog.render_template(), if the key is already-read and is_my_page is true, fetch the reading goals and update the new MyBooksTemplate property with the results.
4. Instead of passing the selected year to /account/view.html, update MyBooksTemplate.selected_year in readinglog_yearly.GET().
5. If the MyBooksTemplate object has any reading goals, show the year selector. Options in the selector should not include counts --- only the year (or "All Time", localized).

[jimchamp]

Thanks @benbdeitch!
Just a few more changes to go. In addition to the other suggested changes, I'm seeing that the "Share" link is pushed out of view on mobile screens:

You can fix this by adding the following rules to mybooks-details.less:

.navigation-breadcrumbs {
  display: flex;
  flex-direction: row;

  .crumb {
    margin-right: 10px;
  }
}

Within the media query:

.navigation-breadcrumbs {
  flex-direction: column;
  .crumb {
    margin-bottom: 10px;
  }
}

These changes should result in a mobile view that looks like this:

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (38e0c7c) 16.68% compared to head (fcfc76b) 16.66%.
Report is 40 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #8639      +/-   ##
==========================================
- Coverage   16.68%   16.66%   -0.02%     
==========================================
  Files          88       88              
  Lines        4681     4686       +5     
  Branches      835      835              
==========================================
  Hits          781      781              
- Misses       3384     3389       +5     
  Partials      516      516              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[benbdeitch]

The requested changes have been made. Thanks for the assistance; I'll be keeping them in mind for the future.

Out of curiosity, is there a specific reason behind ending files with a newline character?

[jimchamp]

Did you test this? The "Share" button is still overflowing in mobile views.

[jimchamp]

The requested changes have been made. Thanks for the assistance; I'll be keeping them in mind for the future.

Out of curiosity, is there a specific reason behind ending files with a newline character?

https://stackoverflow.com/a/729795

[jimchamp]

The style changes that I suggested led to unwanted results in tablet views:

Moving the flex direction changes to a mobile media query helped, but the selectors were not vertically aligned in tablet views:

Adding an align-items rule to the tablet media query fixed things well enough (the share link's vertical alignment is a bit off in tablet views).

Desktop

Tablet

Mobile