forked from
tangled.org/core
Mirror of @tangled.org/core. Running on a Raspberry Pi Zero 2 (Please be gentle).
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>
+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
···
31
27
{{ define "newButton" }}
32
28
<details class="relative inline-block text-left nav-dropdown">
33
29
<summary class="btn-create py-0 cursor-pointer list-none flex items-center gap-2">
34
-
{{ i "plus" "w-4 h-4" }} new
30
+
{{ i "plus" "w-4 h-4" }} <span class="hidden md:inline">new</span>
35
31
</summary>
36
32
<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">
37
33
<a href="/repo/new" class="flex items-center gap-2">
···
52
48
class="cursor-pointer list-none flex items-center gap-1"
53
49
>
54
50
{{ $user := didOrHandle .Did .Handle }}
55
-
{{ template "user/fragments/picHandle" $user }}
51
+
<img
52
+
src="{{ tinyAvatar $user }}"
53
+
alt=""
54
+
class="rounded-full h-6 w-6 border border-gray-300 dark:border-gray-700"
55
+
/>
56
+
<span class="hidden md:inline">{{ $user | resolve | truncateAt30 }}</span>
56
57
</summary>
57
58
<div
58
59
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"