Monorepo for Tangled tangled.org

appview/pages: add sidebar to issues with labels and participants list

Signed-off-by: oppiliappan <me@oppi.li>

oppi.li 2ca97784 bfdb79be

verified
Changed files
+58 -24
appview
pages
templates
repo
issues
+58 -24
appview/pages/templates/repo/issues/issue.html
··· 9 9 {{ end }} 10 10 11 11 {{ define "repoContentLayout" }} 12 - <div class="grid grid-cols-1 md:grid-cols-4 gap-4 w-full"> 13 - <div class="col-span-1 md:col-span-3"> 12 + <div class="grid grid-cols-1 md:grid-cols-10 gap-4 w-full"> 13 + <div class="col-span-1 md:col-span-8"> 14 14 <section class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto dark:text-white"> 15 15 {{ block "repoContent" . }}{{ end }} 16 16 </section> 17 17 {{ block "repoAfter" . }}{{ end }} 18 18 </div> 19 - <div class="col-span-1 flex flex-col gap-6"> 19 + <div class="col-span-1 md:col-span-2 flex flex-col gap-6"> 20 20 {{ template "issueLabels" . }} 21 21 {{ template "issueParticipants" . }} 22 22 </div> ··· 30 30 {{ if .Issue.Body }} 31 31 <article id="body" class="mt-4 prose dark:prose-invert">{{ .Issue.Body | markdown }}</article> 32 32 {{ end }} 33 - <div class="flex flex-wrap gap-2 items-stretch"> 33 + <div class="flex flex-wrap gap-2 items-stretch mt-4"> 34 34 {{ template "issueReactions" . }} 35 - {{ template "issueLabels" . }} 36 35 </div> 37 36 </section> 38 37 {{ end }} ··· 120 119 {{ end }} 121 120 122 121 {{ define "issueLabels" }} 123 - {{ range $k, $valset := $.Issue.Labels.Inner }} 124 - {{ $d := index $.LabelDefs $k }} 125 - {{ range $v, $s := $valset }} 126 - {{ template "labels/fragments/label" (dict "def" $d "val" $v) }} 127 - {{ end }} 128 - {{ end }} 122 + <div> 123 + <div class="text-sm py-1 flex items-center gap-2 font-bold text-gray-500 dark:text-gray-400 capitalize"> 124 + Labels 125 + <button 126 + class="inline-flex text-gray-500 dark:text-gray-400 {{ if not (or .RepoInfo.Roles.IsOwner .RepoInfo.Roles.IsCollaborator) }}hidden{{ end }}" 127 + popovertarget="add-label-modal" 128 + popovertargetaction="toggle"> 129 + {{ i "plus" "size-4" }} 130 + </button> 131 + </div> 132 + <div class="flex gap-1 items-center flex-wrap"> 133 + {{ range $k, $valset := $.Issue.Labels.Inner }} 134 + {{ $d := index $.LabelDefs $k }} 135 + {{ range $v, $s := $valset }} 136 + {{ template "labels/fragments/label" (dict "def" $d "val" $v) }} 137 + {{ end }} 138 + {{ else }} 139 + <p class="text-gray-500 dark:text-gray-400 ">No labels yet.</p> 140 + {{ end }} 129 141 130 - <button 131 - class="btn text-gray-500 dark:text-gray-400" 132 - popovertarget="add-label-modal" 133 - {{ if not (or .RepoInfo.Roles.IsOwner .RepoInfo.Roles.IsCollaborator) }}disabled{{ end }} 134 - popovertargetaction="toggle"> 135 - {{ i "plus" "size-4" }} 136 - </button> 137 - <div 138 - id="add-label-modal" 139 - popover 140 - class="bg-white w-full sm:w-96 dark:bg-gray-800 p-6 rounded border border-gray-200 dark:border-gray-700 drop-shadow dark:text-white backdrop:bg-gray-400/50 dark:backdrop:bg-gray-800/50"> 141 - {{ template "repo/fragments/addLabelModal" (dict "root" $ "subject" $.Issue.AtUri.String "state" $.Issue.Labels) }} 142 + <div 143 + id="add-label-modal" 144 + popover 145 + class="bg-white w-full sm:w-[30rem] dark:bg-gray-800 p-6 rounded border border-gray-200 dark:border-gray-700 drop-shadow dark:text-white backdrop:bg-gray-400/50 dark:backdrop:bg-gray-800/50"> 146 + {{ template "repo/fragments/addLabelModal" (dict "root" $ "subject" $.Issue.AtUri.String "state" $.Issue.Labels) }} 147 + </div> 148 + </div> 149 + </div> 150 + {{ end }} 151 + 152 + {{ define "issueParticipants" }} 153 + {{ $all := .Issue.Participants }} 154 + {{ $ps := take $all 5 }} 155 + <div> 156 + <div class="py-1 flex items-center text-sm"> 157 + <span class="font-bold text-gray-500 dark:text-gray-400 capitalize">Participants</span> 158 + <span class="bg-gray-200 dark:bg-gray-700 rounded py-1/2 px-1 ml-1">{{ len $all }}</span> 159 + </div> 160 + <div class="flex items-center -space-x-2 mt-2"> 161 + {{ $c := "z-50 z-40 z-30 z-20 z-10" }} 162 + {{ range $i, $p := $ps }} 163 + <img 164 + src="{{ tinyAvatar . }}" 165 + alt="" 166 + class="rounded-full h-8 w-8 mr-1 border-2 border-gray-300 dark:border-gray-700 z-{{sub 5 $i}}0" 167 + /> 168 + {{ end }} 169 + 170 + {{ if gt (len $all) 5 }} 171 + <span class="pl-4 text-gray-500 dark:text-gray-400 text-sm"> 172 + +{{ sub (len $all) 5 }} 173 + </span> 174 + {{ end }} 175 + </div> 142 176 </div> 143 177 {{ end }} 144 178 ··· 154 188 }} 155 189 156 190 {{ template "repo/issues/fragments/newComment" . }} 157 - <div> 191 + </div> 158 192 {{ end }}