Sam's personal "minimal" topic list design

theme-full

(Matt Terry) #203

I’ve been working on styling a client’s discourse site this week and Sam’s minimal UI is working out so well for it. Thanks @sam it’s rally awesome, I think you’d really like what we’ve managed to with the look of the site… I’ll see if I can post screen shots


#205

Hello kind people,

Question; is it possible to bring back in minimal theme heatmap colors for posts and add column views?

To look like this Views | Replies | Last Post (Columns image preview below) with activated heatmap (Post colors). Thanks for help

This is the header code;

<script type='text/x-handlebars' data-template-name='list/topic_list_item.raw'>

  <td class='main-link clearfix'>
    {{raw "topic-status" topic=topic}}
    {{topic-link topic}}

    {{#if controller.showTopicPostBadges}}
      {{raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl}}
    {{/if}}

    {{raw "list/topic-excerpt" topic=model}}

    <div class='creator'>
        {{#if showCategory}}
            {{category-link topic.category showParent="true" onlyStripe="true"}}
        {{/if}}

        {{~#if topic.creator ~}}
            <a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a>
            &nbsp;
            {{format-date topic.createdAt format="medium-with-ago"}}
        {{~/if ~}}
        
        {{raw "list/action-list" topic=topic postNumbers=topic.bookmarked_post_numbers className="bookmarks" icon="bookmark"}}
        {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
    </div>
  </td>



  {{#if controller.showLikes}}
    <td class="num likes">
      {{number topic.like_count}} <i class='fa fa-heart'></i>
    </td>
  {{/if}}

  {{#if controller.showOpLikes}}
    <td class="num likes">
      {{number topic.op_like_count}} <i class='fa fa-heart'></i>
    </td>
  {{/if}}

  <td class="num replies">
    {{topic.replyCount}}
  </td>

  <td class="last-post">
    <div class='poster-avatar'>
      <a href="{{topic.lastPostUr}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPoster usernamePath="username" imageSize="medium"}}</a>
    </div>

    <div class='poster-info'>
      <a href="{{topic.lastPostUrl}}">
        {{format-date topic.bumpedAt format="medium-with-ago"}}
      </a>
      <span class='editor'><a href="/users/{{topic.last_poster_username}}" data-auto-route="true" data-user-card="{{topic.last_poster_username}}">{{topic.last_poster_username}}</a></span>
    </div>
  </td>
</script>

<script type='text/x-handlebars' data-template-name='topic-list-header.raw'>
  {{raw "topic-list-header-column" order='posts' name='topic.title'}}

  {{#if showLikes}}
    {{raw "topic-list-header-column" sortable='true' order='likes' number='true' forceName='Likes'}}
  {{/if}}

  {{#if showOpLikes}}
    {{raw "topic-list-header-column" sortable='true' order='op_likes' number='true' forceName='Likes'}}
  {{/if}}

  {{raw "topic-list-header-column" sortable='true' number='true' order='views' forceName='Replies'}}
  {{raw "topic-list-header-column" sortable='true' order='activity' forceName='Last Post'}}
</script>

<script>
  Discourse.TopicListItemView.reopen({
    showCategory: function(){
      return !this.get('controller.hideCategory') &&
        this.get('topic.creator') &&
        this.get('topic.category.name') !== 'uncategorized';
    }.property()
  });

  Discourse.Topic.reopen({
    creator: function(){
      var poster = this.get('posters.firstObject');
      if(poster){
        return poster.user;
      }
    }.property(),
    lastPoster: function() {
      var poster = this.get('posters.lastObject');
      if(poster){
        if (this.last_poster_username === poster.user.username){
          return poster.user;
        } else {
          return this.get('creator');
        }
      }
    }.property('posters'),
    replyCount: function(){
      return this.get('posts_count') - 1;
    }.property(),
    hasReplies: function(){
      return this.get('posts_count') > 1;
    }.property()

  });
</script>

Anyone? :stuck_out_tongue:


(Matt Terry) #206

If you have a look in Discourse and find the templates that are being overridden, eg data-template-name=‘list/ topic_list_item.raw’ then you can see what the original templates look like.

Then you can find any parts that are missing and merge them back into the Sam’s UI template overrides.

Sorry I can’t be more specific, but that should help


(Denis Safronenkov) #207

It looks perfect, but a lil bug overthere:

When username ‘too long’, it becomes like on the picture. Any workaround for this?


(Joe Kelly) #208

@d3zorg You can solve that with CSS. Depending on what you want to achieve, you can use:

.topic-list td.posters {
white-space: nowrap;
}

This will force no line-breaks, so the long name will simply overflow past the container’s right edge.

Or you could also play around with this setting:

  text-wrap: ellipsis

which will apend “…” to any overflowing text instead of wrapping it to the next line. See here.


(Sam Saffron) #209

I just added partial heatmapping (only hot)

I find that too many colors distract me in the theme, but highlighting the hottest conversations does have some benefit.


(Jacob Chapel) #210

Have you updated your code with this? I was looking into this the other day but got side tracked since it wasn’t working as expected.


(Sam Saffron) #211

Just updated it now … sorry for the delay


(Sam Saffron) #212

@eviltrout my theme is pretty broken now, I think the list item template override is not longer taking, how do I fix?


(Robin Ward) #213

Ah that could be because I changed it to the preferred ember style of using dashes instead of underscores. So topic-list-item should fix it.


(Jacob Chapel) #214

Interestingly, I just upgraded to latest and my override didn’t break. Though I am having issues with the suggested topics showing user info sometimes and I am not sure why.

I think it might have to do with the model/data store changes?


(Chris Saenz) #215

@sam, can you please update the original post (header code, first line):

<script type='text/x-handlebars' data-template-name='list/topic_list_item.raw'>

to

<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>

Thanks!


(Jacob Chapel) #216

@sam affects yours as well


(Maya Lesh) #217

this would be a great addition! did anyone try to do something like adding excerpts?


#218

I implemented the styles and templates from the first post but they remove some (new?) Discourse features like batch editing topics in a category. The small burger to the left here is now missing:

How can I see the original templates to copy it back in or is there a better approach?


(Fábio Machado De Oliveira) #219

@sam, are there any plans of supporting column customizations, so we can change, hide or add just one column from the topic list?


(Sam Saffron) #220

Hiding columns is trivial, just use CSS, we are pretty customizable as it is, we may split up some rendering chunks a bit more


(Sam Saffron) #221

I just updated the theme to support:


(Jacob Chapel) #222

I did the same, after the work you did in general to core I really just had to remove a bunch of code and only one custom property was added to the topic list view.


(ljpp) #223

So I updated one small side project to the beta branch, and applied @sam’s Minimal 1:1. Now I am wondering, arent the avatars supposed to be square? Still getting round. I can see the 3px rounding in the CSS, but it doesn’t seem to cut it.