Org pages style fixes (#23901) (#23914)

Backport #23901 by @silverwind

Few fixes/enhancements around org pages:

Use flexbox for member and repo lists and tweak rendering of tabs and
list:

<img width="765" alt="Screenshot 2023-04-03 at 22 54 24"
src="https://user-images.githubusercontent.com/115237/229625716-92a834c3-9121-4729-8b9b-3a3973cf9a91.png">
<img width="771" alt="Screenshot 2023-04-03 at 22 55 15"
src="https://user-images.githubusercontent.com/115237/229625719-acc08ce8-4489-44a6-a9b9-e36755c55b1d.png">

Vertically center remove/leave buttons, add link to avatar:

<img width="1223" alt="Screenshot 2023-04-03 at 21 51 20"
src="https://user-images.githubusercontent.com/115237/229612616-b662b795-e754-41a1-a77a-381c267e6104.png">

Co-authored-by: silverwind <me@silverwind.io>

templates/org/home.tmpl

@@ -51,9 +51,7 @@
 					{{$isMember := .IsOrganizationMember}}
 					{{range .Members}}
 						{{if or $isMember (call $.IsPublicMember .ID)}}
-							<a href="{{.HomeLink}}" title="{{.Name}}{{if .FullName}} ({{.FullName}}){{end}}">
+							<a href="{{.HomeLink}}" title="{{.Name}}{{if .FullName}} ({{.FullName}}){{end}}">{{avatar $.Context . 48}}</a>
-								{{avatar $.Context .}}
-							</a>
 						{{end}}
 					{{end}}
 				</div>

templates/org/member/members.tmpl

@@ -8,7 +8,7 @@
 			{{range .Members}}
 				<div class="item ui grid">
 					<div class="ui four wide column" style="display: flex;">
-						{{avatar $.Context . 48}}
+						<a href="{{.HomeLink}}">{{avatar $.Context . 48}}</a>
 						<div>
 							<div class="meta"><a href="{{.HomeLink}}">{{.Name}}</a></div>
 							<div class="meta">{{.FullName}}</div>
@@ -55,7 +55,7 @@
 							{{end}}
 						</div>
 					{{end}}
-					<div class="ui three wide column">
+					<div class="ui three wide column gt-df gt-ac gt-je">
 						<div class="text right">
 							{{if eq $.SignedUser.ID .ID}}
 								<form>

templates/org/team/members.tmpl

@@ -25,19 +25,19 @@
 				{{end}}
 				<div class="ui bottom attached table segment members">
 					{{range .Team.Members}}
-						<div class="item">
+						<div class="item gt-df gt-ac gt-fw">
+							<a href="{{.HomeLink}}">{{avatar $.Context . 48 "gt-mr-3 gt-mb-0"}}</a>
+							<a class="gt-f1" href="{{.HomeLink}}">
+								<strong>{{.DisplayName}}</strong>
+							</a>
 							{{if and $.IsOrganizationOwner (not (and ($.Team.IsOwnerTeam) (eq (len $.Team.Members) 1)))}}
 								<form>
-									<button class="ui red button delete-button right" data-modal-id="remove-team-member"
+									<button class="ui red button delete-button" data-modal-id="remove-team-member"
 										data-url="{{$.OrgLink}}/teams/{{$.Team.LowerName | PathEscape}}/action/remove" data-datauid="{{.ID}}"
 										data-name="{{.DisplayName}}"
 										data-data-team-name="{{$.Team.Name}}">{{$.locale.Tr "org.members.remove"}}</button>
 								</form>
 							{{end}}
-							<a href="{{.HomeLink}}">
-								{{avatar $.Context .}}
-								{{.DisplayName}}
-							</a>
 						</div>
 					{{else}}
 						<div class="item">

templates/org/team/navbar.tmpl

@@ -1,4 +1,4 @@
-<div class="ui top attached tabular menu">
+<div class="ui top attached tabular menu org-team-navbar">
 	<a class="item{{if .PageIsOrgTeamMembers}} active{{end}}" href="{{.OrgLink}}/teams/{{.Team.LowerName | PathEscape}}">{{svg "octicon-person"}} <strong>{{.Team.NumMembers}}</strong>&nbsp; {{$.locale.Tr "org.lower_members"}}</a>
 	<a class="item{{if .PageIsOrgTeamRepos}} active{{end}}" href="{{.OrgLink}}/teams/{{.Team.LowerName | PathEscape}}/repositories">{{svg "octicon-repo"}} <strong>{{.Team.NumRepos}}</strong>&nbsp; {{$.locale.Tr "org.lower_repositories"}}</a>
 </div>

templates/org/team/repositories.tmpl

@@ -33,25 +33,25 @@
 				{{end}}
 				<div class="ui bottom attached table segment repositories">
 					{{range .Team.Repos}}
-						<div class="item">
+						<div class="item gt-df gt-ac gt-fw">
+							{{if .IsPrivate}}
+								{{svg "octicon-lock" 16 "gt-mr-3"}}
+							{{else if .IsFork}}
+								{{svg "octicon-repo-forked" 16 "gt-mr-3"}}
+							{{else if .IsMirror}}
+								{{svg "octicon-mirror" 16 "gt-mr-3"}}
+							{{else}}
+								{{svg "octicon-repo" 16 "gt-mr-3"}}
+							{{end}}
+							<a class="member gt-f1" href="{{$.Org.HomeLink}}/{{.Name | PathEscape}}">
+								<strong>{{$.Org.Name}}/{{.Name}}</strong>
+							</a>
 							{{if $canAddRemove}}
 								<form method="post" action="{{$.OrgLink}}/teams/{{$.Team.LowerName | PathEscape}}/action/repo/remove">
 									{{$.CsrfTokenHtml}}
 									<button type="submit" class="ui red small button right" name="repoid" value="{{.ID}}">{{$.locale.Tr "remove"}}</button>
 								</form>
 							{{end}}
-							<a class="member" href="{{$.Org.HomeLink}}/{{.Name | PathEscape}}">
-								{{if .IsPrivate}}
-									{{svg "octicon-lock"}}
-								{{else if .IsFork}}
-									{{svg "octicon-repo-forked"}}
-								{{else if .IsMirror}}
-									{{svg "octicon-mirror"}}
-								{{else}}
-									{{svg "octicon-repo"}}
-								{{end}}
-								<strong>{{$.Org.Name}}/{{.Name}}</strong>
-							</a>
 						</div>
 					{{else}}
 						<div class="item">

web_src/css/organization.css

@@ -156,11 +156,6 @@
   padding: 10px 15px;
 }
 
-.organization.teams .members a:hover,
-.organization.profile .members a:hover {
-  text-decoration: none;
-}
-
 .organization.teams .members .ui.avatar,
 .organization.profile .members .ui.avatar {
   width: 48px;
@@ -218,8 +213,7 @@
 
 .organization.teams .repositories .item,
 .organization.teams .members .item {
-  padding: 10px 20px;
+  padding: 10px 19px;
-  line-height: 32px;
 }
 
 .organization.teams .repositories .item:not(:last-child),
@@ -230,6 +224,7 @@
 .organization.teams .repositories .item .button,
 .organization.teams .members .item .button {
   padding: 9px 10px;
+  margin: 0;
 }
 
 .organization.teams #add-repo-form input,
@@ -248,3 +243,7 @@
 .organization.teams #repo-top-segment {
   height: 60px;
 }
+
+.org-team-navbar .active.item {
+  background: var(--color-box-body) !important;
+}