Fix issue card layout (#30800)

Fix #30788
This commit is contained in:
wxiaoguang 2024-05-02 19:19:44 +08:00 committed by GitHub
parent ebe6f4cad7
commit 6ff2acc52c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 19 additions and 10 deletions

View File

@ -62,13 +62,13 @@
</div> </div>
{{if or .Labels .Assignees}} {{if or .Labels .Assignees}}
<div class="tw-flex tw-justify-between"> <div class="issue-card-bottom">
<div class="labels-list tw-flex-1"> <div class="labels-list">
{{range .Labels}} {{range .Labels}}
<a target="_blank" href="{{$.Issue.Repo.Link}}/issues?labels={{.ID}}">{{RenderLabel ctx ctx.Locale .}}</a> <a target="_blank" href="{{$.Issue.Repo.Link}}/issues?labels={{.ID}}">{{RenderLabel ctx ctx.Locale .}}</a>
{{end}} {{end}}
</div> </div>
<div class="tw-flex tw-flex-wrap tw-content-start tw-gap-1"> <div class="issue-card-assignees">
{{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}}</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}}

View File

@ -2195,18 +2195,12 @@ td .commit-summary {
display: inline-flex; display: inline-flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 2.5px; gap: 2.5px;
} align-items: center;
.labels-list a {
display: flex;
text-decoration: none;
} }
.labels-list .label { .labels-list .label {
padding: 0 6px; padding: 0 6px;
margin: 0 !important;
min-height: 20px; min-height: 20px;
display: inline-flex !important;
line-height: 1.3; /* there is a `font-size: 1.25em` for inside emoji, so here the line-height needs to be larger slightly */ line-height: 1.3; /* there is a `font-size: 1.25em` for inside emoji, so here the line-height needs to be larger slightly */
} }

View File

@ -23,3 +23,18 @@
.issue-card.sortable-chosen .issue-card-title { .issue-card.sortable-chosen .issue-card-title {
cursor: inherit; cursor: inherit;
} }
.issue-card-bottom {
display: flex;
width: 100%;
justify-content: space-between;
gap: 0.25em;
}
.issue-card-assignees {
display: flex;
align-items: center;
gap: 0.25em;
justify-content: end;
flex-wrap: wrap;
}