diff options
| author | silverwind <me@silverwind.io> | 2024-04-27 15:35:26 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-04-27 13:35:26 +0000 |
| commit | b93c87b6fe025408777d9f2091d29941e439e58c (patch) | |
| tree | 5523afd2173f88655ad3ff5413b14fa2263a8c66 | |
| parent | 51c28d96838a743d2ba4fd679d92e8e15b536a19 (diff) | |
| download | gitea-b93c87b6fe025408777d9f2091d29941e439e58c.tar.gz gitea-b93c87b6fe025408777d9f2091d29941e439e58c.zip | |
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>
| -rw-r--r-- | templates/repo/issue/card.tmpl | 25 | ||||
| -rw-r--r-- | web_src/css/repo/issue-card.css | 2 |
2 files changed, 16 insertions, 11 deletions
diff --git a/templates/repo/issue/card.tmpl b/templates/repo/issue/card.tmpl index bb9340bb2e..4a0ac050aa 100644 --- 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 b9368df4f6..609b1b3dbd 100644 --- 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 { |