search

everypolitician / gender-balance

Crowdsourcing platform for gathering gender information about politicians to improve the data in EveryPolitician
gender-balance.org
15 stars 3 forks source link

Progress bar labels illegible when bar segment is very short (quite common!!) #320

Closed chrismytton closed 8 years ago

chrismytton commented 8 years ago

Originally flagged up by @zarino in https://github.com/everypolitician/gender-balance/pull/318#issuecomment-183289805.

There's one edge case where the labels floating under the progress bars will look really weird – and that's when there's a very small number of people in that progress bar segment, eg:

screen shot 2016-02-12 at 11 39 02

It's quite hard to come up with a general purpose solution that will handle small bar segments like this, so I've left it unhandled right now. It would be good to see what the page looks like once there's real data in there, and see how common this edge case is, before we spend any serious time trying to handle it.

tmtmtmtm commented 8 years ago

It would be good to see what the page looks like once there's real data in there, and see how common this edge case is

It's very common:

screen shot 2016-06-19 at 08 40 16 screen shot 2016-06-19 at 08 40 20 screen shot 2016-06-19 at 08 40 25 screen shot 2016-06-19 at 08 40 30 screen shot 2016-06-19 at 08 40 37 screen shot 2016-06-19 at 08 40 41 screen shot 2016-06-19 at 08 40 45 screen shot 2016-06-19 at 08 40 50 screen shot 2016-06-19 at 08 40 56 screen shot 2016-06-19 at 08 41 01 screen shot 2016-06-19 at 08 42 38 screen shot 2016-06-19 at 08 42 43 screen shot 2016-06-19 at 08 42 48 screen shot 2016-06-19 at 08 42 56 screen shot 2016-06-19 at 08 43 05 screen shot 2016-06-19 at 08 43 11 screen shot 2016-06-19 at 08 43 16 screen shot 2016-06-19 at 08 43 20 screen shot 2016-06-19 at 08 43 26 screen shot 2016-06-19 at 08 43 30 screen shot 2016-06-19 at 08 43 35 screen shot 2016-06-19 at 08 43 41 screen shot 2016-06-19 at 08 44 14 screen shot 2016-06-19 at 08 44 19 screen shot 2016-06-19 at 08 44 24 screen shot 2016-06-19 at 08 44 28 screen shot 2016-06-19 at 08 44 32 screen shot 2016-06-19 at 08 44 37 screen shot 2016-06-19 at 08 44 41 screen shot 2016-06-19 at 08 44 47 screen shot 2016-06-19 at 08 44 50 screen shot 2016-06-19 at 08 44 55 screen shot 2016-06-19 at 08 45 01 screen shot 2016-06-19 at 08 45 05 screen shot 2016-06-19 at 08 45 09 screen shot 2016-06-19 at 08 45 14 screen shot 2016-06-19 at 08 45 25 screen shot 2016-06-19 at 08 45 30

etc.

zarino commented 8 years ago

Note to self: There might be a way to solve this using flexbox, rather than absolute positioning.

zarino commented 8 years ago

How we're going to fix this: The men bar is floated left, and the women bar is floated right. Same for their labels. Labels are no longer constrained to the width of their parent.

zarino commented 8 years ago

PR here: https://github.com/everypolitician/gender-balance/pull/339