mirror of
https://github.com/go-gitea/gitea
synced 2025-07-22 18:28:37 +00:00
Improve flex list UI (#26970)
1. There is already `gt-ac`, so no need to introduce `flex-item-center` 2. The `flex-item-baseline` and `.flex-item-icon svg { margin-top: 1px }` seem to be a tricky patch, they don't resolve the root problem, and still cause misalignment in some cases. * The root problem is: the "icon" needs to align with the sibling "title" * So, make the "icon" and the "title" both have the same height 3. `flex-text-inline` could only be used if the element is really "inline", otherwise its `vertical-align` would make the box size change. In most cases, `flex-text-block` is good enough.  --------- Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
@@ -1,10 +1,12 @@
|
||||
<div id="issue-list" class="flex-list">
|
||||
{{$approvalCounts := .ApprovalCounts}}
|
||||
{{range .Issues}}
|
||||
<div class="flex-item flex-item-baseline">
|
||||
<div class="flex-item-leading gt-ac">
|
||||
<div class="flex-item">
|
||||
<div class="flex-item-leading">
|
||||
{{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>
|
||||
{{end}}
|
||||
<div class="flex-item-icon">
|
||||
{{template "shared/issueicon" .}}
|
||||
@@ -44,7 +46,7 @@
|
||||
{{end}}
|
||||
{{if .NumComments}}
|
||||
<div class="text grey">
|
||||
<a class="gt-no-underline muted flex-text-inline" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
|
||||
<a class="gt-no-underline muted flex-text-block" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
|
||||
{{svg "octicon-comment" 16}}{{.NumComments}}
|
||||
</a>
|
||||
</div>
|
||||
|
@@ -14,7 +14,7 @@
|
||||
{{if .Secrets}}
|
||||
<div class="flex-list">
|
||||
{{range .Secrets}}
|
||||
<div class="flex-item flex-item-center">
|
||||
<div class="flex-item gt-ac">
|
||||
<div class="flex-item-leading">
|
||||
{{svg "octicon-key" 32}}
|
||||
</div>
|
||||
|
@@ -16,7 +16,7 @@
|
||||
{{if .Variables}}
|
||||
<div class="flex-list">
|
||||
{{range .Variables}}
|
||||
<div class="flex-item flex-item-center">
|
||||
<div class="flex-item gt-ac">
|
||||
<div class="flex-item-leading">
|
||||
{{svg "octicon-pencil" 32}}
|
||||
</div>
|
||||
|
Reference in New Issue
Block a user