My own copy of Tangled :)
improve settings styles on mobile
author
Akshay
date
(Mar 22, 2025, 2:24 PM UTC)
commit
2bb217ff
2bb217ff2684ba2861acdd89965cb7bde8c9e6a8
parent
303fc367
303fc3675fd63adaf356dedf06cfd88af879e620
+24
-18
+24
-18
appview/pages/templates/settings.html
+24
-18
appview/pages/templates/settings.html
···
7
7
<div class="flex flex-col">
8
8
{{ block "profile" . }} {{ end }}
9
9
{{ block "keys" . }} {{ end }}
10
-
{{ block "knots" . }} {{ end }}
11
10
{{ block "emails" . }} {{ end }}
12
11
</div>
13
12
{{ end }}
···
34
33
<p class="mb-8">SSH public keys added here will be broadcasted to knots that you are a member of, <br> allowing you to push to repositories there.</p>
35
34
<div id="key-list" class="flex flex-col gap-6 mb-8">
36
35
{{ range $index, $key := .PubKeys }}
37
-
<div class="flex justify-between items-center gap-4">
38
-
<div>
36
+
<div class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4">
37
+
<div class="flex flex-col gap-1">
39
38
<div class="inline-flex items-center gap-4">
40
39
<i class="w-3 h-3" data-lucide="key"></i>
41
40
<p class="font-bold">{{ .Name }}</p>
42
-
<p class="text-sm text-gray-500">added {{ .Created | timeFmt }}</p>
43
41
</div>
44
-
<code class="block break-all text-sm text-gray-500">{{ .Key }}</code>
42
+
<p class="text-sm text-gray-500">added {{ .Created | timeFmt }}</p>
43
+
<div class="overflow-x-auto whitespace-nowrap flex-1 max-w-full">
44
+
<code class="text-sm text-gray-500">{{ .Key }}</code>
45
+
</div>
45
46
</div>
46
47
<button
47
48
class="btn text-red-500 hover:text-red-700"
···
49
50
hx-delete="/settings/keys?name={{urlquery .Name}}&rkey={{urlquery .Rkey}}&key={{urlquery .Key}}"
50
51
hx-confirm="Are you sure you wish to delete the key '{{ .Name }}'?">
51
52
<i class="w-5 h-5" data-lucide="trash-2"></i>
53
+
<span class="hidden md:inline">delete</span>
52
54
</button>
53
55
</div>
54
56
{{ end }}
···
86
88
<p class="mb-8">Commits authored using emails listed here will be associated with your Tangled profile.</p>
87
89
<div id="email-list" class="flex flex-col gap-6 mb-8">
88
90
{{ range $index, $email := .Emails }}
89
-
<div class="flex justify-between items-center gap-4">
90
-
<div>
91
+
<div class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4">
92
+
<div class="flex flex-col gap-2">
91
93
<div class="inline-flex items-center gap-4">
92
94
<i class="w-3 h-3" data-lucide="mail"></i>
93
95
<p class="font-bold">{{ .Address }}</p>
94
-
<p class="text-sm text-gray-500">added {{ .CreatedAt | timeFmt }}</p>
95
-
{{ if .Verified }}
96
-
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">verified</span>
97
-
{{ else }}
98
-
<span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">unverified</span>
99
-
{{ end }}
100
-
{{ if .Primary }}
101
-
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">primary</span>
102
-
{{ end }}
96
+
<div class="inline-flex items-center gap-1">
97
+
{{ if .Verified }}
98
+
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">verified</span>
99
+
{{ else }}
100
+
<span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">unverified</span>
101
+
{{ end }}
102
+
{{ if .Primary }}
103
+
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">primary</span>
104
+
{{ end }}
105
+
</div>
103
106
</div>
107
+
<p class="text-sm text-gray-500">added {{ .CreatedAt | timeFmt }}</p>
104
108
</div>
105
109
<div class="flex gap-2 items-center">
106
110
{{ if not .Verified }}
107
111
<a
108
-
class="text-sm"
112
+
class="btn flex gap-2"
109
113
hx-post="/settings/emails/verify/resend"
110
114
hx-swap="none"
111
115
href="#"
112
116
hx-vals='{"email": "{{ .Address }}"}'>
113
-
resend verification
117
+
<i class="w-5 h-5" data-lucide="rotate-cw"></i>
118
+
<span class="hidden md:inline">resend</span>
114
119
</a>
115
120
{{ end }}
116
121
{{ if and (not .Primary) .Verified }}
···
131
136
title="Delete email"
132
137
type="submit">
133
138
<i class="w-5 h-5" data-lucide="trash-2"></i>
139
+
<span class="hidden md:inline">delete</span>
134
140
</button>
135
141
</form>
136
142
{{ end }}