mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-24 01:31:11 -05:00
Standardize park and ride cards using Django Cotton components
Introduces reusable Django Cotton components for park and ride cards, standardizing their presentation and enforcing the use of the django-cotton templating system. Updates static CSS for new color variables and gradient stops. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 0bdea3fb-49ea-4863-b501-fa6f5af0cbf0 Replit-Commit-Checkpoint-Type: intermediate_checkpoint
This commit is contained in:
pac7
215
templates/cotton/ride_card.html
Normal file
215
templates/cotton/ride_card.html
Normal file
@@ -0,0 +1,215 @@
|
||||
{% comment %}
|
||||
Ride Card Component - Django Cotton Version
|
||||
|
||||
A comprehensive ride card component with image handling, status badges, and feature displays.
|
||||
Includes all ride statistics, special features, and manufacturer information.
|
||||
|
||||
Usage Examples:
|
||||
|
||||
Basic usage:
|
||||
<c-ride_card ride=ride />
|
||||
|
||||
With custom CSS classes:
|
||||
<c-ride_card
|
||||
ride=ride
|
||||
class="custom-class"
|
||||
/>
|
||||
|
||||
With custom image fallback:
|
||||
<c-ride_card
|
||||
ride=ride
|
||||
fallback_gradient="from-red-500 to-blue-600"
|
||||
/>
|
||||
|
||||
Parameters:
|
||||
- ride: Ride object (required)
|
||||
- class: Additional CSS classes (optional)
|
||||
- fallback_gradient: Custom gradient for image fallback (default: "from-blue-500 to-purple-600")
|
||||
|
||||
Features:
|
||||
- Image handling with gradient fallback backgrounds
|
||||
- Status badges with proper color coding (operating, closed_temporarily, closed_permanently, under_construction)
|
||||
- Ride name with link to detail page
|
||||
- Category and park information display
|
||||
- Statistics grid for height, speed, capacity, duration
|
||||
- Special features badges (inversions, launches, track_type)
|
||||
- Opening date and manufacturer/designer information
|
||||
- Responsive design with hover effects
|
||||
- Modern Tailwind styling and animations
|
||||
{% endcomment %}
|
||||
|
||||
<c-vars
|
||||
ride=""
|
||||
class=""
|
||||
fallback_gradient="from-blue-500 to-purple-600"
|
||||
/>
|
||||
|
||||
{% if ride %}
|
||||
<div class="ride-card bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden hover:shadow-lg transition-all duration-300 {{ class }}">
|
||||
<!-- Ride image -->
|
||||
<div class="relative h-48 bg-gradient-to-br {{ fallback_gradient }}">
|
||||
{% if ride.image %}
|
||||
<img src="{{ ride.image.url }}"
|
||||
alt="{{ ride.name }}"
|
||||
class="w-full h-full object-cover">
|
||||
{% else %}
|
||||
<div class="flex items-center justify-center h-full">
|
||||
<i class="fas fa-rocket text-4xl text-white opacity-50"></i>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Status badge -->
|
||||
<div class="absolute top-3 right-3">
|
||||
{% if ride.operating_status == 'operating' or ride.operating_status == 'OPERATING' %}
|
||||
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
|
||||
<i class="fas fa-play-circle mr-1"></i>
|
||||
Operating
|
||||
</span>
|
||||
{% elif ride.operating_status == 'closed_temporarily' or ride.operating_status == 'CLOSED_TEMP' %}
|
||||
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
|
||||
<i class="fas fa-pause-circle mr-1"></i>
|
||||
Temporarily Closed
|
||||
</span>
|
||||
{% elif ride.operating_status == 'closed_permanently' or ride.operating_status == 'CLOSED_PERM' %}
|
||||
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
|
||||
<i class="fas fa-stop-circle mr-1"></i>
|
||||
Permanently Closed
|
||||
</span>
|
||||
{% elif ride.operating_status == 'under_construction' or ride.operating_status == 'UNDER_CONSTRUCTION' %}
|
||||
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
|
||||
<i class="fas fa-hard-hat mr-1"></i>
|
||||
Under Construction
|
||||
</span>
|
||||
{% elif ride.operating_status == 'sbno' or ride.operating_status == 'SBNO' %}
|
||||
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200">
|
||||
<i class="fas fa-pause-circle mr-1"></i>
|
||||
SBNO
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ride details -->
|
||||
<div class="p-5">
|
||||
<!-- Name and category -->
|
||||
<div class="mb-3">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-1">
|
||||
<a href="{% url 'rides:ride_detail' ride.id %}"
|
||||
class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
|
||||
{{ ride.name }}
|
||||
</a>
|
||||
</h3>
|
||||
<div class="flex items-center text-sm text-gray-600 dark:text-gray-400">
|
||||
<span class="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300 mr-2">
|
||||
{{ ride.category|default:"Ride" }}
|
||||
</span>
|
||||
{% if ride.park %}
|
||||
<span class="flex items-center">
|
||||
<i class="fas fa-map-marker-alt mr-1"></i>
|
||||
{{ ride.park.name }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Key stats grid -->
|
||||
<div class="grid grid-cols-2 gap-3 mb-4">
|
||||
{% if ride.height %}
|
||||
<div class="text-center p-2 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<div class="text-lg font-semibold text-gray-900 dark:text-white">{{ ride.height }}ft</div>
|
||||
<div class="text-xs text-gray-600 dark:text-gray-400">Height</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if ride.rollercoaster_stats.max_speed %}
|
||||
<div class="text-center p-2 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<div class="text-lg font-semibold text-gray-900 dark:text-white">{{ ride.rollercoaster_stats.max_speed }}mph</div>
|
||||
<div class="text-xs text-gray-600 dark:text-gray-400">Top Speed</div>
|
||||
</div>
|
||||
{% elif ride.max_speed %}
|
||||
<div class="text-center p-2 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<div class="text-lg font-semibold text-gray-900 dark:text-white">{{ ride.max_speed }}mph</div>
|
||||
<div class="text-xs text-gray-600 dark:text-gray-400">Max Speed</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if ride.capacity_per_hour %}
|
||||
<div class="text-center p-2 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<div class="text-lg font-semibold text-gray-900 dark:text-white">{{ ride.capacity_per_hour }}</div>
|
||||
<div class="text-xs text-gray-600 dark:text-gray-400">Capacity/Hr</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if ride.duration %}
|
||||
<div class="text-center p-2 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<div class="text-lg font-semibold text-gray-900 dark:text-white">{{ ride.duration }}s</div>
|
||||
<div class="text-xs text-gray-600 dark:text-gray-400">Duration</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Special features -->
|
||||
{% if ride.has_inversions or ride.has_launches or ride.rollercoaster_stats.track_type or ride.track_type %}
|
||||
<div class="flex flex-wrap gap-1 mb-3">
|
||||
{% if ride.has_inversions %}
|
||||
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">
|
||||
<i class="fas fa-sync-alt mr-1"></i>
|
||||
{% if ride.rollercoaster_stats.number_of_inversions %}
|
||||
{{ ride.rollercoaster_stats.number_of_inversions }} Inversion{{ ride.rollercoaster_stats.number_of_inversions|pluralize }}
|
||||
{% else %}
|
||||
Inversions
|
||||
{% endif %}
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
{% if ride.has_launches %}
|
||||
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
|
||||
<i class="fas fa-rocket mr-1"></i>
|
||||
{% if ride.rollercoaster_stats.number_of_launches %}
|
||||
{{ ride.rollercoaster_stats.number_of_launches }} Launch{{ ride.rollercoaster_stats.number_of_launches|pluralize }}
|
||||
{% else %}
|
||||
Launched
|
||||
{% endif %}
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
{% if ride.rollercoaster_stats.track_type %}
|
||||
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
|
||||
{{ ride.rollercoaster_stats.track_type|title }}
|
||||
</span>
|
||||
{% elif ride.track_type %}
|
||||
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
|
||||
{{ ride.track_type|title }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Opening date -->
|
||||
{% if ride.opened_date %}
|
||||
<div class="text-sm text-gray-600 dark:text-gray-400 mb-3">
|
||||
<i class="fas fa-calendar mr-1"></i>
|
||||
Opened {{ ride.opened_date|date:"F j, Y" }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Manufacturer and designer -->
|
||||
{% if ride.manufacturer or ride.designer %}
|
||||
<div class="text-sm text-gray-600 dark:text-gray-400">
|
||||
{% if ride.manufacturer %}
|
||||
<div class="flex items-center mb-1">
|
||||
<i class="fas fa-industry mr-1"></i>
|
||||
<span>{{ ride.manufacturer.name }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if ride.designer and ride.designer != ride.manufacturer %}
|
||||
<div class="flex items-center">
|
||||
<i class="fas fa-drafting-compass mr-1"></i>
|
||||
<span>Designed by {{ ride.designer.name }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
Reference in New Issue
Block a user