mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-09-04 01:06:26 +02: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. ![image](https://github.com/go-gitea/gitea/assets/2114189/1b7acfc2-b1c7-4e9c-a983-2fa932026479) --------- 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,6 +1,6 @@
|
||||||
<div class="flex-list">
|
<div class="flex-list">
|
||||||
{{range .Users}}
|
{{range .Users}}
|
||||||
<div class="flex-item flex-item-center">
|
<div class="flex-item gt-ac">
|
||||||
<div class="flex-item-leading">
|
<div class="flex-item-leading">
|
||||||
{{ctx.AvatarUtils.Avatar . 48}}
|
{{ctx.AvatarUtils.Avatar . 48}}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
<div class="flex-list">
|
<div class="flex-list">
|
||||||
{{range .Members}}
|
{{range .Members}}
|
||||||
{{$isPublic := index $.MembersIsPublicMember .ID}}
|
{{$isPublic := index $.MembersIsPublicMember .ID}}
|
||||||
<div class="flex-item {{if $.PublicOnly}}flex-item-center{{end}}">
|
<div class="flex-item {{if $.PublicOnly}}gt-ac{{end}}">
|
||||||
<div class="flex-item-leading">
|
<div class="flex-item-leading">
|
||||||
<a href="{{.HomeLink}}">{{ctx.AvatarUtils.Avatar . 48}}</a>
|
<a href="{{.HomeLink}}">{{ctx.AvatarUtils.Avatar . 48}}</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -24,7 +24,7 @@
|
||||||
<div class="ui attached segment">
|
<div class="ui attached segment">
|
||||||
<div class="flex-list">
|
<div class="flex-list">
|
||||||
{{range .Team.Members}}
|
{{range .Team.Members}}
|
||||||
<div class="flex-item flex-item-center">
|
<div class="flex-item gt-ac">
|
||||||
<div class="flex-item-leading">
|
<div class="flex-item-leading">
|
||||||
<a href="{{.HomeLink}}">{{ctx.AvatarUtils.Avatar . 32}}</a>
|
<a href="{{.HomeLink}}">{{ctx.AvatarUtils.Avatar . 32}}</a>
|
||||||
</div>
|
</div>
|
||||||
|
@ -56,7 +56,7 @@
|
||||||
<div class="ui attached segment">
|
<div class="ui attached segment">
|
||||||
<div class="flex-list">
|
<div class="flex-list">
|
||||||
{{range .Invites}}
|
{{range .Invites}}
|
||||||
<div class="flex-item flex-item-center">
|
<div class="flex-item gt-ac">
|
||||||
<div class="flex-item-main">
|
<div class="flex-item-main">
|
||||||
{{.Email}}
|
{{.Email}}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -28,7 +28,7 @@
|
||||||
<div class="ui attached segment">
|
<div class="ui attached segment">
|
||||||
<div class="flex-list">
|
<div class="flex-list">
|
||||||
{{range .Team.Repos}}
|
{{range .Team.Repos}}
|
||||||
<div class="flex-item flex-item-center">
|
<div class="flex-item gt-ac">
|
||||||
<div class="flex-item-leading">
|
<div class="flex-item-leading">
|
||||||
{{template "repo/icon" .}}
|
{{template "repo/icon" .}}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
</div>
|
</div>
|
||||||
{{end}}
|
{{end}}
|
||||||
{{range .Runs}}
|
{{range .Runs}}
|
||||||
<div class="flex-item flex-item-center">
|
<div class="flex-item gt-ac">
|
||||||
<div class="flex-item-leading">
|
<div class="flex-item-leading">
|
||||||
{{template "repo/actions/status" (dict "status" .Status.String "locale" $.locale)}}
|
{{template "repo/actions/status" (dict "status" .Status.String "locale" $.locale)}}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -41,7 +41,7 @@
|
||||||
<div class="ui attached segment">
|
<div class="ui attached segment">
|
||||||
<div class="flex-list">
|
<div class="flex-list">
|
||||||
{{range .ProtectedBranches}}
|
{{range .ProtectedBranches}}
|
||||||
<div class="flex-item flex-item-center">
|
<div class="flex-item gt-ac">
|
||||||
<div class="flex-item-main">
|
<div class="flex-item-main">
|
||||||
<div class="flex-item-title">
|
<div class="flex-item-title">
|
||||||
<div class="ui basic primary label">{{.RuleName}}</div>
|
<div class="ui basic primary label">{{.RuleName}}</div>
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
<div class="ui attached segment">
|
<div class="ui attached segment">
|
||||||
<div class="flex-list">
|
<div class="flex-list">
|
||||||
{{range .Collaborators}}
|
{{range .Collaborators}}
|
||||||
<div class="flex-item flex-item-center">
|
<div class="flex-item gt-ac">
|
||||||
<div class="flex-item-leading">
|
<div class="flex-item-leading">
|
||||||
<a href="{{.HomeLink}}">{{ctx.AvatarUtils.Avatar . 32}}</a>
|
<a href="{{.HomeLink}}">{{ctx.AvatarUtils.Avatar . 32}}</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -774,7 +774,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{if not .Repository.IsMirror}}
|
{{if not .Repository.IsMirror}}
|
||||||
<div class="flex-item flex-item-center">
|
<div class="flex-item gt-ac">
|
||||||
<div class="flex-item-main">
|
<div class="flex-item-main">
|
||||||
{{if .Repository.IsArchived}}
|
{{if .Repository.IsArchived}}
|
||||||
<div class="flex-item-title">{{.locale.Tr "repo.settings.unarchive.header"}}</div>
|
<div class="flex-item-title">{{.locale.Tr "repo.settings.unarchive.header"}}</div>
|
||||||
|
|
|
@ -1,10 +1,12 @@
|
||||||
<div id="issue-list" class="flex-list">
|
<div id="issue-list" class="flex-list">
|
||||||
{{$approvalCounts := .ApprovalCounts}}
|
{{$approvalCounts := .ApprovalCounts}}
|
||||||
{{range .Issues}}
|
{{range .Issues}}
|
||||||
<div class="flex-item flex-item-baseline">
|
<div class="flex-item">
|
||||||
<div class="flex-item-leading gt-ac">
|
<div class="flex-item-leading">
|
||||||
{{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"}} "{{.Title}}"">
|
<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}}
|
{{end}}
|
||||||
<div class="flex-item-icon">
|
<div class="flex-item-icon">
|
||||||
{{template "shared/issueicon" .}}
|
{{template "shared/issueicon" .}}
|
||||||
|
@ -44,7 +46,7 @@
|
||||||
{{end}}
|
{{end}}
|
||||||
{{if .NumComments}}
|
{{if .NumComments}}
|
||||||
<div class="text grey">
|
<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}}
|
{{svg "octicon-comment" 16}}{{.NumComments}}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -14,7 +14,7 @@
|
||||||
{{if .Secrets}}
|
{{if .Secrets}}
|
||||||
<div class="flex-list">
|
<div class="flex-list">
|
||||||
{{range .Secrets}}
|
{{range .Secrets}}
|
||||||
<div class="flex-item flex-item-center">
|
<div class="flex-item gt-ac">
|
||||||
<div class="flex-item-leading">
|
<div class="flex-item-leading">
|
||||||
{{svg "octicon-key" 32}}
|
{{svg "octicon-key" 32}}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
{{if .Variables}}
|
{{if .Variables}}
|
||||||
<div class="flex-list">
|
<div class="flex-list">
|
||||||
{{range .Variables}}
|
{{range .Variables}}
|
||||||
<div class="flex-item flex-item-center">
|
<div class="flex-item gt-ac">
|
||||||
<div class="flex-item-leading">
|
<div class="flex-item-leading">
|
||||||
{{svg "octicon-pencil" 32}}
|
{{svg "octicon-pencil" 32}}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
{{.locale.Tr "settings.oauth2_application_create_description"}}
|
{{.locale.Tr "settings.oauth2_application_create_description"}}
|
||||||
</div>
|
</div>
|
||||||
{{range .Applications}}
|
{{range .Applications}}
|
||||||
<div class="flex-item flex-item-center">
|
<div class="flex-item gt-ac">
|
||||||
<div class="flex-item-leading">
|
<div class="flex-item-leading">
|
||||||
{{svg "octicon-apps" 32}}
|
{{svg "octicon-apps" 32}}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
{{.locale.Tr "settings.openid_desc"}}
|
{{.locale.Tr "settings.openid_desc"}}
|
||||||
</div>
|
</div>
|
||||||
{{range .OpenIDs}}
|
{{range .OpenIDs}}
|
||||||
<div class="flex-item flex-item-center">
|
<div class="flex-item gt-ac">
|
||||||
<div class="flex-item-leading">
|
<div class="flex-item-leading">
|
||||||
{{svg "fontawesome-openid" 20}}
|
{{svg "fontawesome-openid" 20}}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -9,14 +9,6 @@
|
||||||
padding: 1em 0;
|
padding: 1em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-item-baseline {
|
|
||||||
align-items: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-item-center {
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-item .flex-item-leading {
|
.flex-item .flex-item-leading {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
|
@ -41,8 +33,10 @@
|
||||||
color: var(--color-primary) !important;
|
color: var(--color-primary) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-item .flex-item-icon svg {
|
.flex-item .flex-item-icon {
|
||||||
margin-top: 1px;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 20px; /* match the default flex-item-title height */
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-item .flex-item-trailing {
|
.flex-item .flex-item-trailing {
|
||||||
|
@ -65,6 +59,7 @@
|
||||||
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 {
|
||||||
|
|
Loading…
Reference in a new issue