Fix ::User Profile Page - Project/Packages Tabs Have Inconsistent Layout

routers/web/org/projects.go

@@ -41,6 +41,7 @@ func MustEnableProjects(ctx *context.Context) {
 
 // Projects renders the home page of projects
 func Projects(ctx *context.Context) {
+	shared_user.RenderProfileBigAvatar(ctx)
 	ctx.Data["Title"] = ctx.Tr("repo.project_board")
 
 	sortType := ctx.FormTrim("sort")

routers/web/shared/user/header.go

@@ -4,12 +4,102 @@
 package user
 
 import (
+	"fmt"
+
+	"code.gitea.io/gitea/models/db"
+	"code.gitea.io/gitea/models/organization"
 	repo_model "code.gitea.io/gitea/models/repo"
+	user_model "code.gitea.io/gitea/models/user"
 	"code.gitea.io/gitea/modules/context"
 	"code.gitea.io/gitea/modules/git"
+	"code.gitea.io/gitea/modules/markup"
+	"code.gitea.io/gitea/modules/markup/markdown"
 	"code.gitea.io/gitea/modules/setting"
 )
 
+// RenderProfileBigAvatar set the context for big avatar view on repo
+func RenderProfileBigAvatar(ctx *context.Context) {
+	// check view permissions
+	if !user_model.IsUserVisibleToViewer(ctx, ctx.ContextUser, ctx.Doer) {
+		ctx.NotFound("user", fmt.Errorf(ctx.ContextUser.Name))
+		return
+	}
+
+	// advertise feed via meta tag
+	ctx.Data["FeedURL"] = ctx.ContextUser.HomeLink()
+
+	// Show OpenID URIs
+	openIDs, err := user_model.GetUserOpenIDs(ctx.ContextUser.ID)
+	if err != nil {
+		ctx.ServerError("GetUserOpenIDs", err)
+		return
+	}
+
+	var isFollowing bool
+	if ctx.Doer != nil {
+		isFollowing = user_model.IsFollowing(ctx.Doer.ID, ctx.ContextUser.ID)
+	}
+
+	ctx.Data["ContextUser"] = ctx.ContextUser
+	ctx.Data["OpenIDs"] = openIDs
+	ctx.Data["IsFollowing"] = isFollowing
+
+	if len(ctx.ContextUser.Description) != 0 {
+		content, err := markdown.RenderString(&markup.RenderContext{
+			URLPrefix: ctx.Repo.RepoLink,
+			Metas:     map[string]string{"mode": "document"},
+			GitRepo:   ctx.Repo.GitRepo,
+			Ctx:       ctx,
+		}, ctx.ContextUser.Description)
+		if err != nil {
+			ctx.ServerError("RenderString", err)
+			return
+		}
+		ctx.Data["RenderedDescription"] = content
+	}
+	showPrivate := ctx.IsSigned && (ctx.Doer.IsAdmin || ctx.Doer.ID == ctx.ContextUser.ID)
+	orgs, err := organization.FindOrgs(organization.FindOrgOptions{
+		UserID:         ctx.ContextUser.ID,
+		IncludePrivate: showPrivate,
+	})
+	if err != nil {
+		ctx.ServerError("FindOrgs", err)
+		return
+	}
+	ctx.Data["Orgs"] = orgs
+	ctx.Data["HasOrgsVisible"] = organization.HasOrgsVisible(orgs, ctx.Doer)
+
+	badges, _, err := user_model.GetUserBadges(ctx, ctx.ContextUser)
+	if err != nil {
+		ctx.ServerError("GetUserBadges", err)
+		return
+	}
+	ctx.Data["Badges"] = badges
+
+	pagingNum := setting.UI.User.RepoPagingNum
+	page := ctx.FormInt("page")
+	_, numFollowers, err := user_model.GetUserFollowers(ctx, ctx.ContextUser, ctx.Doer, db.ListOptions{
+		PageSize: pagingNum,
+		Page:     page,
+	})
+	if err != nil {
+		ctx.ServerError("GetUserFollowers", err)
+		return
+	}
+	ctx.Data["NumFollowers"] = numFollowers
+	_, numFollowing, err := user_model.GetUserFollowing(ctx, ctx.ContextUser, ctx.Doer, db.ListOptions{
+		PageSize: pagingNum,
+		Page:     page,
+	})
+	if err != nil {
+		ctx.ServerError("GetUserFollowing", err)
+		return
+	}
+	ctx.Data["NumFollowing"] = numFollowing
+	ctx.Data["ShowUserEmail"] = setting.UI.ShowUserEmail && ctx.ContextUser.Email != "" && ctx.IsSigned && !ctx.ContextUser.KeepEmailPrivate
+	ctx.Data["EnableFeed"] = setting.Other.EnableFeed
+}
+
 func RenderUserHeader(ctx *context.Context) {
 	ctx.Data["IsProjectEnabled"] = true
 	ctx.Data["IsPackageEnabled"] = setting.Packages.Enabled

routers/web/user/code.go

@@ -11,6 +11,7 @@ import (
 	"code.gitea.io/gitea/modules/context"
 	code_indexer "code.gitea.io/gitea/modules/indexer/code"
 	"code.gitea.io/gitea/modules/setting"
+	"code.gitea.io/gitea/routers/web/shared/user"
 )
 
 const (
@@ -19,17 +20,16 @@ const (
 
 // CodeSearch render user/organization code search page
 func CodeSearch(ctx *context.Context) {
+	user.RenderProfileBigAvatar(ctx)
 	if !setting.Indexer.RepoIndexerEnabled {
 		ctx.Redirect(ctx.ContextUser.HomeLink())
 		return
 	}
-
 	ctx.Data["IsProjectEnabled"] = true
 	ctx.Data["IsPackageEnabled"] = setting.Packages.Enabled
 	ctx.Data["IsRepoIndexerEnabled"] = setting.Indexer.RepoIndexerEnabled
 	ctx.Data["Title"] = ctx.Tr("explore.code")
 	ctx.Data["ContextUser"] = ctx.ContextUser
-
 	language := ctx.FormTrim("l")
 	keyword := ctx.FormTrim("q")
 
@@ -109,6 +109,5 @@ func CodeSearch(ctx *context.Context) {
 	pager.SetDefaultParams(ctx)
 	pager.AddParam(ctx, "l", "Language")
 	ctx.Data["Page"] = pager
-
 	ctx.HTML(http.StatusOK, tplUserCode)
 }

routers/web/user/package.go

@@ -36,6 +36,7 @@ const (
 
 // ListPackages displays a list of all packages of the context user
 func ListPackages(ctx *context.Context) {
+	shared_user.RenderProfileBigAvatar(ctx)
 	page := ctx.FormInt("page")
 	if page <= 1 {
 		page = 1

templates/org/projects/list.tmpl

@@ -1,6 +1,23 @@
 {{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository packages">
-	{{template "user/overview/header" .}}
-	{{template "projects/list" .}}
-</div>
+{{if .ContextUser.IsOrganization}}
+	<div role="main" aria-label="{{.Title}}" class="page-content repository packages">
+		{{template "shared/user/profile_big_avatar" .}}
+		{{template "user/overview/header" .}}
+		{{template "projects/list" .}}
+	</div>
+{{else}}
+	<div role="main" aria-label="{{.Title}}" class="page-content user profile">
+		<div class="ui container">
+			<div class="ui stackable grid">
+				<div class="ui four wide column">
+					{{template "shared/user/profile_big_avatar" .}}
+				</div>
+				<div class="ui twelve wide column">
+					{{template "user/overview/header" .}}
+					{{template "projects/list" .}}
+				</div>
+			</div>
+		</div>
+	</div>
+{{end}}
 {{template "base/footer" .}}

templates/package/shared/list.tmpl

@@ -1,7 +1,21 @@
-<div class="ui container">
+<div class="ui {{if .ContextUser.IsOrganization}} container{{end}}">
 	{{template "base/alert" .}}
-	<form class="ui form ignore-dirty">
+	<form class="ui form ignore-dirty search-input">
 		<div class="ui fluid action input">
+			<input name="q" value="{{.Query}}" placeholder="{{.locale.Tr "explore.search"}}..." autofocus>
+			<div class="ui dropdown selection">
+				<input name="type" type="hidden" value="{{if $.PackageType}}{{$.PackageType}}{{else}}all{{end}}">
+				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+				<div class="default text">{{.locale.Tr "packages.filter.type"}}</div>
+				<div class="menu">
+					<div class="item" data-value="all">{{.locale.Tr "packages.filter.type.all"}}</div>
+					{{range $type := .AvailableTypes}}
+						<div class="item" data-value="{{$type.Name}}">
+							{{$type.Name}}
+						</div>
+					{{end}}
+				</div>
+			</div>
 			{{template "shared/searchinput" dict "locale" .locale "Value" .Query "AutoFocus" true}}
 			<select class="ui dropdown" name="type">
 				<option value="">{{.locale.Tr "packages.filter.type"}}</option>

templates/package/shared/versionlist.tmpl

@@ -1,6 +1,6 @@
-<div class="ui container">
+<div class="ui{{if .ContextUser.IsOrganization}} container{{end}}">
 	<p><a href="{{.PackageDescriptor.PackageWebLink}}">{{.PackageDescriptor.Package.Name}}</a> / <strong>{{.locale.Tr "packages.versions"}}</strong></p>
-	<form class="ui form ignore-dirty">
+	<form class="ui form ignore-dirty ">
 		<div class="ui fluid action input">
 			{{template "shared/searchinput" dict "locale" .locale "Value" .Query "AutoFocus" true}}
 			<select class="ui dropdown" name="sort">

templates/projects/list.tmpl

@@ -1,5 +1,5 @@
 <div role="main" aria-label="{{.Title}}" class="page-content repository projects">
-	<div class="ui container">
+	<div class="ui{{if .ContextUser.IsOrganization}} container{{end}}">
 		{{if .CanWriteProjects}}
 			<div class="navbar">
 				<div class="ui right">

templates/shared/user/profile_big_avatar.tmpl

@@ -0,0 +1,135 @@
+{{if .ContextUser.IsOrganization}}
+	{{with .ContextUser}}
+		<div class="ui container">
+			<div class="ui vertically grid head">
+				<div class="column">
+					<div class="ui header">
+						{{avatar $.Context . 100}}
+						<span class="text thin grey"><a href="{{.HomeLink}}">{{.DisplayName}}</a></span>
+						<span class="org-visibility">
+							{{if .Visibility.IsLimited}}<div class="ui medium basic horizontal label">{{$.locale.Tr "org.settings.visibility.limited_shortname"}}</div>{{end}}
+							{{if .Visibility.IsPrivate}}<div class="ui medium basic horizontal label">{{$.locale.Tr "org.settings.visibility.private_shortname"}}</div>{{end}}
+						</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	{{end}}
+{{else}}
+	<div class="ui card">
+		<div id="profile-avatar" class="content gt-df">
+		{{if eq .SignedUserID .ContextUser.ID}}
+			<a class="image" href="{{AppSubUrl}}/user/settings" data-tooltip-content="{{.locale.Tr "user.change_avatar"}}">
+				{{/* the size doesn't take affect (and no need to take affect), image size(width) should be controlled by the parent container since this is not a flex layout*/}}
+				{{avatar $.Context .ContextUser 256}}
+			</a>
+		{{else}}
+			<span class="image">
+				{{avatar $.Context .ContextUser 256}}
+			</span>
+		{{end}}
+		</div>
+		<div class="content gt-word-break profile-avatar-name">
+			{{if .ContextUser.FullName}}<span class="header text center">{{.ContextUser.FullName}}</span>{{end}}
+			<span class="username text center">{{.ContextUser.Name}}</span>
+			{{if .EnableFeed}}
+				<a href="{{.ContextUser.HomeLink}}.rss"><i class="ui text grey gt-ml-3" data-tooltip-content="{{.locale.Tr "rss_feed"}}">{{svg "octicon-rss" 18}}</i></a>
+			{{end}}
+			<div class="gt-mt-3">
+				<a class="muted" href="{{.ContextUser.HomeLink}}?tab=followers">{{svg "octicon-person" 18 "gt-mr-2"}}{{.NumFollowers}} {{.locale.Tr "user.followers"}}</a> · <a class="muted" href="{{.ContextUser.HomeLink}}?tab=following">{{.NumFollowing}} {{.locale.Tr "user.following"}}</a>
+			</div>
+		</div>
+		<div class="extra content gt-word-break">
+			<ul>
+				{{if .ContextUser.Location}}
+					<li>{{svg "octicon-location"}} {{.ContextUser.Location}}</li>
+				{{end}}
+				{{if (eq .SignedUserID .ContextUser.ID)}}
+					<li>
+						{{svg "octicon-mail"}}
+						<a href="mailto:{{.ContextUser.Email}}" rel="nofollow">{{.ContextUser.Email}}</a>
+						<a href="{{AppSubUrl}}/user/settings#keep-email-private">
+							{{if .ShowUserEmail}}
+								<i class="ui right" data-tooltip-content="{{.locale.Tr "user.email_visibility.limited"}}">
+									{{svg "octicon-unlock"}}
+								</i>
+							{{else}}
+								<i class="ui right" data-tooltip-content="{{.locale.Tr "user.email_visibility.private"}}">
+									{{svg "octicon-lock"}}
+								</i>
+							{{end}}
+						</a>
+					</li>
+				{{else}}
+					{{if .ShowUserEmail}}
+						<li>
+							{{svg "octicon-mail"}}
+							<a href="mailto:{{.ContextUser.Email}}" rel="nofollow">{{.ContextUser.Email}}</a>
+						</li>
+					{{end}}
+				{{end}}
+				{{if .ContextUser.Website}}
+					<li>
+						{{svg "octicon-link"}}
+						<a target="_blank" rel="noopener noreferrer me" href="{{.ContextUser.Website}}">{{.ContextUser.Website}}</a>
+					</li>
+				{{end}}
+				{{if $.RenderedDescription}}
+					<li>
+						<div class="render-content markup">{{$.RenderedDescription|Str2html}}</div>
+					</li>
+				{{end}}
+				{{range .OpenIDs}}
+					{{if .Show}}
+						<li>
+							{{svg "fontawesome-openid"}}
+							<a target="_blank" rel="noopener noreferrer" href="{{.URI}}">{{.URI}}</a>
+						</li>
+					{{end}}
+				{{end}}
+				<li>{{svg "octicon-clock"}} {{.locale.Tr "user.joined_on" (DateTime "short" .ContextUser.CreatedUnix) | Safe}}</li>
+				{{if and .Orgs .HasOrgsVisible}}
+				<li>
+					<ul class="user-orgs">
+					{{range .Orgs}}
+						{{if (or .Visibility.IsPublic (and ($.SignedUser) (or .Visibility.IsLimited (and (.HasMemberWithUserID $.SignedUserID) .Visibility.IsPrivate) ($.IsAdmin))))}}
+						<li>
+							<a href="{{.HomeLink}}" data-tooltip-content="{{.Name}}">
+								{{avatar $.Context .}}
+							</a>
+						</li>
+						{{end}}
+					{{end}}
+					</ul>
+				</li>
+				{{end}}
+				{{if .Badges}}
+				<li>
+					<ul class="user-badges">
+					{{range .Badges}}
+						<li>
+							<img width="64" height="64" src="{{.ImageURL}}" alt="{{.Description}}" data-tooltip-content="{{.Description}}">
+						</li>
+					{{end}}
+					</ul>
+				</li>
+				{{end}}
+				{{if and .IsSigned (ne .SignedUserID .ContextUser.ID)}}
+				<li class="follow">
+					{{if $.IsFollowing}}
+						<form method="post" action="{{.Link}}?action=unfollow&redirect_to={{$.Link}}">
+							{{$.CsrfTokenHtml}}
+							<button type="submit" class="ui basic red button">{{svg "octicon-person"}} {{.locale.Tr "user.unfollow"}}</button>
+						</form>
+					{{else}}
+						<form method="post" action="{{.Link}}?action=follow&redirect_to={{$.Link}}">
+							{{$.CsrfTokenHtml}}
+							<button type="submit" class="ui basic green button">{{svg "octicon-person"}} {{.locale.Tr "user.follow"}}</button>
+						</form>
+					{{end}}
+				</li>
+				{{end}}
+			</ul>
+		</div>
+	</div>
+{{end}}