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>
(cherry picked from commit b93c87b6fe025408777d9f2091d29941e439e58c)
This commit is contained in:
silverwind 2024-04-27 15:35:26 +02:00 committed by Earl Warren
parent 38ed1cbc9d
commit cbcee5d87d
No known key found for this signature in database
GPG key ID: 0579CB2928A78A00
2 changed files with 16 additions and 11 deletions

View file

@ -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>

View file

@ -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 {