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

Improve mobile search bar functionality and appearance

Browse Source 
Update backend/templates/components/layout/enhanced_header.html to refactor the mobile search bar, changing its layout to a flex container with a more streamlined input field and search button.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 495199c6-aa06-48cd-8c40-9cccf398cfcf
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/495199c6-aa06-48cd-8c40-9cccf398cfcf/A3y85IP
This commit is contained in:
pac7
2025-09-21 14:14:09 +00:00
committed by pacnpal
parent c00d20cc4c
commit a28272c784
2 changed files with 16 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1758463993565.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 713 KiB

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

@@ -428,20 +428,22 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
<!-- Mobile Search Bar --> <!-- Mobile Search Bar -->
<div class="md:hidden border-t bg-background"> <div class="md:hidden border-t bg-background">
<div class="px-4 py-3"> <div class="px-4 py-3">
<div class="relative max-w-full"> <div class="flex items-center gap-2 w-full">
<i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground z-10"></i> <div class="relative flex-1">
<input <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground"></i>
type="search" <input
placeholder="Search parks, rides..." type="search"
class="w-full pl-10 pr-16 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" placeholder="Search parks, rides..."
hx-get="{% url 'search:search' %}" class="w-full pl-10 pr-3 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"
hx-trigger="input changed delay:300ms" hx-get="{% url 'search:search' %}"
hx-target="#mobile-search-results" hx-trigger="input changed delay:300ms"
hx-include="this" hx-target="#mobile-search-results"
name="q" hx-include="this"
/> name="q"
<button type="submit" class="absolute right-2 top-1/2 transform -translate-y-1/2 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-8 px-2"> />
<i class="fas fa-search h-3 w-3"></i> </div>
<button type="submit" class="flex-shrink-0 inline-flex items-center justify-center 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-10 w-10">
<i class="fas fa-search h-4 w-4"></i>
</button> </button>
</div> </div>
<div id="mobile-search-results" class="mt-2"></div> <div id="mobile-search-results" class="mt-2"></div>