nohype/main-site
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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
Conversation 2 Commits 4 Files Changed 10 +19 -10
2 changed files with 19 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 380dcb22c3 - Show all commits

28
e2e/test_comments.py
View File

@@ -72,10 +72,10 @@ def test_reply_form_visible_on_approved_comment(page: Page, base_url: str) -> No
"""An approved seeded comment must display a reply form.""" """An approved seeded comment must display a reply form."""
_go_to_article(page, base_url) _go_to_article(page, base_url)
# The seeded approved comment should be visible # The seeded approved comment should be visible (as author name)
expect(page.get_by_text("E2E Approved Commenter")).to_be_visible() expect(page.get_by_text("E2E Approved Commenter", exact=True)).to_be_visible()
# And a Reply button for it # And a Reply toggle for it
expect(page.get_by_role("button", name="Reply")).to_be_visible() expect(page.locator("summary").filter(has_text="Reply")).to_be_visible()
@pytest.mark.e2e @pytest.mark.e2e
@@ -83,12 +83,20 @@ def test_reply_submission_shows_moderation_message(page: Page, base_url: str) ->
"""Submitting a reply to an approved comment should show moderation message.""" """Submitting a reply to an approved comment should show moderation message."""
_go_to_article(page, base_url) _go_to_article(page, base_url)
# The reply form is always visible below the approved seeded comment # Click the Reply toggle (summary element)
reply_form = page.locator("form[action]").filter(has=page.get_by_role("button", name="Reply")).first page.locator("summary").filter(has_text="Reply").first.click()
reply_form.locator('input[name="author_name"]').fill("E2E Replier")
reply_form.locator('input[name="author_email"]').fill("replier@example.com") # The reply form should now be visible
reply_form.locator('textarea[name="body"]').fill("This is a test reply.") post_reply_btn = page.get_by_test_id("post-reply-btn").first
reply_form.get_by_role("button", name="Reply").click() expect(post_reply_btn).to_be_visible()
# Fill the form fields
# Use a locator that finds the container for this reply form (the details element)
reply_container = page.locator("details").filter(has=post_reply_btn).first
reply_container.locator('input[name="author_name"]').fill("E2E Replier")
reply_container.locator('input[name="author_email"]').fill("replier@example.com")
reply_container.locator('textarea[name="body"]').fill("This is a test reply.")
post_reply_btn.click()
# HTMX swaps the reply form container inline # HTMX swaps the reply form container inline
expect(page.get_by_text("awaiting moderation")).to_be_visible(timeout=10_000) expect(page.get_by_text("awaiting moderation")).to_be_visible(timeout=10_000)

1
theme/static_src/tailwind.config.js
View File

@@ -28,6 +28,7 @@ module.exports = {
'neon-pink': '0 0 20px rgba(236, 72, 153, 0.3)', 'neon-pink': '0 0 20px rgba(236, 72, 153, 0.3)',
'solid-dark': '6px 6px 0px 0px #09090b', 'solid-dark': '6px 6px 0px 0px #09090b',
'solid-light': '6px 6px 0px 0px #e4e4e7', 'solid-light': '6px 6px 0px 0px #e4e4e7',
'solid-pink': '6px 6px 0px 0px #ec4899',
}, },
}, },
}, },