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>
go-gitea · Feb 17, 2024 · 99934fd · 99934fd
1 parent a4b5cb3
commit 99934fd
Show file tree

Hide file tree

Showing 14 changed files with 23 additions and 26 deletions.
diff --git a/templates/explore/user_list.tmpl b/templates/explore/user_list.tmpl
@@ -1,6 +1,6 @@
 <div class="flex-list">
 	{{range .Users}}
-		<div class="flex-item flex-item-center">
+		<div class="flex-item gt-ac">
 			<div class="flex-item-leading">
 				{{ctx.AvatarUtils.Avatar . 48}}
 			</div>

diff --git a/templates/org/member/members.tmpl b/templates/org/member/members.tmpl
@@ -7,7 +7,7 @@
 		<div class="flex-list">
 			{{range .Members}}
 				{{$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">
 						<a href="{{.HomeLink}}">{{ctx.AvatarUtils.Avatar . 48}}</a>
 					</div>

diff --git a/templates/org/team/members.tmpl b/templates/org/team/members.tmpl
@@ -24,7 +24,7 @@
 				<div class="ui attached segment">
 					<div class="flex-list">
 						{{range .Team.Members}}
-							<div class="flex-item flex-item-center">
+							<div class="flex-item gt-ac">
 								<div class="flex-item-leading">
 									<a href="{{.HomeLink}}">{{ctx.AvatarUtils.Avatar . 32}}</a>
 								</div>
@@ -56,7 +56,7 @@
 				<div class="ui attached segment">
 					<div class="flex-list">
 						{{range .Invites}}
-							<div class="flex-item flex-item-center">
+							<div class="flex-item gt-ac">
 								<div class="flex-item-main">
 									{{.Email}}
 								</div>

diff --git a/templates/org/team/repositories.tmpl b/templates/org/team/repositories.tmpl
@@ -28,7 +28,7 @@
 				<div class="ui attached segment">
 					<div class="flex-list">
 						{{range .Team.Repos}}
-							<div class="flex-item flex-item-center">
+							<div class="flex-item gt-ac">
 								<div class="flex-item-leading">
 									{{template "repo/icon" .}}
 								</div>

diff --git a/templates/repo/actions/runs_list.tmpl b/templates/repo/actions/runs_list.tmpl
@@ -6,7 +6,7 @@
 	</div>
 	{{end}}
 	{{range .Runs}}
-		<div class="flex-item flex-item-center">
+		<div class="flex-item gt-ac">
 			<div class="flex-item-leading">
 				{{template "repo/actions/status" (dict "status" .Status.String "locale" $.locale)}}
 			</div>

diff --git a/templates/repo/settings/branches.tmpl b/templates/repo/settings/branches.tmpl
@@ -41,7 +41,7 @@
 			<div class="ui attached segment">
 				<div class="flex-list">
 					{{range .ProtectedBranches}}
-						<div class="flex-item flex-item-center">
+						<div class="flex-item gt-ac">
 							<div class="flex-item-main">
 								<div class="flex-item-title">
 									<div class="ui basic primary label">{{.RuleName}}</div>

diff --git a/templates/repo/settings/collaboration.tmpl b/templates/repo/settings/collaboration.tmpl
@@ -7,7 +7,7 @@
 		<div class="ui attached segment">
 			<div class="flex-list">
 				{{range .Collaborators}}
-					<div class="flex-item flex-item-center">
+					<div class="flex-item gt-ac">
 						<div class="flex-item-leading">
 							<a href="{{.HomeLink}}">{{ctx.AvatarUtils.Avatar . 32}}</a>
 						</div>

diff --git a/templates/repo/settings/options.tmpl b/templates/repo/settings/options.tmpl
@@ -774,7 +774,7 @@
 					</div>
 				</div>
 				{{if not .Repository.IsMirror}}
-					<div class="flex-item flex-item-center">
+					<div class="flex-item gt-ac">
 						<div class="flex-item-main">
 							{{if .Repository.IsArchived}}
 								<div class="flex-item-title">{{.locale.Tr "repo.settings.unarchive.header"}}</div>

diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl
@@ -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"}} &quot;{{.Title}}&quot;">
+				</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>

diff --git a/templates/shared/secrets/add_list.tmpl b/templates/shared/secrets/add_list.tmpl
@@ -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>

diff --git a/templates/shared/variables/variable_list.tmpl b/templates/shared/variables/variable_list.tmpl
@@ -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>

diff --git 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"}}
 		</div>
 		{{range .Applications}}
-			<div class="flex-item flex-item-center">
+			<div class="flex-item gt-ac">
 				<div class="flex-item-leading">
 					{{svg "octicon-apps" 32}}
 				</div>

diff --git a/templates/user/settings/security/openid.tmpl b/templates/user/settings/security/openid.tmpl
@@ -7,7 +7,7 @@
 			{{.locale.Tr "settings.openid_desc"}}
 		</div>
 		{{range .OpenIDs}}
-			<div class="flex-item flex-item-center">
+			<div class="flex-item gt-ac">
 				<div class="flex-item-leading">
 					{{svg "fontawesome-openid" 20}}
 				</div>

diff --git 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 {