Improve moderation dashboard UI and functionality

- Add status tabs (Pending, Approved, Rejected, Escalated)
- Implement HTMX for smooth tab switching and status changes
- Add proper permissions for escalated submissions
- Change Status filter to Submission Type (Text/Photo)
- Move navigation into dashboard content
- Fix tab menu visibility and transitions
- Add contextual loading indicator
- Update styling to match dark theme
- Ensure consistent styling across components
This commit is contained in:
pacnpal
2024-11-13 18:37:36 +00:00
parent 17aa90e252
commit 779189246a
5 changed files with 440 additions and 433 deletions

View File

@@ -1,38 +1,43 @@
{% load static %}
<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 class="flex items-center p-4 space-x-4 bg-gray-900 rounded-lg">
<a href="{% url 'moderation:submission_list' %}?status=NEW"
class="flex items-center px-4 py-2.5 rounded-lg font-medium transition-all duration-200 {% if request.GET.status == 'NEW' or not request.GET.status %}bg-blue-900/40 text-blue-400{% else %}text-gray-400 hover:text-gray-300{% endif %}"
hx-get="{% url 'moderation:submission_list' %}?status=NEW"
hx-target="body"
hx-push-url="true"
hx-indicator="#loading-indicator">
<i class="mr-2.5 text-lg fas fa-clock"></i>
<span>Pending</span>
</a>
<a href="{% url 'moderation:submission_list' %}?status=APPROVED"
class="flex items-center px-4 py-2.5 rounded-lg font-medium transition-all duration-200 {% if request.GET.status == 'APPROVED' %}bg-blue-900/40 text-blue-400{% else %}text-gray-400 hover:text-gray-300{% endif %}"
hx-get="{% url 'moderation:submission_list' %}?status=APPROVED"
hx-target="body"
hx-push-url="true"
hx-indicator="#loading-indicator">
<i class="mr-2.5 text-lg fas fa-check"></i>
<span>Approved</span>
</a>
<a href="{% url 'moderation:submission_list' %}?status=REJECTED"
class="flex items-center px-4 py-2.5 rounded-lg font-medium transition-all duration-200 {% if request.GET.status == 'REJECTED' %}bg-blue-900/40 text-blue-400{% else %}text-gray-400 hover:text-gray-300{% endif %}"
hx-get="{% url 'moderation:submission_list' %}?status=REJECTED"
hx-target="body"
hx-push-url="true"
hx-indicator="#loading-indicator">
<i class="mr-2.5 text-lg fas fa-times"></i>
<span>Rejected</span>
</a>
<a href="{% url 'moderation:submission_list' %}?status=ESCALATED"
class="flex items-center px-4 py-2.5 rounded-lg font-medium transition-all duration-200 {% if request.GET.status == 'ESCALATED' %}bg-blue-900/40 text-blue-400{% else %}text-gray-400 hover:text-gray-300{% endif %}"
hx-get="{% url 'moderation:submission_list' %}?status=ESCALATED"
hx-target="body"
hx-push-url="true"
hx-indicator="#loading-indicator">
<i class="mr-2.5 text-lg fas fa-exclamation-triangle"></i>
<span>Escalated</span>
</a>
</div>