mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 06:51:08 -05:00
4c954fff6f
Introduce autocomplete for park searches, optimize park data fetching with select_related and prefetch_related, add new API endpoints for autocomplete and quick filters, and refactor the park list view to use new Django Cotton components for a more dynamic and user-friendly experience. Replit-Commit-Author: Agent Replit-Commit-Session-Id: c446bc9e-66df-438c-a86c-f53e6da13649 Replit-Commit-Checkpoint-Type: intermediate_checkpoint
67 lines
3.3 KiB
HTML
67 lines
3.3 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="View toggle">
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center px-3 py-2 text-sm font-medium rounded-l-lg transition-colors {% 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 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700{% endif %}"
|
|
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">
|
|
<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 text-sm font-medium rounded-r-lg transition-colors {% 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 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700{% endif %}"
|
|
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">
|
|
<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> |