feat: redesign comments section for better UX/UI #45

Merged
mark merged 4 commits from feature/comments-design-makeover into main 2026-03-04 11:00:56 +00:00
2 changed files with 12 additions and 7 deletions
Showing only changes of commit b2ea693d9d - Show all commits

View File

@@ -132,12 +132,13 @@ def test_htmx_reply_returns_oob_reply_when_approved(client, _article, approved_c
) )
content = resp.content.decode() content = resp.content.decode()
assert resp.status_code == 200 assert resp.status_code == 200
# OOB targets the parent's replies-container # OOB targets the sibling .replies-container of the parent comment article
assert f"#comment-{approved_comment.id}" in content assert f'hx-swap-oob="beforeend:#comment-{approved_comment.id} ~ .replies-container"' in content
assert "hx-swap-oob" in content # Verify content is rendered (not empty due to context mismatch)
# Reply uses compact markup (no nested reply form) assert "Replier" in content
assert "Reply posted!" in content assert "Nice reply" in content
reply = Comment.objects.exclude(pk=approved_comment.pk).get() reply = Comment.objects.exclude(pk=approved_comment.pk).get()
assert f"comment-{reply.id}" in content
assert reply.parent_id == approved_comment.id assert reply.parent_id == approved_comment.id
assert reply.is_approved is True assert reply.is_approved is True

View File

@@ -148,10 +148,14 @@ class CommentCreateView(View):
if comment.is_approved: if comment.is_approved:
ctx = _comment_template_context(comment, article, request) ctx = _comment_template_context(comment, article, request)
if comment.parent_id: if comment.parent_id:
comment_html = render_to_string("comments/_reply.html", ctx, request) # _reply.html expects 'reply' context key
reply_ctx = ctx.copy()
reply_ctx["reply"] = reply_ctx.pop("comment")
comment_html = render_to_string("comments/_reply.html", reply_ctx, request)
# .replies-container is now a sibling of #comment-{id}
oob_html = ( oob_html = (
f'<div hx-swap-oob="beforeend:#comment-{comment.parent_id} ' f'<div hx-swap-oob="beforeend:#comment-{comment.parent_id} '
f'.replies-container">{comment_html}</div>' f'~ .replies-container">{comment_html}</div>'
) )
else: else:
comment_html = render_to_string("comments/_comment.html", ctx, request) comment_html = render_to_string("comments/_comment.html", ctx, request)