lewis.moe
Monorepo for Tangled
appview/pages: make strings page follow repo style
Tiny avatar, description and paddings are now uniform across repo and
string pages.
Signed-off-by: Anirudh Oppiliappan <anirudh@tangled.org>
+24
-16
appview/pages/templates/strings/string.html
+24
-16
appview/pages/templates/strings/string.html
···
10
10
11
11
{{ define "content" }}
12
12
{{ $ownerId := resolve .Owner.DID.String }}
13
-
<section id="string-header" class="mb-4 py-2 px-6 dark:text-white">
14
-
<div class="text-lg flex items-center justify-between">
15
-
<div>
16
-
<a href="/strings/{{ $ownerId }}">{{ $ownerId }}</a>
17
-
<span class="select-none">/</span>
18
-
<a href="/strings/{{ $ownerId }}/{{ .String.Rkey }}" class="font-bold">{{ .String.Filename }}</a>
13
+
<section id="string-header" class="mb-2 py-2 px-4 dark:text-white">
14
+
<div class="text-lg flex flex-col sm:flex-row items-start gap-4 justify-between">
15
+
<!-- left items -->
16
+
<div class="flex flex-col gap-2">
17
+
<!-- string owner / string name -->
18
+
<div class="flex items-center gap-2 flex-wrap">
19
+
{{ template "user/fragments/picHandleLink" .Owner.DID.String }}
20
+
<span class="select-none">/</span>
21
+
<a href="/strings/{{ $ownerId }}/{{ .String.Rkey }}" class="font-bold">{{ .String.Filename }}</a>
22
+
</div>
23
+
24
+
<span class="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-gray-600 dark:text-gray-300">
25
+
{{ if .String.Description }}
26
+
{{ .String.Description }}
27
+
{{ else }}
28
+
<span class="italic">this string has no description</span>
29
+
{{ end }}
30
+
</span>
19
31
</div>
20
-
<div class="flex gap-2 items-stretch text-base">
32
+
33
+
<div class="w-full sm:w-fit grid grid-cols-3 gap-2 z-auto">
21
34
{{ if and .LoggedInUser (eq .LoggedInUser.Did .String.Did) }}
22
-
<a class="btn flex items-center gap-2 no-underline hover:no-underline p-2 group"
35
+
<a class="btn text-sm no-underline hover:no-underline flex items-center gap-2 group"
23
36
hx-boost="true"
24
37
href="/strings/{{ .String.Did }}/{{ .String.Rkey }}/edit">
25
-
{{ i "pencil" "size-4" }}
38
+
{{ i "pencil" "w-4 h-4" }}
26
39
<span class="hidden md:inline">edit</span>
27
40
{{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
28
41
</a>
29
42
<button
30
-
class="btn text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 gap-2 group p-2"
43
+
class="btn text-sm text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 flex items-center gap-2 group"
31
44
title="Delete string"
32
45
hx-delete="/strings/{{ .String.Did }}/{{ .String.Rkey }}/"
33
46
hx-swap="none"
34
47
hx-confirm="Are you sure you want to delete the string `{{ .String.Filename }}`?"
35
48
>
36
-
{{ i "trash-2" "size-4" }}
49
+
{{ i "trash-2" "w-4 h-4" }}
37
50
<span class="hidden md:inline">delete</span>
38
51
{{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
39
52
</button>
···
44
57
"StarCount" .StarCount) }}
45
58
</div>
46
59
</div>
47
-
<span>
48
-
{{ with .String.Description }}
49
-
{{ . }}
50
-
{{ end }}
51
-
</span>
52
60
</section>
53
61
<section class="bg-white dark:bg-gray-800 px-6 py-4 rounded relative w-full dark:text-white">
54
62
<div class="flex flex-col md:flex-row md:justify-between md:items-center text-gray-500 dark:text-gray-400 text-sm md:text-base pb-2 mb-3 text-base border-b border-gray-200 dark:border-gray-700">