mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-22 18:11:09 -05:00
Reorganize moderation dashboard structure:
- Move from /moderation/admin to /moderation to avoid conflicts - Improve template organization with partials - Add HTMX-powered navigation and filtering - Add smooth transitions and loading states - Improve photo submission handling - Add review notes functionality - Add confirmation dialogs
This commit is contained in:
pacnpal
242
templates/moderation/dashboard.html
Normal file
242
templates/moderation/dashboard.html
Normal file
@@ -0,0 +1,242 @@
|
||||
{% extends "base/base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}ThrillWiki Moderation{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
.moderation-nav {
|
||||
@apply bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 shadow-sm sticky top-0 z-10;
|
||||
}
|
||||
|
||||
.moderation-nav-container {
|
||||
@apply container px-4 mx-auto;
|
||||
}
|
||||
|
||||
.moderation-nav ul {
|
||||
@apply flex items-center h-16 space-x-6;
|
||||
}
|
||||
|
||||
.moderation-nav li a {
|
||||
@apply flex items-center px-3 py-2 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200;
|
||||
}
|
||||
|
||||
.moderation-nav li a.active {
|
||||
@apply bg-blue-50 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300;
|
||||
}
|
||||
|
||||
.moderation-nav li a i {
|
||||
@apply mr-2;
|
||||
}
|
||||
|
||||
.moderation-content {
|
||||
@apply container px-4 py-6 mx-auto max-w-6xl;
|
||||
}
|
||||
|
||||
.submission-list {
|
||||
@apply space-y-6;
|
||||
}
|
||||
|
||||
.submission-card {
|
||||
@apply bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200/50 dark:border-gray-700/50 transition-all duration-200;
|
||||
}
|
||||
|
||||
.submission-card:hover {
|
||||
@apply shadow-xl border-gray-300 dark:border-gray-600;
|
||||
}
|
||||
|
||||
.submission-header {
|
||||
@apply flex justify-between items-start;
|
||||
}
|
||||
|
||||
.submission-meta {
|
||||
@apply text-sm text-gray-600 dark:text-gray-400;
|
||||
}
|
||||
|
||||
.submission-changes {
|
||||
@apply mt-4 space-y-2;
|
||||
}
|
||||
|
||||
.change-item {
|
||||
@apply rounded-lg bg-gray-50 dark:bg-gray-700/50 transition-colors duration-200;
|
||||
}
|
||||
|
||||
.change-item:hover {
|
||||
@apply bg-gray-100 dark:bg-gray-700;
|
||||
}
|
||||
|
||||
.change-field {
|
||||
@apply font-medium text-gray-900 dark:text-gray-100;
|
||||
}
|
||||
|
||||
.change-value {
|
||||
@apply text-gray-700 dark:text-gray-300;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
@apply flex justify-end space-x-4 mt-4;
|
||||
}
|
||||
|
||||
.btn-approve {
|
||||
@apply px-4 py-2 text-white bg-green-600 rounded-lg hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600 transition-colors duration-200 flex items-center;
|
||||
}
|
||||
|
||||
.btn-reject {
|
||||
@apply px-4 py-2 text-white bg-red-600 rounded-lg hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 transition-colors duration-200 flex items-center;
|
||||
}
|
||||
|
||||
.btn-escalate {
|
||||
@apply px-4 py-2 text-white bg-yellow-600 rounded-lg hover:bg-yellow-700 dark:bg-yellow-500 dark:hover:bg-yellow-600 transition-colors duration-200 flex items-center;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
@apply px-3 py-1 text-sm rounded-full font-medium inline-flex items-center;
|
||||
}
|
||||
|
||||
.status-pending {
|
||||
@apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900/50 dark:text-yellow-200;
|
||||
}
|
||||
|
||||
.status-approved, .status-auto_approved {
|
||||
@apply bg-green-100 text-green-800 dark:bg-green-900/50 dark:text-green-200;
|
||||
}
|
||||
|
||||
.status-rejected {
|
||||
@apply bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-200;
|
||||
}
|
||||
|
||||
.status-escalated {
|
||||
@apply bg-orange-100 text-orange-800 dark:bg-orange-900/50 dark:text-orange-200;
|
||||
}
|
||||
|
||||
/* HTMX Loading States */
|
||||
.htmx-request .htmx-indicator {
|
||||
@apply opacity-100;
|
||||
}
|
||||
|
||||
.htmx-request.htmx-indicator {
|
||||
@apply opacity-100;
|
||||
}
|
||||
|
||||
.htmx-indicator {
|
||||
@apply opacity-0 transition-opacity duration-200;
|
||||
}
|
||||
|
||||
/* Transitions */
|
||||
[x-cloak] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
@apply transition-opacity duration-200;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
@apply opacity-0;
|
||||
}
|
||||
|
||||
/* Form Elements */
|
||||
.form-select {
|
||||
@apply rounded-lg border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white transition-colors duration-200;
|
||||
}
|
||||
|
||||
.filters {
|
||||
@apply bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200/50 dark:border-gray-700/50 p-6 transition-all duration-200;
|
||||
}
|
||||
|
||||
.filters:hover {
|
||||
@apply shadow-xl border-gray-300 dark:border-gray-600;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="moderation-nav">
|
||||
<div class="moderation-nav-container">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="{% url 'moderation:dashboard' %}"
|
||||
class="{% if request.resolver_match.url_name == 'dashboard' %}active{% endif %}"
|
||||
hx-get="{% url 'moderation:dashboard' %}"
|
||||
hx-target="#submissions-content"
|
||||
hx-push-url="true">
|
||||
<i class="fas fa-tachometer-alt"></i>
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{% url 'moderation:edit_submissions' %}"
|
||||
class="{% if request.resolver_match.url_name == 'edit_submissions' %}active{% endif %}"
|
||||
hx-get="{% url 'moderation:edit_submissions' %}"
|
||||
hx-target="#submissions-content"
|
||||
hx-push-url="true">
|
||||
<i class="fas fa-edit"></i>
|
||||
Edit Submissions
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{% url 'moderation:photo_submissions' %}"
|
||||
class="{% if request.resolver_match.url_name == 'photo_submissions' %}active{% endif %}"
|
||||
hx-get="{% url 'moderation:photo_submissions' %}"
|
||||
hx-target="#submissions-content"
|
||||
hx-push-url="true">
|
||||
<i class="fas fa-image"></i>
|
||||
Photo Submissions
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="moderation-content">
|
||||
{% block moderation_content %}
|
||||
<div id="submissions-content">
|
||||
{% include "moderation/partials/submission_list.html" %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
</div>
|
||||
|
||||
<div id="loading-indicator"
|
||||
class="fixed inset-0 flex items-center justify-center htmx-indicator bg-black/20 dark:bg-black/40">
|
||||
<div class="flex items-center p-6 space-x-4 bg-white rounded-lg shadow-xl dark:bg-gray-800">
|
||||
<div class="w-8 h-8 border-4 border-blue-500 rounded-full animate-spin border-t-transparent"></div>
|
||||
<span class="text-gray-700 dark:text-gray-300">Processing...</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
document.body.addEventListener('htmx:beforeSwap', function(evt) {
|
||||
if (evt.detail.target.id === 'submissions-content') {
|
||||
evt.detail.shouldSwap = true;
|
||||
evt.detail.target.classList.add('fade-leave-active');
|
||||
evt.detail.target.classList.add('opacity-0');
|
||||
}
|
||||
});
|
||||
|
||||
document.body.addEventListener('htmx:afterSwap', function(evt) {
|
||||
if (evt.detail.target.id === 'submissions-content') {
|
||||
evt.detail.target.classList.remove('fade-leave-active');
|
||||
evt.detail.target.classList.remove('opacity-0');
|
||||
evt.detail.target.classList.add('fade-enter-active');
|
||||
requestAnimationFrame(() => {
|
||||
evt.detail.target.classList.remove('fade-enter-active');
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user