8829/fix/redesign sort UI

[aarasawa]

Closes #8829

Refactor UI for the sorting option selectors in the search bar. Changed from radio/individual buttons into a dropdown menu.

Technical

Still need to work on the styling of the dropdown menu.

Testing

Screenshot

Stakeholders

[mekarpeles]

@merwhite11 I left some feedback for @aarasawa on the review -- maybe you two can collaborate to try this out using the details component? It could be useful to prototype as a codepen, similar to @SivanC's for the unified read button: https://codepen.io/sivanc/pen/VwOpXwq?editors=1100

[aarasawa]

I thought I would push the updates that I had with implementing using details tag as @mekarpeles recommended. It also got rid of the use of manual spacing.

Need help with CSS. The CSS that the span element in the HTML uses is in legacy.less. I have some styling that I attempted to try to use however they never rendered, even when I tried moving styling for details into its own CSS .less file.

Here is the example CSS I wanted to try: link

[merwhite11]

@mekarpeles @aarasawa
Alex and I are meeting to go over questions / css for this.

[aarasawa]

Current problems with overriding styling on anchor tags within the drop down menu. I am pushing what we have so that hopefully @rebecca-shoptaw can help when they can.

[rebecca-shoptaw]

Gave it a look over, see the feedback below re: how to switch out the colors and get the tests passing -- and the style override should be no problem at all:

I believe it could be as simple as changing a to a:link in the css, this is what the overriding CSS uses and may be how it is one-upping your code as is. This way your code ideally would take precedence and you wouldn't need the !important

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 17.05%. Comparing base (ce16a79) to head (370c08f).
Report is 453 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #9489      +/-   ##
==========================================
+ Coverage   16.06%   17.05%   +0.99%     
==========================================
  Files          90       89       -1     
  Lines        4769     4725      -44     
  Branches      832      829       -3     
==========================================
+ Hits          766      806      +40     
+ Misses       3480     3409      -71     
+ Partials      523      510      -13     

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

[mekarpeles]

@aarasawa this is looking fantastic on /search and lists and is ready to go, however the sorting UI looks a bit broken for author pages:

e.g.

[aarasawa]

@aarasawa this is looking fantastic on /search and lists and is ready to go, however the sorting UI looks a bit broken for author pages:

e.g.

Oo, I'll take a look at that, thank you for pointing it out @mekarpeles

[cdrini]

Heads up taking this off testing.openlibrary.org to test another PR 👍

[aarasawa]

Something odd that happens is that the template seems to render incorrectly as pointed out in the authors page. #9489 (comment)

However, when I go up in the chain and add an empty div in type>author>view.html it fixes the problem.