search

lemeryfertitta / Climbdex

Search engine for training board climbs
https://climbdex.com
MIT License
42 stars 10 forks source link

Grade range in one slider #40

Closed lemeryfertitta closed 5 months ago

lemeryfertitta commented 6 months ago

Using a custom slider, we could have grade range in a single input. This is probably more intuitive and also frees up some space on the UI as we can compress one line into two as discussed in #39.

The linked plugin will probably be fairly easy to use, but I'd like to make sure that the style matches well, so it may require some CSS customization to get it looking just right.

gardaholm commented 6 months ago

I tried a quick version with the noUIslider, it get's pretty dense due to the 16 Steps. and if we want to keep it inline with the other boxes we need to make the slider pretty small. not really happy with this solution, but with some more css modification it may work …

I think it's neccessary that both grades are always visible, except if you combine the two handles exactly on one grade …

image
lemeryfertitta commented 6 months ago

@gardaholm Cool! Couple of ideas:

  1. Let's move the slider to be the first filter. I think this is both a good idea in terms of usability (I assume its the most commonly adjusted filter) and in terms of appearance.
  2. Could we move the "Grade" label to be floating above or below the slider? Actually, do we even need a label? I feel like it is pretty self explanatory. Ideally we'd keep the font/hueco conversion as well, at least until we offer some kind of preferences to show one or the other.
  3. If 2 works, we can make the slider the full width of the card (since there is no label). Also, I don't see any issue with increasing the height as well if there are usability issues. Seems okay for it to take up the space of 1.5 or 2 rows of filters if needed (though maybe not necessary)
gardaholm commented 6 months ago

true, top position is a good idea and we still would win space by removing the 2 input boxes blow for min and max grades …

image
lemeryfertitta commented 6 months ago

Nice! LGTM

lemeryfertitta commented 5 months ago

Released! Thanks again @gardaholm for the work on this one, its looking nice.