Make UI more intuitive

[udiboy1209]

I vaguely remember someone suggesting to @martiansideofthemoon on IRC that the UI was pretty non-intuitive. There's some obvious improvements that come to mind that I would like to list down here

• Use the space on the right side to display results, its pretty empty now and can be used
• Add the Import dropdown , list of runs and filter controls to a sidebar on the left
• Show the list of results in a wide frame on the right of the sidebar instead. Make only this frame scrollable
• The number of logs to display can be kept at the top of this frame, or even in the sidebar
• Use Bootstrap 😛

[martiansideofthemoon]

@udiboy1209 I'm primarily of the opinion that the buttons need to be rearranged and made a lot larger. The results are placed well enough. I personally don't think I like the fact that the filters are so low on the page. Maybe we could push the results higher up. What do you think @jgraham ?

[jgraham]

So, for comparison, changes I would like to see are:

• Filter options redesigned to take up much less vertical space (e.g. by having a single option rather than one per type of filter, like "[Path |v] [contains |v] [dom ]", where the path dropdown would contain "Test Type", "Path, "Result" and set the rest of the line as required).
• Moving more of the options like filter and import into a toolbar of some kind which would take up minimal vertical space at the top of the screen. This would also contain the buttons to page through the results.

I am quite skeptical of using a lot of horizontal space because not everyone has very wide monitors, or runs their browser full-screen. I would prefer a design that retained a mostly-vertical layout, but with non-essential UI elements collapsed except when they are being used.

[udiboy1209]

@jgraham Your idea of keeping options in a toolbar on top also seems like a good option (better than a sidebar considering small-window-width browsers). Only that the toolbar shouldn't scroll with the results, maybe also be collapsible. There will certainnly be some optimum way of arranging options in the toolbar.

I'll let @martiansideofthemoon comment on the filter options because I'm not aware of all the options and combinations.

[martiansideofthemoon]

Filter options redesigned to take up much less vertical space (e.g. by having a single option rather than one per type of filter, like "[Path |v] [contains |v] [dom ]", where the path dropdown would contain "Test Type", "Path, "Result" and set the rest of the line as required).

@nihal111 this might be a good place to start. Let me know if you don't understand this