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

Align header elements and improve search bar responsiveness

Browse Source 
Update the header layout to use flexbox for better alignment and adjust the search bar to be responsive across different screen sizes.

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/bWnWnhe
This commit is contained in:
pac7
2025-09-21 17:51:37 +00:00
committed by pacnpal
parent 62900d47bd
commit 06bd7a8bdf
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,16 +6,16 @@ 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="grid grid-cols-[auto_1fr_auto] items-center h-14 px-4 gap-4">
<div class="flex items-center h-14 px-4 gap-3 md:gap-4">
<!-- Logo and Browse Menu -->
<div class="flex items-center space-x-6">
<div class="flex items-center gap-4 shrink-0">
<!-- Logo -->
<a href="{% url 'home' %}" class="flex items-center space-x-2 flex-shrink-0">
<div class="w-6 h-6 bg-purple-600 rounded flex items-center justify-center">
<span class="text-white text-xs font-bold">TW</span>
</div>
<span class="font-bold text-lg">ThrillWiki</span>
<span class="font-bold text-lg whitespace-nowrap">ThrillWiki</span>
</a>
<!-- Browse Menu (Desktop) -->
@@ -132,15 +132,15 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
</div>
<!-- Center Search Bar -->
<div class="hidden md:block justify-self-center w-full max-w-xl lg:max-w-2xl">
<div class="hidden md:flex flex-1 min-w-0 justify-center">
<!-- Enhanced Search -->
<div class="relative" x-data="searchComponent">
<div class="relative w-full min-w-0 max-w-xl lg:max-w-2xl" 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 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"
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"
x-model="query"
@input.debounce.300ms="search()"
hx-get="{% url 'search:search' %}"