mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 14: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.
58 lines
2.5 KiB
HTML
58 lines
2.5 KiB
HTML
<div class="fixed inset-0 z-50 flex items-start justify-center sm:items-center"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
x-data="{ open: true }"
|
|
x-show="open"
|
|
x-transition:enter="transition ease-out duration-200"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition ease-in duration-100"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0">
|
|
|
|
<!-- Backdrop -->
|
|
<div class="fixed inset-0 transition-all bg-background/80 backdrop-blur-sm"
|
|
@click="open = false; setTimeout(() => $el.closest('[hx-history-elt]').innerHTML = '', 200)"></div>
|
|
|
|
<!-- Dialog Panel -->
|
|
<div class="fixed z-50 grid w-full gap-4 p-6 duration-200 border shadow-lg bg-background sm:max-w-lg sm:rounded-lg"
|
|
x-show="open"
|
|
x-transition:enter="animate-in fade-in-0 zoom-in-95 slide-in-from-left-1/2 slide-in-from-top-[48%]"
|
|
x-transition:leave="animate-out fade-out-0 zoom-out-95 slide-out-to-left-1/2 slide-out-to-top-[48%]">
|
|
|
|
<div class="flex flex-col space-y-1.5 text-center sm:text-left">
|
|
{% if title %}
|
|
<h2 class="text-lg font-semibold leading-none tracking-tight">
|
|
{{ title }}
|
|
</h2>
|
|
{% endif %}
|
|
|
|
{% if description %}
|
|
<p class="text-sm text-muted-foreground">
|
|
{{ description }}
|
|
</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="py-4">
|
|
{{ content|safe }}
|
|
{% block dialog_content %}{% endblock %}
|
|
</div>
|
|
|
|
{% if footer %}
|
|
<div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
|
|
{{ footer|safe }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Close Button -->
|
|
<button class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
|
|
@click="open = false">
|
|
<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="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
<span class="sr-only">Close</span>
|
|
</button>
|
|
</div>
|
|
</div>
|