Skip to content

WIP: overhaul profile overview tab UI #27183

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 10 commits into
base: main
Choose a base branch
from
Draft

WIP: overhaul profile overview tab UI #27183

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
515a6da
Add .profile README to organization pages
hazycora Sep 19, 2023
2272f9a
Update templates/org/menu.tmpl
techknowlogick Sep 20, 2023
920ae84
overhaul overview pages
hazycora Sep 20, 2023
1ba8c19
refactor organization home route
hazycora Sep 20, 2023
9d05082
fix repository list on overview tab of users
hazycora Sep 20, 2023
e1c2195
fix overview repo list sort order
hazycora Sep 21, 2023
eac0765
only include first 5 topics of repositories in grids
hazycora Sep 21, 2023
e97defe
Update web_src/css/shared/grid-list.css
6543 Jan 27, 2024
e64460e
Merge branch 'main' into feat/overhaul-profile-overview
6543 Jan 27, 2024
c603f02
adopt refactor
6543 Jan 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions routers/web/org/members.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,8 @@ func Members(ctx *context.Context) {
ctx.Data["MembersIsUserOrgOwner"] = organization.IsUserOrgOwner(ctx, members, org.ID)
ctx.Data["MembersTwoFaStatus"] = members.GetTwoFaStatus(ctx)

shared_user.RenderUserHeader(ctx)

ctx.HTML(http.StatusOK, tplMembers)
}

Expand Down
5 changes: 5 additions & 0 deletions routers/web/org/teams.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ func Teams(ctx *context.Context) {
return
}

shared_user.RenderUserHeader(ctx)
ctx.HTML(http.StatusOK, tplTeams)
}

Expand Down Expand Up @@ -280,6 +281,7 @@ func NewTeam(ctx *context.Context) {
ctx.ServerError("LoadHeaderCount", err)
return
}
shared_user.RenderUserHeader(ctx)
ctx.HTML(http.StatusOK, tplTeamNew)
}

Expand Down Expand Up @@ -345,6 +347,7 @@ func NewTeamPost(ctx *context.Context) {
ctx.Data["PageIsOrgTeamsNew"] = true
ctx.Data["Units"] = unit_model.Units
ctx.Data["Team"] = t
shared_user.RenderUserHeader(ctx)

if ctx.HasError() {
ctx.HTML(http.StatusOK, tplTeamNew)
Expand Down Expand Up @@ -395,6 +398,7 @@ func TeamMembers(ctx *context.Context) {
ctx.Data["Invites"] = invites
ctx.Data["IsEmailInviteEnabled"] = setting.MailService != nil

shared_user.RenderUserHeader(ctx)
ctx.HTML(http.StatusOK, tplTeamMembers)
}

Expand All @@ -414,6 +418,7 @@ func TeamRepositories(ctx *context.Context) {
return
}
ctx.Data["Units"] = unit_model.Units
shared_user.RenderUserHeader(ctx)
ctx.HTML(http.StatusOK, tplTeamRepositories)
}

Expand Down
79 changes: 79 additions & 0 deletions templates/explore/repo_grid.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
<div class="grid-list">
{{range .Repos}}
<div class="grid-item">
<div class="grid-item-main">
<div class="grid-item-header">
<div class="grid-item-title">
{{if $.IsPrivate}}
{{svg "octicon-lock" 16}}
{{else if $.IsMirror}}
{{svg "octicon-mirror" 16}}
{{else if $.IsFork}}
{{svg "octicon-repo-forked" 16}}
{{else}}
{{svg "octicon-repo" 16}}
{{end}}
<a class="text primary name" href="{{.Link}}">
{{if or $.PageIsExplore $.PageIsProfileStarList}}{{if .Owner}}{{.Owner.Name}} / {{end}}{{end}}{{.Name}}
</a>
<span class="label-list">
{{if .IsArchived}}
<span class="ui basic label">{{ctx.Locale.Tr "repo.desc.archived"}}</span>
{{end}}
{{if .IsTemplate}}
{{if .IsPrivate}}
<span class="ui basic label">{{ctx.Locale.Tr "repo.desc.private_template"}}</span>
{{else}}
{{if .Owner.Visibility.IsPrivate}}
<span class="ui basic label">{{ctx.Locale.Tr "repo.desc.internal_template"}}</span>
{{end}}
{{end}}
{{else}}
{{if .IsPrivate}}
<span class="ui basic label">{{ctx.Locale.Tr "repo.desc.private"}}</span>
{{else}}
{{if .Owner.Visibility.IsPrivate}}
<span class="ui basic label">{{ctx.Locale.Tr "repo.desc.internal"}}</span>
{{end}}
{{end}}
{{end}}
</span>
{{if .IsFork}}
<span data-tooltip-content="{{ctx.Locale.Tr "repo.fork"}}">{{svg "octicon-repo-forked"}}</span>
{{else if .IsMirror}}
<span data-tooltip-content="{{ctx.Locale.Tr "mirror"}}">{{svg "octicon-mirror"}}</span>
{{end}}
</div>
</div>
{{$description := .DescriptionHTML $.Context}}
{{if $description}}
<div class="grid-item-body">{{$description}}</div>
{{end}}
{{if .Topics}}
<div class="label-list">
{{range $i, $e := .Topics}}
{{if and (lt $i 5) (ne $e "")}}<a class="ui label" href="{{AppSubUrl}}/explore/repos?q={{.}}&topic=1">{{.}}</a>{{end}}
{{end}}
</div>
{{end}}
</div>
<div class="grid-item-footer">
<div class="grid-item-trailing">
{{if .PrimaryLanguage}}
<a class="muted" href="{{$.Link}}?q={{$.Keyword}}&sort={{$.SortType}}&language={{.PrimaryLanguage.Language}}">
<span class="flex-text-inline"><i class="color-icon gt-mr-3" style="background-color: {{.PrimaryLanguage.Color}}"></i>{{.PrimaryLanguage.Language}}</span>
</a>
{{end}}
{{if not $.DisableStars}}
<a class="text grey flex-text-inline" href="{{.Link}}/stars">{{svg "octicon-star" 16}}{{.NumStars}}</a>
{{end}}
<a class="text grey flex-text-inline" href="{{.Link}}/forks">{{svg "octicon-git-branch" 16}}{{.NumForks}}</a>
</div>
</div>
</div>
{{else}}
<div>
{{ctx.Locale.Tr "explore.repo_no_results"}}
</div>
{{end}}
</div>
15 changes: 10 additions & 5 deletions templates/org/home.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,12 +40,17 @@
<div class="ui container">
<div class="ui mobile reversed stackable grid">
<div class="ui {{if .ShowMemberAndTeamTab}}eleven wide{{end}} column">
{{if .ProfileReadme}}
<div id="readme_profile" class="markup">{{.ProfileReadme | Str2html}}</div>
{{if eq .TabName "repositories"}}
{{template "explore/repo_search" .}}
{{template "explore/repo_list" .}}
{{template "base/paginate" .}}
{{else}}
{{if .ProfileReadme}}
<div id="readme_profile" class="render-content markup"> {{$.ProfileReadme|Str2html}} </div>
<div class="divider"></div>
{{end}}
{{template "explore/repo_grid" .}}
{{end}}
{{template "explore/repo_search" .}}
{{template "explore/repo_list" .}}
{{template "base/paginate" .}}
</div>

{{if .ShowMemberAndTeamTab}}
Expand Down
5 changes: 4 additions & 1 deletion templates/org/menu.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
<div class="ui container">
<div class="ui secondary stackable pointing menu">
<a class="{{if .PageIsViewRepositories}}active {{end}}item" href="{{$.Org.HomeLink}}">
<a class="{{if or (eq .TabName "overview") (and (eq .TabName "") (not .IsPackagesPage) (not .PageIsViewProjects))}}active {{end}}item" href="{{.ContextUser.HomeLink}}?tab=overview">
{{svg "octicon-info"}} {{ctx.Locale.Tr "user.overview"}}
</a>
<a class="{{if or (eq .TabName "repositories") (and (eq .TabName "") (not .PageIsViewRepositories))}}active {{end}}item" href="{{$.Org.HomeLink}}?tab=repositories">
{{svg "octicon-repo"}} {{ctx.Locale.Tr "user.repositories"}}
{{if .RepoCount}}
<div class="ui small label">{{.RepoCount}}</div>
Expand Down
2 changes: 0 additions & 2 deletions templates/user/overview/header.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
<div class="ui secondary stackable pointing menu">
{{if and .HasProfileReadme .ContextUser.IsIndividual}}
<a class="{{if eq .TabName "overview"}}active {{end}}item" href="{{.ContextUser.HomeLink}}?tab=overview">
{{svg "octicon-info"}} {{ctx.Locale.Tr "user.overview"}}
</a>
{{end}}
<a class="{{if eq .TabName "repositories"}}active {{end}} item" href="{{.ContextUser.HomeLink}}?tab=repositories">
{{svg "octicon-repo"}} {{ctx.Locale.Tr "user.repositories"}}
{{if .RepoCount}}
Expand Down
9 changes: 8 additions & 1 deletion templates/user/profile.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,14 @@
{{else if eq .TabName "followers"}}
{{template "repo/user_cards" .}}
{{else if eq .TabName "overview"}}
<div id="readme_profile" class="markup">{{.ProfileReadme | Str2html}}</div>
{{if .HasProfileReadme}}
<div id="readme_profile" class="markup">{{.ProfileReadme | Str2html}}</div>
<div class="divider"></div>
{{end}}
{{template "explore/repo_grid" .}}
<div class="divider"></div>
{{template "user/heatmap" .}}
{{template "user/dashboard/feeds" .}}
{{else}}
{{template "explore/repo_search" .}}
{{template "explore/repo_list" .}}
Expand Down
1 change: 1 addition & 0 deletions web_src/css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
@import "./modules/flexcontainer.css";

@import "./shared/flex-list.css";
@import "./shared/grid-list.css";
@import "./shared/milestone.css";
@import "./shared/repoorg.css";
@import "./shared/settings.css";
Expand Down
63 changes: 63 additions & 0 deletions web_src/css/shared/grid-list.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
.grid-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
gap: 1rem;
}

.grid-item {
border-radius: 0.5rem;
padding: 1em;
display: grid;
gap: 8px;
align-items: flex-start;
border: 1px solid var(--color-secondary);
grid-template-rows: 1fr min-content;
}

.grid-item .grid-item-main {
display: grid;
gap: 4px;
}

.grid-item .grid-item-header {
display: flex;
gap: 0.25rem;
justify-content: space-between;
flex-wrap: wrap;
}

.grid-item .grid-item-title {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: .25rem;
max-width: 100%;
color: var(--color-text);
font-size: 16px;
font-weight: var(--font-weight-semibold);
word-break: break-word;
min-width: 0;
}

.grid-item .grid-item-body {
font-size: 13px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.25rem;
color: var(--color-text-light-2);
word-break: break-word;
}

.grid-item .grid-item-footer {
grid-column: 1 / -1;
}

.grid-item .grid-item-trailing {
display: flex;
gap: 0.5rem;
align-items: center;
flex-grow: 0;
flex-wrap: wrap;
justify-content: end;
}