Skip to content

Commit 99934fd

Browse files
wxiaoguangsilverwindGiteaBot
authored and
pull[bot]
committed
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 <[email protected]> Co-authored-by: Giteabot <[email protected]>
1 parent a4b5cb3 commit 99934fd

File tree

14 files changed

+23
-26
lines changed

14 files changed

+23
-26
lines changed

Diff for: ‎templates/explore/user_list.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="flex-list">
22
{{range .Users}}
3-
<div class="flex-item flex-item-center">
3+
<div class="flex-item gt-ac">
44
<div class="flex-item-leading">
55
{{ctx.AvatarUtils.Avatar . 48}}
66
</div>

Diff for: ‎templates/org/member/members.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<div class="flex-list">
88
{{range .Members}}
99
{{$isPublic := index $.MembersIsPublicMember .ID}}
10-
<div class="flex-item {{if $.PublicOnly}}flex-item-center{{end}}">
10+
<div class="flex-item {{if $.PublicOnly}}gt-ac{{end}}">
1111
<div class="flex-item-leading">
1212
<a href="{{.HomeLink}}">{{ctx.AvatarUtils.Avatar . 48}}</a>
1313
</div>

Diff for: ‎templates/org/team/members.tmpl

+2-2
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
<div class="ui attached segment">
2525
<div class="flex-list">
2626
{{range .Team.Members}}
27-
<div class="flex-item flex-item-center">
27+
<div class="flex-item gt-ac">
2828
<div class="flex-item-leading">
2929
<a href="{{.HomeLink}}">{{ctx.AvatarUtils.Avatar . 32}}</a>
3030
</div>
@@ -56,7 +56,7 @@
5656
<div class="ui attached segment">
5757
<div class="flex-list">
5858
{{range .Invites}}
59-
<div class="flex-item flex-item-center">
59+
<div class="flex-item gt-ac">
6060
<div class="flex-item-main">
6161
{{.Email}}
6262
</div>

Diff for: ‎templates/org/team/repositories.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
<div class="ui attached segment">
2929
<div class="flex-list">
3030
{{range .Team.Repos}}
31-
<div class="flex-item flex-item-center">
31+
<div class="flex-item gt-ac">
3232
<div class="flex-item-leading">
3333
{{template "repo/icon" .}}
3434
</div>

Diff for: ‎templates/repo/actions/runs_list.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
</div>
77
{{end}}
88
{{range .Runs}}
9-
<div class="flex-item flex-item-center">
9+
<div class="flex-item gt-ac">
1010
<div class="flex-item-leading">
1111
{{template "repo/actions/status" (dict "status" .Status.String "locale" $.locale)}}
1212
</div>

Diff for: ‎templates/repo/settings/branches.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
<div class="ui attached segment">
4242
<div class="flex-list">
4343
{{range .ProtectedBranches}}
44-
<div class="flex-item flex-item-center">
44+
<div class="flex-item gt-ac">
4545
<div class="flex-item-main">
4646
<div class="flex-item-title">
4747
<div class="ui basic primary label">{{.RuleName}}</div>

Diff for: ‎templates/repo/settings/collaboration.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<div class="ui attached segment">
88
<div class="flex-list">
99
{{range .Collaborators}}
10-
<div class="flex-item flex-item-center">
10+
<div class="flex-item gt-ac">
1111
<div class="flex-item-leading">
1212
<a href="{{.HomeLink}}">{{ctx.AvatarUtils.Avatar . 32}}</a>
1313
</div>

Diff for: ‎templates/repo/settings/options.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -774,7 +774,7 @@
774774
</div>
775775
</div>
776776
{{if not .Repository.IsMirror}}
777-
<div class="flex-item flex-item-center">
777+
<div class="flex-item gt-ac">
778778
<div class="flex-item-main">
779779
{{if .Repository.IsArchived}}
780780
<div class="flex-item-title">{{.locale.Tr "repo.settings.unarchive.header"}}</div>

Diff for: ‎templates/shared/issuelist.tmpl

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
<div id="issue-list" class="flex-list">
22
{{$approvalCounts := .ApprovalCounts}}
33
{{range .Issues}}
4-
<div class="flex-item flex-item-baseline">
5-
<div class="flex-item-leading gt-ac">
4+
<div class="flex-item">
5+
<div class="flex-item-leading">
66
{{if $.CanWriteIssuesOrPulls}}
7+
<div class="flex-item-icon">
78
<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;">
9+
</div>
810
{{end}}
911
<div class="flex-item-icon">
1012
{{template "shared/issueicon" .}}
@@ -44,7 +46,7 @@
4446
{{end}}
4547
{{if .NumComments}}
4648
<div class="text grey">
47-
<a class="gt-no-underline muted flex-text-inline" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
49+
<a class="gt-no-underline muted flex-text-block" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
4850
{{svg "octicon-comment" 16}}{{.NumComments}}
4951
</a>
5052
</div>

Diff for: ‎templates/shared/secrets/add_list.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
{{if .Secrets}}
1515
<div class="flex-list">
1616
{{range .Secrets}}
17-
<div class="flex-item flex-item-center">
17+
<div class="flex-item gt-ac">
1818
<div class="flex-item-leading">
1919
{{svg "octicon-key" 32}}
2020
</div>

Diff for: ‎templates/shared/variables/variable_list.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
{{if .Variables}}
1717
<div class="flex-list">
1818
{{range .Variables}}
19-
<div class="flex-item flex-item-center">
19+
<div class="flex-item gt-ac">
2020
<div class="flex-item-leading">
2121
{{svg "octicon-pencil" 32}}
2222
</div>

Diff for: ‎templates/user/settings/applications_oauth2_list.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
{{.locale.Tr "settings.oauth2_application_create_description"}}
55
</div>
66
{{range .Applications}}
7-
<div class="flex-item flex-item-center">
7+
<div class="flex-item gt-ac">
88
<div class="flex-item-leading">
99
{{svg "octicon-apps" 32}}
1010
</div>

Diff for: ‎templates/user/settings/security/openid.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
{{.locale.Tr "settings.openid_desc"}}
88
</div>
99
{{range .OpenIDs}}
10-
<div class="flex-item flex-item-center">
10+
<div class="flex-item gt-ac">
1111
<div class="flex-item-leading">
1212
{{svg "fontawesome-openid" 20}}
1313
</div>

Diff for: ‎web_src/css/shared/flex-list.css

+5-10
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,6 @@
99
padding: 1em 0;
1010
}
1111

12-
.flex-item-baseline {
13-
align-items: baseline;
14-
}
15-
16-
.flex-item-center {
17-
align-items: center;
18-
}
19-
2012
.flex-item .flex-item-leading {
2113
display: flex;
2214
align-items: flex-start;
@@ -41,8 +33,10 @@
4133
color: var(--color-primary) !important;
4234
}
4335

44-
.flex-item .flex-item-icon svg {
45-
margin-top: 1px;
36+
.flex-item .flex-item-icon {
37+
display: flex;
38+
align-items: center;
39+
height: 20px; /* match the default flex-item-title height */
4640
}
4741

4842
.flex-item .flex-item-trailing {
@@ -65,6 +59,7 @@
6559
font-weight: var(--font-weight-semibold);
6660
word-break: break-word;
6761
min-width: 0;
62+
min-height: 20px;
6863
}
6964

7065
.flex-item .flex-item-title a {

0 commit comments

Comments
 (0)