The topic list doesn't need a category column

How about unbolding and a small left margin?

3 Likes

This is the front page on the forum I use, as I see it on my computer screen.
At first glance, all I can see are blue, orange and green category labels in the topics column.

This change to your layout and greyed out text is, quite literally, giving me a headache.
So much space on the screen and yet the post topics and categories are crammed onto one column with the category labels standing out loud and proud and prominent beneath greyed out topic headings of the post for which the forum members are more interested in seeing and reading … it’s currently looking more like some new format of morse code your testing out.
There’s so much space just at the sides so why do you need to cram up the Topics column?

I’m seeing more category title than actual topic headings, which were just about readable when greyed out before you moved the Cat. labels.
And naturally, with the category label beneath each post it’s taking up twice as much screen length thus more scrolling down the screen than is actually necessary to read posts…well, if I could see them to read them :roll_eyes:

Please bear in mind not all users have perfect 20/20 vision, which is why I can’t use smart phone or tablet, I have to use a pc with full sized computer monitor.
It would be fine if individual users could tailor the font size and colours to cater to their individual needs but we can’t.
So if we struggle or can’t read the greyed out topic titles as it is, then squeezing them between the loud’n’proud category titles renders the forum virtually useless to us.
The Topics column looks more like a shopping list washed out in the rain.

But while I’m on here could I put in a request please … you couldn’t move the skin tone bar of the emoji box over to the left a little so we can actually use the downward scroll button. It would be useful should the forum ever be rendered usable again :thinking:

Actually your own Discourse forum appears a little more user friendly…visually. Haven’t time to explore further :wink:

7 Likes

I think this is an excellent change, and will be especially great for narrow views - just compare with and without in that situation and its obvious - much more room for the title.

And of course, it makes Discourse look even less like “Excel” :wink:

4 Likes

I got a lot of complaints of my discourse instance users since the change, as said by Emerald it makes the title and category squeezed on the left while there is a lot of empty space on the table.

I never had complaint on previous UI, and nobody ever compared it to an excel spreadsheet.

6 Likes

This is a very good change. I would say that this is “long-playing”. It can be used further for subsequent changes to the template itself. But even without it, I like it.

But first, I think we might not like it very much. We get used to what we use for a long time.

Perhaps we should create a theme design template for those who want to restore the old design (list / topic-list-item.raw.hbs)? It is quite simple.

4 Likes

I would like to think so … there’s now some central real estate you might use for other stats?

A basic change is to up the font size, i’ve done that on my personal Theme selection already.

Either that or @angus’s Custom Layout or equivalent plugins for side bars are going to get a whole lot more popular because this will facilitate a lot more side content :+1:

IMHO, we have a lot of options. We can make a component.

Or we can use existing plugins, (sidebar) plugins abound. But I do not see, frankly, why do this. This design may be unusual at the beginning. But for me, the new version is better than it was before, with a lot of columns.

In general, not ready to answer. I just want to show that we can move anywhere, in any direction. The Discourse toolkit is huge.

3 Likes

I agree with those who say there’s too much information concentrated on the left side of the screen. It’s not obvious here on meta, but some forums have very long category names. Combined with three, four, or five tags, the secondary line could end up being longer than the topic title itself, a very unsightly display.

The use of square bullets and boldface for the category indicator naturally draws the eye to the second line before you even notice the topic title. The topic title should be the main focus of each row, not the stuff below it.

1 Like

My forum is on v2.2.0.beta5 +24
Next days, categories will be displayed below titles ?
Is it possible to choose the display ?
For me anciant display is more easy to read titles and if possible I would like to keep it…

I have mixed feelings about this! On the one hand it’s always nice to simplify and I get how it didn’t make a ton of sense to have categories as its own sortable column (didn’t even realize it had been sortable, actually!)

On the other hand I agree with the several comments that the new layout makes the topic title column feel a lot more crowded than it did previously. (And on a desktop-sized screen, results in a lot of negative space in the center so feels kind of unbalanced).

My main complaint is it makes it harder / just visually more jarring to quickly scan the list of topic titles. I think @ralph1 is spot on about that. To help mitigate that, I’d definitely be in favor of both de-bolding and lightening the category names.

Personally I think I’d prefer some kind of “pseudo-column” with category still displaying to the right of the topic title, just without a column header (particularly if the box style is still an option…the emphasis / info hierarchy is really out of whack in that case). But I think any de-emphasis of categories will help a lot in bringing me around on this change :slight_smile:

3 Likes

I hate this. How do I change it back???

It is so hard to visually look and scroll through pages. We don’t care about categories this much. We just want people looking through all the threads.

1 Like

CSS is quite easy, in my experience :wink:

Fair enough, I’m not too worried about it & will try some tweaks for this. But of course I always like when Discourse core has the best most beautiful CSS possible so it’s one less thing for me to worry about :wink:

5 Likes

[Edit: Corrected the CSS to work on all categories.]
[Edit2: Needed to add “display: block;” to the container after a recent Discourse change.]

I haven’t tested this much, as I only just did it, but I made this CSS change which others may find useful, if they dislike the new topic list layout.

Before:

After:

CSS code:

.topic-list-item .link-bottom-line {
	float: right;
	margin-top: 0.2em;
	display: block;
}

.topic-list-item .link-bottom-line .badge-wrapper.bullet {
	float: right;
	margin-left: 1em;
}

.topic-list-item .link-bottom-line .discourse-tags {
	float: right;
	margin-left: 1em;
}

Add it as a Component here in the Admin / Customize / Themes area:

(n.b. CSS in screenshot is an older/ version. CSS in text above is the one to use. Screenshot is just to show you where to paste it.)

(I only added for Desktop as the new stock layout probably makes sense on phones.)

And then add that Component to some or all of your Themes in the same area.

11 Likes

I like this change. I’ve had a setting “category badge move” in the topic list previews plugin (TLP) for a while, which made the same move. Thankfully, it’s no longer necessary :+1:.

That said, @merefield is working on a setting for TLP that adds the category column back in for those who like it. Long live pluralism!

4 Likes

Love this change, and the extra horizontal space meant I could increase the font size of topic titles.

No extra vertical space consumed, as I already had preview images which gave extra height. Forum after change on left, (different forum) pre-change on right

3 Likes

I believe a large part of why it looks more noisy than meta is your site’s category styling is the fact that it’s set to box styling.

Setting it to bullet (like it is on meta) or bar will result in significantly less color on the categories.

6 Likes

I believe @awesomerobot also reduced size slightly on the “box” category style by default to compensate for this, as well?

4 Likes

Alright I wanted to share some CSS I used to bring this back closer in line with previous behavior. Similar to the one @LeoDavidson shared above but a couple differences:

  • Only modifies the topic list for large screen widths
  • Uses absolute positioning so that the categories appear aligned left
  • A bit better handling for long topic titles

(We have lots of other CSS customizations so the specific values may need to be tweaked for a default install! Screenshots below of the before / after on our forum.)

IMO this is best of both worlds — when viewing on a large screen / browser window, it takes advantage of the space and is much easier to read the topic titles. But categories is no longer a sortable column, so still a bit cleaner than before. On narrower widths it switches to categories displaying beneath topic titles, which makes sense for the smaller size.

@media (min-width: 1125px) {
    #list-area td.main-link.clearfix {
        display: flex;
        align-items: center;
    }
	#list-area span.link-top-line {
	    float: left;
	    max-width: 500px;
	    line-height: 1.5em;
    }
    #list-area .topic-list .link-bottom-line {
	    position: absolute;
	    left: 540px;
    }
    .suggested-topics .link-bottom-line {
        float: right;
    }
    #list-area .topic-list th, .topic-list td {
	    padding: 10px 5px;
    }
    #list-area .topic-list span.badge-category .category-name {
	    max-width: 250px;
    }
}

(EDIT: my first stab at this caused wonky behavior for the suggested topics list; should be fixed now)

Before CSS tweaks:

After CSS tweaks:

7 Likes

I had the same idea with the responsive windows and the width of the category, that’s why I didn’t want to use the theme component.

I used @LeoDavidson css as a base so it’s a bit different of your work. But I noticed a little issue with the topic excerpt (it was put below the category name, not below the topic title), and since I didn’t want to hide it, I did some things here and there

Since we are in the spirit of sharing, here’s my css:

@media (min-width: 960px) {
    .topic-list .link-bottom-line {
        float: right;
        margin-top: 0.250em;
    }
    .topic-list .has-excerpt .link-bottom-line {
        margin-top: -20px;
        float: none;
    }
    .topic-list .link-bottom-line .badge-wrapper.bullet {
    	float: right;
    	margin-left: 1em;
    	margin-right: 0.250em;
    	width: 145px;
    }
    .topic-list .link-bottom-line .discourse-tags {
    	float: right;
    	margin-left: 1em;
    }
    .topic-list .has-excerpt .topic-excerpt {
       padding-top: 20px;
    }
}

I didn’t try yours @bts, maybe you don’t have this issue at all.

BTW, the theme component was not announced here, you can add a category column without all of these tweaks by using this : Add Category Column

6 Likes