pacnpal/thrillwiki_django_no_react
1
1
Fork 0
mirror of https://github.com/pacnpal/thrillwiki_django_no_react.git synced 2025-12-20 14:11:09 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: Implement UI components for Django templates

Browse Source 
- Added Button component with various styles and sizes.
- Introduced Card component for displaying content with titles and descriptions.
- Created Input component for form fields with support for various attributes.
- Developed Toast Notification Container for displaying alerts and messages.
- Designed pages for listing designers and operators with pagination and responsive layout.
- Documented frontend migration from React to HTMX + Alpine.js, detailing component usage and integration.
This commit is contained in:
pacnpal
2025-09-19 19:04:37 -04:00
parent 209b433577
commit 42a3dc7637
27 changed files with 3855 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
backend/templates/operators/operator_list.html Normal file
View File

@@ -0,0 +1,92 @@
{% extends "base/base.html" %}
{% load static %}
{% block title %}Park Operators - ThrillWiki{% endblock %}
{% block content %}
<div class="container mx-auto px-4 py-8">
<div class="mb-8">
<h1 class="text-3xl font-bold mb-2">Park Operators</h1>
<p class="text-muted-foreground">
Explore the companies that own and operate theme parks around the world.
{{ total_operators }} operator{{ total_operators|pluralize }} found.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{% for operator in operators %}
<div class="bg-card rounded-lg border p-6 hover:shadow-md transition-shadow">
<div class="flex items-start justify-between mb-4">
<div>
<h3 class="text-lg font-semibold mb-1">{{ operator.name }}</h3>
{% if operator.founded_date %}
<p class="text-sm text-muted-foreground">Founded {{ operator.founded_date.year }}</p>
{% endif %}
</div>
<div class="text-right">
<span class="inline-flex items-center rounded-full bg-primary/10 px-2 py-1 text-xs font-medium text-primary">
{{ operator.park_count }} park{{ operator.park_count|pluralize }}
</span>
</div>
</div>
{% if operator.description %}
<p class="text-sm text-muted-foreground mb-4 line-clamp-3">
{{ operator.description|truncatewords:20 }}
</p>
{% endif %}
<div class="flex items-center justify-between">
{% if operator.website %}
<a href="{{ operator.website }}" target="_blank" rel="noopener noreferrer"
class="text-sm text-primary hover:underline">
<i class="fas fa-external-link-alt mr-1"></i>
Website
</a>
{% else %}
<span></span>
{% endif %}
<a href="#" class="text-sm text-primary hover:underline">
View Parks →
</a>
</div>
</div>
{% empty %}
<div class="col-span-full text-center py-12">
<i class="fas fa-building text-4xl text-muted-foreground mb-4"></i>
<h3 class="text-lg font-semibold mb-2">No operators found</h3>
<p class="text-muted-foreground">There are no operators to display at this time.</p>
</div>
{% endfor %}
</div>
{% if is_paginated %}
<div class="mt-8 flex justify-center">
<nav class="flex items-center space-x-2">
{% if page_obj.has_previous %}
<a href="?page=1" class="px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground">
First
</a>
<a href="?page={{ page_obj.previous_page_number }}" class="px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground">
Previous
</a>
{% endif %}
<span class="px-3 py-2 text-sm font-medium">
Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
</span>
{% if page_obj.has_next %}
<a href="?page={{ page_obj.next_page_number }}" class="px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground">
Next
</a>
<a href="?page={{ page_obj.paginator.num_pages }}" class="px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground">
Last
</a>
{% endif %}
</nav>
</div>
{% endif %}
</div>
{% endblock %}