tjh.dev
forked from
tangled.org/core
Mirror of @tangled.org/core. Running on a Raspberry Pi Zero 2 (Please be gentle).
improve settings styles on mobile
oppi.li
+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 }}
···
33
34
<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>
34
35
<div id="key-list" class="flex flex-col gap-6 mb-8">
35
36
{{ range $index, $key := .PubKeys }}
36
-
<div class="flex justify-between items-center gap-4">
37
-
<div>
37
+
<div class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4">
38
+
<div class="flex flex-col gap-1">
38
39
<div class="inline-flex items-center gap-4">
39
40
<i class="w-3 h-3" data-lucide="key"></i>
40
41
<p class="font-bold">{{ .Name }}</p>
41
-
<p class="text-sm text-gray-500">added {{ .Created | timeFmt }}</p>
42
42
</div>
43
-
<code class="block break-all text-sm text-gray-500">{{ .Key }}</code>
43
+
<p class="text-sm text-gray-500">added {{ .Created | timeFmt }}</p>
44
+
<div class="overflow-x-auto whitespace-nowrap flex-1 max-w-full">
45
+
<code class="text-sm text-gray-500">{{ .Key }}</code>
46
+
</div>
44
47
</div>
45
48
<button
46
49
class="btn text-red-500 hover:text-red-700"
···
50
49
hx-delete="/settings/keys?name={{urlquery .Name}}&rkey={{urlquery .Rkey}}&key={{urlquery .Key}}"
51
50
hx-confirm="Are you sure you wish to delete the key '{{ .Name }}'?">
52
51
<i class="w-5 h-5" data-lucide="trash-2"></i>
52
+
<span class="hidden md:inline">delete</span>
53
53
</button>
54
54
</div>
55
55
{{ end }}
···
88
86
<p class="mb-8">Commits authored using emails listed here will be associated with your Tangled profile.</p>
89
87
<div id="email-list" class="flex flex-col gap-6 mb-8">
90
88
{{ range $index, $email := .Emails }}
91
-
<div class="flex justify-between items-center gap-4">
92
-
<div>
89
+
<div class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4">
90
+
<div class="flex flex-col gap-2">
93
91
<div class="inline-flex items-center gap-4">
94
92
<i class="w-3 h-3" data-lucide="mail"></i>
95
93
<p class="font-bold">{{ .Address }}</p>
96
-
<p class="text-sm text-gray-500">added {{ .CreatedAt | timeFmt }}</p>
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 }}
94
+
<div class="inline-flex items-center gap-1">
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 }}
103
+
</div>
105
104
</div>
105
+
<p class="text-sm text-gray-500">added {{ .CreatedAt | timeFmt }}</p>
106
106
</div>
107
107
<div class="flex gap-2 items-center">
108
108
{{ if not .Verified }}
109
109
<a
110
-
class="text-sm"
110
+
class="btn flex gap-2"
111
111
hx-post="/settings/emails/verify/resend"
112
112
hx-swap="none"
113
113
href="#"
114
114
hx-vals='{"email": "{{ .Address }}"}'>
115
-
resend verification
115
+
<i class="w-5 h-5" data-lucide="rotate-cw"></i>
116
+
<span class="hidden md:inline">resend</span>
116
117
</a>
117
118
{{ end }}
118
119
{{ if and (not .Primary) .Verified }}
···
136
131
title="Delete email"
137
132
type="submit">
138
133
<i class="w-5 h-5" data-lucide="trash-2"></i>
134
+
<span class="hidden md:inline">delete</span>
139
135
</button>
140
136
</form>
141
137
{{ end }}