Displaying sub-categories in boxes


(Neil Lalonde) #1

There are two new ways to display a list of sub-categories within the parent category:

  • in boxes with only the name, logo, and description
  • in boxes with name, logo, and a list of some featured topics

You can enable these styles by visiting the parent category, editing its settings, going to the settings tab, and choosing these options:

Boxes

The “Boxes” style is currently being used in our howto category. By using very short category description and adding logos to each subcategory, it looks like this:

The logos are optional, but its best to either use logos for all or none of the subcategories.

Boxes with featured topics

The “Boxes with featured topics” will include a list of a configurable number of topics.

Set how many topics to show in each sub-category’s settings:


Easy way to make front page category columns?
How to add Categories/Featured Categories on top of the site?
How to change categories style?
Moving over Facebook Group (not an import question)
How to increase site speed
Topic List Previews
How to change categories style?
Orientating users with a Discourse 'homepage'
(Neil Lalonde) #2

Here’s a tip for customizing the “boxes with featured topics” style to use their colours more boldly.

I’ve removed the logos from my subcategories, and added the following site customization:

.category-programming {
  .category-box, .category-box-inner {
    border: none;
  }
  .category-box-heading {
    padding: 0;
    border-radius: 3px;
    img.logo { display: none; }
    h3 { padding: 2em 0; }
  }
  .category-box-ruby {
    .category-box-heading           { background-color: #BF1E2E; }
    .category-box-heading > a[href] { color: white; }
  }
  .category-box-php {
    .category-box-heading           { background-color: #0E76BD; }
    .category-box-heading > a[href] { color: white; }
  }
  .category-box-javascript {
    .category-box-heading           { background-color: #D7BB2F; }
    .category-box-heading > a[href] { color: white; }
  }
}


(David Taylor) #3

This looks awesome! What would make this perfect is if the icon could be replaced with the current state of the topic. So pinned/closed/solved/unsolved etc.

Is that on the roadmap for this UI?


(Neil Lalonde) #4

Hmm, yeah it should be possible. I’ll give it a try.


(Steve Combs) #5

Great work.

Could you adjust the mobile view to respect the row (only) and box (only) settings?

Currently those settings only work on desktop view and are still showing “with featured topic.” in mobile view.


(Joshua Rosenfeld) #6

@neil, not sure if this is related - figured I’d post here first. Loading #howto here on Meta as of 9 PM EST seems to default to top, not latest. Is this related to the new display? If so, is it intentional?


(Joshua Rosenfeld) #7

Just tried this out on my site. I only looked at the “Boxes” type view, so everything applies to that. A couple of notes/requests:

  1. The UI does not handle category names that span multiple lines very well. Multi-line headers force the description text down, causing an un-aligned look. Suggestion: Headers should all be “bottom justified”, and additional lines of title text should be added above, not below.
  2. The UI does not handle variable length category descriptions very well. I noticed that here in the #howto category all the descriptions were shortened 3 days ago. Had they not been, the screenshot in the OP would look quite a bit different. Suggestion: Cut off descriptions over 2 lines - use ellipsis and provide the full description in hover (title attribute).
  3. The blue links seem strange - they’re black in the row views, and black in the box with topics views - why blue here?
  4. Links in category description have an unusually large clickable area. CSS seems to be adding padding.
  5. Headers don’t have their own div, making it hard to customize them like the example in the second post.
  6. No “lock” icon for restricted categories.

Edit: More notes…

  1. Category boxes without logos have significantly more padding that those with logos, and look a bit odd. (1em all around for logos, 3em top/bottom 1em sides without logos).
    Current padding for no logo:

    Logo padding (but no logo):

(Neil Lalonde) #8

Yes, that’s another new setting that categories have.

Thanks for the notes, I’ll look through them.

Personal preference? I think they need more vertical padding (your first pic). I don’t understand where your second pic comes from. But it’s all customizatable in CSS.


(Joshua Rosenfeld) #9

I customized it with CSS :wink:.


(Daniela) #10

Before:

and after (I choose only “boxes”)

I just had to fix the width of the images that came out to the right a few pixels.

Great job @neil, thank you.


(Tom Newsom) #11

I had just spent a whole day wrestling with Topic Previews plugin to (unsuccessfully) achieve the same effect. Thank you!


(Neil Lalonde) #12

Here’s what I see currently:

So you think it should look like one of these?

1.

2.

3.

Logos moved down (I didn’t try, but am sure it would look bad).


(Joshua Rosenfeld) #13

I’m honestly not sure. Whichever way it is handled, whether it remains as currently designed, version 1, or version 2, some box is going to have extra whitespace somewhere. That I get. I (personally) think each “section” of the box should be aligned, so all images should line up, all titles should line up, and all descriptions should line up. If that is done by default, then a site admin can use CSS to easily move the content in each section up or down.


(Neil Lalonde) #14

Two lines is a bit too restrictive imo. @Trash is using a 3 line description beside 2 line descriptions, and I think it looks fine.

They’re not blue in the row view by default:

Fixed!

Fixed!

Fixed! :lock:


(Neil Lalonde) #15

Sample CSS to customize the “boxes” style.

.category-programming .category-boxes {
  .category-box {
    border: none;
  }
  .category-box-heading {
    padding: 0;
    border-radius: 3px;
    img.logo { display: none; }
    h3 { padding: 1em 0; }
  }
  .category-box-ruby {
    .category-box-heading      { background-color: #BF1E2E; }
    .category-box-heading > h3 { color: white; }
  }
  .category-box-php {
    .category-box-heading      { background-color: #0E76BD; }
    .category-box-heading > h3 { color: white; }
  }
  .category-box-javascript {
    .category-box-heading      { background-color: #D7BB2F; }
    .category-box-heading > h3 { color: white; }
  }
}

(Steve Combs) #16

Just a reminder to keep keep the mobile view in mind:[quote=“scombs, post:5, topic:59371”]
Could you adjust the mobile view to respect the row (only) and box (only) settings?

Currently those settings only work on desktop view and are still showing “with featured topic.” in mobile view.
[/quote]

As a example, just view howto - Discourse Meta (on desktop vs mobile). Would really like to kill the topics being displayed in mobile because it pushes everything down the screen when there is not a lot of screen real estate.

Another hacky way to fix it would be to let zero be an acceptable value for Number of featured topics on parent category’s page. Currently the error message is Num featured topics must be greater than 0


(Joshua Rosenfeld) #17

The number 2 was arbitrary. My concern (from a specific issue on my site) is that the category description is used in more places than just the boxes view. We’d like to have a much longer description on /c/category_name/subcategory_name without having the box at /c/category_name become huge.

Would like longer description here:

Without causing the box here to grow huge:

I was referring to the category name. Here is how they look by default in each view. Does this better explain my concern?:
Rows:


Rows with featured topics:

Boxes:

Boxes with featured topics:

Thanks for all your great work @neil, this is looking really nice!


(Daniela) #19

Honestly 2, 3 or even 4 lines of description is not a problem if you have a lot of subcategories.

Those are our “wiki” subcategories.

Please, keep in mind that when users create a category they have some guidelines to follow, in particular the first paragraph (aka “description”) where is written to stay under 200 characters (but not over, for example, 100).

A solution can be add a new setting in admin/site_settings or in category settings to let every users set a limit accordling with their needs (as Discourse do with the post excerpt maxlength for topics or digest min excerpt length for the digest mails).


(Neil Lalonde) #20

Ok I added truncation of the category descriptions. Rather than add another new setting, the number of lines is defined in CSS. By default, it will truncate at 4 lines. To shorten it to two, this custom CSS can be used:

.category-boxes .description .overflow {
  max-height: 3em;
}

(Daniela) #21

Is there a particular reason to use 2 different size for the category’s name when you set “boxes” or “boxes with featured topics”?

Boxes:

Boxes with featured topics: