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

Improve the appearance and functionality of mobile authentication and search buttons

Browse Source 
Redesign mobile view authentication buttons and header search bar in enhanced_header.html, addressing display issues and improving user experience with theme-agnostic styling.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: eff39de1-3afa-446d-a965-acaf61837fc7
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/eff39de1-3afa-446d-a965-acaf61837fc7/JMGFpIL
This commit is contained in:
pac7
2025-09-21 14:02:50 +00:00
committed by pacnpal
parent 3ee3138055
commit cc914a1ca3
1 changed files with 39 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -388,29 +388,31 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
<!-- Mobile Authentication -->
{% if not user.is_authenticated %}
<div>
<h3 class="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-3">
ACCOUNT
<div class="bg-slate-50 dark:bg-slate-800 rounded-lg p-4 border border-slate-200 dark:border-slate-700">
<h3 class="text-sm font-medium text-slate-900 dark:text-slate-100 mb-3">
Get Started
</h3>
<div class="space-y-2">
<div
<div class="space-y-3">
<button
hx-get="{% url 'account_login' %}"
hx-target="body"
hx-swap="beforeend"
class="cursor-pointer"
@click="open = false"
class="w-full px-4 py-3 bg-white dark:bg-slate-700 border-2 border-slate-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-slate-100 font-medium hover:bg-slate-50 dark:hover:bg-slate-600 hover:border-slate-400 dark:hover:border-slate-500 transition-all duration-200 text-center"
>
<c-ui.button variant="outline" size="default" text="Login" button_classes="w-full" />
</div>
<div
<i class="fas fa-sign-in-alt mr-2"></i>
Sign In
</button>
<button
hx-get="{% url 'account_signup' %}"
hx-target="body"
hx-swap="beforeend"
class="cursor-pointer"
@click="open = false"
class="w-full px-4 py-3 bg-blue-600 hover:bg-blue-700 border-2 border-blue-600 hover:border-blue-700 rounded-lg text-white font-medium transition-all duration-200 text-center"
>
<c-ui.button variant="default" size="default" text="Join ThrillWiki" button_classes="w-full" />
</div>
<i class="fas fa-user-plus mr-2"></i>
Join ThrillWiki
</button>
</div>
</div>
{% endif %}
@@ -456,23 +458,32 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
</div>
<!-- Mobile Search Bar -->
<div class="md:hidden border-t bg-background">
<div class="px-4 py-3">
<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 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"
hx-get="{% url 'search:search' %}"
hx-trigger="input changed delay:300ms"
hx-target="#mobile-search-results"
hx-include="this"
name="q"
/>
<c-ui.button variant="default" size="sm" text="Search" button_classes="absolute right-1 top-1/2 transform -translate-y-1/2" />
<div class="md:hidden border-t border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900">
<div class="px-4 py-4">
<div class="bg-slate-50 dark:bg-slate-800 rounded-lg p-3 border border-slate-200 dark:border-slate-700">
<div class="flex gap-2">
<div class="relative flex-1">
<i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-slate-500 dark:text-slate-400"></i>
<input
type="search"
placeholder="Search parks, rides..."
class="w-full pl-10 pr-3 py-3 bg-white dark:bg-slate-700 border border-slate-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-slate-100 placeholder-slate-500 dark:placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
hx-get="{% url 'search:search' %}"
hx-trigger="input changed delay:300ms"
hx-target="#mobile-search-results"
hx-include="this"
name="q"
/>
</div>
<button
type="submit"
class="px-4 py-3 bg-blue-600 hover:bg-blue-700 border border-blue-600 hover:border-blue-700 rounded-lg text-white font-medium transition-all duration-200 flex-shrink-0"
>
<i class="fas fa-search"></i>
</button>
</div>
</div>
<div id="mobile-search-results" class="mt-2"></div>
<div id="mobile-search-results" class="mt-3"></div>
</div>
</div>
</header>