nested comments and replies in unstyled ordered list

tildes/scss/modules/_comment.scss

@@ -81,6 +81,13 @@
 .comment-replies {
   margin-left: 0.4rem;
   padding-top: 0.4rem;
+  list-style: none;
+
+  .comment-reply {
+    margin: 0;
+    padding: 0;
+    max-width: none;
+  }
 
   @media (min-width: $size-md) {
     margin-left: 1rem;

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

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

tildes/tildes/templates/intercooler/single_comment.jinja2

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

tildes/tildes/templates/macros/comments.jinja2

@@ -4,13 +4,26 @@
 {% from 'datetime.jinja2' import time_ago_responsive %}
 {% from 'links.jinja2' import username_linked %}
 
-{% macro render_single_comment(comment) %}
-  {{ render_comment_tree([comment], is_individual_comment=True) }}
+{% macro render_single_comment(comment, is_new_topic=False) %}
+  {{ render_comment_tree([comment], is_individual_comment=True, is_new_topic=is_new_topic) }}
 {% endmacro %}
 
-{% macro render_comment_tree(comments, mark_newer_than=None, is_individual_comment=False) %}
+{% macro render_comment_tree(comments, mark_newer_than=None, is_individual_comment=False, is_new_topic=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 %}
-    <article id="comment-{{ comment.comment_id36 }}"
+    <li class="comment-reply"><article id="comment-{{ comment.comment_id36 }}"
       class="{{ comment_classes(comment, mark_newer_than)|trim }}"
       data-comment-id36="{{ comment.comment_id36 }}"
 
@@ -26,12 +39,12 @@
       {{ render_comment_contents(comment, is_individual_comment) }}
 
       {% if comment.replies is defined and comment.replies %}
-        <div class="comment-replies">
+        <ol class="comment-replies">
           {# Recursively display reply comments #}
           {{ loop(comment.replies) }}
-        </div>
+        </ol>
       {% endif %}
-    </article>
+    </article></li>
   {% endfor %}
 {% endmacro %}