mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-24 08:51:11 -05:00
Enhance moderation dashboard UI and UX:
- Add HTMX-powered filtering with instant updates - Add smooth transitions and loading states - Improve visual hierarchy and styling - Add review notes functionality - Add confirmation dialogs for actions - Make navigation sticky - Add hover effects and visual feedback - Improve dark mode support
This commit is contained in:
pacnpal
@@ -4,10 +4,9 @@
|
||||
{% block title %}ThrillWiki Moderation{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<link rel="stylesheet" href="{% static 'css/inline-edit.css' %}">
|
||||
<style>
|
||||
.moderation-nav {
|
||||
@apply bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 shadow-sm;
|
||||
@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 {
|
||||
@@ -19,7 +18,7 @@
|
||||
}
|
||||
|
||||
.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;
|
||||
@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 {
|
||||
@@ -31,7 +30,7 @@
|
||||
}
|
||||
|
||||
.moderation-content {
|
||||
@apply container px-4 py-6 mx-auto;
|
||||
@apply container px-4 py-6 mx-auto max-w-6xl;
|
||||
}
|
||||
|
||||
.submission-list {
|
||||
@@ -39,7 +38,11 @@
|
||||
}
|
||||
|
||||
.submission-card {
|
||||
@apply bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200/50 dark:border-gray-700/50;
|
||||
@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 {
|
||||
@@ -55,7 +58,11 @@
|
||||
}
|
||||
|
||||
.change-item {
|
||||
@apply flex items-start space-x-2 p-2 rounded bg-gray-50 dark:bg-gray-700/50;
|
||||
@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 {
|
||||
@@ -71,43 +78,87 @@
|
||||
}
|
||||
|
||||
.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;
|
||||
@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;
|
||||
@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;
|
||||
}
|
||||
|
||||
.review-notes {
|
||||
@apply mt-4;
|
||||
}
|
||||
|
||||
.review-notes textarea {
|
||||
@apply w-full border-gray-300 rounded-lg form-textarea dark:border-gray-600 dark:bg-gray-700 dark:text-white;
|
||||
}
|
||||
|
||||
.filters {
|
||||
@apply p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200/50 dark:border-gray-700/50;
|
||||
}
|
||||
|
||||
.form-select {
|
||||
@apply border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-white;
|
||||
.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-2 py-1 text-sm rounded-full;
|
||||
@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 dark:text-yellow-200;
|
||||
@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 dark:text-green-200;
|
||||
@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 dark:text-red-200;
|
||||
@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 %}
|
||||
@@ -117,21 +168,31 @@
|
||||
<div class="moderation-nav-container">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="{% url 'moderation:admin:index' %}" class="{% if request.resolver_match.url_name == 'index' %}active{% endif %}">
|
||||
<a href="{% url 'moderation:admin:index' %}"
|
||||
class="{% if request.resolver_match.url_name == 'index' %}active{% endif %}"
|
||||
hx-get="{% url 'moderation:admin:index' %}"
|
||||
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 %}">
|
||||
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 %}">
|
||||
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>
|
||||
@@ -155,5 +216,24 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script src="{% static 'js/inline-edit.js' %}"></script>
|
||||
<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