Improve table structures around the dashboard

akvo / akvo-flow

A data collection and monitoring tool that works anywhere.

http://akvo.org/products/akvoflow/

GNU Affero General Public License v3.0

65 stars 31 forks source link

Improve table structures around the dashboard #1848

Closed janagombitova closed 7 years ago

janagombitova commented 7 years ago

Currently we have numerous places across the dashboard where the UI consists of a table. The headers allow sorting, however it is not clear to the users that this is possible, nor how it works. Secondly, the design of the tables differ. The aim of this issue is to bring more consistency and simplification to these table elements.

We need to:

identify where they are located
decide on the needed columns (there might be some tables where some columns can be removed)
which columns need sorting
find a unified way how to indicate sorting is possible and applied
remove sorting (or mouseover) from those columns where it is not applicable
decide on text alignment (in the centre or to the left?)
how are the tables organised? should there be a unified patter across them all? should the use see right away how they are organised?
more to be added

janagombitova commented 7 years ago

After talking with @loicsans we agreed the first step would be to simplify. We will remove visual clutter in the first implementation. The next steps would be dealt with in separate issues, as removing certain columns, deciding on sorting and further steps. I will create separate issues for those changes

janagombitova commented 7 years ago

Test:

As with this implementation we are only looking at the visual improvements, make sure all items are readable and all tables look the same

janagombitova commented 7 years ago

@loicsans found 2 things that need to be dealt with:

1. The font in headers are not of the same colour

The difference is in clickable headers and non clickable header, but considering the non clickable also have the little arrows indicating they can be clickable (need to create a separate issue for this) the colour of the fonts should be unified. The different colour of the font in the headers is is the Inspect data tab and in the Monitoring tab

2. Users tab is not aligned with the new table colours

This is for both users list and roles and permissions

janagombitova commented 7 years ago

All changes in this implementation can be considered ready for release. We however need to continue work on improving the table structure.

To start with we need to unify the Users tab with new design. Issue is here https://github.com/akvo/akvo-flow/issues/1999