Org pages style fixes (#23901)

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">
go-gitea · Apr 4, 2023 · 62a9052 · 62a9052
1 parent 2c585d6
commit 62a9052
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 32 deletions.
diff --git a/templates/org/home.tmpl b/templates/org/home.tmpl
@@ -49,9 +49,7 @@
 					{{$isMember := .IsOrganizationMember}}
 					{{range .Members}}
 						{{if or $isMember (call $.IsPublicMember .ID)}}
-							<a href="{{.HomeLink}}" title="{{.Name}}{{if .FullName}} ({{.FullName}}){{end}}">
-								{{avatar $.Context .}}
-							</a>
+							<a href="{{.HomeLink}}" title="{{.Name}}{{if .FullName}} ({{.FullName}}){{end}}">{{avatar $.Context . 48}}</a>
 						{{end}}
 					{{end}}
 				</div>

diff --git a/templates/org/member/members.tmpl b/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>

diff --git a/templates/org/team/members.tmpl b/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">

diff --git a/templates/org/team/navbar.tmpl b/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>
diff --git a/templates/org/team/repositories.tmpl b/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">

diff --git a/web_src/css/organization.css b/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;
-  line-height: 32px;
+  padding: 10px 19px;
 }
 
 .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;
+}