Distinguish forum thread types in rendering

Each thread's type is now included in its post details, and question
threads have marked answers shown immediately below the body of the
initial post.

common/static/coffee/src/discussion/views/discussion_thread_view.coffee

@@ -13,6 +13,9 @@ if Backbone?
     $: (selector) ->
       @$el.find(selector)
 
+    isQuestion: ->
+      @model.get("thread_type") == "question"
+
     initialize: (options) ->
       super()
       @mode = options.mode or "inline"  # allowed values are "tab" or "inline"
@@ -21,6 +24,8 @@ if Backbone?
       @createShowView()
       @responses = new Comments()
       @loadedResponses = false
+      if @isQuestion()
+        @markedAnswers = new Comments()
 
     renderTemplate: ->
       @template = _.template($("#thread-template").html())
@@ -36,7 +41,9 @@ if Backbone?
       @$("span.timeago").timeago()
       @makeWmdEditor "reply-body"
       @renderAddResponseButton()
-      @responses.on("add", @renderResponse)
+      @responses.on("add", (response) => @renderResponseToList(response, ".js-response-list"))
+      if @isQuestion()
+        @markedAnswers.on("add", (response) => @renderResponseToList(response, ".js-marked-answer-list"))
       if @mode == "tab"
         # Without a delay, jQuery doesn't add the loading extension defined in
         # utils.coffee before safeAjax is invoked, which results in an error
@@ -93,8 +100,18 @@ if Backbone?
           @responseRequest = null
         success: (data, textStatus, xhr) =>
           Content.loadContentInfos(data['annotated_content_info'])
-          @responses.add(data['content']['children'])
-          @renderResponseCountAndPagination(data['content']['resp_total'])
+          if @isQuestion()
+            @markedAnswers.add(data["content"]["endorsed_responses"])
+          @responses.add(
+            if @isQuestion()
+            then data["content"]["non_endorsed_responses"]
+            else data["content"]["children"]
+          )
+          @renderResponseCountAndPagination(
+            if @isQuestion()
+            then data["content"]["non_endorsed_resp_total"]
+            else data["content"]["resp_total"]
+          )
           @trigger "thread:responses:rendered"
           @loadedResponses = true
         error: (xhr) =>
@@ -115,16 +132,24 @@ if Backbone?
             )
 
     loadInitialResponses: () ->
-      @loadResponses(INITIAL_RESPONSE_PAGE_SIZE, @$el.find(".responses"), true)
+      @loadResponses(INITIAL_RESPONSE_PAGE_SIZE, @$el.find(".js-response-list"), true)
 
     renderResponseCountAndPagination: (responseTotal) =>
+      if @isQuestion() && @markedAnswers.length != 0
+        responseCountFormat = ngettext(
+          "%(numResponses)s other response",
+          "%(numResponses)s other responses",
+          responseTotal
+        )
+      else
+        responseCountFormat = ngettext(
+          "%(numResponses)s response",
+          "%(numResponses)s responses",
+          responseTotal
+        )
       @$el.find(".response-count").html(
         interpolate(
-          ngettext(
-            "%(numResponses)s response",
-            "%(numResponses)s responses",
-            responseTotal
-          ),
+          responseCountFormat,
           {numResponses: responseTotal},
           true
         )
@@ -166,13 +191,13 @@ if Backbone?
           loadMoreButton.click((event) => @loadResponses(responseLimit, loadMoreButton))
           responsePagination.append(loadMoreButton)
 
-    renderResponse: (response) =>
+    renderResponseToList: (response, listSelector) =>
         response.set('thread', @model)
         view = new ThreadResponseView(model: response)
         view.on "comment:add", @addComment
         view.on "comment:endorse", @endorseThread
         view.render()
-        @$el.find(".responses").append(view.el)
+        @$el.find(listSelector).append(view.el)
         view.afterInsert()
 
     renderAddResponseButton: ->
@@ -202,7 +227,7 @@ if Backbone?
       @setWmdContent("reply-body", "")
       comment = new Comment(body: body, created_at: (new Date()).toISOString(), username: window.user.get("username"), votes: { up_count: 0 }, abuse_flaggers:[], endorsed: false, user_id: window.user.get("id"))
       comment.set('thread', @model.get('thread'))
-      @renderResponse(comment)
+      @renderResponseToList(comment, ".js-response-list")
       @model.addComment()
       @renderAddResponseButton()
 

common/test/acceptance/fixtures/discussion.py

@@ -30,6 +30,7 @@ class ContentFactory(factory.Factory):
 
 
 class Thread(ContentFactory):
+    thread_type = "discussion"
     anonymous = False
     anonymous_to_peers = False
     comments_count = 0

lms/static/sass/application-extend2.scss.mako

@@ -54,6 +54,7 @@
 @import "discussion/views/new-post";
 @import "discussion/elements/editor";
 @import "discussion/elements/navigation";
+@import "discussion/views/thread";
 @import 'discussion/utilities/developer';
 @import 'discussion/utilities/shame';
 

lms/static/sass/discussion/_discussion.scss

@@ -473,10 +473,7 @@ body.discussion {
   }
 
   .discussion-post {
-    padding: ($baseline*2) ($baseline*2) $baseline ($baseline*2);
-    box-shadow: 0 1px 3px $shadow;
-    background-color: $white;
-    border-radius: 3px 3px 0 0;
+    padding: ($baseline*2) ($baseline*2) 0 ($baseline*2);
 
     > header .vote-btn {
       position: relative;
@@ -497,6 +494,10 @@ body.discussion {
   }
 
   .responses {
+    &:empty {
+      display: none;
+    }
+
     list-style: none;
     margin-top: $baseline;
     padding: 0px ($baseline*2);
@@ -1236,7 +1237,11 @@ body.discussion {
 }
 
 .discussion-user-threads {
-  @extend .discussion-module
+  @extend .discussion-module;
+
+  .discussion-post {
+    padding-bottom: $baseline !important;
+  }
 }
 
 // post actions - pinning

lms/static/sass/discussion/views/_thread.scss

+.forum-thread-main-wrapper {
+  border-bottom: 1px solid $white; // Prevent collapsing margins
+  border-radius: 3px 3px 0 0;
+  background-color: $white;
+}
+
+body.discussion, .discussion-thread.expanded {
+  .forum-thread-main-wrapper {
+    margin-bottom: $baseline;
+    box-shadow: 0 1px 3px $shadow;
+  }
+}

lms/templates/discussion/_underscore_templates.html

@@ -5,7 +5,12 @@
 <script aria-hidden="true" type="text/template" id="thread-template">
     <article class="discussion-article" data-id="${'<%- id %>'}">
         <div class="thread-wrapper">
-            <div class="thread-content-wrapper"></div>
+            <div class="forum-thread-main-wrapper">
+                <div class="thread-content-wrapper"></div>
+                <div class="post-extended-content">
+                    <ol class="responses js-marked-answer-list"></ol>
+                </div>
+            </div>
             <div class="post-extended-content">
                 <div class="response-count"/>
                 <div class="add-response">
@@ -14,7 +19,7 @@
                         <span class="add-response-btn-text">${_('Add A Response')}</span>
                     </button>
                 </div>
-                <ol class="responses"/>
+                <ol class="responses js-response-list"/>
                 <div class="response-pagination"/>
                 <div class="post-status-closed bottom-post-status" style="display: none">
                   ${_("This thread is closed.")}
@@ -53,7 +58,15 @@
               ${"<% } else { %>"}
               ${_('anonymous') | h}
               ${"<% } %>"}
-              <span class="timeago" title="${'<%- created_at %>'}">${'<%- created_at %>'}</span>
+              ## This part is incredibly gross but necessary to combine i18n in
+              ## mako with logic in underscore.
+              ## Translators: post_type describes the kind of post this is
+              ## (e.g. "question" or "discussion"); time_ago is how much time
+              ## has passed since the post was created (e.g. "4 hours ago")
+              ${"{post_type} posted {time_ago}".format(
+                  post_type="<%- thread_type %>",
+                  time_ago="<span class='timeago' title='<%- created_at %>'><%- created_at %></span>"
+              )}
 
               <span class="post-status-closed top-post-status" style="display: none">
                 ${_("&bull; This thread is closed.")}