Use category slug in menus instead of category name


(Tobias Eigen) #1

I don’t know when category slug was introduced but I just discovered it today and I like it! :smile:

Would it be possible to change it so the category slug is used on menus, instead of the category name? This way we could have a longer name that is used on category lists and so on, while having a nice short name for menus.

Meanwhile and on a related note I noticed that the long names are truncated with … to make it fit on one line, which is nice, but on mobile it is still juuust a little bit too long to display the new posts number next to it and have it still be on one line. Wraps to two lines which then looks ugly.


Long category names overlap in hamburger menu
Autocompletion for categories when editing a topic should take into account category slug
(Jacob Chapel) #2

Maybe it makes sense to have a Category Name, Long Category Name, and category-slug.

The category name is used in all places show the category name, slug is used for linking, and the long name is used for popover or where more detail is allowed.


(Tobias Eigen) #3

Thanks @chapel I like this suggestion, though don’t want the settings pages to get too bloated either.

This is important to us because we have categories that are about sensitive topics that people have strong feelings about. We don’t want to, for example, conflate “Community Land Rights” to “land” even though Land is perfectly good for the menu and slug.


(Tobias Eigen) #4

I just discovered that this is becoming a real problem on one of my sites. It seems to me with the current setup, the category names shouldn’t be allowed to be longer than say 16 characters, to make room for the unread numbers. Our community is very particular about language and so it matters to have a longish, full name for the category and a short name to use in menus and other places where space is at a premium.


(Tobias Eigen) #5

I’m back to looking for this option again - we are rolling out more categories and will be launching our discourse to the public soon, and the sandwich menu looks really crappy with our long category names. Long category names are truncated, and then when there is new activity the numbers roll over to the next line, creating really ugly formatting.


(Mittineague) #6

I’m thinking as a “right-side slide-out” or whatever, is in the works, it might be best to hold off doing much about this problem until that happens,


(Tobias Eigen) #7

Any movement on this feature? It remains an issue on my site, where longish names get cut off on the right side in menus and on the category pulldowns.


(Robert Lauriston) #8

This is an issue for my site as well.


(Kane York) #9

You may want to rethink using geographical categories - it typically doesn’t match up with what your community wants to talk about.


(Robert Lauriston) #10

foodtalkcentral.com’s primary focus is on restaurants and other local food, so it’s absolutely the right taxonomy.

In fact, the site exists only because CBS recently deleted 50 or so regional chowhound.com boards dating back as far as 1997 and did various other things to alienate many longtime users.


(Sam Saffron) #11

I agree we should extend the UI to show a bit more for the drop down, but wondering

Why “Americas - USA West” as the category as opposed to “USA West” ?


(Robert Lauriston) #12

It was USA West originally, but users weren’t happy with alphabetical order putting the most popular boards at the bottom of the page.


(Sam Saffron) #13

That is super easy to fix, enable fixed category positions in site settings, then organise to taste


(Simon Cossar) #14

You can try this as custom css.

This will make the dropdown menu the full width of the category name. Give max-width a sane value (like 220px) if you find you have longer category names that you want to be truncated.

dropdown-menu .badge-wrapper.bullet .badge-category {
    max-width: 100%;
}

This will set the hamburger-menu category names to display in a single column.

.menu-panel li.category-link {
    float: none;
    width: auto;
}

.menu-panel span.badge-category {
    max-width: 100%;
}

The only other place I know of where long category names can cause a problem is in the ‘suggested topics’ list that appears at the bottom of a topic.


Adjusting widths on categories page
(Robert Lauriston) #15

I added that as custom CSS, the drop-down on the top right is now good but the one on the left side is still truncated.


(Sam Saffron) #16

Can we first shorten those really long category names and enable fixed ordering?


(Simon Cossar) #17

Yeah, this should do it for the one on the left.

.list-controls .category-dropdown-menu .badge-wrapper.bullet .badge-category {
    max-width: 100%;
}

(Robert Lauriston) #18

Looks good now, thanks.


(Brett Bendickson) #19

In later versions it changed to .badge-wrapper.bar . The correct CSS seems to be

.list-controls .category-dropdown-menu .badge-wrapper.bar .badge-category {
    max-width: 100% !important;
}

(Mittineague) #20

AFAIK this is not a change related to version.
It depends on whether category style is set to “bar”, “box”, or “bullet”