New clear filters button display issue

lostcarpark / conclar

ConClár Programme Guide in ReactJS

MIT License

11 stars 12 forks source link

New clear filters button display issue #110

Closed LVerhulst4321 closed 2 years ago

LVerhulst4321 commented 2 years ago

The new clear filters icon/button will display badly depending on the screen size. It will overlap with the search box. It's probably only a css change that is needed, but I don't know what css setting that would be.

lostcarpark commented 2 years ago

Hmmm, that's a tricky one. Any CSS experts on the team we can ask for help?

mcdemarco commented 2 years ago

I can take a look.

LVerhulst4321 commented 2 years ago

I've tried a few things, but I'm just shooting in the dark. :-P

mcdemarco commented 2 years ago

I'm not seeing this behavior on main using the old config data (live from zambia.octocon.com, due to an issue I mentioned in PR#107). Can you reproduce it with the old data, and/or give me a sample of your current data that causes it?

LVerhulst4321 commented 2 years ago

Check out https://conclar.conreg.org

mcdemarco commented 2 years ago

Check out https://conclar.conreg.org

Thanks! I see some bad behavior, though not exactly the same thing. It should be enough to work with for now.

lostcarpark commented 2 years ago

I accidentally checked in a config file referencing local data files. I've submitted a PR to put back the previous ones. Could someone approve, please?

lostcarpark commented 2 years ago

I've had a friend who works in UI design take a look and she suggests turning the X into a regular button and moving below the filters, which would solve the problem. What do you think?

LVerhulst4321 commented 2 years ago

A little button that says "Clear" or "Reset" would be nice.

neo-archaic commented 2 years ago

This is the kind of UI I have in mind: https://fingalppn.ie/policy-hub/

lostcarpark commented 2 years ago

I have uploaded the proposed change to https://conclar.conreg.org/

LVerhulst4321 commented 2 years ago

I like it.

neo-archaic commented 2 years ago

Works well

lostcarpark commented 2 years ago

Resolved by #112.

mcdemarco commented 2 years ago

I have uploaded the proposed change to https://conclar.conreg.org/

Nice! I would say "Clear filters" rather than "Reset filters" because it's clearer (pardon the pun). Also, I'd style it like the Expand/Collapse buttons, though maybe a bit bigger than them; the current style is a bit...imposing when it appears.

neo-archaic commented 2 years ago

Clear Filters would be my preferred label also, but styling it like the expand/collapse buttons is not great for UX, as it confuses the two types of interface components. Also a bigger button is more clear. For my Octocon branding fork (in progress), I'm working on making all the UI elements larger for accessibility (except for the main buttons, which are fine as they are).

lostcarpark commented 2 years ago

The label is configurable in the config.json file, so up to the site implementor. However, if the consensus is for "Clear filters", I could make that the default