forked from kevadesu/forgejo
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:
parent
4807f7be22
commit
ffa4949eaa
14 changed files with 23 additions and 26 deletions
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue