c8e01f5201
- Re-applied redesign to new partial templates (_comment.html, _reply.html, etc.) - Preserved HTMX and reactions functionality from v2 update - Improved spacing and typography across all comment components - Verified all E2E tests pass with new structure
47 lines
2.7 KiB
HTML
47 lines
2.7 KiB
HTML
{% load static %}
|
|
<div id="reply-form-container-{{ comment.id }}">
|
|
<h4 class="font-display font-bold text-sm mb-4 uppercase tracking-wider">Reply to {{ comment.author_name }}</h4>
|
|
|
|
{% if reply_success_message %}
|
|
<div class="mb-6 p-4 bg-brand-cyan/10 border border-brand-cyan/20 font-mono text-sm text-brand-cyan animate-in fade-in">
|
|
{{ reply_success_message }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if reply_form_errors %}
|
|
<div aria-label="Comment form errors" class="mb-6 p-4 bg-red-500/10 border border-red-500/20 font-mono text-sm text-red-400 animate-in shake-1">
|
|
<div class="font-bold mb-2 uppercase tracking-widest text-xs">Errors:</div>
|
|
<ul class="list-disc list-inside">
|
|
{% for field, errors in reply_form_errors.items %}
|
|
{% for error in errors %}<li>{{ error }}</li>{% endfor %}
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<form method="post" action="{% url 'comment_post' %}"
|
|
hx-post="{% url 'comment_post' %}" hx-target="#reply-form-container-{{ comment.id }}" hx-swap="outerHTML"
|
|
class="space-y-4">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="article_id" value="{{ page.id }}" />
|
|
<input type="hidden" name="parent_id" value="{{ comment.id }}" />
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<input type="text" name="author_name" required placeholder="Name *"
|
|
class="bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 px-4 py-2 font-mono text-sm focus:outline-none focus:border-brand-pink focus:ring-1 focus:ring-brand-pink transition-all" />
|
|
<input type="email" name="author_email" required placeholder="Email *"
|
|
class="bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 px-4 py-2 font-mono text-sm focus:outline-none focus:border-brand-pink focus:ring-1 focus:ring-brand-pink transition-all" />
|
|
</div>
|
|
<textarea name="body" required placeholder="Your reply..." rows="3"
|
|
class="w-full bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 px-4 py-2 font-mono text-sm focus:outline-none focus:border-brand-pink focus:ring-1 focus:ring-brand-pink transition-all resize-none"></textarea>
|
|
<input type="text" name="honeypot" hidden />
|
|
|
|
{% if turnstile_site_key %}
|
|
<div class="cf-turnstile mb-4" data-sitekey="{{ turnstile_site_key }}" data-theme="auto" data-size="flexible"></div>
|
|
{% endif %}
|
|
|
|
<div class="flex justify-end gap-3">
|
|
<button type="submit" data-testid="post-reply-btn" class="px-6 py-2 bg-brand-pink text-white font-display font-bold text-sm shadow-solid-dark hover:-translate-y-0.5 hover:shadow-solid-dark/80 transition-all active:translate-y-0">Post Reply</button>
|
|
</div>
|
|
</form>
|
|
</div>
|