pacnpal/thrillwiki_django_no_react
1
1
Fork 0
mirror of https://github.com/pacnpal/thrillwiki_django_no_react.git synced 2025-12-20 05:51: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 %}
<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 -->
<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>
<!-- Desktop Right Side -->
<div class="hidden md:flex items-center space-x-4">
<!-- Center Search Bar -->
<div class="hidden md:block justify-self-center w-full max-w-xl lg:max-w-2xl">
<!-- Enhanced Search -->
<div class="relative" x-data="searchComponent">
<div class="relative">
@@ -140,7 +140,7 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
<input
type="search"
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"
@input.debounce.300ms="search()"
hx-get="{% url 'search:search' %}"
@@ -149,7 +149,7 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
hx-include="this"
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>
<!-- 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 -->
</div>
</div>
</div>
<!-- Desktop Right Side -->
<div class="hidden md:flex items-center gap-3 shrink-0">
<!-- Theme Toggle -->
<div x-data="themeToggle">
@@ -237,19 +241,21 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
</div>
</div>
{% else %}
<div class="flex items-center space-x-2">
<button
@click="window.authModal.show('login')"
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"
<div class="flex items-center gap-2">
<c-button
variant="outline"
size="default"
x_on="@click='window.authModal.show(\'login\')'"
>
Sign In
</button>
<button
@click="window.authModal.show('register')"
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"
</c-button>
<c-button
variant="default"
size="default"
x_on="@click='window.authModal.show(\'register\')'"
>
Sign Up
</button>
</c-button>
</div>
{% endif %}
</div>
@@ -308,23 +314,25 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
</div>
</div>
{% else %}
<div class="flex items-center space-x-1">
<div
hx-get="{% url 'account_login' %}"
hx-target="body"
hx-swap="beforeend"
class="cursor-pointer"
<div class="flex items-center gap-1">
<c-button
variant="outline"
size="default"
hx_get="{% url 'account_login' %}"
hx_target="body"
hx_swap="beforeend"
>
<c-button variant="outline" size="default">Login</c-button>
</div>
<div
hx-get="{% url 'account_signup' %}"
hx-target="body"
hx-swap="beforeend"
class="cursor-pointer"
Login
</c-button>
<c-button
variant="default"
size="default"
hx_get="{% url 'account_signup' %}"
hx_target="body"
hx_swap="beforeend"
>
<c-button variant="default" size="default">Join</c-button>
</div>
Join
</c-button>
</div>
{% endif %}