Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
yochannah opened this issue Jun 18, 2018 · 5 comments

Comments

@yochannah
Copy link
Collaborator

commented Jun 18, 2018

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

  1. GO
  2. Dataset
  3. Pathway
  4. Clear filters
  5. 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:

  1. GO
  2. Dataset
  3. Pathway
  4. Organism Short Name
    ================== <-- some sort of visual separator here, e.g. a thicker border perhaps
  5. 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.

@yochannah yochannah added this to the Milestone 2 (July 9) milestone Jun 18, 2018

AdrianBZG added a commit that referenced this issue Jun 21, 2018
@AdrianBZG

This comment has been minimized.

Copy link
Owner

commented Jun 21, 2018

@yochannah

This comment has been minimized.

Copy link
Collaborator Author

commented Jun 21, 2018

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

image

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 😆 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:

image

Overall it does already look much better, though!

AdrianBZG added a commit that referenced this issue Jun 21, 2018
AdrianBZG added a commit that referenced this issue Jun 21, 2018
@AdrianBZG

This comment has been minimized.

Copy link
Owner

commented Jun 21, 2018

@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/

image

@yochannah

This comment has been minimized.

Copy link
Collaborator Author

commented Jun 21, 2018

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

This comment has been minimized.

Copy link
Owner

commented Jun 21, 2018

@yochannah hahahaha 😆 thanks!

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

If everything is ok, you can close this issue 😉

AdrianBZG added a commit that referenced this issue Jun 21, 2018

@yochannah yochannah closed this Jun 21, 2018

AdrianBZG added a commit that referenced this issue Apr 8, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.