From cc1d2e7590c6ce0e36abe8455ecb349e32dcb273 Mon Sep 17 00:00:00 2001
From: Jared McAteer <jared.mcateer@gmail.com>
Date: Sat, 6 Oct 2018 19:25:00 -0600
Subject: [PATCH] nested comments and replies in unstyled ordered list

---
 tildes/scss/modules/_comment.scss             |  7 +++++
 .../js/behaviors/comment-reply-button.js      |  2 +-
 .../intercooler/single_comment.jinja2         |  3 ++-
 .../tildes/templates/macros/comments.jinja2   | 27 ++++++++++++++-----
 4 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/tildes/scss/modules/_comment.scss b/tildes/scss/modules/_comment.scss
index 0da69c8..cd20c2a 100644
--- a/tildes/scss/modules/_comment.scss
+++ b/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;
diff --git a/tildes/static/js/behaviors/comment-reply-button.js b/tildes/static/js/behaviors/comment-reply-button.js
index 016a0b9..cd9d7d1 100644
--- a/tildes/static/js/behaviors/comment-reply-button.js
+++ b/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);
diff --git a/tildes/tildes/templates/intercooler/single_comment.jinja2 b/tildes/tildes/templates/intercooler/single_comment.jinja2
index becc3c1..675f00f 100644
--- a/tildes/tildes/templates/intercooler/single_comment.jinja2
+++ b/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) }}
diff --git a/tildes/tildes/templates/macros/comments.jinja2 b/tildes/tildes/templates/macros/comments.jinja2
index 90290f7..bdcd244 100644
--- a/tildes/tildes/templates/macros/comments.jinja2
+++ b/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 %}