Change User Page search bar to Divs

[Gazook89]

Currently the User Page search/filter bar is rendered as a table which I think could be improved. Using divs in a flexbox is a bit more flexible if more options are added later or screen size changes.

Also, as part of the UI, I wanted to change it to feel more cohesive with the existing UI rather than blending with the page content. Structurally, in the HTML, I also moved the sort bar out of the '.page' div.

fixes #1675

[Gazook89]

Just going to update this comment as i goof around with some CSS. I can't show hover states etc but I think once an overall 'active' state is settled on it'll be a lot easier to get the hover/inactive states worked out. And sorry some of them are not scaled or dimensioned the same.

1. 
2. 
3. 
4. 

[G-Ambatte]

I've added this PR to the #2295 UserPage Minor Fixes list. I think it looks good as part of the nav bar; I'll try to take a proper look at it later tonight.

[ericscheid]

Just going to update this comment as i goof around with some CSS.

4. 

I prefer this styling over the others, only without such eye-catching colouring — the sort options are optional and supporting to the list page experience.

Also, the color contrast of the light grey on the darker grey is very poor. https://coolors.co/contrast-checker/888888-555555

Raising the text color to #cccccc would make the ui legible/usable, with the slight enhancement of (functionally irrelevant) differentiation for those with good vision. I get that the dimmer control text is to differentiate from the brighter label text of "sort by:", but it shouldn't be so dim to be unusable, especially since "dimmed controls" is also a UI convention for "inactive/disabled control", which those buttons are not. https://coolors.co/contrast-checker/cccccc-555555

[Gazook89]

Also, the color contrast of the llight grey on the darker grey is very poor.

So i was wondering about this-- i know it is low contrast, but do you want it to be high contrast if it's not the selected option? I suppose it could just be white, leaving the background coloring the sole distinguishing style for active.

"the color is too contrasting and the gray is not contrasting enough!" :)

Edit: I see your edit now-- I was busy looking for a specific and relevant mayor quimby quote.

[ericscheid]

So .. contrast/coloring more like this

(except rendered as a browser wide bar, not a div floating over the page content area, and using proper sort-direction indicators)

• "SORT BY:" label is #ffffff on #555555 (7.46, Very Good)
• selected sort option is #dddddd on #333333 (5.49, Good)
• not-selected sort option is [#cccccc on #555555 (4.64, Good)

[G-Ambatte]

Suggestion of a slight functional addition - clicking the currently selected item will change the sort direction, rather than the current functionality (of changing state to the same state as it is currently in; i.e. functionally, doing nothing).

Might be different enough (functionality change, rather than rearranging UI) that it deserves it's own PR.

---

I nudged a couple of things and added some &:hover styling to listPage.less (text turns white and border visible on hover), resulting in this:

But we can always move away from the color to something less visually distracting...

[calculuschild]

I think @ericscheid 's color scheme looks really clean :+1: I like it.

@G-Ambatte I agree clicking the same category again should change the sort direction. I think that's pretty standard functionality. Should be easy enough to just add to this PR.

[Gazook89]

Okay, I went with @ericscheid's suggestions. Here is what it looks like:

Note, there is a hover state now as well (shown on created date in above image). Also, I went with the fontawesome 'sort-up' and 'sort-down' icons....they aren't full-size carets, but rather a 'top and bottom'. At first I thought they were too small, but now that clicking on the sort title has the same function as clicking on the caret, I think it doesn't matter.

[G-Ambatte]

On an almost completely unrelated note, would a similar rework of the nav bar resolve #2071?

[Gazook89]

On an almost completely unrelated note, would a similar rework of the nav bar resolve #2071?

I have a branch for this as well from a long time ago. I just have to look over it again and see where it is at

[calculuschild]

Alright, I have no other comment on this. Looks good!