search

photonixapp / photonix

A modern, web-based photo management server. Run it on your home server and it will let you find the right photo from your collection on any device. Smart filtering is made possible by object recognition, face recognition, location awareness, color analysis and other ML algorithms.
https://photonix.org/
GNU Affero General Public License v3.0
1.85k stars 125 forks source link

Animated hint to show that filters can be expanded on mobile when first viewed #227

Open damianmoore opened 3 years ago

damianmoore commented 3 years ago

Users on mobile devices are not realising that they can expand the search area on the main browse screen. To signify this functionality better we should show a animation the first time they arrive. This animation will should a second after they have arrived and last about a second. It will expand the filter section just about 100px down and then collapse back up again.

Use useLocalStorageState hook as used elsewhere to store whether this animation has been shown as we never want to show it again on that device.

The animation/transition itself can be performed through CSS with keyframes triggered by adding a className from React.

GyanP commented 3 years ago

I have complete the task and pushed on branch: "227-animated-expand-filter". Please let me know if need any more changes.