chelsea/balanceboard
0
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix comment tree display (Issue #10)

Browse Source 
- Add build_comment_tree() to organize comments hierarchically
- Create recursive Jinja macro to render nested comments
- Add visual styling with left border and indentation
- Comments now display as threaded tree structure

Fixes #10
This commit is contained in:
chelsea
2025-10-11 23:36:27 -05:00
parent b84ebce8f1
commit 63fa44ed2c
2 changed files with 79 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
templates/post_detail.html
View File

@@ -135,25 +135,37 @@
<!-- Comments Section -->
<section class="comments-section">
<h2>Comments ({{ comments|length }})</h2>
{% macro render_comment(comment, depth=0) %}
<div class="comment" style="margin-left: {{ depth * 24 }}px;">
<div class="comment-header">
<span class="comment-author">{{ comment.author }}</span>
<span class="comment-separator">•</span>
<span class="comment-time">{{ moment(comment.timestamp).fromNow() if moment else 'Recently' }}</span>
</div>
<div class="comment-content">
{{ comment.content | safe | nl2br }}
</div>
<div class="comment-footer">
<div class="comment-score">
<span>▲ {{ comment.score or 0 }}</span>
</div>
</div>
{% if comment.replies %}
<div class="comment-replies">
{% for reply in comment.replies %}
{{ render_comment(reply, depth + 1) }}
{% endfor %}
</div>
{% endif %}
</div>
{% endmacro %}
{% if comments %}
<div class="comments-list">
{% for comment in comments %}
<div class="comment">
<div class="comment-header">
<span class="comment-author">{{ comment.author }}</span>
<span class="comment-separator">•</span>
<span class="comment-time">{{ moment(comment.timestamp).fromNow() if moment else 'Recently' }}</span>
</div>
<div class="comment-content">
{{ comment.content | safe | nl2br }}
</div>
<div class="comment-footer">
<div class="comment-score">
<span>▲ {{ comment.score or 0 }}</span>
</div>
</div>
</div>
{{ render_comment(comment) }}
{% endfor %}
</div>
{% else %}
@@ -554,12 +566,24 @@
.comment {
padding: 20px 0;
border-bottom: 1px solid #f1f5f9;
position: relative;
}
.comment:last-child {
border-bottom: none;
}
/* Threaded comment styling */
.comment[style*="margin-left"] {
padding-left: 16px;
border-left: 2px solid #e2e8f0;
border-bottom: none;
}
.comment-replies {
margin-top: 8px;
}
.comment-header {
display: flex;
align-items: center;