Monorepo for Tangled
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 Oppiliappan
(Sep 25, 2025, 3:01 PM +0300)
6c3f4249
71ae1be6
+13
-4
+13
-4
appview/pages/templates/layouts/fragments/topbar.html
+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"