appview/pages: compress top bar elements on mobile

Squish logo, profile and new button on smaller displays.

Signed-off-by: Anirudh Oppiliappan <anirudh@tangled.org>

anirudh.fi 6c3f4249 71ae1be6

verified
Changed files
+13 -4
appview
pages
templates
layouts
fragments
+13 -4
appview/pages/templates/layouts/fragments/topbar.html
··· 2 2 <nav class="space-x-4 px-6 py-2 rounded-b bg-white dark:bg-gray-800 dark:text-white drop-shadow-sm"> 3 3 <div class="flex justify-between p-0 items-center"> 4 4 <div id="left-items"> 5 - <a href="/" hx-boost="true" class="text-2xl no-underline hover:no-underline"> 6 - {{ template "fragments/logotypeSmall" }} 5 + <a href="/" hx-boost="true" class="text-2xl no-underline hover:no-underline flex items-center gap-2"> 6 + {{ template "fragments/dolly/logo" "size-8 text-black dark:text-white" }} 7 + <span class="font-bold text-xl not-italic hidden md:inline">tangled</span> 8 + <span class="font-normal not-italic text-xs rounded bg-gray-100 dark:bg-gray-700 px-1 hidden md:inline"> 9 + alpha 10 + </span> 7 11 </a> 8 12 </div> 9 13 ··· 27 31 {{ define "newButton" }} 28 32 <details class="relative inline-block text-left nav-dropdown"> 29 33 <summary class="btn-create py-0 cursor-pointer list-none flex items-center gap-2"> 30 - {{ i "plus" "w-4 h-4" }} new 34 + {{ i "plus" "w-4 h-4" }} <span class="hidden md:inline">new</span> 31 35 </summary> 32 36 <div class="absolute flex flex-col right-0 mt-4 p-4 rounded w-48 bg-white dark:bg-gray-800 dark:text-white border border-gray-200 dark:border-gray-700"> 33 37 <a href="/repo/new" class="flex items-center gap-2"> ··· 48 52 class="cursor-pointer list-none flex items-center gap-1" 49 53 > 50 54 {{ $user := didOrHandle .Did .Handle }} 51 - {{ template "user/fragments/picHandle" $user }} 55 + <img 56 + src="{{ tinyAvatar $user }}" 57 + alt="" 58 + class="rounded-full h-6 w-6 border border-gray-300 dark:border-gray-700" 59 + /> 60 + <span class="hidden md:inline">{{ $user | resolve | truncateAt30 }}</span> 52 61 </summary> 53 62 <div 54 63 class="absolute flex flex-col right-0 mt-4 p-4 rounded w-48 bg-white dark:bg-gray-800 dark:text-white border border-gray-200 dark:border-gray-700"