Improve issue list layout (#26983)
Align everything with a new layout. * Use "baseline" for some special elements, the "flex-item-icon" is for the issue list only at the moment and I think it should be general enough now (but not using "flex-item-leading" anymore in this case). * Make the labels stretch themselves.
This commit is contained in:
parent
049b9f3718
commit
58abd4f06c
|
@ -2,16 +2,14 @@
|
|||
{{$approvalCounts := .ApprovalCounts}}
|
||||
{{range .Issues}}
|
||||
<div class="flex-item">
|
||||
<div class="flex-item-leading">
|
||||
|
||||
<div class="flex-item-icon">
|
||||
{{if $.CanWriteIssuesOrPulls}}
|
||||
<div class="flex-item-icon">
|
||||
<input type="checkbox" autocomplete="off" class="issue-checkbox gt-mr-4" data-issue-id={{.ID}} aria-label="{{$.locale.Tr "repo.issues.action_check"}} "{{.Title}}"">
|
||||
</div>
|
||||
<input type="checkbox" autocomplete="off" class="issue-checkbox gt-mr-4" data-issue-id={{.ID}} aria-label="{{$.locale.Tr "repo.issues.action_check"}} "{{.Title}}"">
|
||||
{{end}}
|
||||
<div class="flex-item-icon">
|
||||
{{template "shared/issueicon" .}}
|
||||
</div>
|
||||
{{template "shared/issueicon" .}}
|
||||
</div>
|
||||
|
||||
<div class="flex-item-main">
|
||||
<div class="flex-item-header">
|
||||
<div class="flex-item-title">
|
||||
|
|
|
@ -33,6 +33,22 @@
|
|||
}
|
||||
}
|
||||
|
||||
#issue-list .flex-item-title .labels-list {
|
||||
display: flex;
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
#issue-list .flex-item-title .labels-list a {
|
||||
display: flex;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#issue-list .flex-item-title .labels-list .label {
|
||||
padding: 0 6px;
|
||||
margin: 0;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
#issue-list .flex-item-body .branches {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
|
|
@ -34,9 +34,11 @@
|
|||
}
|
||||
|
||||
.flex-item .flex-item-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 20px; /* match the default flex-item-title height */
|
||||
align-self: baseline; /* mainly used by the issue list, to align the leading icon with the title */
|
||||
}
|
||||
|
||||
.flex-item .flex-item-icon + .flex-item-main {
|
||||
align-self: baseline;
|
||||
}
|
||||
|
||||
.flex-item .flex-item-trailing {
|
||||
|
@ -59,7 +61,6 @@
|
|||
font-weight: var(--font-weight-semibold);
|
||||
word-break: break-word;
|
||||
min-width: 0;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.flex-item .flex-item-title a {
|
||||
|
|
Loading…
Reference in New Issue
Block a user