The topic list doesn't need a category column


(Brendan Schlagel) #41

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:


(Leo Davidson) #42

[Edit: Corrected the CSS to work on all categories.]

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;
}

.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 slightly older/wrong. 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.


How to move the category into a column in 'Latest'
(Angus McLeod) #44

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!


(Chris Beach) #45

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


(Jeff Wong) #46

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.


(Jeff Atwood) #47

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


(Brendan Schlagel) #48

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:


#49

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


(Daniel, CSS Fiddler) #50

Not a big fan of this change

The old topic list was more readable. I usually do a quick visual scan of the topic list when I open the site to see if there’s anything new I need to read

With this change, more vertical space is taken up by each topic (because categories are moved under the title) making at top-to-bottom reading of the topic list more interrupted (little bits of color and info that wasn’t necessary before) and requiring me to scroll the page to see the same amount of information

I think the best solution would be to de-emphasize category names altogether. Use color to indicate what category a topic belongs to; omit full category name but give user an option to see it by hovering the thread title or opening the thread

Suggested change would look something like this:

But would just omit the category name altogether.


(Jeff Atwood) #51

How would you tell categories from tags in that scenario? They would look identical under your proposed design.


(Chris Beach) #52

I really like the proposed category colouring on the topic list:

52%20PM

Some suggestions:

  • Some extra margin between the category and tags (or float tags right and category left)
  • Colour the tags
  • Use icons on the tags

Also, the bold text of the category helps distinguish it.


#53

After checking a few forums, I have a little feedback.

Do we still need this limit on desktop?

.topic-list span.badge-category .category-name {
    max-width: 150px;
}

It made sense with a column, but now it seems a little short for the space we have.


#54

Totally agree, I’ve already bumped mine up, it’s way too conservative! I have mine: max-width: 350px;


(Jeff Atwood) #55

Yes agreed, we can relax that cc @awesomerobot. Another side effect of category in a column is that category names had to be relatively short.

I still don’t think they should be enormous but they can be moderate length now with no real risk.


(Kris) #56

I’ve removed the restriction from desktop entirely. Previously long category + subcategory names could break the layout fairly easily, with the new layout you really have to be looking to do it intentionally by naming a category with 50 W’s or something.


(Shawn Kirsch) #57

We don’t use tags and all our categories are colored the same, so maybe we are unique, but I am using OPPCSS :joy: to fix it I guess.