pub-solar/forgejo
5
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Improve issue list layout (#26983)

Browse source 
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:
wxiaoguang 2023-09-09 20:23:57 +08:00 committed by GitHub
parent 049b9f3718
commit 58abd4f06c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
templates/shared/issuelist.tmpl
View file

@ -2,16 +2,14 @@
{{$approvalCounts := .ApprovalCounts}} {{$approvalCounts := .ApprovalCounts}}
{{range .Issues}} {{range .Issues}}
<div class="flex-item"> <div class="flex-item">
<div class="flex-item-leading">
<div class="flex-item-icon">
{{if $.CanWriteIssuesOrPulls}} {{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"}} &quot;{{.Title}}&quot;">
<input type="checkbox" autocomplete="off" class="issue-checkbox gt-mr-4" data-issue-id={{.ID}} aria-label="{{$.locale.Tr "repo.issues.action_check"}} &quot;{{.Title}}&quot;">
</div>
{{end}} {{end}}
<div class="flex-item-icon"> {{template "shared/issueicon" .}}
{{template "shared/issueicon" .}}
</div>
</div> </div>
<div class="flex-item-main"> <div class="flex-item-main">
<div class="flex-item-header"> <div class="flex-item-header">
<div class="flex-item-title"> <div class="flex-item-title">

16
web_src/css/repo/issue-list.css
View file

@ -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 { #issue-list .flex-item-body .branches {
display: inline-flex; display: inline-flex;
} }

9
web_src/css/shared/flex-list.css
View file

@ -34,9 +34,11 @@
} }
.flex-item .flex-item-icon { .flex-item .flex-item-icon {
display: flex; align-self: baseline; /* mainly used by the issue list, to align the leading icon with the title */
align-items: center; }
height: 20px; /* match the default flex-item-title height */
.flex-item .flex-item-icon + .flex-item-main {
align-self: baseline;
} }
.flex-item .flex-item-trailing { .flex-item .flex-item-trailing {
@ -59,7 +61,6 @@
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);
word-break: break-word; word-break: break-word;
min-width: 0; min-width: 0;
min-height: 20px;
} }
.flex-item .flex-item-title a { .flex-item .flex-item-title a {