Breadcrumb nav style; less button more input?

At the moment our breadcrumb nav dropdowns are styled as buttons… when we have category + subcategoy + tags our top bar can start feeling pretty heavy and gray (especially on mobile).

This is also a bit inconsistent of how we treat category dropdowns in the composer (and elsewhere). It’s a special case, but are we gaining anything from using the different style? Should we remove the background color to lighten things up and simplify?

There’s also the benefit of avoiding situations where a category color works OK on the main background color… but is kind of broken in the button. :point_right: 12%20PM

28%20PM 18%20PM

16 Likes

My idea.

I still :heart: this:

but I don’t like this (too heavy):

1 Like

I like this, and the open box implies “I can type there”, which you kind of can?

image

So it is both visually and semantically better, I say go for it in 2.2

3 Likes

This change is live now

7 Likes

Looking good!

Perhaps I just need to get used to it, but the New Topic (and edit and notification state if applicable) are still grey. We now have 3 styles, white box with black outline, red box with no outline, and grey box with no outline. Something just seems off.

This makes sense though.
Buttons are grey, drop-downs are white and the current state is red.

5 Likes

I noticed we did not apply this change to mobile yet @awesomerobot? That feels like an oversight?

4 Likes

I made a comment on GitHub about this, but it’s probably better to post it here. There is a cutoff issue that is still present on Safari and Chrome. You can see an example here with the letter “g” in the select-kit boxes for category and subcategory:

https://meta.discourse.org/c/plugin/voting

45934750-33fbcc80-bf57-11e8-86be-e8d4b12aa3e6

Right now there is padding: 1px 0; on:

.select-kit .select-kit-header .selected-name

What seems to do the trick is to also add that padding to:

.select-kit .select-kit-header .selected-name .category-name

Moving the padding from the first selector mentioned above to the second will break the tags dropdown, but adding it to .category-name seems to be fine.

If you want I can make a PR, but just wanted to make sure this doesn’t break any conventions that are in place.

4 Likes

Text should no longer be cut off, I went a bit more extreme than your suggestions and ended up removing the line-height: 1 from those category dropdowns and removed padding to compensate for the increased line-height. line-height: 1 combined with overflow: hidden is just a recipe for eventual problems.

5 Likes

Ah right, I did the category dropdowns but not the mobile nav for latest/new/top — just updated it.

On the fence about some other dropdowns in the topic list nav… they’re technically dropdowns, but always immediately associated with other buttons. Going to hold off on those for now and revisit.

16%20PM
25%20PM
56%20PM

4 Likes

It is the “dropdown that allows entry of search text” case where I feel the design cue of clear box is strongest.

2 Likes