mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 09:51:09 -05:00
6391b3d81c
Introduce ARIA attributes, improve focus management, and refine UI element styling for better accessibility and user experience across the application. Replit-Commit-Author: Agent Replit-Commit-Session-Id: c446bc9e-66df-438c-a86c-f53e6da13649 Replit-Commit-Checkpoint-Type: intermediate_checkpoint
67 lines
3.6 KiB
HTML
67 lines
3.6 KiB
HTML
{% comment %}
|
|
View Toggle Component - Django Cotton Version
|
|
|
|
Provides toggle between grid and list view modes with visual indicators.
|
|
Integrates with HTMX for seamless view switching without page reloads.
|
|
|
|
Usage Examples:
|
|
|
|
<c-view_toggle current_view="grid" />
|
|
|
|
<c-view_toggle
|
|
current_view="list"
|
|
class="custom-class"
|
|
/>
|
|
|
|
Parameters:
|
|
- current_view: Currently selected view mode ("grid" or "list", default: "grid")
|
|
- class: Additional CSS classes (optional)
|
|
|
|
Features:
|
|
- Clean toggle button design
|
|
- Visual indicators for current view
|
|
- HTMX integration for seamless switching
|
|
- Accessible with proper ARIA labels
|
|
- Icons for grid and list views
|
|
{% endcomment %}
|
|
|
|
<c-vars
|
|
current_view="grid"
|
|
class=""
|
|
/>
|
|
|
|
<div class="inline-flex rounded-lg border border-gray-200 dark:border-gray-700 {{ class }}" role="group" aria-label="Toggle between grid and list view modes">
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center px-3 py-2.5 sm:py-2 text-sm font-medium rounded-l-lg transition-all duration-200 min-h-[44px] sm:min-h-0 {% if current_view == 'grid' %}bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-700{% else %}bg-white text-gray-700 hover:bg-gray-50 focus:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:bg-gray-700{% endif %} focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
|
hx-get="{% url 'parks:park_list' %}?{% for name, value in request.GET.items %}{% if name != 'view_mode' and name != 'page' %}{{ name }}={{ value }}&{% endif %}{% endfor %}view_mode=grid"
|
|
hx-target="#park-results"
|
|
hx-push-url="true"
|
|
hx-indicator="#search-spinner"
|
|
aria-label="Grid view"
|
|
aria-pressed="{% if current_view == 'grid' %}true{% else %}false{% endif %}"
|
|
title="Grid view"
|
|
>
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
|
</svg>
|
|
<span class="ml-1 hidden sm:inline">Grid</span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center px-3 py-2.5 sm:py-2 text-sm font-medium rounded-r-lg transition-all duration-200 min-h-[44px] sm:min-h-0 {% if current_view == 'list' %}bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-700{% else %}bg-white text-gray-700 hover:bg-gray-50 focus:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:bg-gray-700{% endif %} focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
|
hx-get="{% url 'parks:park_list' %}?{% for name, value in request.GET.items %}{% if name != 'view_mode' and name != 'page' %}{{ name }}={{ value }}&{% endif %}{% endfor %}view_mode=list"
|
|
hx-target="#park-results"
|
|
hx-push-url="true"
|
|
hx-indicator="#search-spinner"
|
|
aria-label="List view"
|
|
aria-pressed="{% if current_view == 'list' %}true{% else %}false{% endif %}"
|
|
title="List view"
|
|
>
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
|
|
</svg>
|
|
<span class="ml-1 hidden sm:inline">List</span>
|
|
</button>
|
|
</div> |