diff --git a/tildes/scss/modules/_comment.scss b/tildes/scss/modules/_comment.scss index 0da69c8..604d863 100644 --- a/tildes/scss/modules/_comment.scss +++ b/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 { diff --git a/tildes/static/js/behaviors/comment-reply-button.js b/tildes/static/js/behaviors/comment-reply-button.js index d3e4905..28d1630 100644 --- a/tildes/static/js/behaviors/comment-reply-button.js +++ b/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'); diff --git a/tildes/tildes/templates/macros/comments.jinja2 b/tildes/tildes/templates/macros/comments.jinja2 index 90290f7..8de5309 100644 --- a/tildes/tildes/templates/macros/comments.jinja2 +++ b/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 %}
  • {% endif %}
    +
      {# Recursively display reply comments #} {{ loop(comment.replies) }} - +
    {% endif %}
    + {% if not is_individual_comment %}
  • {% endif %} {% endfor %} {% endmacro %} diff --git a/tildes/tildes/templates/topic.jinja2 b/tildes/tildes/templates/topic.jinja2 index f5816e9..6678ecc 100644 --- a/tildes/tildes/templates/topic.jinja2 +++ b/tildes/tildes/templates/topic.jinja2 @@ -174,8 +174,8 @@
    This topic is locked. New comments can not be posted.
    {% endif %} -{% if comments %} -
    +
    + {% if comments %}

    {% trans num_comments=topic.num_comments %} @@ -208,18 +208,21 @@

    + {% endif %} +
      {{ render_comment_tree(comments, mark_newer_than=topic.last_visit_time) }} -
    -{% endif %} + +
    {% if request.has_permission('comment', topic) %} -
    +

    Post a comment