Skip to content

Commit 4952a48

Browse files
wxiaoguangwxiaoguang
authored
Clean up org pages layout (#37445)
1. Fix overview sidebar regression 2. Remove unnecessary classes and styles 3. Fix "org invite" page
1 parent 89d358d commit 4952a48

8 files changed

Lines changed: 52 additions & 101 deletions

File tree

‎routers/web/org/teams.go‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -609,6 +609,8 @@ func DeleteTeam(ctx *context.Context) {
609609
// TeamInvite renders the team invite page
610610
func TeamInvite(ctx *context.Context) {
611611
invite, org, team, inviter, err := getTeamInviteFromContext(ctx)
612+
// TODO: to quickly debug the UI, can uncomment this (don't worry, it won't pass CI lint)
613+
// invite, org, team, inviter, err = &org_model.TeamInvite{}, &org_model.Organization{}, &org_model.Team{}, ctx.Doer, nil
612614
if err != nil {
613615
if org_model.IsErrTeamInviteNotFound(err) {
614616
ctx.NotFound(err)

‎templates/org/header.tmpl‎

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
<div class="ui container tw-flex">
2-
{{ctx.AvatarUtils.Avatar .Org 100 "org-avatar"}}
3-
<div id="org-info" class="tw-flex tw-flex-col tw-flex-1 tw-break-anywhere">
4-
<div class="ui header">
5-
{{.Org.DisplayName}}
6-
<span class="org-visibility">
1+
<div class="ui container tw-flex tw-gap-4">
2+
<div>{{ctx.AvatarUtils.Avatar .Org 100}}</div>
3+
<div class="flex-relaxed-list">
4+
<div class="ui header flex-left-right tw-m-0">
5+
<div class="flex-text-block">
6+
<span class="tw-text-2xl">{{.Org.DisplayName}}</span>
77
{{if .Org.Visibility.IsLimited}}<span class="ui large basic horizontal label">{{ctx.Locale.Tr "org.settings.visibility.limited_shortname"}}</span>{{end}}
88
{{if .Org.Visibility.IsPrivate}}<span class="ui large basic horizontal label">{{ctx.Locale.Tr "org.settings.visibility.private_shortname"}}</span>{{end}}
9-
</span>
10-
<span class="flex-text-block tw-ml-auto tw-text-16 tw-whitespace-nowrap">
9+
</div>
10+
<div class="flex-text-block">
1111
{{if .EnableFeed}}
1212
<a class="ui basic label button" href="{{.Org.HomeLink}}.rss" data-tooltip-content="{{ctx.Locale.Tr "rss_feed"}}">
1313
{{svg "octicon-rss" 24}}
@@ -16,14 +16,20 @@
1616
{{if .IsSigned}}
1717
{{template "org/follow_unfollow" .}}
1818
{{end}}
19-
</span>
19+
</div>
2020
</div>
21-
{{if .RenderedDescription}}<div class="render-content markup">{{.RenderedDescription}}</div>{{end}}
22-
<div class="tw-text-text-light meta tw-mt-1">
23-
{{if .Org.Location}}<div class="flex-text-block">{{svg "octicon-location"}} <span>{{.Org.Location}}</span></div>{{end}}
24-
{{if .Org.Website}}<div class="flex-text-block">{{svg "octicon-link"}} <a class="muted" target="_blank" rel="me" href="{{.Org.Website}}">{{.Org.Website}}</a></div>{{end}}
25-
{{if .IsSigned}}
26-
{{if .Org.Email}}<div class="flex-text-block">{{svg "octicon-mail"}} <a class="muted" href="mailto:{{.Org.Email}}">{{.Org.Email}}</a></div>{{end}}
21+
{{if .RenderedDescription}}
22+
<div class="render-content markup">{{.RenderedDescription}}</div>
23+
{{end}}
24+
<div>
25+
{{if .Org.Location}}
26+
<div class="flex-text-block">{{svg "octicon-location"}} <span>{{.Org.Location}}</span></div>
27+
{{end}}
28+
{{if .Org.Website}}
29+
<div class="flex-text-block">{{svg "octicon-link"}} <a class="muted" target="_blank" rel="me" href="{{.Org.Website}}">{{.Org.Website}}</a></div>
30+
{{end}}
31+
{{if and .IsSigned .Org.Email}}
32+
<div class="flex-text-block">{{svg "octicon-mail"}} <a class="muted" href="mailto:{{.Org.Email}}">{{.Org.Email}}</a></div>
2733
{{end}}
2834
</div>
2935
</div>

‎templates/org/home.tmpl‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -55,11 +55,12 @@
5555
{{end}}
5656

5757
{{if .NumMembers}}
58-
<h4 class="ui top attached header tw-flex">
59-
<strong class="tw-flex-1">{{ctx.Locale.Tr "org.members"}}</strong>
58+
<h4 class="ui top attached header flex-left-right">
59+
<strong>{{ctx.Locale.Tr "org.members"}}</strong>
6060
<a class="tw-text-text-light flex-text-inline" href="{{.OrgLink}}/members"><span>{{.NumMembers}}</span> {{svg "octicon-chevron-right"}}</a>
6161
</h4>
62-
<div class="ui attached segment members">
62+
{{/* gap 8px below is specifically chosen to make sure a full line of avatars can exactly fit the segment width */}}
63+
<div class="ui attached segment flex-text-block tw-flex-wrap tw-gap-[8px]">
6364
{{range $memberUser := .OrgOverviewMembers}}
6465
{{if or $.IsOrganizationMember (call $.IsPublicMember $memberUser.ID)}}
6566
{{template "shared/user/avatarlink" dict "user" $memberUser "size" 32 "tooltip" true}}
@@ -68,20 +69,22 @@
6869
</div>
6970
{{end}}
7071
{{if .IsOrganizationMember}}
71-
<div class="ui top attached header tw-flex">
72-
<strong class="tw-flex-1">{{ctx.Locale.Tr "org.teams"}}</strong>
72+
<div class="ui top attached header flex-left-right">
73+
<strong>{{ctx.Locale.Tr "org.teams"}}</strong>
7374
<a class="tw-text-text-light flex-text-inline" href="{{.OrgLink}}/teams"><span>{{.Org.NumTeams}}</span> {{svg "octicon-chevron-right"}}</a>
7475
</div>
75-
<div class="ui attached table segment teams">
76+
<div class="ui attached segment">
77+
<div class="flex-relaxed-list">
7678
{{range .OrgOverviewTeams}}
77-
<div class="item">
78-
<a href="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}"><strong class="team-name">{{.Name}}</strong></a>
79+
<div>
80+
<a href="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}"><strong>{{.Name}}</strong></a>
7981
<p class="tw-text-text-light">
8082
<a class="muted" href="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}"><strong>{{.NumMembers}}</strong> {{ctx.Locale.Tr "org.lower_members"}}</a> ·
8183
<a class="muted" href="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}/repositories"><strong>{{.NumRepos}}</strong> {{ctx.Locale.Tr "org.lower_repositories"}}</a>
8284
</p>
8385
</div>
8486
{{end}}
87+
</div>
8588
</div>
8689
{{if .IsOrganizationOwner}}
8790
<div class="ui bottom attached segment">

‎templates/org/team/invite.tmpl‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,14 @@
11
{{template "base/head" .}}
2-
<div role="main" aria-label="{{.Title}}" class="page-content organization invite">
2+
<div role="main" aria-label="{{.Title}}" class="page-content">
33
<div class="ui container">
44
{{template "base/alert" .}}
5-
<div class="ui centered card">
6-
<div class="image">
7-
{{ctx.AvatarUtils.Avatar .Organization 140}}
8-
</div>
9-
<div class="content">
10-
<div class="header">{{ctx.Locale.Tr "org.teams.invite.title" .Team.Name .Organization.Name}}</div>
11-
<div class="meta">{{ctx.Locale.Tr "org.teams.invite.by" .Inviter.Name}}</div>
12-
<div class="description">{{ctx.Locale.Tr "org.teams.invite.description"}}</div>
13-
</div>
14-
<div class="extra content">
15-
<form class="ui form" action="" method="post">
5+
<div class="tw-flex tw-justify-center">
6+
<div class="flex-relaxed-list">
7+
<div class="tw-flex tw-justify-center">{{ctx.AvatarUtils.Avatar .Organization 140}}</div>
8+
<div>{{ctx.Locale.Tr "org.teams.invite.title" .Team.Name .Organization.Name}}</div>
9+
<div>{{ctx.Locale.Tr "org.teams.invite.by" .Inviter.Name}}</div>
10+
<div>{{ctx.Locale.Tr "org.teams.invite.description"}}</div>
11+
<form class="ui form tw-mt-4" action="" method="post">
1612
<button class="fluid ui primary button">{{ctx.Locale.Tr "org.teams.join"}}</button>
1713
</form>
1814
</div>

‎templates/org/team/sidebar.tmpl‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,21 +15,21 @@
1515
{{end}}
1616
</div>
1717
</h4>
18-
<div class="ui attached table segment detail">
19-
<div class="item">
18+
19+
<div class="ui attached segment">
2020
{{if .Team.Description}}
2121
{{.Team.Description}}
2222
{{else}}
2323
<span class="tw-text-text-light tw-italic">{{ctx.Locale.Tr "org.teams.no_desc"}}</span>
2424
{{end}}
2525
</div>
26-
{{if eq .Team.LowerName "owners"}}
27-
<div class="item">
26+
27+
<div class="ui attached segment">
28+
{{/* TODO: old indent is kept to make diff changes minimal, can be reformatted in the future */}}
29+
{{if eq .Team.LowerName "owners"}}
2830
<p>{{ctx.Locale.Tr "org.teams.owners_permission_desc"}}</p>
2931
<p>{{ctx.Locale.Tr "org.teams.owners_permission_suggestion"}}</p>
30-
</div>
31-
{{else}}
32-
<div class="item">
32+
{{else}}
3333
<h3>{{ctx.Locale.Tr "org.team_access_desc"}}</h3>
3434
<ul>
3535
{{if .Team.IncludesAllRepositories}}
@@ -75,9 +75,9 @@
7575
</tbody>
7676
</table>
7777
{{end}}
78-
</div>
79-
{{end}}
80-
</div>
78+
{{end}}
79+
</div>
80+
8181
{{if .IsOrganizationOwner}}
8282
<div class="ui bottom attached segment">
8383
<a class="ui small button" href="{{.OrgLink}}/teams/{{.Team.LowerName | PathEscape}}/edit">{{svg "octicon-gear"}} {{ctx.Locale.Tr "org.teams.settings"}}</a>

‎web_src/css/index.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@
3737

3838
@import "./shared/flex-list.css";
3939
@import "./shared/milestone.css";
40-
@import "./shared/repoorg.css";
4140
@import "./shared/settings.css";
4241

4342
@import "./features/dropzone.css";

‎web_src/css/org.css‎

Lines changed: 0 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,3 @@
1-
.organization .head .ui.header .ui.right {
2-
margin-top: 5px;
3-
}
4-
5-
.page-content.organization .org-avatar {
6-
margin-right: 15px;
7-
}
8-
9-
.page-content.organization #org-info .ui.header {
10-
display: flex;
11-
align-items: center;
12-
font-size: 36px;
13-
margin-bottom: 0;
14-
}
15-
16-
.page-content.organization #org-info .desc {
17-
font-size: 16px;
18-
margin-bottom: 10px;
19-
}
20-
211
.page-content.organization .team-item-box > .team-item-header {
222
min-height: 50px; /* the header sometimes contains a mini button, sometimes not, so we set a min-height to make sure the layout is consistent */
233
}
@@ -30,20 +10,3 @@
3010
white-space: nowrap;
3111
color: var(--color-text-light-3);
3212
}
33-
34-
.organization.invite .ui.avatar {
35-
width: 100%;
36-
height: 100%;
37-
}
38-
39-
.organization.teams .detail .item {
40-
padding: 10px 15px;
41-
}
42-
43-
.organization.teams .detail .item:not(:last-child) {
44-
border-bottom: 1px solid var(--color-secondary);
45-
}
46-
47-
.org-team-navbar .active.item {
48-
background: var(--color-box-body) !important;
49-
}

‎web_src/css/shared/repoorg.css‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

0 commit comments

Comments
 (0)