mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-22 23:31:08 -05:00
Add standardized HTMX conventions, interaction patterns, and migration guide for ThrillWiki UX
This commit is contained in:
pacnpal
@@ -1,120 +0,0 @@
|
||||
{% extends "base/htmx-base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}Search Results - ThrillWiki{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<div class="container py-8">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<!-- Search Header -->
|
||||
<div class="mb-8 text-center">
|
||||
<h1 class="mb-4 text-3xl font-bold tracking-tight">Search Results</h1>
|
||||
<div class="max-w-xl mx-auto">
|
||||
<form action="{% url 'search:results' %}" method="get" class="relative">
|
||||
<input type="text"
|
||||
name="q"
|
||||
value="{{ query|default:'' }}"
|
||||
placeholder="Search parks, rides, manufacturers..."
|
||||
class="w-full h-12 pl-12 pr-4 text-lg transition-all border rounded-lg shadow-sm border-input bg-background focus:ring-2 focus:ring-primary focus:border-primary">
|
||||
<div class="absolute -translate-y-1/2 left-4 top-1/2 text-muted-foreground">
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<button type="submit" class="absolute right-2 top-1/2 -translate-y-1/2 px-4 py-1.5 bg-primary text-primary-foreground rounded-md text-sm font-medium hover:bg-primary/90 transition-colors">
|
||||
Search
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters Tabs -->
|
||||
<div class="flex items-center justify-center gap-2 pb-2 mb-8 overflow-x-auto" x-data="{ tab: 'all' }">
|
||||
<button @click="tab = 'all'"
|
||||
:class="tab === 'all' ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground hover:bg-muted/80'"
|
||||
class="px-4 py-2 text-sm font-medium transition-colors rounded-full whitespace-nowrap">
|
||||
All Results
|
||||
</button>
|
||||
<button @click="tab = 'parks'"
|
||||
:class="tab === 'parks' ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground hover:bg-muted/80'"
|
||||
class="px-4 py-2 text-sm font-medium transition-colors rounded-full whitespace-nowrap">
|
||||
Parks
|
||||
</button>
|
||||
<button @click="tab = 'rides'"
|
||||
:class="tab === 'rides' ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground hover:bg-muted/80'"
|
||||
class="px-4 py-2 text-sm font-medium transition-colors rounded-full whitespace-nowrap">
|
||||
Rides
|
||||
</button>
|
||||
<button @click="tab = 'users'"
|
||||
:class="tab === 'users' ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground hover:bg-muted/80'"
|
||||
class="px-4 py-2 text-sm font-medium transition-colors rounded-full whitespace-nowrap">
|
||||
Users
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Results Grid -->
|
||||
<div class="space-y-8">
|
||||
{% if not query %}
|
||||
<div class="py-12 text-center">
|
||||
<div class="flex items-center justify-center w-16 h-16 mx-auto mb-4 rounded-full bg-muted">
|
||||
<svg class="w-8 h-8 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-medium text-foreground">Start Searching</h3>
|
||||
<p class="mt-1 text-muted-foreground">Enter a keyword to find parks, rides, and more.</p>
|
||||
</div>
|
||||
{% else %}
|
||||
|
||||
<!-- Parks Section -->
|
||||
<section x-show="tab === 'all' || tab === 'parks'">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-xl font-bold">Parks</h2>
|
||||
<span class="text-sm text-muted-foreground">3 results</span>
|
||||
</div>
|
||||
<div class="grid gap-4 sm:grid-cols-2">
|
||||
{% for i in "123"|make_list %}
|
||||
<a href="#" class="flex gap-4 p-4 transition-colors border rounded-lg bg-card hover:bg-muted/50">
|
||||
<div class="w-20 h-20 rounded-md bg-muted shrink-0"></div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold">Cedar Point</h3>
|
||||
<p class="text-sm text-muted-foreground">Sandusky, OH, United States</p>
|
||||
<div class="flex items-center gap-2 mt-2 text-xs text-muted-foreground">
|
||||
<span class="bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400 px-2 py-0.5 rounded-full">Operating</span>
|
||||
<span>•</span>
|
||||
<span>72 Rides</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Rides Section -->
|
||||
<section x-show="tab === 'all' || tab === 'rides'">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-xl font-bold">Rides</h2>
|
||||
<span class="text-sm text-muted-foreground">5 results</span>
|
||||
</div>
|
||||
<div class="grid gap-4 sm:grid-cols-2">
|
||||
{% for i in "12345"|make_list %}
|
||||
<a href="#" class="flex gap-4 p-4 transition-colors border rounded-lg bg-card hover:bg-muted/50">
|
||||
<div class="w-20 h-20 rounded-md bg-muted shrink-0"></div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold">Millennium Force</h3>
|
||||
<p class="text-sm text-muted-foreground">Cedar Point</p>
|
||||
<div class="flex items-center gap-2 mt-2 text-xs text-muted-foreground">
|
||||
<span class="font-medium text-yellow-600 dark:text-yellow-400">★ 4.9</span>
|
||||
<span>•</span>
|
||||
<span>Giga Coaster</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user