search

Twin-Cities-Mutual-Aid / twin-cities-aid-distribution-locations

A webapp to coordinate aid and care in the Twin Cities.
43 stars 32 forks source link

Handle filter collapsing in small screen (has design) #99

Open mc-funk opened 4 years ago

mc-funk commented 4 years ago

As many have noted, the filter box takes up a lot of screen real estate on mobile. Would be great to have a design suggestion for how to keep filters usable on small screens, but handle collapsing so they can get out of the way, without losing the color legend that makes the map readable.

amaxama commented 4 years ago

@mc-funk @drewsteff I put together a couple possibilities for this. One preserves the legend by adding the legend to the map if the top dropdown is closed if that's something we think needs to be visible at all times. ezgif com-optimize

The other just has the top checkboxes dropdown without adding the legend onto the map:

ezgif com-optimize (1)

Thoughts on these? Is this anything like what you were thinking?

In general, there's probably more we can do with the color scheme or better use of icons, etc. to make things more readable or clear but as an intermediary step I kept with the colors and words currently in use.

mc-funk commented 4 years ago

I personally live the pop up legend — I will share this over in TCMAP and see if we have more input. Thank you!!!

mc-funk commented 4 years ago

TCMAP folks were in agreement about really liking the design with the legend pills, so I think if someone wants to develop on this it is GTG!