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

Improve park display by adding default values and fixing UI elements

Browse Source 
Remove unused gradient and background utility classes from Tailwind CSS. Update featured_parks.html to handle missing park images and ensure a slug is always present for park links.

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
2025-09-22 14:43:07 +00:00
parent 30997cb615
commit 2cad07c198
2 changed files with 3 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
static/css/tailwind.css
View File

@@ -1670,13 +1670,6 @@
}
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-primary\/20 {
--tw-gradient-from: color-mix(in srgb, #4f46e5 20%, transparent);
@supports (color: color-mix(in lab, red, red)) {
--tw-gradient-from: color-mix(in oklab, var(--color-primary) 20%, transparent);
}
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-purple-50 {
--tw-gradient-from: var(--color-purple-50);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -1778,13 +1771,6 @@
}
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-secondary\/20 {
--tw-gradient-to: color-mix(in srgb, #e11d48 20%, transparent);
@supports (color: color-mix(in lab, red, red)) {
--tw-gradient-to: color-mix(in oklab, var(--color-secondary) 20%, transparent);
}
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-transparent {
--tw-gradient-to: transparent;
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -3872,14 +3858,6 @@
background-color: var(--color-gray-900);
}
}
.dark\:bg-gray-900\/30 {
@media (prefers-color-scheme: dark) {
background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 30%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-gray-900) 30%, transparent);
}
}
}
.dark\:bg-gray-900\/80 {
@media (prefers-color-scheme: dark) {
background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 80%, transparent);
@@ -3975,14 +3953,6 @@
}
}
}
.dark\:bg-red-900\/30 {
@media (prefers-color-scheme: dark) {
background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 30%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-red-900) 30%, transparent);
}
}
}
.dark\:bg-red-900\/40 {
@media (prefers-color-scheme: dark) {
background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 40%, transparent);

88
templates/partials/homepage/featured_parks.html
View File

@@ -1,90 +1,8 @@
{% load cotton %}
<!-- Featured Parks Grid -->
{% for park in featured_parks %}
<div class="group relative overflow-hidden rounded-xl bg-background border border-border/50 shadow-sm hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1">
<!-- Park Image -->
<div class="aspect-video relative overflow-hidden">
{% if park.card_image %}
<img src="{{ park.card_image.url }}"
alt="{{ park.name }}"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
loading="lazy">
{% else %}
<div class="w-full h-full bg-gradient-to-br from-primary/20 to-secondary/20 flex items-center justify-center">
<svg class="w-16 h-16 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
</svg>
</div>
{% endif %}
<!-- Overlay -->
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<!-- Quick Stats Overlay -->
<div class="absolute top-4 right-4 flex gap-2">
{% if park.average_rating %}
<div class="bg-background/90 backdrop-blur-sm px-2 py-1 rounded-full text-xs font-medium flex items-center gap-1">
<svg class="w-3 h-3 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
{{ park.average_rating|floatformat:1 }}
</div>
{% endif %}
{% if park.ride_count %}
<div class="bg-background/90 backdrop-blur-sm px-2 py-1 rounded-full text-xs font-medium">
{{ park.ride_count }} rides
</div>
{% endif %}
</div>
</div>
<!-- Park Info -->
<div class="p-6">
<h3 class="text-xl font-bold mb-2 group-hover:text-primary transition-colors">
<a href="/parks/{{ park.slug }}/" class="stretched-link">
{{ park.name }}
</a>
</h3>
<p class="text-muted-foreground text-sm mb-4 line-clamp-2">
{{ park.description|truncatewords:20 }}
</p>
<!-- Park Details -->
<div class="flex items-center justify-between text-sm">
<div class="flex items-center gap-4">
{% if park.location %}
<div class="flex items-center gap-1 text-muted-foreground">
<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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
{{ park.location.city }}, {{ park.location.country }}
</div>
{% endif %}
{% if park.opening_year %}
<div class="flex items-center gap-1 text-muted-foreground">
<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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
{{ park.opening_year }}
</div>
{% endif %}
</div>
<!-- Status Badge -->
{% if park.status %}
<span class="px-2 py-1 rounded-full text-xs font-medium
{% if park.status == 'operating' %}bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400
{% elif park.status == 'closed' %}bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400
{% elif park.status == 'seasonal' %}bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400
{% else %}bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-400{% endif %}">
{{ park.get_status_display }}
</span>
{% endif %}
</div>
</div>
</div>
<c-park_card park=park view_mode="grid" class="h-full" />
{% empty %}
<div class="col-span-full text-center py-12">
<svg class="w-16 h-16 text-muted-foreground mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">