Add static UI for improving user list functionality.

[mcdonnelldean]

Post demo we've had requests to make the UI around searching and dealing with the user more refined. We basically need,

• Search bar with, dropdown for target column, plus clear search
• Back / Next buttons
• Ascend / Descend buttons per column (not sure it will look on mobile)
• xxx of yyy label for current / total row counts (pagination)
• Plus current bits on screen

@thefoxis I'm keen to see how this will fit on mobile. Ultimately it's just a searchable list of users. If the table format is too restrictive I'm happy for you to comment it out and add in a hardcoded list that better suits our need, we can very quickly break down into components to make it work as needed. We are talking about the possibility of 10,000 users; I'm keen ensure the user experience is not impacted by this scale, even on mobile, so I'd rather you had no restriction to tables on this.

We may have a view more fields to come yet so I would probably edge more towards a searchable 'card' view but we need to have as many rows on screen as possible too.

[thefoxis]

@mcdonnelldean — gotcha, that totally makes sense. tables definitely bring in some difficulty, especially with responsive web design (they weren't really built to be that way), so I could lean for something else that will be easier to style and maintain. I've actually spent some time today to make what we have a little bit better on smaller screens, see below:

taking what you've said into account here's what I'm proposing:

• change markup from table to div
• the sidebar menu shouldn't move the container next to it but overlay it—in reality, you won't be using both at the time so it only makes sense to allow the user to open it, click on a menu item and then toggle it away. I think pushing the content only introduces more markup and potential problems (especially if you want to do it pure CSS, that is)
• adjust the design, like so (I'd make it work for mobile, dropdown and current filters are excluded but I can see something Github-alike)

let me know what you think and I'll get that done. (relates to #50 too)

[mcdonnelldean]

@thefoxis That all sounds and looks perfect. Couple of notes,

• we lost the grey header style when fixing some user list bugs on our end. If you spot any changes to the design, you can assume they are in error and raise a bug issue if needed.
• we'll probably need a refresh button somewhere near the user list. I expect the data to be auto updating in time but having a refresh button gives the user a force refresh ability.
• The action buttons look disabled. Could we do something here? Would you make them links over buttons? (no opinion on this personally). I'm also happy to move to icons here if it would look neater.

I'd say focus on user bits and leave the sidebar until last. I think it's a good idea though, looking at some apps I use myself on mobile it seems to be the standard alright.

[thefoxis]

@mcdonnelldean — thanks for pointers :+1:

• styling is as it was before with the coloured header, also even rows are coloured on mobile because I had to drop the header
• it's now divs, completely responsive. although the approach of hiding inline labels for fields on desktop and showing on mobile doesn't allow sorting and after spending a while looking at sorting solutions I'm unsure how we could make it 100% responsive, need more insight probably
• refresh button is still missing because panel header relies on text and that's where I wanted to put it
• let me know if two pagination items that you've listed have been addressed properly
• if you inspect the search input wrapper there will be search-dropdown-active, turn it back to display: block to see styling for the dropdown search results
• you're definitely right about buttons and it looks much better turned to text links. I'm thinking about introducing another colour for buttons, green is too competing now. maybe a shade of orange

[mcdonnelldean]

• I love it, looks nice
• I think the only way to do this is limit the columns to a definite number right?
• I'm happy with this, the text is redundant really.
• Yup, perfect.
• I like it :D
• I'm happy with that, I agree with the green

[thefoxis]

I think I've addressed everything in this issue, feel free to open more granular issues if there's something I've missed or has to be amended :v: