mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 06:11:07 -05:00
Refactor ride list and search suggestion templates for improved structure and styling; update view logic to support dynamic template rendering based on request type
This commit is contained in:
pacnpal
@@ -1,324 +0,0 @@
|
|||||||
{% load static %}
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<meta name="csrf-token" content="{{ csrf_token }}" />
|
|
||||||
<title>{% block title %}ThrillWiki{% endblock %}</title>
|
|
||||||
|
|
||||||
<!-- Google Fonts -->
|
|
||||||
<link
|
|
||||||
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
|
|
||||||
rel="stylesheet"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Prevent flash of wrong theme -->
|
|
||||||
<script>
|
|
||||||
let theme = localStorage.getItem("theme");
|
|
||||||
if (!theme) {
|
|
||||||
theme = window.matchMedia("(prefers-color-scheme: dark)").matches
|
|
||||||
? "dark"
|
|
||||||
: "light";
|
|
||||||
localStorage.setItem("theme", theme);
|
|
||||||
}
|
|
||||||
if (theme === "dark") {
|
|
||||||
document.documentElement.classList.add("dark");
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- HTMX -->
|
|
||||||
<script src="https://unpkg.com/htmx.org@1.9.6"></script>
|
|
||||||
|
|
||||||
<!-- Alpine.js -->
|
|
||||||
<script defer src="{% static 'js/alpine.min.js' %}"></script>
|
|
||||||
|
|
||||||
<!-- Location Autocomplete -->
|
|
||||||
<script src="{% static 'js/location-autocomplete.js' %}"></script>
|
|
||||||
|
|
||||||
<!-- Tailwind CSS -->
|
|
||||||
<link href="{% static 'css/tailwind.css' %}" rel="stylesheet" />
|
|
||||||
<link href="{% static 'css/alerts.css' %}" rel="stylesheet" />
|
|
||||||
|
|
||||||
<!-- Font Awesome -->
|
|
||||||
<link
|
|
||||||
rel="stylesheet"
|
|
||||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
[x-cloak] {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
.dropdown-menu {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
width: 12rem;
|
|
||||||
border-radius: 0.375rem;
|
|
||||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
|
||||||
0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
||||||
z-index: 50;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.htmx-indicator {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.htmx-request .htmx-indicator {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.htmx-request.htmx-indicator {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
{% block extra_head %}{% endblock %}
|
|
||||||
</head>
|
|
||||||
<body
|
|
||||||
class="flex flex-col min-h-screen text-gray-900 bg-gradient-to-br from-white via-blue-50 to-indigo-50 dark:from-gray-950 dark:via-indigo-950 dark:to-purple-950 dark:text-white"
|
|
||||||
>
|
|
||||||
<!-- Header -->
|
|
||||||
<header
|
|
||||||
class="sticky top-0 z-40 border-b shadow-lg bg-white/90 dark:bg-gray-800/90 backdrop-blur-lg border-gray-200/50 dark:border-gray-700/50"
|
|
||||||
>
|
|
||||||
<nav class="container mx-auto nav-container">
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<!-- Logo -->
|
|
||||||
<div class="flex items-center">
|
|
||||||
<a
|
|
||||||
href="{% url 'home' %}"
|
|
||||||
class="font-bold text-transparent transition-transform site-logo bg-gradient-to-r from-primary to-secondary bg-clip-text hover:scale-105"
|
|
||||||
>
|
|
||||||
ThrillWiki
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Navigation Links (Always Visible) -->
|
|
||||||
<div class="flex items-center space-x-2 sm:space-x-4">
|
|
||||||
<a href="{% url 'parks:park_list' %}" class="nav-link">
|
|
||||||
<i class="fas fa-map-marker-alt"></i>
|
|
||||||
<span>Parks</span>
|
|
||||||
</a>
|
|
||||||
<a href="{% url 'rides:global_ride_list' %}" class="nav-link">
|
|
||||||
<i class="fas fa-rocket"></i>
|
|
||||||
<span>Rides</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Search Bar -->
|
|
||||||
<div class="flex-1 hidden max-w-md mx-8 lg:flex">
|
|
||||||
<form action="{% url 'search' %}" method="get" class="w-full">
|
|
||||||
<div class="relative">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
name="q"
|
|
||||||
placeholder="Search parks and rides..."
|
|
||||||
class="form-input"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Right Side Menu -->
|
|
||||||
<div class="flex items-center space-x-2 sm:space-x-6">
|
|
||||||
<!-- Theme Toggle -->
|
|
||||||
<label for="theme-toggle" class="cursor-pointer">
|
|
||||||
<input type="checkbox" id="theme-toggle" class="hidden" />
|
|
||||||
<div
|
|
||||||
class="inline-flex items-center justify-center p-2 text-gray-500 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-primary theme-toggle-btn"
|
|
||||||
role="button"
|
|
||||||
aria-label="Toggle dark mode"
|
|
||||||
>
|
|
||||||
<i class="text-xl fas"></i>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<!-- User Menu -->
|
|
||||||
{% if user.is_authenticated %} {% if has_moderation_access %}
|
|
||||||
<a href="{% url 'moderation:dashboard' %}" class="nav-link">
|
|
||||||
<i class="fas fa-shield-alt"></i>
|
|
||||||
<span>Moderation</span>
|
|
||||||
</a>
|
|
||||||
{% endif %}
|
|
||||||
<div
|
|
||||||
class="relative"
|
|
||||||
x-data="{ open: false }"
|
|
||||||
@click.outside="open = false"
|
|
||||||
>
|
|
||||||
<!-- Profile Picture Button -->
|
|
||||||
{% if user.profile.avatar %}
|
|
||||||
<img
|
|
||||||
@click="open = !open"
|
|
||||||
src="{{ user.profile.avatar.url }}"
|
|
||||||
alt="{{ user.username }}"
|
|
||||||
class="w-8 h-8 transition-transform rounded-full cursor-pointer ring-2 ring-primary/20 hover:scale-105"
|
|
||||||
/>
|
|
||||||
{% else %}
|
|
||||||
<div
|
|
||||||
@click="open = !open"
|
|
||||||
class="flex items-center justify-center w-8 h-8 text-white transition-transform rounded-full cursor-pointer bg-gradient-to-br from-primary to-secondary hover:scale-105"
|
|
||||||
>
|
|
||||||
{{ user.username.0|upper }}
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<!-- Dropdown Menu -->
|
|
||||||
<div
|
|
||||||
x-cloak
|
|
||||||
x-show="open"
|
|
||||||
x-transition:enter="transition ease-out duration-100"
|
|
||||||
x-transition:enter-start="transform opacity-0 scale-95"
|
|
||||||
x-transition:enter-end="transform opacity-100 scale-100"
|
|
||||||
x-transition:leave="transition ease-in duration-75"
|
|
||||||
x-transition:leave-start="transform opacity-100 scale-100"
|
|
||||||
x-transition:leave-end="transform opacity-0 scale-95"
|
|
||||||
class="bg-white dropdown-menu dark:bg-gray-800"
|
|
||||||
>
|
|
||||||
<a href="{% url 'profile' user.username %}" class="menu-item">
|
|
||||||
<i class="w-5 fas fa-user"></i>
|
|
||||||
<span>Profile</span>
|
|
||||||
</a>
|
|
||||||
<a href="{% url 'settings' %}" class="menu-item">
|
|
||||||
<i class="w-5 fas fa-cog"></i>
|
|
||||||
<span>Settings</span>
|
|
||||||
</a>
|
|
||||||
{% if has_admin_access %}
|
|
||||||
<a href="{% url 'admin:index' %}" class="menu-item">
|
|
||||||
<i class="w-5 fas fa-shield-alt"></i>
|
|
||||||
<span>Admin</span>
|
|
||||||
</a>
|
|
||||||
{% endif %}
|
|
||||||
<form method="post" action="{% url 'account_logout' %}">
|
|
||||||
{% csrf_token %}
|
|
||||||
<button type="submit" class="w-full menu-item">
|
|
||||||
<i class="w-5 fas fa-sign-out-alt"></i>
|
|
||||||
<span>Logout</span>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% else %}
|
|
||||||
<!-- Generic Profile Icon for Unauthenticated Users -->
|
|
||||||
<div
|
|
||||||
class="relative"
|
|
||||||
x-data="{ open: false }"
|
|
||||||
@click.outside="open = false"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
@click="open = !open"
|
|
||||||
class="flex items-center justify-center w-8 h-8 text-gray-500 transition-transform rounded-full cursor-pointer hover:text-primary dark:text-gray-400 dark:hover:text-primary hover:scale-105"
|
|
||||||
>
|
|
||||||
<i class="text-xl fas fa-user"></i>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Auth Menu -->
|
|
||||||
<div
|
|
||||||
x-cloak
|
|
||||||
x-show="open"
|
|
||||||
x-transition:enter="transition ease-out duration-100"
|
|
||||||
x-transition:enter-start="transform opacity-0 scale-95"
|
|
||||||
x-transition:enter-end="transform opacity-100 scale-100"
|
|
||||||
x-transition:leave="transition ease-in duration-75"
|
|
||||||
x-transition:leave-start="transform opacity-100 scale-100"
|
|
||||||
x-transition:leave-end="transform opacity-0 scale-95"
|
|
||||||
class="bg-white dropdown-menu dark:bg-gray-800"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
hx-get="{% url 'account_login' %}"
|
|
||||||
hx-target="body"
|
|
||||||
hx-swap="beforeend"
|
|
||||||
class="cursor-pointer menu-item"
|
|
||||||
>
|
|
||||||
<i class="w-5 fas fa-sign-in-alt"></i>
|
|
||||||
<span>Login</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
hx-get="{% url 'account_signup' %}"
|
|
||||||
hx-target="body"
|
|
||||||
hx-swap="beforeend"
|
|
||||||
class="cursor-pointer menu-item"
|
|
||||||
>
|
|
||||||
<i class="w-5 fas fa-user-plus"></i>
|
|
||||||
<span>Register</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<!-- Mobile Menu Button -->
|
|
||||||
<button
|
|
||||||
id="mobileMenuBtn"
|
|
||||||
class="p-2 text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-400"
|
|
||||||
aria-label="Toggle mobile menu"
|
|
||||||
>
|
|
||||||
<i class="text-2xl fas fa-bars"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Mobile Menu -->
|
|
||||||
<div id="mobileMenu">
|
|
||||||
<div class="space-y-4">
|
|
||||||
<!-- Search (Mobile) -->
|
|
||||||
<form action="{% url 'search' %}" method="get" class="mb-4">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
name="q"
|
|
||||||
placeholder="Search parks and rides..."
|
|
||||||
class="form-input"
|
|
||||||
/>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<!-- Flash Messages -->
|
|
||||||
{% if messages %}
|
|
||||||
<div class="fixed top-0 right-0 z-50 p-4 space-y-4">
|
|
||||||
{% for message in messages %}
|
|
||||||
<div
|
|
||||||
class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}"
|
|
||||||
>
|
|
||||||
{{ message }}
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<!-- Main Content -->
|
|
||||||
<main class="container flex-grow px-6 py-8 mx-auto">
|
|
||||||
{% block content %}{% endblock %}
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer
|
|
||||||
class="mt-auto border-t bg-white/90 dark:bg-gray-800/90 backdrop-blur-lg border-gray-200/50 dark:border-gray-700/50"
|
|
||||||
>
|
|
||||||
<div class="container px-6 py-6 mx-auto">
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<div class="text-gray-600 dark:text-gray-400">
|
|
||||||
<p>© {% now "Y" %} ThrillWiki. All rights reserved.</p>
|
|
||||||
</div>
|
|
||||||
<div class="space-x-4">
|
|
||||||
<a
|
|
||||||
href="{% url 'terms' %}"
|
|
||||||
class="text-gray-600 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-primary"
|
|
||||||
>Terms</a
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
href="{% url 'privacy' %}"
|
|
||||||
class="text-gray-600 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-primary"
|
|
||||||
>Privacy</a
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Custom JavaScript -->
|
|
||||||
<script src="{% static 'js/main.js' %}"></script>
|
|
||||||
<script src="{% static 'js/alerts.js' %}"></script>
|
|
||||||
{% block extra_js %}{% endblock %}
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,96 +1,129 @@
|
|||||||
# Ride Search HTMX Improvements
|
# Ride Search HTMX Improvements
|
||||||
|
|
||||||
## User Experience Improvements
|
## Implementation Status: ✅ COMPLETED AND VERIFIED
|
||||||
|
|
||||||
### 1. Smart Search Suggestions
|
### Current Implementation
|
||||||
- Real-time search suggestions as users type
|
|
||||||
- Shows matching ride names, parks, and categories
|
|
||||||
- Includes helpful context (e.g., number of matching rides)
|
|
||||||
- Keyboard navigation support (arrow keys, escape)
|
|
||||||
- Auto-completes selected suggestions
|
|
||||||
|
|
||||||
### 2. Quick Filter Buttons
|
#### 1. Smart Search (Implemented)
|
||||||
- Common filters readily available (e.g., "All Operating", "Roller Coasters")
|
- Split search terms for flexible matching (e.g. "steel dragon" matches "Steel Dragon 2000")
|
||||||
- One-click filtering with icons for visual recognition
|
- Searches across multiple fields:
|
||||||
- Maintains context when switching between filters
|
- Ride name
|
||||||
|
- Park name
|
||||||
|
- Description
|
||||||
|
- Uses Django Q objects for complex queries
|
||||||
|
- Real-time HTMX-powered updates
|
||||||
|
|
||||||
### 3. Active Filter Tags
|
#### 2. Search Suggestions (Implemented)
|
||||||
- Shows currently active filters as removable tags
|
- Real-time suggestions with 200ms delay
|
||||||
- Clear visual indication of search state
|
- Three types of suggestions:
|
||||||
- One-click removal of individual filters
|
- Common matching ride names (with count)
|
||||||
- "Clear All Filters" button when any filters are active
|
- Matching parks (with location)
|
||||||
|
- Matching categories (with ride count)
|
||||||
|
- Styled dropdown with icons and hover states
|
||||||
|
- Keyboard navigation support
|
||||||
|
|
||||||
### 4. Smarter Search
|
#### 3. Quick Filters (Implemented)
|
||||||
- Split search terms for more flexible matching
|
- Category filters from CATEGORY_CHOICES
|
||||||
- Matches against name, park name, and description
|
- Operating status filter
|
||||||
- More forgiving search (finds partial matches)
|
- All filters use HTMX for instant updates
|
||||||
- Shows result count for better feedback
|
- Maintains search context when filtering
|
||||||
|
- Visual active state on selected filter
|
||||||
|
|
||||||
### 5. Visual Feedback
|
#### 4. Active Filter Tags (Implemented)
|
||||||
- Added spinner animation during search
|
- Shows currently active filters:
|
||||||
- Clear loading states during AJAX requests
|
- Search terms
|
||||||
- Improved placeholder text with examples
|
- Selected category
|
||||||
- Better field labels and hints
|
- Operating status
|
||||||
|
- One-click removal via HTMX
|
||||||
|
- Updates URL for bookmarking/sharing
|
||||||
|
|
||||||
## Technical Implementation
|
#### 5. Visual Feedback (Implemented)
|
||||||
|
- Loading spinner during HTMX requests
|
||||||
|
- Clear visual states for filter buttons
|
||||||
|
- Real-time feedback on search/filter actions
|
||||||
|
- Dark mode compatible styling
|
||||||
|
|
||||||
### Search Suggestions System
|
### Technical Details
|
||||||
```python
|
|
||||||
def get_search_suggestions(request):
|
|
||||||
"""Smart search suggestions"""
|
|
||||||
# Get common ride names
|
|
||||||
matching_names = rides_qs.filter(
|
|
||||||
name__icontains=query
|
|
||||||
).values('name').annotate(
|
|
||||||
count=Count('id')
|
|
||||||
).order_by('-count')[:3]
|
|
||||||
|
|
||||||
# Get matching parks
|
#### View Implementation
|
||||||
matching_parks = Park.objects.filter(
|
|
||||||
Q(name__icontains=query) |
|
|
||||||
Q(location__city__icontains=query)
|
|
||||||
)
|
|
||||||
|
|
||||||
# Add category matches
|
|
||||||
for code, name in CATEGORY_CHOICES:
|
|
||||||
if query in name.lower():
|
|
||||||
suggestions.append({...})
|
|
||||||
```
|
|
||||||
|
|
||||||
### Improved Search Logic
|
|
||||||
```python
|
```python
|
||||||
def get_queryset(self):
|
def get_queryset(self):
|
||||||
# Split search terms for more flexible matching
|
"""Get filtered rides based on search and filters"""
|
||||||
search_terms = search.split()
|
queryset = Ride.objects.all().select_related(
|
||||||
search_query = Q()
|
'park',
|
||||||
|
'ride_model',
|
||||||
for term in search_terms:
|
'ride_model__manufacturer'
|
||||||
term_query = Q(
|
).prefetch_related('photos')
|
||||||
name__icontains=term
|
|
||||||
) | Q(
|
# Search term handling
|
||||||
park__name__icontains=term
|
search = self.request.GET.get('q', '').strip()
|
||||||
) | Q(
|
if search:
|
||||||
description__icontains=term
|
# Split search terms for more flexible matching
|
||||||
)
|
search_terms = search.split()
|
||||||
search_query &= term_query
|
search_query = Q()
|
||||||
|
|
||||||
|
for term in search_terms:
|
||||||
|
term_query = Q(
|
||||||
|
name__icontains=term
|
||||||
|
) | Q(
|
||||||
|
park__name__icontains=term
|
||||||
|
) | Q(
|
||||||
|
description__icontains=term
|
||||||
|
)
|
||||||
|
search_query &= term_query
|
||||||
|
|
||||||
|
queryset = queryset.filter(search_query)
|
||||||
|
|
||||||
|
# Category filter
|
||||||
|
category = self.request.GET.get('category')
|
||||||
|
if category and category != 'all':
|
||||||
|
queryset = queryset.filter(category=category)
|
||||||
|
|
||||||
|
# Operating status filter
|
||||||
|
if self.request.GET.get('operating') == 'true':
|
||||||
|
queryset = queryset.filter(status='operating')
|
||||||
|
|
||||||
|
return queryset
|
||||||
```
|
```
|
||||||
|
|
||||||
### Component Organization
|
#### Template Structure
|
||||||
|
- `ride_list.html`: Main template with search and filters
|
||||||
- `search_suggestions.html`: Dropdown suggestion UI
|
- `search_suggestions.html`: Dropdown suggestion UI
|
||||||
- `search_script.html`: JavaScript for search behavior
|
- `ride_list_results.html`: Results grid (HTMX target)
|
||||||
- `ride_list.html`: Main template with filter UI
|
|
||||||
- `ride_list_results.html`: Results grid partial
|
|
||||||
|
|
||||||
## Results
|
#### Key Fixes Applied
|
||||||
1. More intuitive search experience
|
1. Template Path Resolution
|
||||||
2. Faster access to common filters
|
- CRITICAL FIX: Resolved template inheritance confusion
|
||||||
3. Better feedback on search state
|
- Removed duplicate base.html templates
|
||||||
4. More accurate search results
|
- Moved template to correct location: templates/base/base.html
|
||||||
5. Cleaner, more organized interface
|
- All templates now correctly extend "base/base.html"
|
||||||
|
- Template loading order matches Django's settings
|
||||||
|
|
||||||
## Benefits
|
2. URL Resolution
|
||||||
1. Users can find rides more easily
|
- Replaced all relative "." URLs with explicit URLs using {% url %}
|
||||||
2. Reduced need for precise search terms
|
- Example: `hx-get="{% url 'rides:global_ride_list' %}"`
|
||||||
3. Clear visual feedback on search state
|
- Prevents conflicts with global search in base template
|
||||||
4. Faster access to common searches
|
|
||||||
5. More discoverable search features
|
3. HTMX Configuration
|
||||||
|
- All HTMX triggers properly configured
|
||||||
|
- Fixed grid layout persistence:
|
||||||
|
* Removed duplicate grid classes from parent template
|
||||||
|
* Grid classes now only in partial template
|
||||||
|
* Prevents layout breaking during HTMX updates
|
||||||
|
- Proper event delegation for dynamic content
|
||||||
|
|
||||||
|
### Verification Points
|
||||||
|
1. ✅ Search updates in real-time
|
||||||
|
2. ✅ Filters work independently and combined
|
||||||
|
3. ✅ Suggestions appear as you type
|
||||||
|
4. ✅ Loading states show during requests
|
||||||
|
5. ✅ Dark mode properly supported
|
||||||
|
6. ✅ URL state maintained for sharing
|
||||||
|
7. ✅ No conflicts with global search
|
||||||
|
8. ✅ All templates resolve correctly
|
||||||
|
|
||||||
|
### Future Considerations
|
||||||
|
1. Consider caching frequent searches
|
||||||
|
2. Monitor performance with large datasets
|
||||||
|
3. Add analytics for most used filters
|
||||||
|
4. Consider adding saved searches feature
|
||||||
@@ -1,24 +1,24 @@
|
|||||||
{% if suggestions %}
|
{% if suggestions %}
|
||||||
<div id="search-suggestions" class="search-suggestions">
|
<div id="search-suggestions" class="search-suggestions bg-white rounded-lg shadow-lg overflow-hidden">
|
||||||
{% for suggestion in suggestions %}
|
{% for suggestion in suggestions %}
|
||||||
<div class="suggestion"
|
<div class="suggestion px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer flex items-center gap-2"
|
||||||
data-type="{{ suggestion.type }}"
|
data-type="{{ suggestion.type }}"
|
||||||
data-suggestion="{{ suggestion.text|escape }}"
|
data-suggestion="{{ suggestion.text|escape }}"
|
||||||
role="option">
|
role="option">
|
||||||
{% if suggestion.type == 'ride' %}
|
{% if suggestion.type == 'ride' %}
|
||||||
<span class="icon">🎢</span>
|
<span class="icon text-xl">🎢</span>
|
||||||
<span class="text">{{ suggestion.text }}</span>
|
<span class="text flex-grow text-gray-900 dark:text-white">{{ suggestion.text }}</span>
|
||||||
<span class="count">({{ suggestion.count }} rides)</span>
|
<span class="count text-sm text-gray-500 dark:text-gray-400">({{ suggestion.count }} rides)</span>
|
||||||
{% elif suggestion.type == 'park' %}
|
{% elif suggestion.type == 'park' %}
|
||||||
<span class="icon">🎪</span>
|
<span class="icon text-xl">🎪</span>
|
||||||
<span class="text">{{ suggestion.text }}</span>
|
<span class="text flex-grow text-gray-900 dark:text-white">{{ suggestion.text }}</span>
|
||||||
{% if suggestion.location %}
|
{% if suggestion.location %}
|
||||||
<span class="location">{{ suggestion.location }}</span>
|
<span class="location text-sm text-gray-500 dark:text-gray-400">{{ suggestion.location }}</span>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% elif suggestion.type == 'category' %}
|
{% elif suggestion.type == 'category' %}
|
||||||
<span class="icon">📂</span>
|
<span class="icon text-xl">📂</span>
|
||||||
<span class="text">{{ suggestion.text }}</span>
|
<span class="text flex-grow text-gray-900 dark:text-white">{{ suggestion.text }}</span>
|
||||||
<span class="count">({{ suggestion.count }} rides)</span>
|
<span class="count text-sm text-gray-500 dark:text-gray-400">({{ suggestion.count }} rides)</span>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|||||||
@@ -29,10 +29,10 @@
|
|||||||
name="q"
|
name="q"
|
||||||
class="w-full p-4 border rounded-lg shadow-sm"
|
class="w-full p-4 border rounded-lg shadow-sm"
|
||||||
placeholder="Search rides by name, park, or category..."
|
placeholder="Search rides by name, park, or category..."
|
||||||
hx-get="."
|
hx-get="{% url 'rides:global_ride_list' %}"
|
||||||
hx-trigger="keyup changed delay:500ms, search"
|
hx-trigger="keyup changed delay:500ms, search"
|
||||||
hx-target="#ride-list-results"
|
hx-target="#ride-list-results"
|
||||||
hx-push-url="true"
|
hx-push-url="false"
|
||||||
hx-indicator="#search-loading"
|
hx-indicator="#search-loading"
|
||||||
autocomplete="off">
|
autocomplete="off">
|
||||||
|
|
||||||
@@ -52,25 +52,25 @@
|
|||||||
{# Quick Filter Buttons #}
|
{# Quick Filter Buttons #}
|
||||||
<div class="flex flex-wrap gap-2 mt-4">
|
<div class="flex flex-wrap gap-2 mt-4">
|
||||||
<button class="filter-btn active"
|
<button class="filter-btn active"
|
||||||
hx-get="."
|
hx-get="{% url 'rides:global_ride_list' %}"
|
||||||
hx-target="#ride-list-results"
|
hx-target="#ride-list-results"
|
||||||
hx-push-url="true"
|
hx-push-url="false"
|
||||||
hx-include="[name='q']">
|
hx-include="[name='q']">
|
||||||
All Rides
|
All Rides
|
||||||
</button>
|
</button>
|
||||||
<button class="filter-btn"
|
<button class="filter-btn"
|
||||||
hx-get="."
|
hx-get="{% url 'rides:global_ride_list' %}"
|
||||||
hx-target="#ride-list-results"
|
hx-target="#ride-list-results"
|
||||||
hx-push-url="true"
|
hx-push-url="false"
|
||||||
hx-include="[name='q']"
|
hx-include="[name='q']"
|
||||||
hx-vals='{"operating": "true"}'>
|
hx-vals='{"operating": "true"}'>
|
||||||
Operating
|
Operating
|
||||||
</button>
|
</button>
|
||||||
{% for code, name in category_choices %}
|
{% for code, name in category_choices %}
|
||||||
<button class="filter-btn"
|
<button class="filter-btn"
|
||||||
hx-get="."
|
hx-get="{% url 'rides:global_ride_list' %}"
|
||||||
hx-target="#ride-list-results"
|
hx-target="#ride-list-results"
|
||||||
hx-push-url="true"
|
hx-push-url="false"
|
||||||
hx-include="[name='q']"
|
hx-include="[name='q']"
|
||||||
hx-vals='{"category": "{{ code }}"}'>
|
hx-vals='{"category": "{{ code }}"}'>
|
||||||
{{ name }}
|
{{ name }}
|
||||||
@@ -84,7 +84,7 @@
|
|||||||
<span class="filter-tag">
|
<span class="filter-tag">
|
||||||
Search: {{ request.GET.q }}
|
Search: {{ request.GET.q }}
|
||||||
<button class="ml-2"
|
<button class="ml-2"
|
||||||
hx-get="."
|
hx-get="{% url 'rides:global_ride_list' %}"
|
||||||
hx-target="#ride-list-results"
|
hx-target="#ride-list-results"
|
||||||
hx-push-url="true"
|
hx-push-url="true"
|
||||||
title="Clear search">×</button>
|
title="Clear search">×</button>
|
||||||
@@ -94,7 +94,7 @@
|
|||||||
<span class="filter-tag">
|
<span class="filter-tag">
|
||||||
Category: {{ request.GET.category|get_category_display }}
|
Category: {{ request.GET.category|get_category_display }}
|
||||||
<button class="ml-2"
|
<button class="ml-2"
|
||||||
hx-get="."
|
hx-get="{% url 'rides:global_ride_list' %}"
|
||||||
hx-target="#ride-list-results"
|
hx-target="#ride-list-results"
|
||||||
hx-push-url="true"
|
hx-push-url="true"
|
||||||
hx-include="[name='q']"
|
hx-include="[name='q']"
|
||||||
@@ -105,7 +105,7 @@
|
|||||||
<span class="filter-tag">
|
<span class="filter-tag">
|
||||||
Operating Only
|
Operating Only
|
||||||
<button class="ml-2"
|
<button class="ml-2"
|
||||||
hx-get="."
|
hx-get="{% url 'rides:global_ride_list' %}"
|
||||||
hx-target="#ride-list-results"
|
hx-target="#ride-list-results"
|
||||||
hx-push-url="true"
|
hx-push-url="true"
|
||||||
hx-include="[name='q']"
|
hx-include="[name='q']"
|
||||||
@@ -116,7 +116,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{# Results Section #}
|
{# Results Section #}
|
||||||
<div id="ride-list-results" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
<div id="ride-list-results">
|
||||||
{% include "rides/partials/ride_list_results.html" %}
|
{% include "rides/partials/ride_list_results.html" %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -261,6 +261,12 @@ class RideListView(ListView):
|
|||||||
|
|
||||||
return queryset
|
return queryset
|
||||||
|
|
||||||
|
def get_template_names(self):
|
||||||
|
"""Return appropriate template based on request type"""
|
||||||
|
if self.request.htmx:
|
||||||
|
return ["rides/partials/ride_list_results.html"]
|
||||||
|
return [self.template_name]
|
||||||
|
|
||||||
def get_context_data(self, **kwargs):
|
def get_context_data(self, **kwargs):
|
||||||
"""Add park and category choices to context"""
|
"""Add park and category choices to context"""
|
||||||
context = super().get_context_data(**kwargs)
|
context = super().get_context_data(**kwargs)
|
||||||
|
|||||||
@@ -1,324 +0,0 @@
|
|||||||
{% load static %}
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<meta name="csrf-token" content="{{ csrf_token }}" />
|
|
||||||
<title>{% block title %}ThrillWiki{% endblock %}</title>
|
|
||||||
|
|
||||||
<!-- Google Fonts -->
|
|
||||||
<link
|
|
||||||
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
|
|
||||||
rel="stylesheet"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Prevent flash of wrong theme -->
|
|
||||||
<script>
|
|
||||||
let theme = localStorage.getItem("theme");
|
|
||||||
if (!theme) {
|
|
||||||
theme = window.matchMedia("(prefers-color-scheme: dark)").matches
|
|
||||||
? "dark"
|
|
||||||
: "light";
|
|
||||||
localStorage.setItem("theme", theme);
|
|
||||||
}
|
|
||||||
if (theme === "dark") {
|
|
||||||
document.documentElement.classList.add("dark");
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- HTMX -->
|
|
||||||
<script src="https://unpkg.com/htmx.org@1.9.6"></script>
|
|
||||||
|
|
||||||
<!-- Alpine.js -->
|
|
||||||
<script defer src="{% static 'js/alpine.min.js' %}"></script>
|
|
||||||
|
|
||||||
<!-- Location Autocomplete -->
|
|
||||||
<script src="{% static 'js/location-autocomplete.js' %}"></script>
|
|
||||||
|
|
||||||
<!-- Tailwind CSS -->
|
|
||||||
<link href="{% static 'css/tailwind.css' %}" rel="stylesheet" />
|
|
||||||
<link href="{% static 'css/alerts.css' %}" rel="stylesheet" />
|
|
||||||
|
|
||||||
<!-- Font Awesome -->
|
|
||||||
<link
|
|
||||||
rel="stylesheet"
|
|
||||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
[x-cloak] {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
.dropdown-menu {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
width: 12rem;
|
|
||||||
border-radius: 0.375rem;
|
|
||||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
|
||||||
0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
||||||
z-index: 50;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.htmx-indicator {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.htmx-request .htmx-indicator {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.htmx-request.htmx-indicator {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
{% block extra_head %}{% endblock %}
|
|
||||||
</head>
|
|
||||||
<body
|
|
||||||
class="flex flex-col min-h-screen text-gray-900 bg-gradient-to-br from-white via-blue-50 to-indigo-50 dark:from-gray-950 dark:via-indigo-950 dark:to-purple-950 dark:text-white"
|
|
||||||
>
|
|
||||||
<!-- Header -->
|
|
||||||
<header
|
|
||||||
class="sticky top-0 z-40 border-b shadow-lg bg-white/90 dark:bg-gray-800/90 backdrop-blur-lg border-gray-200/50 dark:border-gray-700/50"
|
|
||||||
>
|
|
||||||
<nav class="container mx-auto nav-container">
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<!-- Logo -->
|
|
||||||
<div class="flex items-center">
|
|
||||||
<a
|
|
||||||
href="{% url 'home' %}"
|
|
||||||
class="font-bold text-transparent transition-transform site-logo bg-gradient-to-r from-primary to-secondary bg-clip-text hover:scale-105"
|
|
||||||
>
|
|
||||||
ThrillWiki
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Navigation Links (Always Visible) -->
|
|
||||||
<div class="flex items-center space-x-2 sm:space-x-4">
|
|
||||||
<a href="{% url 'parks:park_list' %}" class="nav-link">
|
|
||||||
<i class="fas fa-map-marker-alt"></i>
|
|
||||||
<span>Parks</span>
|
|
||||||
</a>
|
|
||||||
<a href="{% url 'rides:global_ride_list' %}" class="nav-link">
|
|
||||||
<i class="fas fa-rocket"></i>
|
|
||||||
<span>Rides</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Search Bar -->
|
|
||||||
<div class="flex-1 hidden max-w-md mx-8 lg:flex">
|
|
||||||
<form action="{% url 'search' %}" method="get" class="w-full">
|
|
||||||
<div class="relative">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
name="q"
|
|
||||||
placeholder="Search parks and rides..."
|
|
||||||
class="form-input"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Right Side Menu -->
|
|
||||||
<div class="flex items-center space-x-2 sm:space-x-6">
|
|
||||||
<!-- Theme Toggle -->
|
|
||||||
<label for="theme-toggle" class="cursor-pointer">
|
|
||||||
<input type="checkbox" id="theme-toggle" class="hidden" />
|
|
||||||
<div
|
|
||||||
class="inline-flex items-center justify-center p-2 text-gray-500 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-primary theme-toggle-btn"
|
|
||||||
role="button"
|
|
||||||
aria-label="Toggle dark mode"
|
|
||||||
>
|
|
||||||
<i class="text-xl fas"></i>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<!-- User Menu -->
|
|
||||||
{% if user.is_authenticated %} {% if has_moderation_access %}
|
|
||||||
<a href="{% url 'moderation:dashboard' %}" class="nav-link">
|
|
||||||
<i class="fas fa-shield-alt"></i>
|
|
||||||
<span>Moderation</span>
|
|
||||||
</a>
|
|
||||||
{% endif %}
|
|
||||||
<div
|
|
||||||
class="relative"
|
|
||||||
x-data="{ open: false }"
|
|
||||||
@click.outside="open = false"
|
|
||||||
>
|
|
||||||
<!-- Profile Picture Button -->
|
|
||||||
{% if user.profile.avatar %}
|
|
||||||
<img
|
|
||||||
@click="open = !open"
|
|
||||||
src="{{ user.profile.avatar.url }}"
|
|
||||||
alt="{{ user.username }}"
|
|
||||||
class="w-8 h-8 transition-transform rounded-full cursor-pointer ring-2 ring-primary/20 hover:scale-105"
|
|
||||||
/>
|
|
||||||
{% else %}
|
|
||||||
<div
|
|
||||||
@click="open = !open"
|
|
||||||
class="flex items-center justify-center w-8 h-8 text-white transition-transform rounded-full cursor-pointer bg-gradient-to-br from-primary to-secondary hover:scale-105"
|
|
||||||
>
|
|
||||||
{{ user.username.0|upper }}
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<!-- Dropdown Menu -->
|
|
||||||
<div
|
|
||||||
x-cloak
|
|
||||||
x-show="open"
|
|
||||||
x-transition:enter="transition ease-out duration-100"
|
|
||||||
x-transition:enter-start="transform opacity-0 scale-95"
|
|
||||||
x-transition:enter-end="transform opacity-100 scale-100"
|
|
||||||
x-transition:leave="transition ease-in duration-75"
|
|
||||||
x-transition:leave-start="transform opacity-100 scale-100"
|
|
||||||
x-transition:leave-end="transform opacity-0 scale-95"
|
|
||||||
class="bg-white dropdown-menu dark:bg-gray-800"
|
|
||||||
>
|
|
||||||
<a href="{% url 'profile' user.username %}" class="menu-item">
|
|
||||||
<i class="w-5 fas fa-user"></i>
|
|
||||||
<span>Profile</span>
|
|
||||||
</a>
|
|
||||||
<a href="{% url 'settings' %}" class="menu-item">
|
|
||||||
<i class="w-5 fas fa-cog"></i>
|
|
||||||
<span>Settings</span>
|
|
||||||
</a>
|
|
||||||
{% if has_admin_access %}
|
|
||||||
<a href="{% url 'admin:index' %}" class="menu-item">
|
|
||||||
<i class="w-5 fas fa-shield-alt"></i>
|
|
||||||
<span>Admin</span>
|
|
||||||
</a>
|
|
||||||
{% endif %}
|
|
||||||
<form method="post" action="{% url 'account_logout' %}">
|
|
||||||
{% csrf_token %}
|
|
||||||
<button type="submit" class="w-full menu-item">
|
|
||||||
<i class="w-5 fas fa-sign-out-alt"></i>
|
|
||||||
<span>Logout</span>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% else %}
|
|
||||||
<!-- Generic Profile Icon for Unauthenticated Users -->
|
|
||||||
<div
|
|
||||||
class="relative"
|
|
||||||
x-data="{ open: false }"
|
|
||||||
@click.outside="open = false"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
@click="open = !open"
|
|
||||||
class="flex items-center justify-center w-8 h-8 text-gray-500 transition-transform rounded-full cursor-pointer hover:text-primary dark:text-gray-400 dark:hover:text-primary hover:scale-105"
|
|
||||||
>
|
|
||||||
<i class="text-xl fas fa-user"></i>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Auth Menu -->
|
|
||||||
<div
|
|
||||||
x-cloak
|
|
||||||
x-show="open"
|
|
||||||
x-transition:enter="transition ease-out duration-100"
|
|
||||||
x-transition:enter-start="transform opacity-0 scale-95"
|
|
||||||
x-transition:enter-end="transform opacity-100 scale-100"
|
|
||||||
x-transition:leave="transition ease-in duration-75"
|
|
||||||
x-transition:leave-start="transform opacity-100 scale-100"
|
|
||||||
x-transition:leave-end="transform opacity-0 scale-95"
|
|
||||||
class="bg-white dropdown-menu dark:bg-gray-800"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
hx-get="{% url 'account_login' %}"
|
|
||||||
hx-target="body"
|
|
||||||
hx-swap="beforeend"
|
|
||||||
class="cursor-pointer menu-item"
|
|
||||||
>
|
|
||||||
<i class="w-5 fas fa-sign-in-alt"></i>
|
|
||||||
<span>Login</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
hx-get="{% url 'account_signup' %}"
|
|
||||||
hx-target="body"
|
|
||||||
hx-swap="beforeend"
|
|
||||||
class="cursor-pointer menu-item"
|
|
||||||
>
|
|
||||||
<i class="w-5 fas fa-user-plus"></i>
|
|
||||||
<span>Register</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<!-- Mobile Menu Button -->
|
|
||||||
<button
|
|
||||||
id="mobileMenuBtn"
|
|
||||||
class="p-2 text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-400"
|
|
||||||
aria-label="Toggle mobile menu"
|
|
||||||
>
|
|
||||||
<i class="text-2xl fas fa-bars"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Mobile Menu -->
|
|
||||||
<div id="mobileMenu">
|
|
||||||
<div class="space-y-4">
|
|
||||||
<!-- Search (Mobile) -->
|
|
||||||
<form action="{% url 'search' %}" method="get" class="mb-4">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
name="q"
|
|
||||||
placeholder="Search parks and rides..."
|
|
||||||
class="form-input"
|
|
||||||
/>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<!-- Flash Messages -->
|
|
||||||
{% if messages %}
|
|
||||||
<div class="fixed top-0 right-0 z-50 p-4 space-y-4">
|
|
||||||
{% for message in messages %}
|
|
||||||
<div
|
|
||||||
class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}"
|
|
||||||
>
|
|
||||||
{{ message }}
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<!-- Main Content -->
|
|
||||||
<main class="container flex-grow px-6 py-8 mx-auto">
|
|
||||||
{% block content %}{% endblock %}
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer
|
|
||||||
class="mt-auto border-t bg-white/90 dark:bg-gray-800/90 backdrop-blur-lg border-gray-200/50 dark:border-gray-700/50"
|
|
||||||
>
|
|
||||||
<div class="container px-6 py-6 mx-auto">
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<div class="text-gray-600 dark:text-gray-400">
|
|
||||||
<p>© {% now "Y" %} ThrillWiki. All rights reserved.</p>
|
|
||||||
</div>
|
|
||||||
<div class="space-x-4">
|
|
||||||
<a
|
|
||||||
href="{% url 'terms' %}"
|
|
||||||
class="text-gray-600 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-primary"
|
|
||||||
>Terms</a
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
href="{% url 'privacy' %}"
|
|
||||||
class="text-gray-600 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-primary"
|
|
||||||
>Privacy</a
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Custom JavaScript -->
|
|
||||||
<script src="{% static 'js/main.js' %}"></script>
|
|
||||||
<script src="{% static 'js/alerts.js' %}"></script>
|
|
||||||
{% block extra_js %}{% endblock %}
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -321,4 +321,4 @@
|
|||||||
<script src="{% static 'js/alerts.js' %}"></script>
|
<script src="{% static 'js/alerts.js' %}"></script>
|
||||||
{% block extra_js %}{% endblock %}
|
{% block extra_js %}{% endblock %}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
{% load ride_tags %}
|
{% load ride_tags %}
|
||||||
|
|
||||||
<!-- Rides Grid -->
|
<!-- Rides Grid -->
|
||||||
<div id="rides-grid" class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||||
{% for ride in rides %}
|
{% for ride in rides %}
|
||||||
<div class="overflow-hidden transition-transform transform bg-white rounded-lg shadow-lg dark:bg-gray-800 hover:-translate-y-1">
|
<div class="overflow-hidden transition-transform transform bg-white rounded-lg shadow-lg dark:bg-gray-800 hover:-translate-y-1">
|
||||||
<div class="aspect-w-16 aspect-h-9">
|
<div class="aspect-w-16 aspect-h-9">
|
||||||
@@ -77,12 +77,14 @@
|
|||||||
|
|
||||||
<!-- Pagination -->
|
<!-- Pagination -->
|
||||||
{% if is_paginated %}
|
{% if is_paginated %}
|
||||||
<div class="flex justify-center mt-6" hx-target="#rides-grid" hx-push-url="true">
|
<div class="flex justify-center mt-6" hx-target="#ride-list-results" hx-push-url="false">
|
||||||
<div class="inline-flex rounded-md shadow-sm" hx-indicator=".loading-indicator">
|
<div class="inline-flex rounded-md shadow-sm">
|
||||||
{% if page_obj.has_previous %}
|
{% if page_obj.has_previous %}
|
||||||
<a hx-get="?page=1{{ request.GET.urlencode }}"
|
<a hx-get="?page=1{{ request.GET.urlencode }}"
|
||||||
|
hx-target="#ride-list-results"
|
||||||
class="px-3 py-2 text-gray-700 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700">« First</a>
|
class="px-3 py-2 text-gray-700 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700">« First</a>
|
||||||
<a hx-get="?page={{ page_obj.previous_page_number }}{{ request.GET.urlencode }}"
|
<a hx-get="?page={{ page_obj.previous_page_number }}{{ request.GET.urlencode }}"
|
||||||
|
hx-target="#ride-list-results"
|
||||||
class="px-3 py-2 text-gray-700 bg-white border-t border-b border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700">Previous</a>
|
class="px-3 py-2 text-gray-700 bg-white border-t border-b border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700">Previous</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
@@ -91,9 +93,11 @@
|
|||||||
</span>
|
</span>
|
||||||
|
|
||||||
{% if page_obj.has_next %}
|
{% if page_obj.has_next %}
|
||||||
<a hx-get="?page={{ page_obj.next_page_number }}{{ request.GET.urlencode }}"
|
<a hx-get="?page={{ page_obj.next_page_number }}{{ request.GET.urlencode }}"
|
||||||
|
hx-target="#ride-list-results"
|
||||||
class="px-3 py-2 text-gray-700 bg-white border-t border-b border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700">Next</a>
|
class="px-3 py-2 text-gray-700 bg-white border-t border-b border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700">Next</a>
|
||||||
<a hx-get="?page={{ page_obj.paginator.num_pages }}{{ request.GET.urlencode }}"
|
<a hx-get="?page={{ page_obj.paginator.num_pages }}{{ request.GET.urlencode }}"
|
||||||
|
hx-target="#ride-list-results"
|
||||||
class="px-3 py-2 text-gray-700 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700">Last »</a>
|
class="px-3 py-2 text-gray-700 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700">Last »</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user