[207] Sort and Filter Component

[emmabjj]

Related tickets: #57 & #207

As a challenge manager, in order to manage the progress of evaluations efficiently, I would like to be able to sort submissions based on submission and evaluation progress data.

• Filter
  • Statuses:
    • completed
    • in progress
    • not started
    • recused
  • Eligible for Evaluations
  • Selected to advance
• Sorting
  • Submission ID: low to high & high to low
  • Average score: low to high & high to low

Updated UI:

[stepchud]

Left some feedback

[emmabjj]

@stepchud - thanks for help! Those tests weren't failing locally so it was difficult to reproduce, but looks like the tests are good now.

[stepchud]

Some UI styling issues that I discovered. I wonder if the custom css in application.sass.scss needs to be tweaked

1. Mobile/tablet layout the menu hover color is low contrast
2. The border of the nav menu items is transparent and shows the text behind it

[stepchud]

another small UI issue:
3. The dropdown style should be consistent, on smaller layout is +/- instead of the ^ / ⌄

Some UI styling issues that I discovered. I wonder if the custom css in application.sass.scss needs to be tweaked

1. Mobile/tablet layout the menu hover color is low contrast
2. The border of the nav menu items is transparent and shows the text behind it

[emmabjj]

another small UI issue: 3. The dropdown style should be consistent, on smaller layout is +/- instead of the ^ / ⌄

Some UI styling issues that I discovered. I wonder if the custom css in application.sass.scss needs to be tweaked

1. Mobile/tablet layout the menu hover color is low contrast
2. The border of the nav menu items is transparent and shows the text behind it

I'll fix that contrast error - lots of little tweaking yesterday to make it responsive and keep the same styling between different screen sizes with USWDS. There was some real weirdness with that built-in USWDS +/- dropdown icon for mobile, I was having a difficult time overriding the styling. I'll give it another go, I wanted to push the other fixes first. Thanks @stepchud !

[stepchud]

Super close, just a few more backend issues.
Also I'm still seeing the issue "Mobile/tablet layout the menu hover color is low contrast" from my previous comment but I'm not sure that's a blocker since mobile/tablet users can't really hover on a touchscreen. It's just weird that it shows up at that breakpoint, I guess there is something built into the uswds css. I tracked it down to this specific rule if you want to see checkout a way to override that:

[stepchud]

🔥 Works for me there are some specs failing though