mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 17:11:09 -05:00
b9063ff4f8
- Implemented park detail page with dynamic content loading for rides and weather. - Created park list page with filters and search functionality. - Developed ride detail page showcasing ride stats, reviews, and similar rides. - Added ride list page with filtering options and dynamic loading. - Introduced search results page with tabs for parks, rides, and users. - Added HTMX tests for global search functionality.
89 lines
4.6 KiB
HTML
89 lines
4.6 KiB
HTML
<div class="overflow-hidden border rounded-md shadow-sm bg-card text-card-foreground">
|
|
<div class="relative w-full overflow-auto">
|
|
<table class="w-full text-sm caption-bottom">
|
|
{% if caption %}
|
|
<caption class="mt-4 text-sm text-muted-foreground">{{ caption }}</caption>
|
|
{% endif %}
|
|
|
|
<thead class="[&_tr]:border-b">
|
|
<tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
|
|
{% for column in columns %}
|
|
<th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
|
|
{% if column.sortable %}
|
|
<button hx-get="{{ hx_url }}?sort={{ column.field }}"
|
|
hx-target="{{ hx_target }}"
|
|
class="flex items-center gap-1 hover:text-foreground">
|
|
{{ column.label }}
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
|
|
</svg>
|
|
</button>
|
|
{% else %}
|
|
{{ column.label }}
|
|
{% endif %}
|
|
</th>
|
|
{% endfor %}
|
|
{% if actions %}
|
|
<th class="h-12 px-4 font-medium text-right align-middle text-muted-foreground">Actions</th>
|
|
{% endif %}
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody class="[&_tr:last-child]:border-0">
|
|
{% for row in data %}
|
|
<tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
|
|
{% for column in columns %}
|
|
<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">
|
|
{% with value=row|get_item:column.field %}
|
|
{% if column.template %}
|
|
{% include column.template with value=value row=row %}
|
|
{% else %}
|
|
{{ value|default:"-" }}
|
|
{% endif %}
|
|
{% endwith %}
|
|
</td>
|
|
{% endfor %}
|
|
|
|
{% if actions %}
|
|
<td class="p-4 text-right align-middle">
|
|
{% include actions with row=row %}
|
|
</td>
|
|
{% endif %}
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="{{ columns|length|add:1 }}" class="h-24 p-4 text-center text-muted-foreground">
|
|
No results found.
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{% if page_obj.has_other_pages %}
|
|
<div class="flex items-center justify-between px-4 py-4 border-t">
|
|
<div class="flex items-center gap-2 text-sm text-muted-foreground">
|
|
Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
{% if page_obj.has_previous %}
|
|
<button hx-get="{{ hx_url }}?page={{ page_obj.previous_page_number }}"
|
|
hx-target="{{ hx_target }}"
|
|
class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium transition-colors border rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background border-input hover:bg-accent hover:text-accent-foreground h-9">
|
|
Previous
|
|
</button>
|
|
{% endif %}
|
|
|
|
{% if page_obj.has_next %}
|
|
<button hx-get="{{ hx_url }}?page={{ page_obj.next_page_number }}"
|
|
hx-target="{{ hx_target }}"
|
|
class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium transition-colors border rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background border-input hover:bg-accent hover:text-accent-foreground h-9">
|
|
Next
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|