forked from
tangled.org/core
Monorepo for Tangled
appview/pages: finesse styling in review page
Signed-off-by: oppiliappan <me@oppi.li>
+42
-18
+2
-1
appview/pages/templates/repo/issues/fragments/issueCommentHeader.html
+2
-1
appview/pages/templates/repo/issues/fragments/issueCommentHeader.html
···
1
1
{{ define "repo/issues/fragments/issueCommentHeader" }}
2
2
<div class="flex flex-wrap items-center gap-2 text-sm text-gray-500 dark:text-gray-400 ">
3
-
{{ resolve .Comment.Did }}
3
+
{{ $handle := resolve .Comment.Did }}
4
+
<a class="text-gray-500 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" href="/{{ $handle }}">{{ $handle }}</a>
4
5
{{ template "hats" $ }}
5
6
<span class="before:content-['·']"></span>
6
7
{{ template "timestamp" . }}
+1
-1
appview/pages/templates/repo/issues/fragments/newComment.html
+1
-1
appview/pages/templates/repo/issues/fragments/newComment.html
+1
-1
appview/pages/templates/repo/issues/fragments/replyIssueCommentPlaceholder.html
+1
-1
appview/pages/templates/repo/issues/fragments/replyIssueCommentPlaceholder.html
···
8
8
/>
9
9
{{ end }}
10
10
<input
11
-
class="w-full p-0 border-none focus:outline-none"
11
+
class="w-full p-0 border-none focus:outline-none bg-transparent"
12
12
placeholder="Leave a reply..."
13
13
hx-get="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/comment/{{ .Comment.Id }}/reply"
14
14
hx-trigger="focus"
+36
-13
appview/pages/templates/repo/pulls/pull.html
+36
-13
appview/pages/templates/repo/pulls/pull.html
···
148
148
md:bg-white md:dark:bg-gray-800
149
149
drop-shadow-sm
150
150
border-t md:border-x md:border-t-0 border-gray-200 dark:border-gray-700">
151
-
<h2 class="">Comments</h2>
151
+
<h2 class="">History</h2>
152
152
{{ template "subsPanelSummary" $ }}
153
153
</summary>
154
154
<div class="max-h-[85vh] md:max-h-[calc(100vh-3rem-3rem)] w-full flex flex-col-reverse gap-4 overflow-y-auto bg-slate-100 dark:bg-gray-900 md:bg-transparent">
···
161
161
{{ define "subsPanelSummary" }}
162
162
{{ $root := index . 2 }}
163
163
{{ $pull := $root.Pull }}
164
-
{{ $latest := $pull.LastRoundNumber }}
164
+
{{ $rounds := len $pull.Submissions }}
165
+
{{ $comments := $pull.TotalComments }}
165
166
<div class="flex items-center gap-2 text-sm">
167
+
<span>
168
+
{{ $rounds }} round{{ if ne $rounds 1 }}s{{ end }}
169
+
</span>
170
+
<span class="select-none before:content-['\00B7']"></span>
171
+
<span>
172
+
{{ $comments }} comment{{ if ne $comments 1 }}s{{ end }}
173
+
</span>
174
+
166
175
<span class="md:hidden inline">
167
-
<span class="inline group-open/panel:hidden">{{ i "chevron-up" "size-4" }}</span>
168
-
<span class="hidden group-open/panel:inline">{{ i "chevron-down" "size-4" }}</span>
176
+
<span class="inline group-open:hidden">{{ i "chevron-up" "size-4" }}</span>
177
+
<span class="hidden group-open:inline">{{ i "chevron-down" "size-4" }}</span>
169
178
</span>
170
179
</div>
171
180
{{ end }}
···
222
231
{{ $idx := index . 1 }}
223
232
{{ $lastIdx := index . 2 }}
224
233
{{ $root := index . 3 }}
225
-
<div class="{{ if eq $item.RoundNumber 0 }}rounded-b border-t-0{{ else }}rounded{{ end }} border border-gray-200 dark:border-gray-700 w-full shadow-sm bg-gray-50 dark:bg-gray-900">
234
+
{{ $round := $item.RoundNumber }}
235
+
<div class="
236
+
w-full shadow-sm bg-gray-50 dark:bg-gray-900 border-2 border-t-0
237
+
{{ if eq $round 0 }}rounded-b{{ else }}rounded{{ end }}
238
+
{{ if eq $round $root.ActiveRound }}
239
+
border-blue-200 dark:border-blue-700
240
+
{{ else }}
241
+
border-gray-200 dark:border-gray-700
242
+
{{ end }}
243
+
">
226
244
{{ template "submissionHeader" $ }}
227
245
{{ template "submissionComments" $ }}
228
246
</div>
···
236
254
<div class="
237
255
{{ if eq $round 0 }}rounded-b{{ else }}rounded{{ end }}
238
256
px-6 py-4 pr-2 pt-2
239
-
{{ if eq $root.ActiveRound $round }}
240
-
bg-blue-100 dark:bg-blue-900 border-b border-blue-200 dark:border-blue-700
257
+
bg-white dark:bg-gray-800
258
+
{{ if eq $round $root.ActiveRound }}
259
+
border-t-2 border-blue-200 dark:border-blue-700
241
260
{{ else }}
242
-
bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700
261
+
border-b-2 border-gray-200 dark:border-gray-700
243
262
{{ end }}
244
263
flex gap-2 sticky top-0 z-20">
245
264
<!-- left column: just profile picture -->
···
269
288
{{ $round := $item.RoundNumber }}
270
289
<div class="flex gap-2 items-center justify-between mb-1">
271
290
<span class="inline-flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 pt-2">
272
-
{{ resolve $root.Pull.OwnerDid }} submitted
273
-
<span class="px-2 py-0.5 {{ if eq $root.ActiveRound $round }}text-white bg-blue-600 dark:bg-blue-500 border-blue-700 dark:border-blue-600{{ else }}text-black dark:text-white bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600{{ end }} rounded font-mono text-xs border">
291
+
{{ $handle := resolve $root.Pull.OwnerDid }}
292
+
<a class="text-gray-500 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" href="/{{ $handle }}">{{ $handle }}</a>
293
+
submitted
294
+
<span class="px-2 py-0.5 text-black dark:text-white bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 rounded font-mono text-xs border">
274
295
#{{ $round }}
275
296
</span>
276
297
<span class="select-none before:content-['\00B7']"></span>
···
495
516
{{ $idx := index . 1 }}
496
517
{{ $lastIdx := index . 2 }}
497
518
{{ $root := index . 3 }}
519
+
{{ $round := $item.RoundNumber }}
498
520
{{ $c := len $item.Comments }}
499
-
<details class="relative ml-10 group/comments" open>
521
+
<details class="relative ml-10 group/comments" {{ if or (eq $c 0) (eq $root.ActiveRound $round) }}open{{ end }}>
500
522
<summary class="cursor-pointer list-none">
501
523
<div class="hidden group-open/comments:block absolute -left-8 top-0 bottom-0 w-16 transition-colors flex items-center justify-center group/border z-4">
502
524
<div class="absolute left-1/2 -translate-x-1/2 top-0 bottom-0 w-0.5 group-open/comments:bg-gray-200 dark:group-open/comments:bg-gray-700 group-hover/border:bg-gray-400 dark:group-hover/border:bg-gray-500 transition-colors"> </div>
···
554
576
<div class="flex-1 min-w-0">
555
577
<!-- Row 1: Author and timestamp -->
556
578
<div class="text-sm text-gray-500 dark:text-gray-400 flex items-center gap-1">
557
-
<span>{{ resolve .OwnerDid }}</span>
579
+
{{ $handle := resolve .OwnerDid }}
580
+
<a class="text-gray-500 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" href="/{{ $handle }}">{{ $handle }}</a>
558
581
<span class="before:content-['·']"></span>
559
582
<a class="text-gray-500 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" href="#comment-{{.ID}}">
560
-
{{ template "repo/fragments/time" .Created }}
583
+
{{ template "repo/fragments/shortTime" .Created }}
561
584
</a>
562
585
</div>
563
586
<!-- Row 2: Body text -->
+2
-2
input.css
+2
-2
input.css
···
93
93
@apply block text-gray-900 text-sm font-bold py-2 uppercase dark:text-gray-100;
94
94
}
95
95
input {
96
-
@apply border border-gray-400 block rounded bg-gray-50 focus:ring-black p-3 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-gray-400;
96
+
@apply p-3 border border-gray-100 block rounded bg-gray-50 focus:outline-none focus:ring-1 focus:ring-gray-200 p-3 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-gray-400;;
97
97
}
98
98
textarea {
99
-
@apply border border-gray-400 block rounded bg-gray-50 focus:outline-none focus:ring-1 focus:ring-black p-3 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-gray-400;
99
+
@apply border border-gray-100 block rounded bg-gray-50 focus:outline-none focus:ring-1 focus:ring-gray-200 p-3 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-gray-400;
100
100
}
101
101
details summary::-webkit-details-marker {
102
102
display: none;