search

open-contracting / data-registry

BSD 3-Clause "New" or "Revised" License
3 stars 0 forks source link

Search: Consider sticky filters or "back to top" button #238

Open jpmckinney opened 2 years ago

jpmckinney commented 2 years ago

From https://github.com/open-contracting/data-registry/issues/85#issuecomment-1252037008

Some websites have a "back to top" link appear only when the user starts scrolling up again.

https://www.nngroup.com/articles/back-to-top/

jpmckinney commented 2 years ago

The sidebar is too tall on small windows. Even on fullscreen devices in landscape orientation (iPads, etc.), it's too tall once the "clear all filters" link appears.

We'd have to use something like https://abouolia.github.io/sticky-sidebar/. Nordstom is an example of the technique. It uses accordions because it has so many filters. In our case, it's better not to hide the available options, as they are less predictable, compared to shopping for clothing.

However, that's 24kB of JavaScript just to keep the filters visible. FWIW, Amazon has more than 1 screen of filters and they are not sticky.

jpmckinney commented 2 years ago

I've added a "back to top" link on desktop. Will wait to do on mobile after #241.