Improve moderation dashboard UI and HTMX integration:

- Create partial templates for dashboard, edit submissions, and photo submissions
- Update views to properly handle HTMX requests
- Fix duplicate UI issues when navigating
- Improve overall UI design and transitions
This commit is contained in:
pacnpal
2024-11-13 17:04:42 +00:00
parent 96341bfd82
commit 177117f4d6
4 changed files with 109 additions and 26 deletions

View File

@@ -0,0 +1,62 @@
{% load static %}
<div class="space-y-6">
<div class="grid grid-cols-1 gap-6 md:grid-cols-3">
<div class="p-6 transition-shadow duration-200 bg-white border rounded-lg shadow-lg dark:bg-gray-800 border-gray-200/50 dark:border-gray-700/50 hover:shadow-xl">
<div class="flex items-center justify-between">
<h3 class="text-lg font-medium text-gray-900 dark:text-white">Pending Reviews</h3>
<span class="px-3 py-1 text-sm font-medium text-yellow-800 bg-yellow-100 rounded-full dark:bg-yellow-900/50 dark:text-yellow-200">
{{ submissions|length }}
</span>
</div>
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Submissions awaiting moderation</p>
</div>
<div class="p-6 transition-shadow duration-200 bg-white border rounded-lg shadow-lg dark:bg-gray-800 border-gray-200/50 dark:border-gray-700/50 hover:shadow-xl">
<div class="flex items-center justify-between">
<h3 class="text-lg font-medium text-gray-900 dark:text-white">Recent Activity</h3>
<i class="text-gray-400 fas fa-history"></i>
</div>
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Latest moderation actions</p>
</div>
<div class="p-6 transition-shadow duration-200 bg-white border rounded-lg shadow-lg dark:bg-gray-800 border-gray-200/50 dark:border-gray-700/50 hover:shadow-xl">
<div class="flex items-center justify-between">
<h3 class="text-lg font-medium text-gray-900 dark:text-white">Quick Actions</h3>
<i class="text-gray-400 fas fa-bolt"></i>
</div>
<div class="mt-4 space-y-2">
<a href="{% url 'moderation:edit_submissions' %}"
class="block px-4 py-2 text-sm text-gray-700 rounded-lg hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
hx-get="{% url 'moderation:edit_submissions' %}"
hx-target="#submissions-content"
hx-push-url="true">
<i class="mr-2 fas fa-edit"></i> Review Edit Submissions
</a>
<a href="{% url 'moderation:photo_submissions' %}"
class="block px-4 py-2 text-sm text-gray-700 rounded-lg hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
hx-get="{% url 'moderation:photo_submissions' %}"
hx-target="#submissions-content"
hx-push-url="true">
<i class="mr-2 fas fa-image"></i> Review Photo Submissions
</a>
</div>
</div>
</div>
<div class="bg-white border rounded-lg shadow-lg dark:bg-gray-800 border-gray-200/50 dark:border-gray-700/50">
<div class="p-6">
<h3 class="mb-4 text-lg font-medium text-gray-900 dark:text-white">Recent Submissions</h3>
<div class="space-y-4">
{% for submission in submissions %}
{% include "moderation/partials/submission_list.html" %}
{% empty %}
<div class="py-8 text-center">
<i class="mb-3 text-4xl text-green-500 fas fa-check-circle"></i>
<p class="text-gray-600 dark:text-gray-400">No pending submissions</p>
</div>
{% endfor %}
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,23 @@
{% load static %}
<div class="space-y-6">
<div class="p-6 bg-white border rounded-lg shadow-lg dark:bg-gray-800 border-gray-200/50 dark:border-gray-700/50">
<div class="flex items-center justify-between mb-6">
<h3 class="text-lg font-medium text-gray-900 dark:text-white">Photo Submissions</h3>
<span class="px-3 py-1 text-sm font-medium text-yellow-800 bg-yellow-100 rounded-full dark:bg-yellow-900/50 dark:text-yellow-200">
{{ submissions|length }}
</span>
</div>
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
{% for submission in submissions %}
{% include "moderation/partials/photo_submission.html" %}
{% empty %}
<div class="py-8 text-center col-span-full">
<i class="mb-3 text-4xl text-gray-400 fas fa-camera"></i>
<p class="text-gray-600 dark:text-gray-400">No photo submissions found</p>
</div>
{% endfor %}
</div>
</div>
</div>

View File

@@ -1,16 +1,7 @@
{% extends "moderation/dashboard.html" %}
{% block moderation_content %}
<div id="submissions-content" class="submission-list">
{% for submission in submissions %}
{% include "moderation/partials/photo_submission.html" %}
{% empty %}
<div class="p-8 text-center bg-white border rounded-lg shadow-lg dark:bg-gray-800 border-gray-200/50 dark:border-gray-700/50">
<div class="text-gray-500 dark:text-gray-400">
<i class="mb-3 text-4xl fas fa-camera"></i>
<p>No photo submissions found.</p>
</div>
</div>
{% endfor %}
<div id="submissions-content">
{% include "moderation/partials/photo_submission_content.html" %}
</div>
{% endblock %}