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

Adjust header layout to place search between other navigation elements

Browse Source 
Repositions the search bar within the header to prevent overlap with other buttons, specifically placing it between the browse menu and sign-in options in the enhanced header component.

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/ol0seac
This commit is contained in:
pac7
2025-09-21 17:53:03 +00:00
committed by pacnpal
parent 06bd7a8bdf
commit ac344aea92
2 changed files with 4 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/targeted_element_1758477128342.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 112 B

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

@@ -131,16 +131,16 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
</div>
</div>
<!-- Center Search Bar -->
<div class="hidden md:flex flex-1 min-w-0 justify-center">
<!-- Desktop Right Side -->
<div class="hidden md:flex items-center gap-3 shrink-0">
<!-- Enhanced Search -->
<div class="relative w-full min-w-0 max-w-xl lg:max-w-2xl" x-data="searchComponent">
<div class="relative" x-data="searchComponent">
<div class="relative">
<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
type="search"
placeholder="Search parks, rides..."
class="w-full min-w-0 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"
class="w-64 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"
@input.debounce.300ms="search()"
hx-get="{% url 'search:search' %}"
@@ -163,10 +163,6 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
<!-- Search results will be populated by HTMX -->
</div>
</div>
</div>
<!-- Desktop Right Side -->
<div class="hidden md:flex items-center gap-3 shrink-0">
<!-- Theme Toggle -->
<div x-data="themeToggle">