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">
This commit is contained in:
silverwind 2023-04-04 06:49:09 +02:00 committed by GitHub
parent 2c585d62a4
commit 62a9052075
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 29 additions and 32 deletions

View File

@ -49,9 +49,7 @@
{{$isMember := .IsOrganizationMember}} {{$isMember := .IsOrganizationMember}}
{{range .Members}} {{range .Members}}
{{if or $isMember (call $.IsPublicMember .ID)}} {{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}}
{{end}} {{end}}
</div> </div>

View File

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

View File

@ -25,19 +25,19 @@
{{end}} {{end}}
<div class="ui bottom attached table segment members"> <div class="ui bottom attached table segment members">
{{range .Team.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)))}} {{if and $.IsOrganizationOwner (not (and ($.Team.IsOwnerTeam) (eq (len $.Team.Members) 1)))}}
<form> <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-url="{{$.OrgLink}}/teams/{{$.Team.LowerName | PathEscape}}/action/remove" data-datauid="{{.ID}}"
data-name="{{.DisplayName}}" data-name="{{.DisplayName}}"
data-data-team-name="{{$.Team.Name}}">{{$.locale.Tr "org.members.remove"}}</button> data-data-team-name="{{$.Team.Name}}">{{$.locale.Tr "org.members.remove"}}</button>
</form> </form>
{{end}} {{end}}
<a href="{{.HomeLink}}">
{{avatar $.Context .}}
{{.DisplayName}}
</a>
</div> </div>
{{else}} {{else}}
<div class="item"> <div class="item">

View File

@ -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 .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> <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> </div>

View File

@ -33,25 +33,25 @@
{{end}} {{end}}
<div class="ui bottom attached table segment repositories"> <div class="ui bottom attached table segment repositories">
{{range .Team.Repos}} {{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}} {{if $canAddRemove}}
<form method="post" action="{{$.OrgLink}}/teams/{{$.Team.LowerName | PathEscape}}/action/repo/remove"> <form method="post" action="{{$.OrgLink}}/teams/{{$.Team.LowerName | PathEscape}}/action/repo/remove">
{{$.CsrfTokenHtml}} {{$.CsrfTokenHtml}}
<button type="submit" class="ui red small button right" name="repoid" value="{{.ID}}">{{$.locale.Tr "remove"}}</button> <button type="submit" class="ui red small button right" name="repoid" value="{{.ID}}">{{$.locale.Tr "remove"}}</button>
</form> </form>
{{end}} {{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> </div>
{{else}} {{else}}
<div class="item"> <div class="item">

View File

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