The topic list doesn't need a category column

We had chose to abandon the box style at SitePoint so that the topic lists could be more usable. Unfortunately, because the category badge is used in places other than topic lists the change caused a cascade of other issues that needed to be addressed. None that were impossible to “fix”, but some work was needed.

One of the benefits of the box style is that it has a larger area of background color. Because SitePoint has a black header and a white main, the box style provided for easier distinction where otherwise there would be insufficient contrast. We added a neutral border to help provide better recognition. Another problem was with the hamburger menu. Where prior to the changes in the menu’s display of categories was made “location memory” was possible. After changes were made so that categories changed position “color memory” was possible. Going from box style to bullet style means that more effort is needed to use the hamburger menu to navigate to categories.

I have been living with the change for a while now and I am getting used to it. Though my over all feeling is that UX took a hit for the sake of minimalizing the design of topic lists.

I think that if removing the category column will allow some to have a sidebar, the change will have enough positive and will be worth any negative. And even though a lot can be said for not having a lot of addons (plugins, theme components) it is possible to have the “classic” display.

1 Like

Box category style still works fine. Plenty of sites using it.

Yes, the box style does work, and I guess a lot depends on what rbg colors are being used on how much CSS work might be required. For examples:
I don’t care very much for this
cat-list-box

A quick and dirty CSS change which could admittedly be much better than this (eg. font color rules)

.badge-wrapper
, .category-drop {
 opacity: 0.7; 
} 

topic list
cat-list-box-opacity
suggested list
cat-suggested-opacity
category dropdown
cat-drop-opacity
hamburger
cat-hamburger-opacity
topic header
cat-header-opacity

The only possible issue I see is with styling emails to look consistent. Due to the nature of emails, the styles need to be inline. Setting the category badge style applies the changes to the email CSS, so using bullet style was the easier choice.

If you mean works fine functionally, yes it does. If you mean works well visually, then that is not the case at all unfortunately. Discourse had a really well balanced (and so attractive) homepage before this change.

I don’t think I’ve ever seen a visual change be reported so strongly as a bug by users of Discourse forums before. (I only had the change up myself for a couple of minutes and someone had queried it, and it wouldn’t surprise me to hear the same has happened on other forums.)

However as mentioned in my original post, this change would actually be excellent if you made use of all the space that has now become available. Without something filling the void, I feel the desktop version of DC has taken quite a bit of hit - which is a shame - DC looked so fresh and exciting before, and I fear people judging it based on the desktop version now may well be put off.

I feel your pain!

Here is a very quick fix that might help you:

/*To fix new category boxes on homepage*/
/*ref: https://meta.discourse.org/t/the-topic-list-doesnt-need-a-category-column/101352/61*/
.topic-list .link-bottom-line a.badge-wrapper.box {
	padding-top: 1px;
	padding-bottom: 1px;
	vertical-align: middle;
	margin-top: 7px;
}

@media (min-width: 1125px) {
	.topic-list .link-bottom-line a.badge-wrapper.box {
		float: right;
		margin-right: 22px;
		margin-top: -0.75em;
		padding-top: 2px;
		padding-bottom:2px;
	}

	.topic-list-main-link, .topic-list .main-link, .latest-topic-list-item .main-link {
		display: block;
		max-width: 75%;
	}

	.topic-list .link-bottom-line a.badge-wrapper.box {
		position: absolute;
		left: 568px;
	}
}

@media (min-width: 1125px) {
	.suggested-topics .topic-list .link-bottom-line a.badge-wrapper.box {
		display:none;
	}
}
/*end fix*/

(You may need to make some adjustments to suit your site and please note it has not been fully tested.)

Edit: Argh, just noticed it is broken in suggested topics too!
Edit2: Css amended with a very lazy fix

2 Likes

So you’re saying the bikeshed definitely looks better in purple than pink? :rofl:

2 Likes