Sam's personal "minimal" topic list design


(Khoa Nguyen) #102

@chapel @sam where can I find the full template for customize ?

(Tobias Eigen) #103

I think @sam is just updating the code snippets in the first post in this topic as he moves along. @sam have I got that right?

Incidentally, thanks for doing this! :awthanks: I have been enjoying observing this experiment and it’s going to be helpful to show my team how amazingly customizable discourse is as a platform.

(Khoa Nguyen) #104

Here is a good base for customize on our own

(Jacob Chapel) #105

I’ve updated my post with the current CSS and Header changes.

(Joe Seyfried) #106

@sam, did you stumble across this little oddity?

There is a spurious colspan=“2” in the main-link clearfix TD where it really should be a colspan=“1”… I was not really able to reproduce it with anything but the “Welcome to Discourse”-thread…

/Edit: @chapel’s design (thanks for sharing btw!) shows the same effect!

(Mittineague) #107

Is the Pinned icon adding an “extra” table cell to that row?

(Joe Seyfried) #108

Nope, it must either be the missing category, or the missing poster list, if I take a look at the original design… do we need the colspan="{{titleColSpan}}" at all? Is there any use case left for it in the new, reduced designs?

(Jacob Chapel) #109

Let me check. I don’t have any topics uncategorized so that might explain why I haven’t seen it.

(Joe Seyfried) #110

Nope, the missing category isn’t the culprit… must be the missing poster list:

I just kicked the colspan and haven’t found any other errors in the topic list…

(Jacob Chapel) #111

I’m not able to reproduce or see the case you’re seeing.

Due to the modifications in the simplified topic list, I would guess that it isn’t necessary but I haven’t tracked down where that variable is created, I’m sure @sam could answer authoritatively.

(Joe Seyfried) #112

Thanks anyway Jacob - so let’s wait and see what @sam knows about titleColSpan! :smiley:

(Jacob Chapel) #113

He is out on vacation for 2 weeks I believe, so he may not show up here any time soon.

Quickly searched and found this:

From the looks of it, this is the logic that you were seeing: this.get('model.isPinnedUncategorized')

So it’s a combination of a pinned topic that is uncategorized. So he colspan attribute is unnecessary for the simplified design.

(Michael Downey) #114

Without the table headers, how do we sort by # of replies, recency, or category?

(Khoa Nguyen) #115

Some hack around inspired by this topic :smile:

Discourse.HTML['categoryStyle'] = function(category) {
    var color = Em.get(category, 'color'),
        textColor = Em.get(category, 'text_color');

    if (!color && !textColor) { return; }
    // Add the custom style if we need to
    var style = "";
    if (color) { 
        style += "border: 2px solid #" + color + "; "; 
        style += "color: #" + color + "; ";
    return style;
Discourse.HTML['categoryBadge'] = function(category, opts) {
    opts = opts || {};

    if ((!category) ||
          (!opts.allowUncategorized &&
           Em.get(category, 'id') === Discourse.Site.currentProp("uncategorized_category_id") &&
       ) return "";

    var name = Em.get(category, 'name'),
        description = Em.get(category, 'description_text'),
        restricted = Em.get(category, 'read_restricted'),
        url = Discourse.getURL("/c/") + Discourse.Category.slugFor(category),
        elem = ( === false ? 'span' : 'a'),
        extraClasses = (opts.extraClasses ? (' ' + opts.extraClasses) : ''),
        html = "<" + elem + " href=\"" + ( === false ? '' : url) + "\" ",

    // Parent stripe implies onlyStripe
    if (opts.onlyStripe) { opts.showParent = true; }

    html += "data-drop-close=\"true\" class=\"badge-category" + (restricted ? ' restricted' : '' ) +
            (opts.onlyStripe ? ' clear-badge' : '') +
            extraClasses + "\" ";
    name = Handlebars.Utils.escapeExpression(name);

    // Add description if we have it, without tags. Server has sanitized the description value.
    if (description) html += "title=\"" + Handlebars.Utils.escapeExpression(description) + "\" ";

    categoryStyle = Discourse.HTML.categoryStyle(category);
    if (categoryStyle) {
        html += "style=\"" + categoryStyle + "\" ";
    if (restricted) {
      html += "><div><i class='fa fa-group'></i> " + name + "</div></" + elem + ">";
    } else {
      html += ">" + name + "</" + elem + ">";
    return html;

(Dave McClure) #116

digging the squares :beers:

(Jacob Chapel) #117

I switched over to using my minimal view as the default on my forum. If you would like to see how it looks/feels feel free to check it out at Wasting Your Life

I haven’t tried the squares, but I am thinking of alternative styles to try and see how they look in the different areas categories are shown.


:+1: I just always think that the “replies” and “last author” column should be changed. But I have no idea about design, though. =)

(Kasper Peulen) #119

@chapel This looks so clean, I think it should be considered as the default discourse theme.

(Alessio Fattorini) #120

I do like it very much! Clean and minimal :wink: I want it!

(Jacob Chapel) #121

The info is in my post above. Has the necessary CSS and JS changes.

Edit: added link to the post.