Monorepo for Tangled tangled.org

appview/pages/templates/repo/pulls: add collapse comments button #1229

Add a "collapse comments" button because the previous and only way to collapse them, the vertical line, was not always obvious.

collapse comments in action

Signed-off-by: eti eti@eti.tf

Labels

None yet.

assignee

None yet.

Participants 3
AT URI
at://did:plc:xu5apv6kmu5jp7g5hwdnej42/sh.tangled.repo.pull/3mi2zf6ddx622
+9 -4
Diff #0
+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
sign up or login to add to the discussion
1 commit
expand
appview/pages/templates/repo/pulls: add collapse comments button
expand 1 comment
pull request successfully merged
eti.tf submitted #0
1 commit
expand
appview/pages/templates/repo/pulls: add collapse comments button
expand 4 comments

Noice! LGTM

lgtm, should we have a similar chevron-down for expand comments?

how about that @oppi.li?

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 🙂‍↕️