search

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 overall grid/layout of dashboard UI #1852

Closed janagombitova closed 7 years ago

janagombitova commented 7 years ago

Grid / Layout: fix general problems of misalignment and spacing as well as responsiveness to different devices. 
Investigate if using an existing css based framework would be beneficial.

janagombitova commented 7 years ago

Here is one for the layout that needs attention. In the Export reports there seems to be an empty space...

layout

And the list of surveys shows the same issue

janagombitova commented 7 years ago

Another item to improve - in the Assignments page the is a large white space

screen shot 2017-02-21 at 17 22 24
janagombitova commented 7 years ago

Not sure this issue belongs here or should be a separate issue @loicsans but I found a problem when the survey name is very long it breaks the layout in the Assignment page. See below:

a

This problem happens in the pages that have this "two column" layout:

janagombitova commented 7 years ago

Another layout problem In the Inspect data tab, when the dropdowns are drilled down the 2nd line overlaps with the filters

screen shot 2017-03-03 at 16 39 06
janagombitova commented 7 years ago

And here are some places where there is unnecessary white space now, also do to the removal of duplicated elements

screen shot 2017-03-03 at 18 20 23 screen shot 2017-03-03 at 18 21 45 screen shot 2017-03-03 at 18 27 07 screen shot 2017-03-03 at 18 34 37
janagombitova commented 7 years ago

Quick question - footer

@loicsans what was the motivation to make the location of the footer set on each page? I feel as a lost quite some workspace with this change (also because of the multiple levels of headers we have)

Testing beta1.akvoflow.org

Here is a list of issue I found so far when looking at the layout on beta1

1) Survey breadcrumb

If the folder/survey breadcrumb reaches two levels it overlaps the 1st item in the list, making it hard to select, open or use

screen shot 2017-03-10 at 14 01 08 screen shot 2017-03-10 at 14 02 27

2) White space survey - form

I personally find the white space between the survey and the forms unnecessarily to wide.

screen shot 2017-03-10 at 14 03 32

3) Buttons not aligned

The log out button and save button are not well aligned to the right

screen shot 2017-03-10 at 14 04 27

## 4) Survey preview - scrolling

I found a super tiny space in the survey preview window that when you scroll through the questions, you can see them move behind the white header.

## 5) Survey preview - white space

Between the Survey preview title and the first group of questions there is a lot of white space. Plus you can see the borders of the Survey preview box.

6) Layout of assignment/manual survey transfer breaks if too many subfolders

If there are many subfolders in a folder and the user is selecting the to put the survey in the assignment, the layout breaks. This happens also for Manual survey transfer. I personally liked that you had the survey you are selecting and the ones you selected in two columns next to each other to see what you are working with and what you have.

screen shot 2017-03-10 at 14 14 05

7) Footer blocking buttons

The footer overlays the save button at the end of the page when creating an Assignment, in Manual survey transfer.

screen shot 2017-03-10 at 14 16 55 screen shot 2017-03-10 at 13 44 38

8) Dropdown menus not aligned properly on the left

If the dropdown goes to two rows then the 1st dropdown menus for each row are not in line. This is the case for all dropdowns

screen shot 2017-03-10 at 14 19 57 screen shot 2017-03-10 at 14 34 27

9) Multiple dropdown menus do not fit in screen

If there are too many dropdown menus, then at one point they do not fit into the width of the screen anymore, but the user cannot use them as he cannot select the further items.

screen shot 2017-03-10 at 14 23 39

10) Cascase top level not visible

The top level of the cascades part is not visible fully.

screen shot 2017-03-10 at 14 30 58

11) Reports > Export reports - scrolling

There is still the scrolling issue and unneeded white space shown

1

12) Reports > Export reports - footer

The footer overlays the bottom of the Export survey form group

screen shot 2017-03-10 at 13 49 11
muloem commented 7 years ago

The space is present under the export reports tab.

screen shot 2017-03-10 at 15 54 56
janagombitova commented 7 years ago

2nd round of beta1 testing

Still not fully aligned to the left

screen shot 2017-03-10 at 16 35 41

The particular issue is solved, but now it looks like this.

screen shot 2017-03-10 at 16 32 30

So the rule is that the form level dropdown is on a new row and in the case on a long path of folders, it looks kind of funky.

Addition

After talking just now with @loicsans we agreed the footer should go back to be on the bottom of the page and not being fixed in the screen view as currently on beta1

janagombitova commented 7 years ago

3rd round of beta1 testing

point 8 and footer is now fixed 👍

We agreed with @loicsans to create separate issues for points below, and handle them in separate issues in another iteration.

janagombitova commented 7 years ago

👍 ready for release, all other issues we will tackled in separate smaller issues