Merge pull request #1227 from codidact/0valt/1072/move-start-comment-thread-down

Move 'start new comment thread' button under listed threads

Author: Taeir

app/assets/stylesheets/comments.scss

@@ -65,6 +65,17 @@
   font-style: italic;
 }
 
+.post--comments-header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.75rem;
+}
+
+.post--comments-container {
+  margin-bottom: 1rem;
+}
+
 .post--comments-thread.is-inline {
   padding: 0.5rem 0.25rem;
   display: flex;
@@ -139,7 +150,7 @@
 .new-thread-modal {
   box-shadow: 0 3px 5px -2px #eee;
   border: 1px solid #d0d9dd;
-  margin-top: 10px;
+  margin-top: 1rem;
   padding: 0.7em;
   display: none;
 }

app/views/posts/_expanded.html.erb

@@ -462,13 +462,11 @@
           <% public_count = comment_threads.count %>
           <% available_count = current_user&.has_post_privilege?('flag_curate', post) ?
                                  post.comment_threads.count : post.comment_threads.publicly_available.count %>
+          <div class="post--comments-header">
           <h4 class="has-margin-0">
             <%= pluralize(public_count, 'comment thread') %>
           </h4>
           <% if user_signed_in? %>
-            <a class="button is-outlined is-small js-new-thread-link" data-post="<%= post.id %>" role="button">
-              <i class="fas fa-fw fa-plus"></i> Start new comment thread
-            </a>
             <% if CommentThread.post_followed?(post, current_user) %>
               <%= link_to follow_post_comments_path(post_id: post.id), method: :post,
                           class: "button is-muted is-outlined is-small",
@@ -487,6 +485,7 @@
               <% end %>
             <% end %>
           <% end %>
+          </div>
           <div class="post--comments-container" role="list">
             <%= render 'comments/post', comment_threads: comment_threads.first(5) %>
           </div>
@@ -510,6 +509,9 @@
                   <p class="has-color-red-500"><i class="fa fa-lock"></i> Comments have been disabled on this post, but as a moderator you are exempt from that block.</p>
                 <% end %>
               <% end %>
+                <a class="button is-outlined is-small js-new-thread-link" data-post="<%= post.id %>" role="button">
+                  <i class="fas fa-fw fa-plus"></i> Start new comment thread
+                </a>
                 <%= render 'comments/new_thread_modal', post: post %>
             <% end %>
           </div>