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:31:07 -05:00
Code Issues Packages Projects Releases Wiki Activity

Update components to use new UI elements and theme colors

Browse Source 
Refactors various HTML components to use new UI button and input elements, and updates styling to integrate with the existing theme, including dark mode.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: eff39de1-3afa-446d-a965-acaf61837fc7
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/eff39de1-3afa-446d-a965-acaf61837fc7/tFmNsk5
This commit is contained in:
pac7
2025-09-21 14:06:20 +00:00
committed by pacnpal
parent cc914a1ca3
commit fc605715d3
1 changed files with 39 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
backend/templates/components/layout/enhanced_header.html
View File

@@ -388,31 +388,33 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
<!-- Mobile Authentication --> <!-- Mobile Authentication -->
{% if not user.is_authenticated %} {% if not user.is_authenticated %}
<div class="bg-slate-50 dark:bg-slate-800 rounded-lg p-4 border border-slate-200 dark:border-slate-700"> <div class="bg-accent/30 rounded-lg p-4 border border-border">
<h3 class="text-sm font-medium text-slate-900 dark:text-slate-100 mb-3"> <h3 class="text-sm font-medium text-foreground mb-3">
Get Started Get Started
</h3> </h3>
<div class="space-y-3"> <div class="space-y-3">
<button <c-ui.button
hx-get="{% url 'account_login' %}" variant="outline"
hx-target="body" size="lg"
hx-swap="beforeend" text="Sign In"
@click="open = false" icon_left="fas fa-sign-in-alt"
class="w-full px-4 py-3 bg-white dark:bg-slate-700 border-2 border-slate-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-slate-100 font-medium hover:bg-slate-50 dark:hover:bg-slate-600 hover:border-slate-400 dark:hover:border-slate-500 transition-all duration-200 text-center" button_classes="w-full justify-center"
> hx_get="{% url 'account_login' %}"
<i class="fas fa-sign-in-alt mr-2"></i> hx_target="body"
Sign In hx_swap="beforeend"
</button> x_on="@click='open = false'"
<button />
hx-get="{% url 'account_signup' %}" <c-ui.button
hx-target="body" variant="default"
hx-swap="beforeend" size="lg"
@click="open = false" text="Join ThrillWiki"
class="w-full px-4 py-3 bg-blue-600 hover:bg-blue-700 border-2 border-blue-600 hover:border-blue-700 rounded-lg text-white font-medium transition-all duration-200 text-center" icon_left="fas fa-user-plus"
> button_classes="w-full justify-center"
<i class="fas fa-user-plus mr-2"></i> hx_get="{% url 'account_signup' %}"
Join ThrillWiki hx_target="body"
</button> hx_swap="beforeend"
x_on="@click='open = false'"
/>
</div> </div>
</div> </div>
{% endif %} {% endif %}
@@ -458,29 +460,30 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
</div> </div>
<!-- Mobile Search Bar --> <!-- Mobile Search Bar -->
<div class="md:hidden border-t border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900"> <div class="md:hidden border-t border-border bg-background">
<div class="px-4 py-4"> <div class="px-4 py-4">
<div class="bg-slate-50 dark:bg-slate-800 rounded-lg p-3 border border-slate-200 dark:border-slate-700"> <div class="bg-accent/30 rounded-lg p-3 border border-border">
<div class="flex gap-2"> <div class="flex gap-2">
<div class="relative flex-1"> <div class="relative flex-1">
<i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-slate-500 dark:text-slate-400"></i> <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground"></i>
<input <c-ui.input
type="search" type="search"
placeholder="Search parks, rides..." placeholder="Search parks, rides..."
class="w-full pl-10 pr-3 py-3 bg-white dark:bg-slate-700 border border-slate-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-slate-100 placeholder-slate-500 dark:placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" input_classes="pl-10 flex-1"
hx-get="{% url 'search:search' %}" hx_get="{% url 'search:search' %}"
hx-trigger="input changed delay:300ms" hx_trigger="input changed delay:300ms"
hx-target="#mobile-search-results" hx_target="#mobile-search-results"
hx-include="this" hx_include="this"
name="q" name="q"
/> />
</div> </div>
<button <c-ui.button
variant="default"
size="default"
icon_left="fas fa-search"
button_classes="px-4 flex-shrink-0"
type="submit" type="submit"
class="px-4 py-3 bg-blue-600 hover:bg-blue-700 border border-blue-600 hover:border-blue-700 rounded-lg text-white font-medium transition-all duration-200 flex-shrink-0" />
>
<i class="fas fa-search"></i>
</button>
</div> </div>
</div> </div>
<div id="mobile-search-results" class="mt-3"></div> <div id="mobile-search-results" class="mt-3"></div>