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

Update browse menu styles for Tailwind 4 compatibility

Browse Source 
Replaced Tailwind CSS @apply directives with explicit class definitions in `templates/components/layout/enhanced_header.html` and removed custom CSS rules from `static/css/components.css` to resolve compatibility issues with Tailwind 4.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: c537be14-ffc2-48de-88ef-2bdd9e6ae15a
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/c537be14-ffc2-48de-88ef-2bdd9e6ae15a/pUkRa4J
This commit is contained in:
pac7
2025-09-22 02:07:43 +00:00
parent 09f20c640d
commit 8c85963817
4 changed files with 129 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
templates/components/layout/enhanced_header.html
View File

@@ -45,44 +45,44 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
x-transition:leave-start="transform opacity-100 scale-100"
x-transition:leave-end="transform opacity-0 scale-95"
x-cloak
class="browse-dropdown p-6"
class="absolute left-0 mt-2 w-[600px] p-6 bg-background border rounded-lg shadow-lg z-50"
>
<div class="browse-grid">
<div class="grid grid-cols-2 gap-8">
<!-- Left Column -->
<div class="space-y-4">
<a
href="{% url 'parks:park_list' %}"
class="browse-item"
class="flex items-start gap-3 p-4 rounded-lg hover:bg-accent transition-colors group min-h-[4rem]"
@click="open = false"
>
<i class="fas fa-map-marker-alt browse-icon"></i>
<div class="browse-text">
<h3 class="browse-title">Parks</h3>
<p class="browse-description">Explore theme parks worldwide</p>
<i class="fas fa-map-marker-alt w-5 h-5 mt-1 text-muted-foreground group-hover:text-foreground flex-shrink-0"></i>
<div class="min-w-0 flex-1">
<h3 class="font-semibold text-sm mb-1.5 leading-tight">Parks</h3>
<p class="text-xs text-muted-foreground leading-relaxed break-words">Explore theme parks worldwide</p>
</div>
</a>
<a
href="{% url 'rides:manufacturer_list' %}"
class="browse-item"
class="flex items-start gap-3 p-4 rounded-lg hover:bg-accent transition-colors group min-h-[4rem]"
@click="open = false"
>
<i class="fas fa-wrench browse-icon"></i>
<div class="browse-text">
<h3 class="browse-title">Manufacturers</h3>
<p class="browse-description">Ride and attraction manufacturers</p>
<i class="fas fa-wrench w-5 h-5 mt-1 text-muted-foreground group-hover:text-foreground flex-shrink-0"></i>
<div class="min-w-0 flex-1">
<h3 class="font-semibold text-sm mb-1.5 leading-tight">Manufacturers</h3>
<p class="text-xs text-muted-foreground leading-relaxed break-words">Ride and attraction manufacturers</p>
</div>
</a>
<a
href="{% url 'parks:operator_list' %}"
class="browse-item"
class="flex items-start gap-3 p-4 rounded-lg hover:bg-accent transition-colors group min-h-[4rem]"
@click="open = false"
>
<i class="fas fa-users browse-icon"></i>
<div class="browse-text">
<h3 class="browse-title">Operators</h3>
<p class="browse-description">Theme park operating companies</p>
<i class="fas fa-users w-5 h-5 mt-1 text-muted-foreground group-hover:text-foreground flex-shrink-0"></i>
<div class="min-w-0 flex-1">
<h3 class="font-semibold text-sm mb-1.5 leading-tight">Operators</h3>
<p class="text-xs text-muted-foreground leading-relaxed break-words">Theme park operating companies</p>
</div>
</a>
</div>
@@ -91,37 +91,37 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
<div class="space-y-4">
<a
href="{% url 'rides:global_ride_list' %}"
class="browse-item"
class="flex items-start gap-3 p-4 rounded-lg hover:bg-accent transition-colors group min-h-[4rem]"
@click="open = false"
>
<i class="fas fa-rocket browse-icon"></i>
<div class="browse-text">
<h3 class="browse-title">Rides</h3>
<p class="browse-description">Discover rides and attractions</p>
<i class="fas fa-rocket w-5 h-5 mt-1 text-muted-foreground group-hover:text-foreground flex-shrink-0"></i>
<div class="min-w-0 flex-1">
<h3 class="font-semibold text-sm mb-1.5 leading-tight">Rides</h3>
<p class="text-xs text-muted-foreground leading-relaxed break-words">Discover rides and attractions</p>
</div>
</a>
<a
href="{% url 'rides:designer_list' %}"
class="browse-item"
class="flex items-start gap-3 p-4 rounded-lg hover:bg-accent transition-colors group min-h-[4rem]"
@click="open = false"
>
<i class="fas fa-drafting-compass browse-icon"></i>
<div class="browse-text">
<h3 class="browse-title">Designers</h3>
<p class="browse-description">Ride designers and architects</p>
<i class="fas fa-drafting-compass w-5 h-5 mt-1 text-muted-foreground group-hover:text-foreground flex-shrink-0"></i>
<div class="min-w-0 flex-1">
<h3 class="font-semibold text-sm mb-1.5 leading-tight">Designers</h3>
<p class="text-xs text-muted-foreground leading-relaxed break-words">Ride designers and architects</p>
</div>
</a>
<a
href="#"
class="browse-item"
class="flex items-start gap-3 p-4 rounded-lg hover:bg-accent transition-colors group min-h-[4rem]"
@click="open = false"
>
<i class="fas fa-trophy browse-icon"></i>
<div class="browse-text">
<h3 class="browse-title">Top Lists</h3>
<p class="browse-description">Community rankings and favorites</p>
<i class="fas fa-trophy w-5 h-5 mt-1 text-muted-foreground group-hover:text-foreground flex-shrink-0"></i>
<div class="min-w-0 flex-1">
<h3 class="font-semibold text-sm mb-1.5 leading-tight">Top Lists</h3>
<p class="text-xs text-muted-foreground leading-relaxed break-words">Community rankings and favorites</p>
</div>
</a>
</div>