Refactoring logic for top level comments

tildes/scss/modules/_comment.scss

@@ -78,12 +78,12 @@
   margin-left: 0.4rem;
 }
 
-.comment-replies {
+.top-level-comment, .comment-replies {
   margin-left: 0.4rem;
   padding-top: 0.4rem;
   list-style: none;
 
-  .comment-reply {
+  li {
     margin: 0;
     padding: 0;
     max-width: none;

tildes/static/js/behaviors/comment-reply-button.js

@@ -10,7 +10,7 @@ $.onmount('[data-js-comment-reply-button]', function() {
 
         var $comment = $(this).parents('.comment').first();
 
-        // get the replies div, or create one if it doesn't already exist
+        // get the replies list, or create one if it doesn't already exist
         var $replies = $comment.children('.comment-replies');
         if (!$replies.length) {
             var repliesDiv = document.createElement('ol');

tildes/tildes/templates/intercooler/single_comment.jinja2

@@ -3,5 +3,4 @@
 
 {% from 'macros/comments.jinja2' import render_single_comment with context %}
 
-{% set is_top_level = True if topic is defined else False %}
-{{ render_single_comment(comment, is_top_level) }}
+{{ render_single_comment(comment) }}

tildes/tildes/templates/macros/comments.jinja2

@@ -4,48 +4,37 @@
 {% from 'datetime.jinja2' import time_ago_responsive %}
 {% from 'links.jinja2' import username_linked %}
 
-{% macro render_single_comment(comment, is_new_topic=False) %}
-  {{ render_comment_tree([comment], is_individual_comment=True, is_new_topic=is_new_topic) }}
+{% macro render_single_comment(comment) %}
+  {{ render_comment_tree([comment], is_individual_comment=True) }}
 {% endmacro %}
 
-{% macro render_comment_tree(comments, mark_newer_than=None, is_individual_comment=False, is_new_topic=False) %}
+{% macro render_comment_tree(comments, mark_newer_than=None, is_individual_comment=False) %}
   {% if comments is defined and comments|length > 0 %}
-    {# if this is a list of comments wrap in an ordered list #}
-    {% if is_new_topic or not is_individual_comment %}
-        <ol class="comment-replies">
-          {{ render_comments(comments, mark_newer_than, is_individual_comment) }}
-        </ol>
-    {% else %}
-        {{ render_comments(comments, mark_newer_than, is_individual_comment) }}
-    {% endif %}
-  {% endif %}
-{% endmacro %}
-
-{% macro render_comments(comments, mark_newer_than=None, is_individual_comment=False) %}
-  {% for comment in comments recursive %}
-    <li class="comment-reply"><article id="comment-{{ comment.comment_id36 }}"
-      class="{{ comment_classes(comment, mark_newer_than)|trim }}"
-      data-comment-id36="{{ comment.comment_id36 }}"
-
-      {# only add depth attr if we're rendering multiple comments at once #}
-      {% if not is_individual_comment %}
-        data-comment-depth="{{ loop.depth0 }}"
-      {% endif %}
+    {% for comment in comments recursive %}
+      <li><article id="comment-{{ comment.comment_id36 }}"
+        class="{{ comment_classes(comment, mark_newer_than)|trim }}"
+        data-comment-id36="{{ comment.comment_id36 }}"
+
+        {# only add depth attr if we're rendering multiple comments at once #}
+        {% if not is_individual_comment %}
+          data-comment-depth="{{ loop.depth0 }}"
+        {% endif %}
 
-      {% if request.has_permission("label", comment) %}
-        data-comment-user-labels="{{ comment.labels_by_user(request.user)|join(' ') }}"
-      {% endif %}
-    >
-      {{ render_comment_contents(comment, is_individual_comment) }}
+        {% if request.has_permission("label", comment) %}
+          data-comment-user-labels="{{ comment.labels_by_user(request.user)|join(' ') }}"
+        {% endif %}
+      >
+        {{ render_comment_contents(comment, is_individual_comment) }}
 
-      {% if comment.replies is defined and comment.replies %}
-        <ol class="comment-replies">
-          {# Recursively display reply comments #}
-          {{ loop(comment.replies) }}
-        </ol>
-      {% endif %}
-    </article></li>
-  {% endfor %}
+        {% if comment.replies is defined and comment.replies %}
+          <ol class="comment-replies">
+            {# Recursively display reply comments #}
+            {{ loop(comment.replies) }}
+          </ol>
+        {% endif %}
+      </article></li>
+    {% endfor %}
+  {% endif %}
 {% endmacro %}
 
 {% macro render_comment_contents(comment, is_individual_comment=False) %}

tildes/tildes/templates/topic.jinja2

@@ -173,8 +173,8 @@
   <div class="toast toast-warning">This topic is locked. New comments can not be posted.</div>
 {% endif %}
 
-{% if comments %}
-  <section class="topic-comments">
+<section class="topic-comments">
+  {% if comments %}
     <header class="topic-comments-header">
       <h2>
       {% trans num_comments=topic.num_comments %}
@@ -208,18 +208,22 @@
       </form>
     </header>
 
-    {{ render_comment_tree(comments, mark_newer_than=topic.last_visit_time) }}
-  </section>
-{% endif %}
+    <ol class="comments-top-level">
+      {{ render_comment_tree(comments, mark_newer_than=topic.last_visit_time) }}
+    </ol>
+  {% else %}
+    <ol class="comments-top-level"></ol>
+  {% endif %}
+</section>
 
 {% if request.has_permission('comment', topic) %}
-  <section class="post-top-level-comment">
+  <section data-js-remove-on-success>
     <h2>Post a comment</h2>
     <form
       method="post"
       data-ic-post-to="{{ request.route_url('ic_topic_comments', topic_id36=topic.topic_id36) }}"
-      data-ic-replace-target="true"
-      data-ic-target=".post-top-level-comment"
+      data-ic-swap-style="append"
+      data-ic-target=".comments-top-level"
       autocomplete="off"
       data-js-prevent-double-submit
       data-js-confirm-leave-page-unsaved