tangled.org
Monorepo for Tangled
tangled.org
appview/pages/pulls: allow collapsing submission comments
works like reddit threads: you click on the vertical line connecting
each comment and it collapses the thread.
Signed-off-by: oppiliappan <me@oppi.li>
oppi.li
+24
-7
appview/pages/templates/repo/pulls/pull.html
+24
-7
appview/pages/templates/repo/pulls/pull.html
···
510
510
511
511
{{ define "submissionComments" }}
512
512
{{ $item := index . 0 }}
513
-
<div class="relative ml-10 border-l-2 border-gray-200 dark:border-gray-700">
514
-
{{ range $item.Comments }}
515
-
{{ template "submissionComment" . }}
516
-
{{ end }}
517
-
</div>
513
+
{{ $c := len $item.Comments }}
514
+
<details class="relative ml-10 group/comments" open>
515
+
<summary class="cursor-pointer list-none">
516
+
<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">
517
+
<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>
518
+
</div>
519
+
<div class="group-open/comments:hidden block relative group/summary py-2">
520
+
<div class="absolute -left-8 top-0 bottom-0 w-16 transition-colors flex items-center justify-center z-4">
521
+
<div class="absolute left-1/2 -translate-x-1/2 h-1/4 top-0 bottom-0 w-0.5 bg-gray-200 dark:bg-gray-700 group-hover/summary:bg-gray-400 dark:group-hover/summary:bg-gray-500 transition-colors"></div>
522
+
</div>
523
+
<span class="text-gray-400 dark:text-gray-500 text-sm group-hover/summary:text-gray-500 dark:group-hover/summary:text-gray-400 transition-colors flex items-center gap-2 -ml-2 relative">
524
+
{{ i "circle-plus" "size-4 z-5" }}
525
+
expand {{ $c }} comment{{ if ne $c 1 }}s{{ end }}
526
+
</span>
527
+
</div>
528
+
</summary>
529
+
<div>
530
+
{{ range $item.Comments }}
531
+
{{ template "submissionComment" . }}
532
+
{{ end }}
533
+
</div>
534
+
</details>
518
535
{{ end }}
519
536
520
537
{{ define "submissionComment" }}
521
538
<div id="comment-{{.ID}}" class="flex gap-2 -ml-4 py-4 w-full mx-auto">
522
539
<!-- left column: profile picture -->
523
-
<div class="flex-shrink-0">
540
+
<div class="flex-shrink-0 h-fit relative">
524
541
<img
525
542
src="{{ tinyAvatar .OwnerDid }}"
526
543
alt=""
527
-
class="rounded-full size-8 mr-1 border-2 border-gray-100 dark:border-gray-900"
544
+
class="rounded-full size-8 mr-1 border-2 border-gray-100 dark:border-gray-900 z-5"
528
545
/>
529
546
</div>
530
547
<!-- right column: name and body in two rows -->