2f9babe18e
- move reply controls into normal left-aligned flow - restore stronger primary/reply button treatments - render Turnstile when reply details panels are opened - rebuild Tailwind CSS
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 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 mt-3">
|
|
<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>
|