Discourse topic list customizations for http://discourse.wastingyourlife.co

About.md

Inspired by Sam’s personal “minimal” topic list design

Instructions

1. Copy the contents of CSS.sass into Admin > Customize > CSS/HTML > CSS
2. Copy the contents of Header.html into Admin > Customize > CSS/HTML > Header

CSS.sass

// Specific colors to WYL
$primary: #48484a;
$tertiary: #CF3337;
$gaming: #30A92A;
$on-topic: #CF3337;
$meta: #808281;
$lounge: #D19233;
$staff: #5B7C9F;

$category-opacity: 0.3;

.category-bar {
    margin: 0 !important;
    padding: 0 !important;
    width: 2px;
    
    .category-gaming & {
        background-color: rgba($gaming, $category-opacity);
    }
    
    .category-on-topic & {
        background-color: rgba($on-topic, $category-opacity);
    }
    
    .category-meta & {
        background-color: rgba($meta, $category-opacity);
    }
    
    .category-lounge & {
        background-color: rgba($lounge, $category-opacity);
    }
    
    .category-staff & {
        background-color: rgba($staff, $category-opacity);
    }
}

#suggested-topics {
    .main-link {
        padding: 6px 10px 3px 5px;
        
        .title {
            padding: 0;
        }
        
        .creator {
            margin: 0;
        }
    }
    
    .num.replies {
        width: 75px;
    }
    
    .last-post {
        width: 130px;
    }
}

.topic-list:not(.categories) {
  border-top: none;

  .topic-statuses {
      margin: 0;
  }
  
  .main-link {
      padding: 5px 5px 5px 7px;
  }
  
  .creator {
      display: none !important;
  }
  
  th {
    background-color: #fafafa;
  }

  > tbody > tr:nth-child(odd) {
    background-color: white;
  }

  > tbody td {
    border-bottom: 1px solid #eee;
  }

  a.title:not(.badge-notification) {
    color: $primary;
    font-weight: normal;
    font-size: 17px;
    
    &:hover {
        text-decoration: underline;
    }
  }

  .editor {
    font-size: 14px;
    line-height: 1;
    display: block;
    width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    
    a {
        color: $primary;
    }
  }
  
  .creator {
    margin-top: 3px;
  }

  .main-link, .posts {
    width: auto;
  }

  td, .creator a, .editor span {
    color: scale-color($primary, $lightness: 50%) !important;
  }

  td {
    padding: 5px;
  }

  .fa-tag {
    opacity: 0.7;
    font-size: 10px;
    margin-right: -2px;
  }
  
  .num.replies, .num.views {
    min-width: 100px;
  }
  
  .num.replies {
    font-size: 17px;
    padding-top: 8px;
    color: $primary !important;
  }
  
  .last-post, .activity {
    width: 170px;
  }

  .last-post {
    padding: 6px 5px 4px 5px;
    
    .relative-date {
      color: scale-color($primary, $lightness: 50%);
      font-size: 12px;
    }
    
    .poster-avatar {
        float: left;
    }
    
    .poster-info {
        text-align: left;
        float: left;
        margin-left: 8px;
        padding-top: 1px;
    }
  }
  
  td.category {
    padding: 0 20px;
  }
  
  .badge-wrapper {
    .badge-category {
      font-size: 1em;
      font-weight: normal;
      padding: 0;
    }
    
    .badge-category-bg {
      display: none;
    }
  }
}

Header.html

<script type='text/x-handlebars' data-template-name='list/topic_list_item.raw'>
  <td class="category-bar"></td>
  <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}}
  </td>
  
  {{#if showCategory}}
    <td class='category'>{{category-link topic.category hideParent="true"}}</td>
  {{/if}}

  <td class="num replies posts-map posts" title="This topic has {{topic.replyCount}} replies">
    <a href class="posts-map">{{topic.replyCount}}</a>
  </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'>
      <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>
      <a href="{{topic.lastPostUrl}}">
        {{format-date topic.bumpedAt format="medium-with-ago"}}
      </a>
    </div>
  </td>
</script>

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

  {{#unless hideCategory}}
    {{raw "topic-list-header-column" sortable=sortable order='category' name='category_title'}}
  {{/unless}}
  
  {{raw "topic-list-header-column" sortable=sortable number='true' order='views' forceName='Replies'}}
  {{raw "topic-list-header-column" sortable=sortable 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>

<script>
  Discourse.UserCardView.reopen({
    _willShow: function(target) {
      if (!target) { return; }
      var self = this,
        width = this.$().width();
      Em.run.schedule('afterRender', function() {
        if (target) {
          var position = target.offset();
          if (position) {
            position.left += target.width() + 10;

            var overage = ($(window).width() - 50) - (position.left + width);
            if (overage < 0) {
              position.left += overage;
              position.top += target.height() + 8;
            }

            position.top -= $('#main-outlet').offset().top;
            self.$().css(position);
          }
        }
      });
    }
  });
</script>