Category filter click/touch target too small, no hover styles

(Josh Olson) #1

Over a year ago, I asked for the category filter to become left aligned. I’m sure it was fixed long ago but Jeff Atwood stated:

So, what happened to that logic about having big click / touch targets? For the category ux on this meta discourse, the click target is now tiny. In the image below, the only clickable portion is the purple category badge and the letters “ux”. This doesn’t behave like a standard dropdown/<select> where an option’s click target is more akin to a row in a 1-column table. The UX could also be improved by adding a :hover style… a text underline, a background (row) color, anything would improve it.

(Sam Saffron) #2

We were talking about this today, we definitely want to fix that tiny click target

(Josh Olson) #3

Awesome - what about the hover styles?

(Sam Saffron) #4

Possibly, what CSS are you suggesting? I think we should simply be consistent with what we do on the hamburger

(Josh Olson) #5

You mean the hamburger icon itself or the icons embedded within the hamburger menu? As it stands, those categories have small click targets and no hover styles, too. Regardless, I think a light grey background would work well. I suggested an underline because if you have a light grey category badge, the light grey background might “swallow” it, which isn’t the end of the world, just not ideal. Another idea is to make the background intentionally the same color as the category badge (similar to the old version) but then you have to deal with changing the font color to achieve contrast. I don’t know if that would be difficult to maintain or if you already have something in place for that?

(Josh Olson) #6

Ah, I didn’t realize in the hamburger menu, you list subcategories with a 50/50 colored square. So, something like would be an edge case to handle. For the hamburger menu, you’d probably want to select the most specific color and change the background to that, and then hide the badge so you don’t see a tiny rectangle of the parent category (ex: ).

I dunno… I think the light grey background would work best. :slight_smile:

(Tom Newsom) #7

Pale yellow like the other links works for me. Category colours are unlikely to be that pale due to lack of on-white contrast at small sizes, but as a solid background it’s fine.

(Jeff Atwood) #8

This is on @neil’s plate.

(Josh Olson) #9

I was curious what pale yellow would look like behind the lightest yellow on this particular Discourse so I tried that. Then out of curiosity regarding contrast of all category badges, I just made the container pale yellow. And then the same grey as the hamburger hover. Here are the results:

Either would work for me.

(Jeff Atwood) #10

I actually went ahead and took care of this since it was pretty easy.

Changed from

margin: 5px;


padding: 5px;
width: 100%

for and .badge-wrapper.bullet – oddly enough for the old “box” category style this already worked, they were full width.

(Jeff Atwood) #11