optimizations
This commit is contained in:
@@ -1,11 +1,11 @@
|
||||
<header class="fixed inset-x-0 top-0 z-50 h-16 bg-black/40 backdrop-blur border-b border-white/10">
|
||||
<div class="mx-auto w-full h-full px-4 flex items-center gap-3">
|
||||
<div class="mx-auto w-full h-full px-3 sm:px-4 flex items-center gap-2 sm:gap-3">
|
||||
|
||||
<!-- Mobile hamburger -->
|
||||
<button id="btnSidebar"
|
||||
type="button"
|
||||
data-mobile-toggle
|
||||
class="md:hidden inline-flex items-center justify-center w-10 h-10 rounded-lg hover:bg-white/5"
|
||||
class="lg:hidden inline-flex items-center justify-center w-10 h-10 rounded-lg hover:bg-white/5"
|
||||
aria-label="Open menu"
|
||||
aria-controls="mobileMenu"
|
||||
aria-expanded="false">
|
||||
@@ -19,7 +19,7 @@
|
||||
|
||||
<!-- Logo -->
|
||||
<a href="/" class="flex items-center gap-2 pr-2 shrink-0">
|
||||
<img src="/gfx/sb_logo.png" alt="Skinbase.org" class="h-8 w-auto rounded-sm shadow-sm object-contain">
|
||||
<img src="/gfx/sb_logo.webp" alt="Skinbase.org" width="289" height="100" class="h-9 w-auto rounded-sm shadow-sm object-contain">
|
||||
<span class="sr-only">Skinbase.org</span>
|
||||
</a>
|
||||
|
||||
@@ -169,36 +169,21 @@
|
||||
</nav>
|
||||
|
||||
<!-- Search: collapsed pill → expands on click -->
|
||||
<div class="flex-1 flex items-center justify-center px-2 min-w-0">
|
||||
<div class="flex-1 flex items-center justify-center px-1 sm:px-2 min-w-0">
|
||||
<div id="topbar-search-root" class="w-full flex justify-center"></div>
|
||||
</div>
|
||||
|
||||
@auth
|
||||
<!-- Upload CTA -->
|
||||
<a href="{{ route('upload') }}"
|
||||
class="hidden md:inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-sky-600 hover:bg-sky-500 text-white text-sm font-medium transition-colors shrink-0">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 5v14M5 12h14" />
|
||||
</svg>
|
||||
Upload
|
||||
</a>
|
||||
|
||||
<!-- Notification icons -->
|
||||
<div class="hidden md:flex items-center gap-1 text-soft">
|
||||
<a href="{{ route('discover.for-you') }}"
|
||||
class="relative w-10 h-10 inline-flex items-center justify-center rounded-lg transition-colors {{ request()->routeIs('discover.for-you') ? 'bg-yellow-500/15 text-yellow-300' : 'hover:bg-white/5' }}"
|
||||
title="For You">
|
||||
<i class="fa-solid fa-wand-magic-sparkles w-5 h-5 text-[1.1rem] {{ request()->routeIs('discover.for-you') ? 'text-yellow-300' : 'text-sb-muted' }}"></i>
|
||||
</a>
|
||||
|
||||
<div class="hidden md:flex items-center gap-0.5 lg:gap-1 text-soft shrink-0">
|
||||
<a href="{{ route('dashboard.favorites') }}"
|
||||
class="relative w-10 h-10 inline-flex items-center justify-center rounded-lg hover:bg-white/5"
|
||||
class="relative inline-flex w-9 h-9 lg:w-10 lg:h-10 items-center justify-center rounded-lg hover:bg-white/5"
|
||||
title="Favourites">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<svg class="w-[18px] h-[18px] lg:w-5 lg:h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 21s-7-4.4-9-9a5.5 5.5 0 0 1 9-6 5.5 5.5 0 0 1 9 6c-2 4.6-9 9-9 9z" />
|
||||
</svg>
|
||||
@if(($favCount ?? 0) > 0)
|
||||
<span class="absolute -bottom-1 right-0 text-[11px] tabular-nums px-1.5 py-0.5 rounded bg-red-700/70 text-white border border-sb-line">{{ $favCount }}</span>
|
||||
<span class="absolute -bottom-1 right-0 text-[10px] lg:text-[11px] tabular-nums px-1 py-0 lg:px-1.5 lg:py-0.5 rounded bg-red-700/70 text-white border border-sb-line">{{ $favCount }}</span>
|
||||
@endif
|
||||
</a>
|
||||
|
||||
@@ -216,7 +201,7 @@
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<div class="relative">
|
||||
<button class="flex items-center gap-2 pl-2 pr-3 h-10 rounded-lg hover:bg-white/5 transition-colors" data-dd="user">
|
||||
<button class="flex items-center gap-2 pl-1.5 sm:pl-2 pr-2 sm:pr-3 h-10 rounded-lg hover:bg-white/5 transition-colors shrink-0" data-dd="user">
|
||||
@php
|
||||
$toolbarUserId = (int) ($userId ?? Auth::id() ?? 0);
|
||||
$toolbarAvatarHash = $avatarHash ?? optional(Auth::user())->profile->avatar_hash ?? null;
|
||||
@@ -224,7 +209,7 @@
|
||||
<img class="w-7 h-7 rounded-full object-cover ring-1 ring-white/10"
|
||||
src="{{ \App\Support\AvatarUrl::forUser($toolbarUserId, $toolbarAvatarHash, 64) }}"
|
||||
alt="{{ $displayName ?? 'User' }}" />
|
||||
<span class="hidden xl:inline text-sm text-white/90">{{ $displayName ?? 'User' }}</span>
|
||||
<span class="hidden min-[900px]:inline-block max-w-[8rem] truncate text-sm text-white/90">{{ $displayName ?? 'User' }}</span>
|
||||
<svg class="w-4 h-4 opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M6 9l6 6 6-6" />
|
||||
</svg>
|
||||
@@ -291,7 +276,7 @@
|
||||
Settings
|
||||
</a>
|
||||
|
||||
@if(in_array(strtolower((string) (Auth::user()->role ?? '')), ['admin', 'moderator'], true))
|
||||
@if(in_array(strtolower((string) (Auth::user()->role ?? '')), ['admin', 'moderator'], true) && \Illuminate\Support\Facades\Route::has('admin.usernames.moderation'))
|
||||
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="{{ route('admin.usernames.moderation') }}">
|
||||
<span class="w-6 h-6 rounded-md bg-white/5 inline-flex items-center justify-center shrink-0"><i class="fa-solid fa-user-shield text-xs text-sb-muted"></i></span>
|
||||
Moderation
|
||||
@@ -310,7 +295,7 @@
|
||||
</div>
|
||||
@else
|
||||
<!-- Guest auth toolbar: desktop CTA + secondary sign-in. -->
|
||||
<div class="hidden md:flex items-center gap-4">
|
||||
<div class="hidden lg:flex items-center gap-4 shrink-0">
|
||||
<a href="/register"
|
||||
aria-label="Join Skinbase"
|
||||
class="inline-flex items-center px-4 py-2 rounded-lg bg-gradient-to-r from-indigo-500 to-cyan-500 text-white text-sm font-semibold shadow-sm transition duration-200 ease-out hover:-translate-y-[1px] hover:shadow-[0_0_15px_rgba(99,102,241,0.7)] focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-black/40">
|
||||
@@ -324,7 +309,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Guest auth on mobile: icon trigger with lightweight dropdown menu. -->
|
||||
<details class="relative md:hidden">
|
||||
<details class="relative lg:hidden shrink-0">
|
||||
<summary
|
||||
aria-label="Open authentication menu"
|
||||
class="list-none inline-flex items-center justify-center w-10 h-10 rounded-lg text-gray-300 hover:text-white hover:bg-white/5 cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
||||
@@ -371,9 +356,6 @@
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/discover/most-downloaded"><i class="fa-solid fa-download w-4 text-center text-sb-muted"></i>Most Downloaded</a>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="{{ route('downloads.today') }}"><i class="fa-solid fa-arrow-down-short-wide w-4 text-center text-sb-muted"></i>Today Downloads</a>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/discover/on-this-day"><i class="fa-solid fa-calendar-day w-4 text-center text-sb-muted"></i>On This Day</a>
|
||||
@auth
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="{{ route('discover.for-you') }}"><i class="fa-solid fa-wand-magic-sparkles w-4 text-center text-yellow-400/70"></i>For You</a>
|
||||
@endauth
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user