Skip to content

Instantly share code, notes, and snippets.

@chapel

chapel/About.md

Last active Oct 15, 2016
Embed
What would you like to do?
Discourse topic list customizations for http://discourse.wastingyourlife.co
// 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment