Put comments and replies in unstyled ordered lists

tildes/scss/modules/_comment.scss

@@ -78,15 +78,26 @@
   margin-left: 0.4rem;
 }
 
-.comment-replies {
-  margin-left: 0.4rem;
+.comment-tree {
+  margin: 0;
   padding-top: 0.4rem;
+  list-style-type: none;
+}
+
+.comment-tree-replies {
+  margin-left: 0.4rem;
 
   @media (min-width: $size-md) {
     margin-left: 1rem;
   }
 }
 
+.comment-tree-item {
+  margin: 0;
+  padding: 0;
+  max-width: none;
+}
+
 .comment-labels {
   margin: 0 0 0 0.4rem;
   list-style-type: none;
@@ -150,7 +161,7 @@
   .comment-labels,
   .comment-nav-link,
   .comment-posted-time,
-  .comment-replies,
+  .comment-tree-replies,
   .comment-text,
   .comment-votes,
   .post-buttons {

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

@@ -10,13 +10,13 @@ $.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
-        var $replies = $comment.children('.comment-replies');
+        // get the replies list, or create one if it doesn't already exist
+        var $replies = $comment.children('.comment-tree-replies');
         if (!$replies.length) {
-            var repliesDiv = document.createElement('div');
-            repliesDiv.setAttribute('class', 'comment-replies');
-            $comment.append(repliesDiv);
-            $replies = $(repliesDiv);
+            var repliesList = document.createElement('ol');
+            repliesList.setAttribute('class', 'comment-tree comment-tree-replies');
+            $comment.append(repliesList);
+            $replies = $(repliesList);
         }
 
         var $parentComment = $(this).parents('article.comment:first');

tildes/tildes/templates/macros/comments.jinja2

@@ -10,6 +10,7 @@
 
 {% macro render_comment_tree(comments, mark_newer_than=None, is_individual_comment=False) %}
   {% for comment in comments recursive %}
+    {% if not is_individual_comment %}<li class="comment-tree-item">{% endif %}
     <article id="comment-{{ comment.comment_id36 }}"
       class="{{ comment_classes(comment, mark_newer_than)|trim }}"
       data-comment-id36="{{ comment.comment_id36 }}"
@@ -26,12 +27,13 @@
       {{ render_comment_contents(comment, is_individual_comment) }}
 
       {% if comment.replies is defined and comment.replies %}
-        <div class="comment-replies">
+        <ol class="comment-tree comment-tree-replies">
           {# Recursively display reply comments #}
           {{ loop(comment.replies) }}
-        </div>
+        </ol>
       {% endif %}
     </article>
+    {% if not is_individual_comment %}</li>{% endif %}
   {% endfor %}
 {% endmacro %}
 

tildes/tildes/templates/topic.jinja2

@@ -174,8 +174,8 @@
   <div class="toast toast-warning">This topic is locked. New comments can not be posted.</div>
 {% endif %}
 
-{% if comments %}
 <section class="topic-comments">
+  {% if comments %}
     <header class="topic-comments-header">
       <h2>
       {% trans num_comments=topic.num_comments %}
@@ -208,18 +208,21 @@
         </div>
       </form>
     </header>
+  {% endif %}
 
+  <ol class="comment-tree">
     {{ render_comment_tree(comments, mark_newer_than=topic.last_visit_time) }}
+  </ol>
 </section>
-{% endif %}
 
 {% if request.has_permission('comment', topic) %}
-  <section>
+  <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-swap-style="append"
+      data-ic-target=".comment-tree"
       autocomplete="off"
       data-js-prevent-double-submit
       data-js-confirm-leave-page-unsaved