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
Last active
October 15, 2016 15:15
-
-
Save chapel/66cb4361b0109f15b48b to your computer and use it in GitHub Desktop.
Discourse topic list customizations for http://discourse.wastingyourlife.co
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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; | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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