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 and enhance user authentication display

Browse Source 
Modify backend/templates/components/layout/enhanced_header.html to refine header spacing, integrate theme toggle directly into the button element, and update user icon display logic, including handling unauthenticated users with a modal trigger.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d2cd90dd-df0e-4a8a-b6ca-d9a6c16df62b
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/d2cd90dd-df0e-4a8a-b6ca-d9a6c16df62b/UUJxFqQ
This commit is contained in:
pac7
2025-09-21 18:07:05 +00:00
committed by pacnpal
parent 081b5b7605
commit 562126a3a1
2 changed files with 39 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/SCR-20250921-moio_1758477961641.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

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

@@ -166,36 +166,41 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
</div> </div>
<!-- Desktop Right Side --> <!-- Desktop Right Side -->
<div class="hidden md:flex items-center gap-3 shrink-0"> <div class="hidden md:flex items-center gap-4 shrink-0">
<!-- Theme Toggle --> <!-- Theme Toggle -->
<div x-data="themeToggle">
<button <button
x-data="themeToggle"
@click="toggleTheme()" @click="toggleTheme()"
class="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 hover:bg-accent hover:text-accent-foreground h-10 w-10" class="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 hover:bg-accent hover:text-accent-foreground h-10 w-10"
> >
<i class="fas fa-sun h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"></i> <i class="fas fa-sun h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"></i>
<i class="fas fa-moon absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"></i> <i class="fas fa-moon absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"></i>
<span class="sr-only">Toggle theme</span> <span class="sr-only">Toggle theme</span>
</button> </button>
</div>
<!-- User Menu --> <!-- User Icon -->
<button
{% if user.is_authenticated %}
x-data="{ open: false }"
@click="open = !open"
@click.outside="open = false"
{% else %}
@click="window.authModal.show('login')"
{% endif %}
class="relative 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 hover:bg-accent hover:text-accent-foreground h-10 w-10"
>
{% if user.is_authenticated %} {% if user.is_authenticated %}
<div class="relative" x-data="{ open: false }" @click.outside="open = false">
<button @click="open = !open" class="relative h-8 w-8 rounded-full">
{% if user.profile.avatar %} {% if user.profile.avatar %}
<img <img
src="{{ user.profile.avatar.url }}" src="{{ user.profile.avatar.url }}"
alt="{{ user.get_full_name|default:user.username }}" alt="{{ user.get_full_name|default:user.username }}"
class="h-8 w-8 rounded-full object-cover" class="h-6 w-6 rounded-full object-cover"
/> />
{% else %} {% else %}
<div class="h-8 w-8 rounded-full bg-primary flex items-center justify-center text-primary-foreground text-sm font-medium"> <div class="h-6 w-6 rounded-full bg-primary flex items-center justify-center text-primary-foreground text-xs font-medium">
{{ user.get_full_name.0|default:user.username.0|upper }} {{ user.get_full_name.0|default:user.username.0|upper }}
</div> </div>
{% endif %} {% endif %}
</button>
<!-- User Dropdown --> <!-- User Dropdown -->
<div <div
@@ -207,7 +212,7 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-start="transform opacity-100 scale-100"
x-transition:leave-end="transform opacity-0 scale-95" x-transition:leave-end="transform opacity-0 scale-95"
x-cloak x-cloak
class="absolute right-0 mt-2 w-56 bg-background border rounded-md shadow-lg z-50" class="absolute right-0 top-full mt-2 w-56 bg-background border rounded-md shadow-lg z-50"
> >
<div class="flex items-center justify-start gap-2 p-2"> <div class="flex items-center justify-start gap-2 p-2">
<div class="flex flex-col space-y-1 leading-none"> <div class="flex flex-col space-y-1 leading-none">
@@ -239,25 +244,10 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
</button> </button>
</form> </form>
</div> </div>
</div>
{% else %} {% else %}
<div class="flex items-center gap-2"> <i class="fas fa-user h-5 w-5"></i>
<c-button
variant="outline"
size="default"
x_on="@click='window.authModal.show(\'login\')'"
>
Sign In
</c-button>
<c-button
variant="default"
size="default"
x_on="@click='window.authModal.show(\'register\')'"
>
Sign Up
</c-button>
</div>
{% endif %} {% endif %}
</button>
</div> </div>
<!-- Mobile Menu --> <!-- Mobile Menu -->