fix(frontend): header swap breakpoint down to mobile width
- all 16 min-[950px] instances (the only file using the custom breakpoint) become standard sm:, so inline search survives the whole tablet range and the hamburger appears only once search leaves at true mobile width; avatar present throughout either way - the top-bar search wrapper was also missing its base hidden, which rendered search twice below the breakpoint; fixed in the same pass
This commit is contained in:
@@ -34,9 +34,9 @@
|
|||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="flex items-center min-[950px]:order-2 space-x-3 min-[950px]:space-x-0 rtl:space-x-reverse"
|
class="flex items-center sm:order-2 space-x-3 sm:space-x-0 rtl:space-x-reverse"
|
||||||
>
|
>
|
||||||
<div class="min-[950px]:block min-[950px]:mr-4">
|
<div class="hidden sm:block sm:mr-4">
|
||||||
<Search />
|
<Search />
|
||||||
</div>
|
</div>
|
||||||
<AvatarMenu />
|
<AvatarMenu />
|
||||||
@@ -47,7 +47,7 @@
|
|||||||
menu.classList.toggle("hidden");
|
menu.classList.toggle("hidden");
|
||||||
}}
|
}}
|
||||||
type="button"
|
type="button"
|
||||||
class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm rounded-lg min-[950px]:hidden focus:outline-none focus:ring-2 text-gray-400 hover:bg-gray-700 focus:ring-gray-600"
|
class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm rounded-lg sm:hidden focus:outline-none focus:ring-2 text-gray-400 hover:bg-gray-700 focus:ring-gray-600"
|
||||||
aria-controls="navbar-user"
|
aria-controls="navbar-user"
|
||||||
aria-expanded="false"
|
aria-expanded="false"
|
||||||
>
|
>
|
||||||
@@ -70,11 +70,11 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="hidden items-center justify-between w-full pb-4 min-[950px]:pb-0 min-[950px]:flex min-[950px]:w-auto min-[950px]:order-1 border border-gray-700 min-[950px]:border-0 bg-gray-800 min-[950px]:bg-transparent rounded-lg"
|
class="hidden items-center justify-between w-full pb-4 sm:pb-0 sm:flex sm:w-auto sm:order-1 border border-gray-700 sm:border-0 bg-gray-800 sm:bg-transparent rounded-lg"
|
||||||
id="navbar-user"
|
id="navbar-user"
|
||||||
>
|
>
|
||||||
<ul
|
<ul
|
||||||
class="flex flex-col font-medium pb-6 min-[950px]:p-0 mt-4 min-[950px]:space-x-8 rtl:space-x-reverse min-[950px]:flex-row min-[950px]:mt-0"
|
class="flex flex-col font-medium pb-6 sm:p-0 mt-4 sm:space-x-8 rtl:space-x-reverse sm:flex-row sm:mt-0"
|
||||||
>
|
>
|
||||||
<li>
|
<li>
|
||||||
{#if !isAniListLoggedIn}
|
{#if !isAniListLoggedIn}
|
||||||
@@ -126,7 +126,7 @@
|
|||||||
{/if}
|
{/if}
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="flex justify-center min-[950px]:hidden">
|
<div class="flex justify-center sm:hidden">
|
||||||
<Search />
|
<Search />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user