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>
This commit is contained in:
silverwind 2024-04-27 15:35:26 +02:00 committed by GitHub
parent 51c28d9683
commit b93c87b6fe
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 16 additions and 11 deletions

View File

@ -1,13 +1,16 @@
{{with .Issue}} {{with .Issue}}
{{if eq $.Page.Project.CardType 1}}{{/* Images and Text*/}} {{if eq $.Page.Project.CardType 1}}{{/* Images and Text*/}}
{{$attachments := index $.Page.issuesAttachmentMap .ID}}
{{if $attachments}}
<div class="card-attachment-images"> <div class="card-attachment-images">
{{range (index $.Page.issuesAttachmentMap .ID)}} {{range $attachments}}
<img src="{{.DownloadURL}}" alt="{{.Name}}" /> <img src="{{.DownloadURL}}" alt="{{.Name}}" />
{{end}} {{end}}
</div> </div>
{{end}}
{{end}} {{end}}
<div class="content tw-p-0 tw-w-full"> <div class="content tw-w-full">
<div class="tw-flex tw-items-start"> <div class="tw-flex tw-items-start tw-gap-[5px]">
<div class="issue-card-icon"> <div class="issue-card-icon">
{{template "shared/issueicon" .}} {{template "shared/issueicon" .}}
</div> </div>
@ -18,7 +21,7 @@
</a> </a>
{{end}} {{end}}
</div> </div>
<div class="meta tw-my-1"> <div class="meta">
<span class="text light grey muted-links"> <span class="text light grey muted-links">
{{if not $.Page.Repository}}{{.Repo.FullName}}{{end}}#{{.Index}} {{if not $.Page.Repository}}{{.Repo.FullName}}{{end}}#{{.Index}}
{{$timeStr := TimeSinceUnix .GetLastEventTimestamp ctx.Locale}} {{$timeStr := TimeSinceUnix .GetLastEventTimestamp ctx.Locale}}
@ -59,13 +62,15 @@
</div> </div>
{{if or .Labels .Assignees}} {{if or .Labels .Assignees}}
<div class="extra content labels-list tw-p-0 tw-pt-1"> <div class="tw-flex tw-justify-between">
{{range .Labels}} <div class="labels-list tw-flex-1">
<a target="_blank" href="{{$.Issue.Repo.Link}}/issues?labels={{.ID}}">{{RenderLabel ctx ctx.Locale .}}</a> {{range .Labels}}
{{end}} <a target="_blank" href="{{$.Issue.Repo.Link}}/issues?labels={{.ID}}">{{RenderLabel ctx ctx.Locale .}}</a>
<div class="right floated"> {{end}}
</div>
<div class="tw-flex tw-flex-wrap tw-content-start tw-gap-1">
{{range .Assignees}} {{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}} {{end}}
</div> </div>
</div> </div>

View File

@ -1,6 +1,7 @@
.issue-card { .issue-card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4px;
align-items: start; align-items: start;
border-radius: var(--border-radius); border-radius: var(--border-radius);
padding: 8px 10px; padding: 8px 10px;
@ -17,7 +18,6 @@
.issue-card-title { .issue-card-title {
flex: 1; flex: 1;
font-size: 14px; font-size: 14px;
margin-left: 4px;
} }
.issue-card.sortable-chosen .issue-card-title { .issue-card.sortable-chosen .issue-card-title {