lewis.moe
Monorepo for Tangled
appview/pages: finesse styling in review page
Signed-off-by: oppiliappan <me@oppi.li>
+2
-1
appview/pages/templates/repo/issues/fragments/issueCommentHeader.html
+2
-1
appview/pages/templates/repo/issues/fragments/issueCommentHeader.html
···
1
{{ define "repo/issues/fragments/issueCommentHeader" }}
2
<div class="flex flex-wrap items-center gap-2 text-sm text-gray-500 dark:text-gray-400 ">
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>
5
{{ template "hats" $ }}
6
<span class="before:content-['·']"></span>
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
+36
-13
appview/pages/templates/repo/pulls/pull.html
+36
-13
appview/pages/templates/repo/pulls/pull.html
···
148
md:bg-white md:dark:bg-gray-800
149
drop-shadow-sm
150
border-t md:border-x md:border-t-0 border-gray-200 dark:border-gray-700">
151
-
<h2 class="">Comments</h2>
152
{{ template "subsPanelSummary" $ }}
153
</summary>
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
{{ define "subsPanelSummary" }}
162
{{ $root := index . 2 }}
163
{{ $pull := $root.Pull }}
164
-
{{ $latest := $pull.LastRoundNumber }}
165
<div class="flex items-center gap-2 text-sm">
166
<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>
169
</span>
170
</div>
171
{{ end }}
···
222
{{ $idx := index . 1 }}
223
{{ $lastIdx := index . 2 }}
224
{{ $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">
226
{{ template "submissionHeader" $ }}
227
{{ template "submissionComments" $ }}
228
</div>
···
236
<div class="
237
{{ if eq $round 0 }}rounded-b{{ else }}rounded{{ end }}
238
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
241
{{ else }}
242
-
bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700
243
{{ end }}
244
flex gap-2 sticky top-0 z-20">
245
<!-- left column: just profile picture -->
···
269
{{ $round := $item.RoundNumber }}
270
<div class="flex gap-2 items-center justify-between mb-1">
271
<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">
274
#{{ $round }}
275
</span>
276
<span class="select-none before:content-['\00B7']"></span>
···
495
{{ $idx := index . 1 }}
496
{{ $lastIdx := index . 2 }}
497
{{ $root := index . 3 }}
498
{{ $c := len $item.Comments }}
499
-
<details class="relative ml-10 group/comments" open>
500
<summary class="cursor-pointer list-none">
501
<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
<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
<div class="flex-1 min-w-0">
555
<!-- Row 1: Author and timestamp -->
556
<div class="text-sm text-gray-500 dark:text-gray-400 flex items-center gap-1">
557
-
<span>{{ resolve .OwnerDid }}</span>
558
<span class="before:content-['·']"></span>
559
<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 }}
561
</a>
562
</div>
563
<!-- Row 2: Body text -->
···
148
md:bg-white md:dark:bg-gray-800
149
drop-shadow-sm
150
border-t md:border-x md:border-t-0 border-gray-200 dark:border-gray-700">
151
+
<h2 class="">History</h2>
152
{{ template "subsPanelSummary" $ }}
153
</summary>
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
{{ define "subsPanelSummary" }}
162
{{ $root := index . 2 }}
163
{{ $pull := $root.Pull }}
164
+
{{ $rounds := len $pull.Submissions }}
165
+
{{ $comments := $pull.TotalComments }}
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
+
175
<span class="md:hidden inline">
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>
178
</span>
179
</div>
180
{{ end }}
···
231
{{ $idx := index . 1 }}
232
{{ $lastIdx := index . 2 }}
233
{{ $root := index . 3 }}
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
+
">
244
{{ template "submissionHeader" $ }}
245
{{ template "submissionComments" $ }}
246
</div>
···
254
<div class="
255
{{ if eq $round 0 }}rounded-b{{ else }}rounded{{ end }}
256
px-6 py-4 pr-2 pt-2
257
+
bg-white dark:bg-gray-800
258
+
{{ if eq $round $root.ActiveRound }}
259
+
border-t-2 border-blue-200 dark:border-blue-700
260
{{ else }}
261
+
border-b-2 border-gray-200 dark:border-gray-700
262
{{ end }}
263
flex gap-2 sticky top-0 z-20">
264
<!-- left column: just profile picture -->
···
288
{{ $round := $item.RoundNumber }}
289
<div class="flex gap-2 items-center justify-between mb-1">
290
<span class="inline-flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 pt-2">
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">
295
#{{ $round }}
296
</span>
297
<span class="select-none before:content-['\00B7']"></span>
···
516
{{ $idx := index . 1 }}
517
{{ $lastIdx := index . 2 }}
518
{{ $root := index . 3 }}
519
+
{{ $round := $item.RoundNumber }}
520
{{ $c := len $item.Comments }}
521
+
<details class="relative ml-10 group/comments" {{ if or (eq $c 0) (eq $root.ActiveRound $round) }}open{{ end }}>
522
<summary class="cursor-pointer list-none">
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">
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>
···
576
<div class="flex-1 min-w-0">
577
<!-- Row 1: Author and timestamp -->
578
<div class="text-sm text-gray-500 dark:text-gray-400 flex items-center gap-1">
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>
581
<span class="before:content-['·']"></span>
582
<a class="text-gray-500 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" href="#comment-{{.ID}}">
583
+
{{ template "repo/fragments/shortTime" .Created }}
584
</a>
585
</div>
586
<!-- Row 2: Body text -->
+2
-2
input.css
+2
-2
input.css
···
93
@apply block text-gray-900 text-sm font-bold py-2 uppercase dark:text-gray-100;
94
}
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;
97
}
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;
100
}
101
details summary::-webkit-details-marker {
102
display: none;
···
93
@apply block text-gray-900 text-sm font-bold py-2 uppercase dark:text-gray-100;
94
}
95
input {
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
}
98
textarea {
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
}
101
details summary::-webkit-details-marker {
102
display: none;