Inspired by Sam’s personal “minimal” topic list design
- Copy the contents of CSS.sass into Admin > Customize > CSS/HTML > CSS
- Copy the contents of Header.html into Admin > Customize > CSS/HTML > Header
Inspired by Sam’s personal “minimal” topic list design
// 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; | |
} | |
} | |
} |
<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> |