From ffa4949eaaf645995c5a20cd302d0256417b97ed Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Fri, 8 Sep 2023 21:57:18 +0800 Subject: [PATCH] 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 Co-authored-by: Giteabot --- templates/explore/user_list.tmpl | 2 +- templates/org/member/members.tmpl | 2 +- templates/org/team/members.tmpl | 4 ++-- templates/org/team/repositories.tmpl | 2 +- templates/repo/actions/runs_list.tmpl | 2 +- templates/repo/settings/branches.tmpl | 2 +- templates/repo/settings/collaboration.tmpl | 2 +- templates/repo/settings/options.tmpl | 2 +- templates/shared/issuelist.tmpl | 8 +++++--- templates/shared/secrets/add_list.tmpl | 2 +- templates/shared/variables/variable_list.tmpl | 2 +- .../user/settings/applications_oauth2_list.tmpl | 2 +- templates/user/settings/security/openid.tmpl | 2 +- web_src/css/shared/flex-list.css | 15 +++++---------- 14 files changed, 23 insertions(+), 26 deletions(-) diff --git a/templates/explore/user_list.tmpl b/templates/explore/user_list.tmpl index cf6a2933b..9abbff6d9 100644 --- a/templates/explore/user_list.tmpl +++ b/templates/explore/user_list.tmpl @@ -1,6 +1,6 @@
{{range .Users}} -
+
{{ctx.AvatarUtils.Avatar . 48}}
diff --git a/templates/org/member/members.tmpl b/templates/org/member/members.tmpl index a15254d04..65ef7b66e 100644 --- a/templates/org/member/members.tmpl +++ b/templates/org/member/members.tmpl @@ -7,7 +7,7 @@
{{range .Members}} {{$isPublic := index $.MembersIsPublicMember .ID}} -
+
{{ctx.AvatarUtils.Avatar . 48}}
diff --git a/templates/org/team/members.tmpl b/templates/org/team/members.tmpl index 13c60d394..cac0c1ce9 100644 --- a/templates/org/team/members.tmpl +++ b/templates/org/team/members.tmpl @@ -24,7 +24,7 @@
{{range .Team.Members}} -
+
{{ctx.AvatarUtils.Avatar . 32}}
@@ -56,7 +56,7 @@
{{range .Invites}} -
+
{{.Email}}
diff --git a/templates/org/team/repositories.tmpl b/templates/org/team/repositories.tmpl index 71c9bb956..44fb1ee08 100644 --- a/templates/org/team/repositories.tmpl +++ b/templates/org/team/repositories.tmpl @@ -28,7 +28,7 @@
{{range .Team.Repos}} -
+
{{template "repo/icon" .}}
diff --git a/templates/repo/actions/runs_list.tmpl b/templates/repo/actions/runs_list.tmpl index d8e27fab5..37a584079 100644 --- a/templates/repo/actions/runs_list.tmpl +++ b/templates/repo/actions/runs_list.tmpl @@ -6,7 +6,7 @@
{{end}} {{range .Runs}} -
+
{{template "repo/actions/status" (dict "status" .Status.String "locale" $.locale)}}
diff --git a/templates/repo/settings/branches.tmpl b/templates/repo/settings/branches.tmpl index fcc3615ce..ef227ff4a 100644 --- a/templates/repo/settings/branches.tmpl +++ b/templates/repo/settings/branches.tmpl @@ -41,7 +41,7 @@
{{range .ProtectedBranches}} -
+
{{.RuleName}}
diff --git a/templates/repo/settings/collaboration.tmpl b/templates/repo/settings/collaboration.tmpl index 900d04417..4c6721eb2 100644 --- a/templates/repo/settings/collaboration.tmpl +++ b/templates/repo/settings/collaboration.tmpl @@ -7,7 +7,7 @@
{{range .Collaborators}} -
+
{{ctx.AvatarUtils.Avatar . 32}}
diff --git a/templates/repo/settings/options.tmpl b/templates/repo/settings/options.tmpl index 5def862f2..16944506f 100644 --- a/templates/repo/settings/options.tmpl +++ b/templates/repo/settings/options.tmpl @@ -774,7 +774,7 @@
{{if not .Repository.IsMirror}} -
+
{{if .Repository.IsArchived}}
{{.locale.Tr "repo.settings.unarchive.header"}}
diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl index 2cd0fb92a..8e91a58d5 100644 --- a/templates/shared/issuelist.tmpl +++ b/templates/shared/issuelist.tmpl @@ -1,10 +1,12 @@
{{$approvalCounts := .ApprovalCounts}} {{range .Issues}} -
-
+
+
{{if $.CanWriteIssuesOrPulls}} +
+
{{end}}
{{template "shared/issueicon" .}} @@ -44,7 +46,7 @@ {{end}} {{if .NumComments}}
- + {{svg "octicon-comment" 16}}{{.NumComments}}
diff --git a/templates/shared/secrets/add_list.tmpl b/templates/shared/secrets/add_list.tmpl index 6215eff36..5a464295f 100644 --- a/templates/shared/secrets/add_list.tmpl +++ b/templates/shared/secrets/add_list.tmpl @@ -14,7 +14,7 @@ {{if .Secrets}}
{{range .Secrets}} -
+
{{svg "octicon-key" 32}}
diff --git a/templates/shared/variables/variable_list.tmpl b/templates/shared/variables/variable_list.tmpl index e62025caa..a9456321e 100644 --- a/templates/shared/variables/variable_list.tmpl +++ b/templates/shared/variables/variable_list.tmpl @@ -16,7 +16,7 @@ {{if .Variables}}
{{range .Variables}} -
+
{{svg "octicon-pencil" 32}}
diff --git a/templates/user/settings/applications_oauth2_list.tmpl b/templates/user/settings/applications_oauth2_list.tmpl index 1a536e50a..348bc82b4 100644 --- a/templates/user/settings/applications_oauth2_list.tmpl +++ b/templates/user/settings/applications_oauth2_list.tmpl @@ -4,7 +4,7 @@ {{.locale.Tr "settings.oauth2_application_create_description"}}
{{range .Applications}} -
+
{{svg "octicon-apps" 32}}
diff --git a/templates/user/settings/security/openid.tmpl b/templates/user/settings/security/openid.tmpl index 86cb161bc..9563910ba 100644 --- a/templates/user/settings/security/openid.tmpl +++ b/templates/user/settings/security/openid.tmpl @@ -7,7 +7,7 @@ {{.locale.Tr "settings.openid_desc"}}
{{range .OpenIDs}} -
+
{{svg "fontawesome-openid" 20}}
diff --git a/web_src/css/shared/flex-list.css b/web_src/css/shared/flex-list.css index b9c22c4a0..b5ae5cbd4 100644 --- a/web_src/css/shared/flex-list.css +++ b/web_src/css/shared/flex-list.css @@ -9,14 +9,6 @@ padding: 1em 0; } -.flex-item-baseline { - align-items: baseline; -} - -.flex-item-center { - align-items: center; -} - .flex-item .flex-item-leading { display: flex; align-items: flex-start; @@ -41,8 +33,10 @@ color: var(--color-primary) !important; } -.flex-item .flex-item-icon svg { - margin-top: 1px; +.flex-item .flex-item-icon { + display: flex; + align-items: center; + height: 20px; /* match the default flex-item-title height */ } .flex-item .flex-item-trailing { @@ -65,6 +59,7 @@ font-weight: var(--font-weight-semibold); word-break: break-word; min-width: 0; + min-height: 20px; } .flex-item .flex-item-title a {