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
··· 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
··· 12 12 <textarea 13 13 id="comment-textarea" 14 14 name="body" 15 - class="w-full p-2 rounded border border-gray-200 dark:border-gray-700" 15 + class="w-full p-2 rounded" 16 16 placeholder="Add to the discussion. Markdown is supported." 17 17 onkeyup="updateCommentForm()" 18 18 rows="5"
+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
··· 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
··· 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;