a001ac1de6
- standardize comment and reply UI layout - target replies with stable OOB container IDs - remove stale empty-state on approved HTMX comments - initialize Turnstile widgets after HTMX swaps - add regression tests for empty-state, OOB targets, and reply form rerender Refs #48
39 lines
2.0 KiB
HTML
39 lines
2.0 KiB
HTML
<div class="group">
|
|
<article
|
|
id="comment-{{ comment.id }}"
|
|
data-comment-item="true"
|
|
class="rounded-lg border border-zinc-200 bg-brand-surfaceLight p-5 shadow-sm transition-colors hover:border-zinc-300 dark:border-zinc-800 dark:bg-brand-surfaceDark dark:hover:border-zinc-700 sm:p-6"
|
|
>
|
|
<header class="mb-3 flex flex-wrap items-center gap-x-3 gap-y-1">
|
|
<span class="font-display text-base font-bold text-zinc-900 dark:text-zinc-100">{{ comment.author_name }}</span>
|
|
<time datetime="{{ comment.created_at|date:'c' }}" class="font-mono text-[11px] uppercase tracking-wider text-zinc-500">
|
|
{{ comment.created_at|date:"M j, Y" }}
|
|
</time>
|
|
</header>
|
|
|
|
<div class="prose prose-sm mt-2 max-w-none leading-relaxed text-zinc-700 dark:prose-invert dark:text-zinc-300">
|
|
{{ comment.body|linebreaks }}
|
|
</div>
|
|
|
|
<div class="mt-5 flex items-center justify-between gap-4 border-t border-zinc-100 pt-4 dark:border-zinc-800">
|
|
{% include "comments/_reactions.html" with comment=comment counts=comment.reaction_counts user_reacted=comment.user_reacted %}
|
|
|
|
<details class="group/details">
|
|
<summary class="list-none cursor-pointer font-mono text-xs font-bold uppercase tracking-wider text-zinc-500 transition-colors hover:text-brand-cyan [&::-webkit-details-marker]:hidden">
|
|
<span class="group-open/details:hidden">Reply</span>
|
|
<span class="hidden group-open/details:inline">Cancel reply</span>
|
|
</summary>
|
|
<div class="mt-4 rounded-md border border-zinc-200 bg-white p-4 dark:border-zinc-700 dark:bg-zinc-950">
|
|
{% include "comments/_reply_form.html" with page=page comment=comment %}
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</article>
|
|
|
|
<div id="replies-for-{{ comment.id }}" class="replies-container mt-3 space-y-3 border-l-2 border-zinc-100 pl-4 sm:ml-8 sm:pl-6 dark:border-zinc-800">
|
|
{% for reply in comment.replies.all %}
|
|
{% include "comments/_reply.html" with reply=reply %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|