Merge pull request #14228 from edx/alisan/response-btn-TNL-6175

Discussion hide Add a Response button response count if zero other responses in an answered question

common/static/common/js/discussion/views/discussion_thread_view.js

@@ -280,6 +280,9 @@
                     responseCountFormat = ngettext(
                         '{numResponses} other response', '{numResponses} other responses', responseTotal
                     );
+                    if (responseTotal === 0) {
+                        this.$el.find('.response-count').hide();
+                    }
                 } else {
                     responseCountFormat = ngettext(
                         '{numResponses} response', '{numResponses} responses', responseTotal
@@ -288,6 +291,7 @@
                 this.$el.find('.response-count').text(
                     edx.StringUtils.interpolate(responseCountFormat, {numResponses: responseTotal}, true)
                 );
+
                 responsePagination = this.$el.find('.response-pagination');
                 responsePagination.empty();
                 if (responseTotal > 0) {
@@ -327,6 +331,8 @@
                         });
                         return responsePagination.append($loadMoreButton);
                     }
+                } else {
+                    this.$el.find('.add-response').hide();
                 }
             };
 
@@ -345,9 +351,9 @@
 
             DiscussionThreadView.prototype.renderAddResponseButton = function() {
                 if (this.model.hasResponses() && this.model.can('can_reply') && !this.model.get('closed')) {
-                    return this.$el.find('div.add-response').show();
+                    return this.$el.find('.add-response').show();
                 } else {
-                    return this.$el.find('div.add-response').hide();
+                    return this.$el.find('.add-response').hide();
                 }
             };
 

common/static/common/templates/discussion/thread-show.underscore

 <div class="discussion-post">
     <header class="post-header">
         <% if (!readOnly) { %>
-            <div class="post-header-actions post-extended-content">
+            <div class="post-header-actions">
                 <%=
                 _.template(
                     $('#forum-actions').html())(

common/static/common/templates/discussion/thread.underscore

@@ -7,16 +7,18 @@
             </div>
         </div>
         <div class="post-extended-content thread-responses-wrapper">
-            <% if (!readOnly) { %>
+            <div class="response-btn-count-wrapper">
+                <% if (!readOnly) { %>
                 <div class="add-response">
                     <button class="btn btn-small add-response-btn">
                         <%- gettext("Add a Response") %>
                     </button>
                 </div>
-            <% } %>
-            <div class="response-count"/>
-            <ol class="responses js-response-list"/>
-            <div class="response-pagination"/>
+                <% } %>
+                <div class="response-count"></div>
+            </div>
+            <ol class="responses js-response-list"></ol>
+            <div class="response-pagination"></div>
             <div class="post-status-closed bottom-post-status" style="display: none">
               <%- gettext("This thread is closed.") %>
             </div>

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

@@ -182,13 +182,14 @@
 
 .response-count {
   @include float(right);
+  @include margin-right($baseline / 2);
   color: $forum-color-response-count;
   font-size: $forum-base-font-size;
 }
 
 .response-pagination {
   visibility: visible;
-  padding: 0 ($baseline/2);
+  margin: ($baseline / 2) 0;
 
   &:empty {
     visibility: hidden;

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

@@ -45,7 +45,8 @@
     font-weight: 600;
 }
 
-.thread-responses-wrapper {
+.thread-responses-wrapper,
+.post-extended-content {
     padding: 0 ($baseline/2);
 }
 
@@ -96,8 +97,8 @@
 
 // +thread - wrapper styling
 .thread-wrapper {
-    .thread-main-wrapper {
-        padding-bottom: $baseline;
+    .response-btn-count-wrapper {
+        margin: $baseline 0;
     }
 }