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

Improve header layout and search bar functionality

Browse Source 
Adjust header grid layout, center the search bar, increase its size, and update button sizes to resolve overlapping issues and improve usability.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: dcfff319-6e91-4220-98a9-8295b87755b7
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/dcfff319-6e91-4220-98a9-8295b87755b7/m0pCFEo
This commit is contained in:
pac7
2025-09-21 17:47:45 +00:00
committed by pacnpal
parent a043163596
commit 62900d47bd
2 changed files with 37 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/targeted_element_1758476700613.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

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

@@ -6,7 +6,7 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
{% load static %} {% load static %}
<header class="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"> <header class="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
<div class="flex h-14 items-center justify-between px-4 max-w-full"> <div class="grid grid-cols-[auto_1fr_auto] items-center h-14 px-4 gap-4">
<!-- Logo and Browse Menu --> <!-- Logo and Browse Menu -->
<div class="flex items-center space-x-6"> <div class="flex items-center space-x-6">
@@ -131,8 +131,8 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
</div> </div>
</div> </div>
<!-- Desktop Right Side --> <!-- Center Search Bar -->
<div class="hidden md:flex items-center space-x-4"> <div class="hidden md:block justify-self-center w-full max-w-xl lg:max-w-2xl">
<!-- Enhanced Search --> <!-- Enhanced Search -->
<div class="relative" x-data="searchComponent"> <div class="relative" x-data="searchComponent">
<div class="relative"> <div class="relative">
@@ -140,7 +140,7 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
<input <input
type="search" type="search"
placeholder="Search parks, rides..." placeholder="Search parks, rides..."
class="w-[300px] pl-10 pr-20 h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" class="w-full md:max-w-xl lg:max-w-2xl pl-10 pr-14 h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
x-model="query" x-model="query"
@input.debounce.300ms="search()" @input.debounce.300ms="search()"
hx-get="{% url 'search:search' %}" hx-get="{% url 'search:search' %}"
@@ -149,7 +149,7 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
hx-include="this" hx-include="this"
name="q" name="q"
/> />
<c-button variant="default" size="sm" class="absolute right-1 top-1/2 transform -translate-y-1/2">Search</c-button> <c-button variant="default" size="default" class="absolute right-2 top-1/2 transform -translate-y-1/2">Search</c-button>
</div> </div>
<!-- Search Results Dropdown --> <!-- Search Results Dropdown -->
@@ -163,6 +163,10 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
<!-- Search results will be populated by HTMX --> <!-- Search results will be populated by HTMX -->
</div> </div>
</div> </div>
</div>
<!-- Desktop Right Side -->
<div class="hidden md:flex items-center gap-3 shrink-0">
<!-- Theme Toggle --> <!-- Theme Toggle -->
<div x-data="themeToggle"> <div x-data="themeToggle">
@@ -237,19 +241,21 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
</div> </div>
</div> </div>
{% else %} {% else %}
<div class="flex items-center space-x-2"> <div class="flex items-center gap-2">
<button <c-button
@click="window.authModal.show('login')" variant="outline"
class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3" size="default"
x_on="@click='window.authModal.show(\'login\')'"
> >
Sign In Sign In
</button> </c-button>
<button <c-button
@click="window.authModal.show('register')" variant="default"
class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-9 rounded-md px-3" size="default"
x_on="@click='window.authModal.show(\'register\')'"
> >
Sign Up Sign Up
</button> </c-button>
</div> </div>
{% endif %} {% endif %}
</div> </div>
@@ -308,23 +314,25 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
</div> </div>
</div> </div>
{% else %} {% else %}
<div class="flex items-center space-x-1"> <div class="flex items-center gap-1">
<div <c-button
hx-get="{% url 'account_login' %}" variant="outline"
hx-target="body" size="default"
hx-swap="beforeend" hx_get="{% url 'account_login' %}"
class="cursor-pointer" hx_target="body"
hx_swap="beforeend"
> >
<c-button variant="outline" size="default">Login</c-button> Login
</div> </c-button>
<div <c-button
hx-get="{% url 'account_signup' %}" variant="default"
hx-target="body" size="default"
hx-swap="beforeend" hx_get="{% url 'account_signup' %}"
class="cursor-pointer" hx_target="body"
hx_swap="beforeend"
> >
<c-button variant="default" size="default">Join</c-button> Join
</div> </c-button>
</div> </div>
{% endif %} {% endif %}