ProjectSidewalk / SidewalkWebpage

Project Sidewalk web page
http://projectsidewalk.org
MIT License
84 stars 24 forks source link

Sidewalk Gallery: animate CSS grid when filtering options selected #2411

Open jonfroehlich opened 3 years ago

jonfroehlich commented 3 years ago

I know with the next MVP version (v1.1), we are going to move the filtering logic to the backend. But perhaps it would still be easy enough to do some frontend animation for filtering to provide the user with better insight into what cards are filtered out.

Some CSS grid filtering examples:

If we are not using CSS grid for layout (I originally recommended it but maybe we using Bootstrap), then we could try Isotope: https://isotope.metafizzy.co/

misaugstad commented 3 years ago

This is also mentioned in #2450 by @jonfroehlich

If possible, it would be great if after selecting a new filter option, it doesn't require a full refresh of the page but instead dynamically updates

image

jonfroehlich commented 3 years ago

Where did we land with respect to filtering @ThatOneGoat? Is it on the backend now?