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:
parent
2c585d62a4
commit
62a9052075
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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> {{$.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> {{$.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> {{$.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> {{$.locale.Tr "org.lower_repositories"}}</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue