tangled.org
Add a "collapse comments" button because the previous and only way to collapse them, the vertical line, was not always obvious.
Signed-off-by: eti eti@eti.tf
+9
-4
Diff
round #0
+9
-4
appview/pages/templates/repo/pulls/pull.html
+9
-4
appview/pages/templates/repo/pulls/pull.html
···
119
119
{{ $id := index . 0 }}
120
120
{{ $target := index . 1 }}
121
121
{{ $direction := index . 2 }}
122
-
<div id="{{ $id }}"
122
+
<div id="{{ $id }}"
123
123
data-resizer="vertical"
124
124
data-target="{{ $target }}"
125
125
data-direction="{{ $direction }}"
···
318
318
{{ $round := $item.RoundNumber }}
319
319
<div class="flex gap-2 items-center justify-between mb-1">
320
320
<span class="inline-flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 pt-2">
321
-
{{ $handle := resolve $root.Pull.OwnerDid }}
321
+
{{ $handle := resolve $root.Pull.OwnerDid }}
322
322
<a class="text-gray-500 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" href="/{{ $handle }}">{{ $handle }}</a>
323
323
submitted
324
324
<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">
···
548
548
{{ $root := index . 3 }}
549
549
{{ $round := $item.RoundNumber }}
550
550
{{ $c := len $item.Comments }}
551
-
<details class="relative ml-10 group/comments" {{ if or (eq $c 0) (eq $root.ActiveRound $round) }}open{{ end }}>
551
+
<details class="relative ml-10 group/comments group/collapse" {{ if or (eq $c 0) (eq $root.ActiveRound $round) }}open{{ end }}>
552
552
<summary class="cursor-pointer list-none">
553
553
<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">
554
-
<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="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 group-hover/collapse:bg-gray-400 dark:group-hover/collapse:bg-gray-500 transition-colors"> </div>
555
555
</div>
556
556
<div class="group-open/comments:hidden block relative group/summary py-4">
557
557
<div class="absolute -left-8 top-0 bottom-0 w-16 transition-colors flex items-center justify-center z-4">
···
568
568
{{ template "submissionComment" . }}
569
569
{{ end }}
570
570
</div>
571
+
{{ if gt $c 0}}
572
+
<button class="flex items-center gap-2 -ml-2 relative cursor-pointer text-sm text-gray-500 dark:text-gray-400 group-hover/collapse:text-gray-600 dark:group-hover/collapse:text-gray-300 bg-gray-50 mt-4 pb-4 transition-colors" hx-on:click="this.closest('details').open = false">
573
+
{{ i "chevron-up" "size-4 z-5" }} collapse comments
574
+
</button>
575
+
{{ end }}
571
576
572
577
<div class="relative -ml-10">
573
578
{{ if eq $lastIdx $item.RoundNumber }}
History
2 rounds
5 comments
expand 1 comment
pull request successfully merged
expand 4 comments
Noice! LGTM
lgtm, should we have a similar chevron-down for expand comments?
i like the original look with the circle-plus icon, it feels fun tbh
what my previous message proposes is to switch the
chevron-up with a circle-chevron-up to keep that circle visual pattern both ways 🙂↕️
lgtm!