lewis.moe
Monorepo for Tangled
appview/pages: add sidebar to issues with labels and participants list
Signed-off-by: oppiliappan <me@oppi.li>
+58
-24
appview/pages/templates/repo/issues/issue.html
+58
-24
appview/pages/templates/repo/issues/issue.html
···
9
9
{{ end }}
10
10
11
11
{{ define "repoContentLayout" }}
12
-
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 w-full">
13
-
<div class="col-span-1 md:col-span-3">
12
+
<div class="grid grid-cols-1 md:grid-cols-10 gap-4 w-full">
13
+
<div class="col-span-1 md:col-span-8">
14
14
<section class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto dark:text-white">
15
15
{{ block "repoContent" . }}{{ end }}
16
16
</section>
17
17
{{ block "repoAfter" . }}{{ end }}
18
18
</div>
19
-
<div class="col-span-1 flex flex-col gap-6">
19
+
<div class="col-span-1 md:col-span-2 flex flex-col gap-6">
20
20
{{ template "issueLabels" . }}
21
21
{{ template "issueParticipants" . }}
22
22
</div>
···
30
30
{{ if .Issue.Body }}
31
31
<article id="body" class="mt-4 prose dark:prose-invert">{{ .Issue.Body | markdown }}</article>
32
32
{{ end }}
33
-
<div class="flex flex-wrap gap-2 items-stretch">
33
+
<div class="flex flex-wrap gap-2 items-stretch mt-4">
34
34
{{ template "issueReactions" . }}
35
-
{{ template "issueLabels" . }}
36
35
</div>
37
36
</section>
38
37
{{ end }}
···
120
119
{{ end }}
121
120
122
121
{{ define "issueLabels" }}
123
-
{{ range $k, $valset := $.Issue.Labels.Inner }}
124
-
{{ $d := index $.LabelDefs $k }}
125
-
{{ range $v, $s := $valset }}
126
-
{{ template "labels/fragments/label" (dict "def" $d "val" $v) }}
127
-
{{ end }}
128
-
{{ end }}
122
+
<div>
123
+
<div class="text-sm py-1 flex items-center gap-2 font-bold text-gray-500 dark:text-gray-400 capitalize">
124
+
Labels
125
+
<button
126
+
class="inline-flex text-gray-500 dark:text-gray-400 {{ if not (or .RepoInfo.Roles.IsOwner .RepoInfo.Roles.IsCollaborator) }}hidden{{ end }}"
127
+
popovertarget="add-label-modal"
128
+
popovertargetaction="toggle">
129
+
{{ i "plus" "size-4" }}
130
+
</button>
131
+
</div>
132
+
<div class="flex gap-1 items-center flex-wrap">
133
+
{{ range $k, $valset := $.Issue.Labels.Inner }}
134
+
{{ $d := index $.LabelDefs $k }}
135
+
{{ range $v, $s := $valset }}
136
+
{{ template "labels/fragments/label" (dict "def" $d "val" $v) }}
137
+
{{ end }}
138
+
{{ else }}
139
+
<p class="text-gray-500 dark:text-gray-400 ">No labels yet.</p>
140
+
{{ end }}
129
141
130
-
<button
131
-
class="btn text-gray-500 dark:text-gray-400"
132
-
popovertarget="add-label-modal"
133
-
{{ if not (or .RepoInfo.Roles.IsOwner .RepoInfo.Roles.IsCollaborator) }}disabled{{ end }}
134
-
popovertargetaction="toggle">
135
-
{{ i "plus" "size-4" }}
136
-
</button>
137
-
<div
138
-
id="add-label-modal"
139
-
popover
140
-
class="bg-white w-full sm:w-96 dark:bg-gray-800 p-6 rounded border border-gray-200 dark:border-gray-700 drop-shadow dark:text-white backdrop:bg-gray-400/50 dark:backdrop:bg-gray-800/50">
141
-
{{ template "repo/fragments/addLabelModal" (dict "root" $ "subject" $.Issue.AtUri.String "state" $.Issue.Labels) }}
142
+
<div
143
+
id="add-label-modal"
144
+
popover
145
+
class="bg-white w-full sm:w-[30rem] dark:bg-gray-800 p-6 rounded border border-gray-200 dark:border-gray-700 drop-shadow dark:text-white backdrop:bg-gray-400/50 dark:backdrop:bg-gray-800/50">
146
+
{{ template "repo/fragments/addLabelModal" (dict "root" $ "subject" $.Issue.AtUri.String "state" $.Issue.Labels) }}
147
+
</div>
148
+
</div>
149
+
</div>
150
+
{{ end }}
151
+
152
+
{{ define "issueParticipants" }}
153
+
{{ $all := .Issue.Participants }}
154
+
{{ $ps := take $all 5 }}
155
+
<div>
156
+
<div class="py-1 flex items-center text-sm">
157
+
<span class="font-bold text-gray-500 dark:text-gray-400 capitalize">Participants</span>
158
+
<span class="bg-gray-200 dark:bg-gray-700 rounded py-1/2 px-1 ml-1">{{ len $all }}</span>
159
+
</div>
160
+
<div class="flex items-center -space-x-2 mt-2">
161
+
{{ $c := "z-50 z-40 z-30 z-20 z-10" }}
162
+
{{ range $i, $p := $ps }}
163
+
<img
164
+
src="{{ tinyAvatar . }}"
165
+
alt=""
166
+
class="rounded-full h-8 w-8 mr-1 border-2 border-gray-300 dark:border-gray-700 z-{{sub 5 $i}}0"
167
+
/>
168
+
{{ end }}
169
+
170
+
{{ if gt (len $all) 5 }}
171
+
<span class="pl-4 text-gray-500 dark:text-gray-400 text-sm">
172
+
+{{ sub (len $all) 5 }}
173
+
</span>
174
+
{{ end }}
175
+
</div>
142
176
</div>
143
177
{{ end }}
144
178
···
154
188
}}
155
189
156
190
{{ template "repo/issues/fragments/newComment" . }}
157
-
<div>
191
+
</div>
158
192
{{ end }}