From 89ba90a69505845acb3f284c4463e8d20042c533 Mon Sep 17 00:00:00 2001
From: Greg Price <gprice@edx.org>
Date: Tue, 10 Jun 2014 10:54:56 -0400
Subject: [PATCH] Re-design forum thread list

Use larger and lighter title font, decrease padding, and use lighter
solid backgrounds instead of gradients. Also, refactor SASS code to
conform better to our new style, including using more specific class
names.

Originally reviewed in #4072
---
 .../discussion_thread_list_view_spec.coffee   | 123 +++++++----
 .../views/discussion_thread_list_view.coffee  |  68 +++---
 lms/static/images/comment-icon-bottoms.png    | Bin 960 -> 0 bytes
 lms/static/sass/application-extend2.scss.mako |   8 +-
 lms/static/sass/discussion/_discussion.scss   | 199 ------------------
 .../sass/discussion/elements/_navigation.scss | 112 ++++++++++
 .../_developer.scss}                          |   0
 .../sass/discussion/utilities/_shame.scss     |  36 ++++
 .../sass/discussion/utilities/_variables.scss |   1 +
 .../discussion/_thread_list_template.html     |   5 +-
 .../discussion/_underscore_templates.html     |  42 ++--
 11 files changed, 293 insertions(+), 301 deletions(-)
 delete mode 100644 lms/static/images/comment-icon-bottoms.png
 create mode 100644 lms/static/sass/discussion/elements/_navigation.scss
 rename lms/static/sass/discussion/{_discussion-developer.scss => utilities/_developer.scss} (100%)
 create mode 100644 lms/static/sass/discussion/utilities/_shame.scss
 create mode 100644 lms/static/sass/discussion/utilities/_variables.scss

diff --git a/common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee b/common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee
index a36b98f618..577893caa0 100644
--- a/common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee
+++ b/common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee
@@ -4,34 +4,41 @@ describe "DiscussionThreadListView", ->
         DiscussionSpecHelper.setUpGlobals()
         setFixtures """
         <script type="text/template" id="thread-list-item-template">
-          <a href="<%- id %>" data-id="<%- id %>">
-            <span class="title"><%- title %></span>
-            <span class="comments-count">
-                <%
-            var fmt;
-            var data = {
-                'span_sr_open': '<span class="sr">',
-                'span_close': '</span>',
-                'unread_comments_count': unread_comments_count,
-                'comments_count': comments_count
-                };
-            if (unread_comments_count > 0) {
-                fmt = '%(comments_count)s %(span_sr_open)scomments (%(unread_comments_count)s unread comments)%(span_close)s';
-            } else {
-                fmt = '%(comments_count)s %(span_sr_open)scomments %(span_close)s';
-            }
-            print(interpolate(fmt, data, true));
-            %>
-            </span>
-
-            <span class="votes-count">+<%=
-                interpolate(
-                    '%(votes_up_count)s%(span_sr_open)s votes %(span_close)s',
-                    {'span_sr_open': '<span class="sr">', 'span_close': '</span>', 'votes_up_count': votes['up_count']},
-                    true
-                    )
-            %></span>
-          </a>
+          <li data-id="<%- id %>" class="forum-nav-thread<% if (typeof(read) != "undefined" && !read) { %> is-unread<% } %>">
+            <a href="#" class="forum-nav-thread-link">
+              <div class="forum-nav-thread-wrapper-1">
+                <span class="forum-nav-thread-title"><%- title %></span>
+              </div><div class="forum-nav-thread-wrapper-2">
+                <% if (endorsed) { %>
+                  <span class="forum-nav-thread-endorsed"><i class="icon icon-ok"></i><span class="sr">Endorsed response</span></span>
+                <% } %>
+                <span class="forum-nav-thread-votes-count">+<%=
+                    interpolate(
+                        '%(votes_up_count)s%(span_sr_open)s votes %(span_close)s',
+                        {'span_sr_open': '<span class="sr">', 'span_close': '</span>', 'votes_up_count': votes['up_count']},
+                        true
+                        )
+                %></span>
+                <span class="forum-nav-thread-comments-count <% if (unread_comments_count > 0) { %>is-unread<% } %>">
+                    <%
+                var fmt;
+                var data = {
+                    'span_sr_open': '<span class="sr">',
+                    'span_close': '</span>',
+                    'unread_comments_count': unread_comments_count,
+                    'comments_count': comments_count
+                    };
+                if (unread_comments_count > 0) {
+                    fmt = '%(comments_count)s %(span_sr_open)scomments (%(unread_comments_count)s unread comments)%(span_close)s';
+                } else {
+                    fmt = '%(comments_count)s %(span_sr_open)scomments %(span_close)s';
+                }
+                print(interpolate(fmt, data, true));
+                %>
+                </span>
+              </div>
+            </a>
+          </li>
         </script>
         <script type="text/template" id="thread-list-template">
             <div class="browse-search">
@@ -53,9 +60,7 @@ describe "DiscussionThreadListView", ->
               </ul>
             </div>
             <div class="search-alerts"></div>
-            <div class="post-list-wrapper">
-                <ul class="post-list"></ul>
-            </div>
+            <ul class="forum-nav-thread-list"></ul>
         </script>
         <script aria-hidden="true" type="text/template" id="search-alert-template">
             <div class="search-alert" id="search-alert-<%- cid %>">
@@ -71,9 +76,27 @@ describe "DiscussionThreadListView", ->
         <div class="sidebar"></div>
         """
         @threads = [
-          {id: "1", title: "Thread1", body: "dummy body", votes: {up_count: '20'}, unread_comments_count:0, comments_count:1, created_at: '2013-04-03T20:08:39Z',},
-          {id: "2", title: "Thread2", body: "dummy body", votes: {up_count: '42'}, unread_comments_count:0, comments_count:2, created_at: '2013-04-03T20:07:39Z',},
-          {id: "3", title: "Thread3", body: "dummy body", votes: {up_count: '12'}, unread_comments_count:0, comments_count:3, created_at: '2013-04-03T20:06:39Z',},
+          makeThreadWithProps({
+            id: "1",
+            title: "Thread1",
+            votes: {up_count: '20'},
+            comments_count: 1,
+            created_at: '2013-04-03T20:08:39Z',
+          }),
+          makeThreadWithProps({
+            id: "2",
+            title: "Thread2",
+            votes: {up_count: '42'},
+            comments_count: 2,
+            created_at: '2013-04-03T20:07:39Z',
+          }),
+          makeThreadWithProps({
+            id: "3",
+            title: "Thread3",
+            votes: {up_count: '12'},
+            comments_count: 3,
+            created_at: '2013-04-03T20:06:39Z',
+          }),
         ]
 
         spyOn($, "ajax")
@@ -82,6 +105,21 @@ describe "DiscussionThreadListView", ->
         @view = new DiscussionThreadListView({collection: @discussion, el: $(".sidebar")})
         @view.render()
 
+    makeThreadWithProps = (props) ->
+      # Minimal set of properties necessary for rendering
+      thread = {
+        id: "dummy_id",
+        pinned: false,
+        endorsed: false,
+        votes: {up_count: '0'},
+        unread_comments_count: 0,
+        comments_count: 0,
+      }
+      $.extend(thread, props)
+
+    renderSingleThreadWithProps = (props) ->
+      makeView(new Discussion([new Thread(makeThreadWithProps(props))])).render()
+
     makeView = (discussion) ->
       return new DiscussionThreadListView(
           el: $(".sidebar"),
@@ -89,10 +127,10 @@ describe "DiscussionThreadListView", ->
       )
 
     checkThreadsOrdering =  (view, sort_order, type) ->
-      expect(view.$el.find(".post-list .list-item").children().length).toEqual(3)
-      expect(view.$el.find(".post-list .list-item:nth-child(1) .title").text()).toEqual(sort_order[0])
-      expect(view.$el.find(".post-list .list-item:nth-child(2) .title").text()).toEqual(sort_order[1])
-      expect(view.$el.find(".post-list .list-item:nth-child(3) .title").text()).toEqual(sort_order[2])
+      expect(view.$el.find(".forum-nav-thread").children().length).toEqual(3)
+      expect(view.$el.find(".forum-nav-thread:nth-child(1) .forum-nav-thread-title").text()).toEqual(sort_order[0])
+      expect(view.$el.find(".forum-nav-thread:nth-child(2) .forum-nav-thread-title").text()).toEqual(sort_order[1])
+      expect(view.$el.find(".forum-nav-thread:nth-child(3) .forum-nav-thread-title").text()).toEqual(sort_order[2])
       expect(view.$el.find(".sort-bar a.active").text()).toEqual(type)
 
     describe "thread rendering should be correct", ->
@@ -269,3 +307,12 @@ describe "DiscussionThreadListView", ->
             @view.searchForUser("dummy")
             expect($.ajax).toHaveBeenCalled()
             expect(@view.addSearchAlert).not.toHaveBeenCalled()
+
+    describe "endorsed renders correctly", ->
+      it "when absent", ->
+        renderSingleThreadWithProps({})
+        expect($(".forum-nav-thread-endorsed").length).toEqual(0)
+
+      it "when present", ->
+        renderSingleThreadWithProps({endorsed: true})
+        expect($(".forum-nav-thread-endorsed").length).toEqual(1)
diff --git a/common/static/coffee/src/discussion/views/discussion_thread_list_view.coffee b/common/static/coffee/src/discussion/views/discussion_thread_list_view.coffee
index 4a0a2ccc06..5e27aa8f3d 100644
--- a/common/static/coffee/src/discussion/views/discussion_thread_list_view.coffee
+++ b/common/static/coffee/src/discussion/views/discussion_thread_list_view.coffee
@@ -9,8 +9,8 @@ if Backbone?
       "click .sort-bar a": "sortThreads"
       "click .browse-topic-drop-menu": "filterTopic"
       "click .browse-topic-drop-search-input": "ignoreClick"
-      "click .post-list .list-item a": "threadSelected"
-      "click .post-list .more-pages a": "loadMorePages"
+      "click .forum-nav-thread-link": "threadSelected"
+      "click .forum-nav-load-more-link": "loadMorePages"
       "change .cohort-options": "chooseCohort"
       'keyup .browse-topic-drop-search-input': DiscussionFilter.filterDrop
 
@@ -68,8 +68,8 @@ if Backbone?
       @clearSearchAlerts()
       thread_id = thread.get('id')
       content = @renderThread(thread)
-      current_el = @$("a[data-id=#{thread_id}]")
-      active = current_el.hasClass("active")
+      current_el = @$(".forum-nav-thread[data-id=#{thread_id}]")
+      active = current_el.has(".forum-nav-thread-link.is-active").length != 0
       current_el.replaceWith(content)
       if active
         @setActiveThread(thread_id)
@@ -111,8 +111,7 @@ if Backbone?
       sidebarHeight = Math.min(sidebarHeight + 1, discussionBody.outerHeight())
       sidebar.css 'height', sidebarHeight
 
-      postListWrapper = @$('.post-list-wrapper')
-      postListWrapper.css('height', (sidebarHeight - @sidebar_header_height - 4) + 'px')
+      @$('.forum-nav-thread-list').css('height', (sidebarHeight - @sidebar_header_height - 4) + 'px')
 
 
     # Because we want the behavior that when the body is clicked the menu is
@@ -138,30 +137,32 @@ if Backbone?
       @
 
     renderThreads: =>
-      @$(".post-list").html("")
+      @$(".forum-nav-thread-list").html("")
       rendered = $("<div></div>")
       for thread in @displayedCollection.models
         content = @renderThread(thread)
         rendered.append content
-        content.wrap("<li class='list-item' data-id='\"#{thread.get('id')}\"' />")
 
-      @$(".post-list").html(rendered.html())
+      @$(".forum-nav-thread-list").html(rendered.html())
       @renderMorePages()
       @updateSidebar()
       @trigger "threads:rendered"
 
     renderMorePages: ->
       if @displayedCollection.hasMorePages()
-        @$(".post-list").append("<li class='more-pages'><a href='#'>" + gettext("Load more") + "</a></li>")
+        @$(".forum-nav-thread-list").append("<li class='forum-nav-load-more'><a href='#' class='forum-nav-load-more-link'>" + gettext("Load more") + "</a></li>")
 
-    loadMorePages: (event) ->
+    getLoadingContent: (srText) ->
+      return '<div class="forum-nav-loading" tabindex="0"><span class="icon-spinner icon-spin"/><span class="sr" role="alert">' + srText + '</span></div>'
+
+    loadMorePages: (event) =>
       if event
         event.preventDefault()
-      @$(".more-pages").html('<div class="loading-animation" tabindex=0><span class="sr" role="alert">' + gettext('Loading more threads') + '</span></div>')
-      @$(".more-pages").addClass("loading")
-      loadingDiv = @$(".more-pages .loading-animation")
-      DiscussionUtil.makeFocusTrap(loadingDiv)
-      loadingDiv.focus()
+      loadMoreElem = @$(".forum-nav-load-more")
+      loadMoreElem.html(@getLoadingContent(gettext("Loading more threads")))
+      loadingElem = loadMoreElem.find(".forum-nav-loading")
+      DiscussionUtil.makeFocusTrap(loadingElem)
+      loadingElem.focus()
       options = {}
       switch @mode
         when 'search'
@@ -184,12 +185,12 @@ if Backbone?
       if lastThread
         # Pagination; focus the first thread after what was previously the last thread
         @once("threads:rendered", ->
-          $(".post-list li:has(a[data-id='#{lastThread}']) + li a").focus()
+          $(".forum-nav-thread[data-id='#{lastThread}'] + .forum-nav-thread .forum-nav-thread-link").focus()
         )
       else
         # Totally refreshing the list (e.g. from clicking a sort button); focus the first thread
         @once("threads:rendered", ->
-          $(".post-list a").first()?.focus()
+          $(".forum-nav-thread-link").first()?.focus()
         )
 
       error = =>
@@ -200,15 +201,9 @@ if Backbone?
 
     renderThread: (thread) =>
       content = $(_.template($("#thread-list-item-template").html())(thread.toJSON()))
-      if thread.get('subscribed')
-        content.addClass("followed")
-      if thread.get('endorsed')
-        content.addClass("resolved")
-      if thread.get('read')
-        content.addClass("read")
       unreadCount = thread.get('unread_comments_count')
       if unreadCount > 0
-        content.find('.comments-count').addClass("unread").attr(
+        content.find('.forum-nav-thread-comments-count').attr(
           "data-tooltip",
           interpolate(
             ngettext('%(unread_count)s new comment', '%(unread_count)s new comments', unreadCount),
@@ -216,25 +211,14 @@ if Backbone?
             true
           )
         )
-      @highlight(content)
-
-
-    highlight: (el) ->
-      el.html(el.html().replace(/&lt;mark&gt;/g, "<mark>").replace(/&lt;\/mark&gt;/g, "</mark>"))
-
-    renderThreadListItem: (thread) =>
-      view = new ThreadListItemView(model: thread)
-      view.on "thread:selected", @threadSelected
-      view.on "thread:removed", @threadRemoved
-      view.render()
-      @$(".post-list").append(view.el)
+      content
 
     threadSelected: (e) =>
       # Use .attr('data-id') rather than .data('id') because .data does type
       # coercion. Usually, this is fine, but when Mongo gives an object id with
       # no letters, it casts it to a Number.
 
-      thread_id = $(e.target).closest("a").attr("data-id")
+      thread_id = $(e.target).closest(".forum-nav-thread").attr("data-id")
       @setActiveThread(thread_id)
       @trigger("thread:selected", thread_id)  # This triggers a callback in the DiscussionRouter which calls the line above...
       false
@@ -243,8 +227,8 @@ if Backbone?
       @trigger("thread:removed", thread_id)
 
     setActiveThread: (thread_id) ->
-      @$(".post-list a[data-id!='#{thread_id}']").removeClass("active")
-      @$(".post-list a[data-id='#{thread_id}']").addClass("active")
+      @$(".forum-nav-thread[data-id!='#{thread_id}'] .forum-nav-thread-link").removeClass("is-active")
+      @$(".forum-nav-thread[data-id='#{thread_id}'] .forum-nav-thread-link").addClass("is-active")
 
     showSearch: ->
       @$(".browse").removeClass('is-dropped')
@@ -257,7 +241,7 @@ if Backbone?
     goHome: ->
       @template = _.template($("#discussion-home").html())
       $(".discussion-column").html(@template)
-      $(".post-list a").removeClass("active")
+      $(".forum-nav-thread-list a").removeClass("is-active")
       $("input.email-setting").bind "click", @updateEmailNotifications
       url = DiscussionUtil.urlFor("notifications_status",window.user.get("id"))
       DiscussionUtil.safeAjax
@@ -448,7 +432,7 @@ if Backbone?
         dataType: 'json'
         $loading: $
         loadingCallback: =>
-          @$(".post-list").html('<li class="loading"><div class="loading-animation"><span class="sr">' + gettext('Loading thread list') + '</span></div></li>')
+          @$(".forum-nav-thread-list").html("<li class='forum-nav-load-more'>" + @getLoadingContent(gettext("Loading thread list")) + "</li>")
         loadedCallback: =>
           if callback
             callback.apply @, [value]
diff --git a/lms/static/images/comment-icon-bottoms.png b/lms/static/images/comment-icon-bottoms.png
deleted file mode 100644
index e72127f6cf9fe1a36a19c401ab7b7850aee825ec..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 960
zcmaJ=O^ee&7>-s&3wu!!^)zM$6>Pq`Nt4jH)TXu3O)1@iy$G8o(>8RI$xfy=ErL)_
zdiL(Yv;G0W^(1)qCgR=0;?<**ZqxN(4M}F^<$0d>b6&QZ4>t1G^9;jmSPipH*R%A?
zpFc<c&$QP9U9OQ@m+YcGnK&3S6%X|wumWcQ+tBf*2VY>BVRAS9PM37;9o<C%=cE`e
z2_nj7nDTZKIqnD&(1Qa%G}vDs4q4!P2K!jH1v{$3q2HKcxI1fh+}X(0Ja+pYC?`4<
z2q1Al66}Yuo*3*xSEu{b%(GwtAtQr54ytRnKowyKWUg3n1yKZw!iih5qKJ2aB#06(
z&{rvlTe__1QVA>{mU_cpUvHcBr7wCi*dZa2&hwMWgqsvOga^E+X<DiwNd<~1#M6*C
zNg<3kGX)dIF7_khqY$KuP7jTV!O}>NQwXA!Y#1-gL<`0zPQ;6xkfxLYZTtVwAXuSe
z(uODT{!=*aOe4s*VT{JurH$)vrmiBrilIXg?jW?ERk1Zh1jR!Xf$FXTZrhIQhpFMt
zf??ab6~@E~U1*sGOEoy(_w<S?oAtV^)ihNS#hR#^CB;;gl3bLEYF*Sau8G`n07H^-
zy%TO_EjJy8Afld4i2bL~t78;^Mbf&zK9<s2y(QOMAB(z{%hO=^w6%Y=Iy2GvNw=%P
zrH9q%!;sE9rh|>Xe?|0CNS0aYB;R^F-GifiF84yoUEDj}y9GYJ;(q6!%r88A+YoO2
koIetN96o=;T{(5;D)af><xfYK)LMF{tXk82e}8ZO2bKXP^8f$<

diff --git a/lms/static/sass/application-extend2.scss.mako b/lms/static/sass/application-extend2.scss.mako
index 7c78a2993e..1bce4f4e77 100644
--- a/lms/static/sass/application-extend2.scss.mako
+++ b/lms/static/sass/application-extend2.scss.mako
@@ -48,8 +48,12 @@
 @import 'views/shoppingcart';
 
 // applications
-@import 'discussion/discussion';
-@import 'discussion/discussion-developer';
+@import "discussion/utilities/variables";
+@import 'discussion/discussion'; // Process old file after definitions but before everything else
+@import "discussion/elements/navigation";
+@import 'discussion/utilities/developer';
+@import 'discussion/utilities/shame';
+
 @import 'news';
 
 // temp - shame and developer
diff --git a/lms/static/sass/discussion/_discussion.scss b/lms/static/sass/discussion/_discussion.scss
index c63d30e921..d401df9a5f 100644
--- a/lms/static/sass/discussion/_discussion.scss
+++ b/lms/static/sass/discussion/_discussion.scss
@@ -953,205 +953,6 @@ body.discussion {
     }
   }
 
-  .post-list-wrapper {
-    overflow-y: scroll;
-    overflow-x: hidden;
-    //border-right: 1px solid transparent;
-  }
-
-  .post-list {
-    background-color: #ddd;
-
-    .loading {
-      padding: ($baseline*.75) 0;
-      background: $gray-l6;
-
-      .loading-animation {
-        background-image: url(../images/spinner-on-grey.gif);
-      }
-    }
-
-    .more-pages a {
-      background: #eee;
-      font-size: 12px;
-      line-height: 33px;
-      text-align: center;
-
-      &:hover, &:focus {
-        background-image: none;
-        background-color: #e6e6e6;
-      }
-    }
-
-    a {
-      display: block;
-      position: relative;
-      float: left;
-      clear: both;
-      width: 100%;
-      padding: 0 ($baseline/2) 0 18px;
-      margin-bottom: 1px;
-      margin-right: -1px;
-      @include linear-gradient(top, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0));
-      background-color: $white;
-      @include clearfix;
-
-      &:hover, &:focus {
-        @include linear-gradient(top, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0));
-        background-color: #eee;
-      }
-
-      &.staff-post.staff-response {
-        .staff-post-icon {
-          top: 5px;
-        }
-
-        .staff-response-icon {
-          top: 18px;
-        }
-      }
-
-      .staff-post-icon,
-      .staff-response-icon {
-        position: absolute;
-        top: 11px;
-        left: 3px;
-        width: 13px;
-        height: 13px;
-        background: url(../images/staff-icons.png) no-repeat;
-      }
-
-      .staff-post-icon {
-        left: 2px;
-        background-position: 0 0;
-      }
-
-      .staff-response-icon {
-        background-position: -13px 0;
-      }
-
-      .title {
-        display: block;
-        float: left;
-        width: 70%;
-        margin: ($baseline/2) 0 ($baseline/2);
-        font-size: 13px;
-        font-weight: 700;
-        line-height: 1.4;
-        color: $dark-gray;
-      }
-
-      &.read {
-        background: #f2f2f2;
-
-        .title {
-          font-weight: 400;
-          color: #737373;
-        }
-      }
-
-      &.resolved:before {
-        content: '';
-        position: absolute;
-        top: 12px;
-        right: 75px;
-        width: 9px;
-        height: 8px;
-        background: url(../images/sidebar-resolved-icons.png) no-repeat;
-      }
-
-      &.followed:after {
-        content: '';
-        position: absolute;
-        top: 0;
-        right: 0;
-        width: 12px;
-        height: 12px;
-        background: url(../images/following-flag.png) no-repeat;
-      }
-
-      &.active {
-        @include linear-gradient(top, #96e0fd, #61c7fc);
-        border-color: #4697c1;
-        box-shadow: 0 1px 0 #4697c1, 0 -1px 0 #4697c1;
-
-        .title {
-          color: #333;
-        }
-
-        .staff-post-icon {
-          background-position: 0 -13px;
-        }
-
-        .staff-response-icon {
-          background-position: -13px -13px;
-        }
-
-        .comments-count {
-          @include linear-gradient(top, #3994c7, #4da7d3);
-          color: $white;
-
-          &:after {
-            background-position: 0 0;
-          }
-        }
-
-        &.followed:after {
-          background-position: 0 -12px;
-        }
-
-        &.resolved:before {
-          background-position: 0 -8px;
-        }
-      }
-    }
-
-    .votes-count,
-    .comments-count {
-      display: block;
-      float: right;
-      margin-top: 8px;
-      border-radius: 2px;
-      width: 36px;
-      height: 20px;
-      color: #767676;
-      text-align: center;
-      font-size: 11px;
-      line-height: 20px;
-    }
-
-    .comments-count {
-      @include linear-gradient(top, #d4d4d4, #dfdfdf);
-      position: relative;
-      margin-left: ($baseline/4);
-      margin-right:($baseline/4);
-      width: 28px;
-      font-weight: 700;
-
-      &:after {
-        content: '';
-        display: block;
-        position: absolute;
-        top: 20px;
-        right: 3px;
-        width: 5px;
-        height: 5px;
-        background: url(../images/comment-icon-bottoms.png) no-repeat;
-        background-position: 0 -5px;
-      }
-
-      &.unread {
-        @include linear-gradient(top, #84d7fe, #60a8d6);
-        color: #333;
-
-        &:after {
-          color: #99e0fe;
-          background-position: 0 0px;
-        }
-      }
-    }
-  }
-
   .bottom-post-status {
     padding: 30px;
     font-size: 20px;
diff --git a/lms/static/sass/discussion/elements/_navigation.scss b/lms/static/sass/discussion/elements/_navigation.scss
new file mode 100644
index 0000000000..b8ac14061e
--- /dev/null
+++ b/lms/static/sass/discussion/elements/_navigation.scss
@@ -0,0 +1,112 @@
+// -----------
+// Thread list
+// -----------
+.forum-nav-thread-list {
+  overflow-y: scroll;
+}
+
+.forum-nav-thread {
+  border-bottom: 1px solid $gray-l3;
+}
+
+.forum-nav-thread-link {
+  @include clearfix();
+}
+
+%forum-nav-thread-wrapper {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.forum-nav-thread-wrapper-1 {
+  @extend %forum-nav-thread-wrapper;
+  width: 70%;
+}
+
+.forum-nav-thread-wrapper-2 {
+  @extend %forum-nav-thread-wrapper;
+  width: 30%;
+  text-align: right;
+}
+
+.forum-nav-thread-title {
+  @extend %t-title7;
+  display: block;
+}
+
+%forum-nav-thread-wrapper-2-content {
+  @include font-size(11);
+  display: inline-block;
+  margin-right: ($baseline/4);
+  text-align: center;
+  color: $black;
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+.forum-nav-thread-endorsed {
+  @extend %forum-nav-thread-wrapper-2-content;
+  color: $green-d1;
+}
+
+.forum-nav-thread-votes-count {
+  @extend %forum-nav-thread-wrapper-2-content;
+}
+
+.forum-nav-thread-comments-count {
+  @extend %forum-nav-thread-wrapper-2-content;
+  @extend %t-weight4;
+  position: relative;
+  margin-left: ($baseline/4);
+  margin-bottom: ($baseline/4); // Because tail is position: absolute
+  border-radius: 2px;
+  padding: ($baseline/10) ($baseline/5);
+  min-width: 2em; // Fit most comment counts but allow expansion if necessary
+  background-color: $gray-l3;
+
+  // Speech bubble tail
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: (-$baseline/4);
+    right: ($baseline/4);
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 ($baseline/4) ($baseline/4) 0;
+    border-color: transparent $gray-l3 transparent transparent;
+  }
+
+  &.is-unread {
+    background-color: $white;
+
+    &:after {
+      border-right-color: $white
+    }
+  }
+}
+
+.forum-nav-thread.is-unread .forum-nav-thread-comments-count {
+  background-color: $blue;
+  color: $white;
+
+  &:after {
+    border-right-color: $blue;
+  }
+}
+
+%forum-nav-load-more-content {
+  text-align: center;
+}
+
+.forum-nav-load-more-link {
+  @extend %forum-nav-load-more-content;
+  color: $link-color;
+}
+
+.forum-nav-loading {
+  @extend %forum-nav-load-more-content;
+}
diff --git a/lms/static/sass/discussion/_discussion-developer.scss b/lms/static/sass/discussion/utilities/_developer.scss
similarity index 100%
rename from lms/static/sass/discussion/_discussion-developer.scss
rename to lms/static/sass/discussion/utilities/_developer.scss
diff --git a/lms/static/sass/discussion/utilities/_shame.scss b/lms/static/sass/discussion/utilities/_shame.scss
new file mode 100644
index 0000000000..eaa2a6edea
--- /dev/null
+++ b/lms/static/sass/discussion/utilities/_shame.scss
@@ -0,0 +1,36 @@
+// The sidebar class does a lot of things that we don't want in the thread list;
+// the following rules contain styling that is necessary and would otherwise
+// reside in elements/_navigation.scss if the sidebar styling did not make the
+// !important directive necessary.
+
+.forum-nav-thread {
+  background-color: $gray-l5 !important;
+
+  &.is-unread {
+    background-color: $white !important;
+  }
+}
+
+.forum-nav-thread-link {
+  padding: ($baseline/4) ($baseline/2) !important;
+
+  &.is-active, &:hover, &:focus {
+    background-color: $forum-color-active-thread !important;
+  }
+}
+
+.forum-nav-load-more {
+  border-bottom: 1px solid $gray-l3 !important;
+  background-color: $gray-l5 !important;
+}
+
+.forum-nav-load-more-link {
+  &:hover, &:focus {
+    color: $link-color !important;
+    background-color: $forum-color-active-thread !important;
+  }
+}
+
+.forum-nav-load-more-link, .forum-nav-loading {
+  padding: $baseline 0 !important;
+}
diff --git a/lms/static/sass/discussion/utilities/_variables.scss b/lms/static/sass/discussion/utilities/_variables.scss
new file mode 100644
index 0000000000..bfc9bf8677
--- /dev/null
+++ b/lms/static/sass/discussion/utilities/_variables.scss
@@ -0,0 +1 @@
+$forum-color-active-thread: tint($blue, 85%);
diff --git a/lms/templates/discussion/_thread_list_template.html b/lms/templates/discussion/_thread_list_template.html
index 90255a1db8..0ea9964642 100644
--- a/lms/templates/discussion/_thread_list_template.html
+++ b/lms/templates/discussion/_thread_list_template.html
@@ -45,8 +45,5 @@
         %endif
     </div>
     <div class="search-alerts"></div>
-    <div class="post-list-wrapper">
-        <ul class="post-list">
-        </ul>
-    </div>
+    <ul class="forum-nav-thread-list"></ul>
 </script>
diff --git a/lms/templates/discussion/_underscore_templates.html b/lms/templates/discussion/_underscore_templates.html
index a1c3585bee..185a9ec640 100644
--- a/lms/templates/discussion/_underscore_templates.html
+++ b/lms/templates/discussion/_underscore_templates.html
@@ -205,9 +205,29 @@
 </script>
 
 <script aria-hidden="true" type="text/template" id="thread-list-item-template">
-    <a href="${'<%- id %>'}" data-id="${'<%- id %>'}">
-        <span class="title">${"<%- title %>"}</span>
+  <li data-id="${'<%- id %>'}" class="forum-nav-thread${'<% if (typeof(read) != "undefined" && !read) { %> is-unread<% } %>'}">
+    <a href="#" class="forum-nav-thread-link">
+      <div class="forum-nav-thread-wrapper-1">
+        <span class="forum-nav-thread-title">${"<%- title %>"}</span>
+      </div><div class="forum-nav-thread-wrapper-2">
+        ${"<% if (endorsed) { %>"}
+          ## Translators: This is a label for a forum thread with a response that was endorsed by the course staff
+          <span class="forum-nav-thread-endorsed"><i class="icon icon-ok"></i><span class="sr">${_("Endorsed response")}</span></span>
+        ${"<% } %>"}
         <%
+        js_block = u"""
+            interpolate(
+                '{}',
+                {{'span_sr_open': '<span class=\"sr\">', 'span_close': '</span>', 'votes_up_count': votes['up_count']}},
+                true
+                )
+        """.format(
+                ## Translators: 'votes_up_count' is a numerical placeholder for a specific discussion thread; 'span_*' placeholders refer to HTML markup.  Please translate the word 'votes'.
+                escapejs( _('%(votes_up_count)s%(span_sr_open)s votes %(span_close)s'))
+            )
+        %>
+        <span class="forum-nav-thread-votes-count">+${'<%='}${js_block}${'%>'}</span>
+        <% 
         js_block =  u"""
         var fmt;
         var data = {{
@@ -229,24 +249,14 @@
                 markup_none_unread=escapejs(_('%(comments_count)s %(span_sr_open)scomments %(span_close)s'))
             )
         %>
-        <span class="comments-count">
+        <span class="forum-nav-thread-comments-count ${'<% if (unread_comments_count > 0) { %>is-unread<% } %>'}">
             ${'<%'}${js_block}${'%>'}
         </span>
-        <%
-        js_block = u"""
-            interpolate(
-                '{}',
-                {{'span_sr_open': '<span class=\"sr\">', 'span_close': '</span>', 'votes_up_count': votes['up_count']}},
-                true
-                )
-        """.format(
-                ## Translators: 'votes_up_count' is a numerical placeholder for a specific discussion thread; 'span_*' placeholders refer to HTML markup.  Please translate the word 'votes'.
-                escapejs( _('%(votes_up_count)s%(span_sr_open)s votes %(span_close)s'))
-            )
-        %>
-        <span class="votes-count">+${'<%='}${js_block}${'%>'}</span>
+      </div>
     </a>
+  </li>
 </script>
+
 <script aria-hidden="true" type="text/template" id="discussion-home">
   <div class="discussion-article blank-slate">
     <section class="home-header">