Left filters - Organise filters and make them visually consistent

AdrianBZG / InterMine-Data-Browser-Tool

InterMine Data Browser: a tool for exploring semi-homogeneous biological datasets

http://data-browser.apps.intermine.org/

Other

4 stars 38 forks source link

Left filters - Organise filters and make them visually consistent #36

Closed yochannah closed 6 years ago

yochannah commented 6 years ago

Can we re-order the filters? Right now we have:

GO
Dataset
Pathway
Clear filters
Organism Short Name

Ideally all buttons that have the same behaviour should have the same colouring and format, and buttons that behave differently should be visually distinct. In this case, GO, dataset, pathway, and organism all have filtering behaviour, whereas Clear filter removes filters.

Could we do something more like:

GO
Dataset
Pathway
Organism Short Name ================== <-- some sort of visual separator here, e.g. a thicker border perhaps
Clear filters <-- this button should probably be a slightly different colour. NOT red or orange as these will draw the eye more than the other buttons, which is not our intent. Slightly more grey would perhaps be a better option.

AdrianBZG commented 6 years ago

@yochannah What about now? http://im-browser-prototype.herokuapp.com/

yochannah commented 6 years ago

The order is better and I like the colouring of the clear filters button!

A few things to improve:

let's make organism be the same font and colour as the rest of the filters (you can read more about why consistency matters if you like)
the gap between the clear filter button and the others looks like a text input field to me so I tried clicking on it :laughing: in case anyone else is as silly as me, maybe have the whole gap be ~3px high or just remove the border and make it the same colour as the main sidebar background colour below.
Please try to avoid inline styles in the code; they are much harder to maintain than a separate stylesheet.
Also don't forget to check how it works in smaller screens:

Overall it does already look much better, though!

AdrianBZG commented 6 years ago

@yochannah What about now? Im not very good with this consistency things because I'm more a back-end person 🤣 🤣

http://im-browser-prototype.herokuapp.com/

yochannah commented 6 years ago

This is much better! The only thing I'd change is the rounded corners of the separator - just remove the border-radius entirely or set it to 0 and it'd be great.

And you're learning front-end stuff very nicely! After this you'll be able to add your L33t front-end skills to your CV ;)

AdrianBZG commented 6 years ago

@yochannah hahahaha 😆 thanks!

Done: http://im-browser-prototype.herokuapp.com/

If everything is ok, you can close this issue 😉