diff options
| author | wxiaoguang <wxiaoguang@gmail.com> | 2023-09-09 20:23:57 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-09-09 20:23:57 +0800 |
| commit | 58abd4f06cb4f60777366122bc75a80fba074546 (patch) | |
| tree | d7e4771a22d3533cae2066348fc4534802df198a | |
| parent | 049b9f37181152e9721a0a7077db3fb24dca1b7a (diff) | |
| download | gitea-58abd4f06cb4f60777366122bc75a80fba074546.tar.gz gitea-58abd4f06cb4f60777366122bc75a80fba074546.zip | |
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.
| -rw-r--r-- | templates/shared/issuelist.tmpl | 12 | ||||
| -rw-r--r-- | web_src/css/repo/issue-list.css | 16 | ||||
| -rw-r--r-- | web_src/css/shared/flex-list.css | 9 |
3 files changed, 26 insertions, 11 deletions
diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl index 8e91a58d51..80d4e3dd85 100644 --- a/templates/shared/issuelist.tmpl +++ b/templates/shared/issuelist.tmpl @@ -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"> diff --git a/web_src/css/repo/issue-list.css b/web_src/css/repo/issue-list.css index f76b690cb1..17ae6ea38f 100644 --- a/web_src/css/repo/issue-list.css +++ b/web_src/css/repo/issue-list.css @@ -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; } diff --git a/web_src/css/shared/flex-list.css b/web_src/css/shared/flex-list.css index b5ae5cbd49..a7cfc8f163 100644 --- a/web_src/css/shared/flex-list.css +++ b/web_src/css/shared/flex-list.css @@ -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 { |