Issue card improvements (#30687)

Fixes https://github.com/go-gitea/gitea/issues/30682 and does a few
improvements:

- Use gap instead of margin/padding
- Don't render empty image div
- Remove `right floated` class that did nothing

<img width="406" alt="Screenshot 2024-04-24 at 20 21 20"
src="https://github.com/go-gitea/gitea/assets/115237/2fa88707-c2c4-40df-aee7-a684c3097ed0">

---------

Co-authored-by: KN4CK3R <admin@oldschoolhack.me>

diff --git a/templates/repo/issue/card.tmpl b/templates/repo/issue/card.tmpl
index bb9340bb2e4cb9f273f7117748eebc0a64675406..4a0ac050aa2ef62f3e7a6fe16338de6d34ce5c65 100644 (file)
--- a/templates/repo/issue/card.tmpl
+++ b/templates/repo/issue/card.tmpl
@@ -1,13 +1,16 @@
 {{with .Issue}}
        {{if eq $.Page.Project.CardType 1}}{{/* Images and Text*/}}
+               {{$attachments := index $.Page.issuesAttachmentMap .ID}}
+               {{if $attachments}}
                <div class="card-attachment-images">
-                       {{range (index $.Page.issuesAttachmentMap .ID)}}
+                       {{range $attachments}}
                                <img src="{{.DownloadURL}}" alt="{{.Name}}" />
                        {{end}}
                </div>
+               {{end}}
        {{end}}
-       <div class="content tw-p-0 tw-w-full">
-               <div class="tw-flex tw-items-start">
+       <div class="content tw-w-full">
+               <div class="tw-flex tw-items-start tw-gap-[5px]">
                        <div class="issue-card-icon">
                                {{template "shared/issueicon" .}}
                        </div>
@@ -18,7 +21,7 @@
                                </a>
                        {{end}}
                </div>
-               <div class="meta tw-my-1">
+               <div class="meta">
                        <span class="text light grey muted-links">
                                {{if not $.Page.Repository}}{{.Repo.FullName}}{{end}}#{{.Index}}
                                {{$timeStr := TimeSinceUnix .GetLastEventTimestamp ctx.Locale}}
@@ -59,13 +62,15 @@
        </div>
 
        {{if or .Labels .Assignees}}
-       <div class="extra content labels-list tw-p-0 tw-pt-1">
-               {{range .Labels}}
-                       <a target="_blank" href="{{$.Issue.Repo.Link}}/issues?labels={{.ID}}">{{RenderLabel ctx ctx.Locale .}}</a>
-               {{end}}
-               <div class="right floated">
+       <div class="tw-flex tw-justify-between">
+               <div class="labels-list tw-flex-1">
+                       {{range .Labels}}
+                               <a target="_blank" href="{{$.Issue.Repo.Link}}/issues?labels={{.ID}}">{{RenderLabel ctx ctx.Locale .}}</a>
+                       {{end}}
+               </div>
+               <div class="tw-flex tw-flex-wrap tw-content-start tw-gap-1">
                        {{range .Assignees}}
-                               <a target="_blank" href="{{.HomeLink}}" data-tooltip-content="{{ctx.Locale.Tr "repo.projects.column.assigned_to"}} {{.Name}}">{{ctx.AvatarUtils.Avatar . 28 "mini tw-mr-2"}}</a>
+                               <a target="_blank" href="{{.HomeLink}}" data-tooltip-content="{{ctx.Locale.Tr "repo.projects.column.assigned_to"}} {{.Name}}">{{ctx.AvatarUtils.Avatar . 28}}</a>
                        {{end}}
                </div>
        </div>

diff --git a/web_src/css/repo/issue-card.css b/web_src/css/repo/issue-card.css
index b9368df4f60bf4571167d20d667a2fa892d9b520..609b1b3dbd7580b8d39693a12087623aea827081 100644 (file)
--- a/web_src/css/repo/issue-card.css
+++ b/web_src/css/repo/issue-card.css
@@ -1,6 +1,7 @@
 .issue-card {
   display: flex;
   flex-direction: column;
+  gap: 4px;
   align-items: start;
   border-radius: var(--border-radius);
   padding: 8px 10px;
@@ -17,7 +18,6 @@
 .issue-card-title {
   flex: 1;
   font-size: 14px;
-  margin-left: 4px;
 }
 
 .issue-card.sortable-chosen .issue-card-title {