Unify organizations header (#29248)

Unify organizations header

before:

![image](https://github.com/go-gitea/gitea/assets/72873130/74474e0d-33c3-4bbf-9324-d130ea2c62f8)

after:

![image](https://github.com/go-gitea/gitea/assets/72873130/1c65de0d-fa0f-4b17-ab8d-067de8c7113b)

---------

Co-authored-by: silverwind <me@silverwind.io>

modules/context/org.go

@@ -11,6 +11,8 @@ import (
 	"code.gitea.io/gitea/models/perm"
 	"code.gitea.io/gitea/models/unit"
 	user_model "code.gitea.io/gitea/models/user"
+	"code.gitea.io/gitea/modules/markup"
+	"code.gitea.io/gitea/modules/markup/markdown"
 	"code.gitea.io/gitea/modules/setting"
 	"code.gitea.io/gitea/modules/structs"
 )
@@ -255,6 +257,19 @@ func HandleOrgAssignment(ctx *Context, args ...bool) {
 	ctx.Data["CanReadProjects"] = ctx.Org.CanReadUnit(ctx, unit.TypeProjects)
 	ctx.Data["CanReadPackages"] = ctx.Org.CanReadUnit(ctx, unit.TypePackages)
 	ctx.Data["CanReadCode"] = ctx.Org.CanReadUnit(ctx, unit.TypeCode)
+
+	ctx.Data["IsFollowing"] = ctx.Doer != nil && user_model.IsFollowing(ctx, ctx.Doer.ID, ctx.ContextUser.ID)
+	if len(ctx.ContextUser.Description) != 0 {
+		content, err := markdown.RenderString(&markup.RenderContext{
+			Metas: map[string]string{"mode": "document"},
+			Ctx:   ctx,
+		}, ctx.ContextUser.Description)
+		if err != nil {
+			ctx.ServerError("RenderString", err)
+			return
+		}
+		ctx.Data["RenderedDescription"] = content
+	}
 }
 
 // OrgAssignment returns a middleware to handle organization assignment

routers/web/org/home.go

@@ -11,7 +11,6 @@ import (
 	"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/base"
 	"code.gitea.io/gitea/modules/context"
 	"code.gitea.io/gitea/modules/git"
@@ -46,17 +45,6 @@ func Home(ctx *context.Context) {
 
 	ctx.Data["PageIsUserProfile"] = true
 	ctx.Data["Title"] = org.DisplayName()
-	if len(org.Description) != 0 {
-		desc, err := markdown.RenderString(&markup.RenderContext{
-			Ctx:   ctx,
-			Metas: map[string]string{"mode": "document"},
-		}, org.Description)
-		if err != nil {
-			ctx.ServerError("RenderString", err)
-			return
-		}
-		ctx.Data["RenderedDescription"] = desc
-	}
 
 	var orderBy db.SearchOrderBy
 	ctx.Data["SortType"] = ctx.FormString("sort")
@@ -131,18 +119,12 @@ func Home(ctx *context.Context) {
 		return
 	}
 
-	var isFollowing bool
-	if ctx.Doer != nil {
-		isFollowing = user_model.IsFollowing(ctx, ctx.Doer.ID, ctx.ContextUser.ID)
-	}
-
 	ctx.Data["Repos"] = repos
 	ctx.Data["Total"] = count
 	ctx.Data["Members"] = members
 	ctx.Data["Teams"] = ctx.Org.Teams
 	ctx.Data["DisableNewPullMirrors"] = setting.Mirror.DisableNewPull
 	ctx.Data["PageIsViewRepositories"] = true
-	ctx.Data["IsFollowing"] = isFollowing
 
 	err = shared_user.LoadHeaderCount(ctx)
 	if err != nil {

routers/web/shared/user/header.go

@@ -17,8 +17,6 @@ import (
 	"code.gitea.io/gitea/modules/git"
 	"code.gitea.io/gitea/modules/gitrepo"
 	"code.gitea.io/gitea/modules/log"
-	"code.gitea.io/gitea/modules/markup"
-	"code.gitea.io/gitea/modules/markup/markdown"
 	"code.gitea.io/gitea/modules/setting"
 	"code.gitea.io/gitea/modules/util"
 )
@@ -36,7 +34,6 @@ func prepareContextForCommonProfile(ctx *context.Context) {
 func PrepareContextForProfileBigAvatar(ctx *context.Context) {
 	prepareContextForCommonProfile(ctx)
 
-	ctx.Data["IsFollowing"] = ctx.Doer != nil && user_model.IsFollowing(ctx, ctx.Doer.ID, ctx.ContextUser.ID)
 	ctx.Data["ShowUserEmail"] = setting.UI.ShowUserEmail && ctx.ContextUser.Email != "" && ctx.IsSigned && !ctx.ContextUser.KeepEmailPrivate
 	ctx.Data["ContextUserLocationMapURL"] = setting.Service.UserLocationMapURL + url.QueryEscape(ctx.ContextUser.Location)
 
@@ -48,18 +45,6 @@ func PrepareContextForProfileBigAvatar(ctx *context.Context) {
 	}
 	ctx.Data["OpenIDs"] = openIDs
 
-	if len(ctx.ContextUser.Description) != 0 {
-		content, err := markdown.RenderString(&markup.RenderContext{
-			Metas: map[string]string{"mode": "document"},
-			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 := db.Find[organization.Organization](ctx, organization.FindOrgOptions{
 		UserID:         ctx.ContextUser.ID,

routers/web/user/profile.go

@@ -324,6 +324,7 @@ func Action(ctx *context.Context) {
 		ctx.HTML(http.StatusOK, tplProfileBigAvatar)
 		return
 	} else if ctx.ContextUser.IsOrganization() {
+		ctx.Data["Org"] = ctx.ContextUser
 		ctx.Data["IsFollowing"] = ctx.Doer != nil && user_model.IsFollowing(ctx, ctx.Doer.ID, ctx.ContextUser.ID)
 		ctx.HTML(http.StatusOK, tplFollowUnfollow)
 		return

templates/org/header.tmpl

@@ -1,18 +1,32 @@
-{{with .Org}}
-	<div class="ui container">
-		<div class="ui vertically grid head">
-			<div class="column">
-				<div class="ui header gt-df gt-ac gt-word-break">
-					{{ctx.AvatarUtils.Avatar . 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">{{ctx.Locale.Tr "org.settings.visibility.limited_shortname"}}</div>{{end}}
-						{{if .Visibility.IsPrivate}}<div class="ui medium basic horizontal label">{{ctx.Locale.Tr "org.settings.visibility.private_shortname"}}</div>{{end}}
-					</span>
-				</div>
-			</div>
+<div class="ui container gt-df">
+	{{ctx.AvatarUtils.Avatar .Org 100 "org-avatar"}}
+	<div id="org-info" class="gt-df gt-fc">
+		<div class="ui header">
+			{{.Org.DisplayName}}
+			<span class="org-visibility">
+				{{if .Org.Visibility.IsLimited}}<span class="ui large basic horizontal label">{{ctx.Locale.Tr "org.settings.visibility.limited_shortname"}}</span>{{end}}
+				{{if .Org.Visibility.IsPrivate}}<span class="ui large basic horizontal label">{{ctx.Locale.Tr "org.settings.visibility.private_shortname"}}</span>{{end}}
+			</span>
+			<span class="gt-df gt-ac gt-gap-2 gt-ml-auto gt-font-16 gt-whitespace-nowrap">
+				{{if .EnableFeed}}
+					<a class="ui basic label button gt-mr-0" href="{{.Org.HomeLink}}.rss" data-tooltip-content="{{ctx.Locale.Tr "rss_feed"}}">
+						{{svg "octicon-rss" 24}}
+					</a>
+				{{end}}
+				{{if .IsSigned}}
+					{{template "org/follow_unfollow" .}}
+				{{end}}
+			</span>
+		</div>
+		{{if .RenderedDescription}}<div class="render-content markup">{{.RenderedDescription | Str2html}}</div>{{end}}
+		<div class="text light meta gt-mt-2">
+			{{if .Org.Location}}<div class="flex-text-block">{{svg "octicon-location"}} <span>{{.Org.Location}}</span></div>{{end}}
+			{{if .Org.Website}}<div class="flex-text-block">{{svg "octicon-link"}} <a class="muted" target="_blank" rel="noopener noreferrer me" href="{{.Org.Website}}">{{.Org.Website}}</a></div>{{end}}
+			{{if .IsSigned}}
+				{{if .Org.Email}}<div class="flex-text-block">{{svg "octicon-mail"}} <a class="muted" href="mailto:{{.Org.Email}}">{{.Org.Email}}</a></div>{{end}}
+			{{end}}
 		</div>
 	</div>
-{{end}}
+</div>
 
 {{template "org/menu" .}}

templates/org/home.tmpl

@@ -1,37 +1,6 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content organization profile">
-	<div class="ui container gt-df">
-		{{ctx.AvatarUtils.Avatar .Org 140 "org-avatar"}}
-		<div id="org-info">
-			<div class="ui header">
-				{{.Org.DisplayName}}
-				<span class="org-visibility">
-					{{if .Org.Visibility.IsLimited}}<span class="ui large basic horizontal label">{{ctx.Locale.Tr "org.settings.visibility.limited_shortname"}}</span>{{end}}
-					{{if .Org.Visibility.IsPrivate}}<span class="ui large basic horizontal label">{{ctx.Locale.Tr "org.settings.visibility.private_shortname"}}</span>{{end}}
-				</span>
-			</div>
-			{{if $.RenderedDescription}}<div class="render-content markup">{{$.RenderedDescription|Str2html}}</div>{{end}}
-			<div class="text grey meta">
-				{{if .Org.Location}}<div class="flex-text-block">{{svg "octicon-location"}} <span>{{.Org.Location}}</span></div>{{end}}
-				{{if .Org.Website}}<div class="flex-text-block">{{svg "octicon-link"}} <a target="_blank" rel="noopener noreferrer me" href="{{.Org.Website}}">{{.Org.Website}}</a></div>{{end}}
-				{{if $.IsSigned}}
-					{{if .Org.Email}}<div class="flex-text-block">{{svg "octicon-mail"}} <a class="muted" href="mailto:{{.Org.Email}}">{{.Org.Email}}</a></div>{{end}}
-				{{end}}
-			</div>
-		</div>
-		<div class="right menu">
-			{{if .EnableFeed}}
-			<a class="ui basic label button gt-mr-0" href="{{$.Org.HomeLink}}.rss" data-tooltip-content="{{ctx.Locale.Tr "rss_feed"}}">
-				{{svg "octicon-rss" 24}}
-			</a>
-			{{end}}
-			{{if .IsSigned}}
-				{{template "org/follow_unfollow" .}}
-			{{end}}
-		</div>
-	</div>
-
-	{{template "org/menu" .}}
+	{{template "org/header" .}}
 
 	<div class="ui container">
 		<div class="ui mobile reversed stackable grid">

templates/org/member/members.tmpl

@@ -1,5 +1,5 @@
 {{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content organization">
+<div role="main" aria-label="{{.Title}}" class="page-content organization members">
 	{{template "org/header" .}}
 	<div class="ui container">
 		{{template "base/alert" .}}

templates/org/menu.tmpl

@@ -15,24 +15,24 @@
 		</a>
 		{{end}}
 		{{if and .IsPackageEnabled .CanReadPackages}}
-		<a class="item" href="{{$.Org.HomeLink}}/-/packages">
+		<a class="{{if .IsPackagesPage}}active {{end}}item" href="{{$.Org.HomeLink}}/-/packages">
 			{{svg "octicon-package"}} {{ctx.Locale.Tr "packages.title"}}
 		</a>
 		{{end}}
 		{{if and .IsRepoIndexerEnabled .CanReadCode}}
-		<a class="item" href="{{$.Org.HomeLink}}/-/code">
-			{{svg "octicon-code"}}&nbsp;{{ctx.Locale.Tr "org.code"}}
+		<a class="{{if .IsCodePage}}active {{end}}item" href="{{$.Org.HomeLink}}/-/code">
+			{{svg "octicon-code"}} {{ctx.Locale.Tr "org.code"}}
 		</a>
 		{{end}}
 		{{if .NumMembers}}
 			<a class="{{if $.PageIsOrgMembers}}active {{end}}item" href="{{$.OrgLink}}/members">
-				{{svg "octicon-person"}}&nbsp;{{ctx.Locale.Tr "org.members"}}
+				{{svg "octicon-person"}} {{ctx.Locale.Tr "org.members"}}
 				<div class="ui small label">{{.NumMembers}}</div>
 			</a>
 		{{end}}
 		{{if .IsOrganizationMember}}
 			<a class="{{if $.PageIsOrgTeams}}active {{end}}item" href="{{$.OrgLink}}/teams">
-				{{svg "octicon-people"}}&nbsp;{{ctx.Locale.Tr "org.teams"}}
+				{{svg "octicon-people"}} {{ctx.Locale.Tr "org.teams"}}
 				{{if .NumTeams}}
 					<div class="ui small label">{{.NumTeams}}</div>
 				{{end}}

templates/org/projects/list.tmpl

@@ -1,10 +1,9 @@
 {{template "base/head" .}}
 {{if .ContextUser.IsOrganization}}
-	<div role="main" aria-label="{{.Title}}" class="page-content repository packages">
-		{{template "shared/user/org_profile_avatar" .}}
+	<div role="main" aria-label="{{.Title}}" class="page-content organization projects">
+		{{template "org/header" .}}
 		<div class="ui container">
-		{{template "user/overview/header" .}}
-		{{template "projects/list" .}}
+			{{template "projects/list" .}}
 		</div>
 	</div>
 {{else}}

templates/package/settings.tmpl

@@ -1,8 +1,14 @@
 {{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository settings options">
-	{{template "shared/user/org_profile_avatar" .}}
+<div role="main" aria-label="{{.Title}}" class="page-content repository settings options{{if .ContextUser.IsOrganization}} organization{{end}}">
+	{{if .ContextUser.IsOrganization}}
+		{{template "org/header" .}}
+	{{else}}
+		{{template "shared/user/org_profile_avatar" .}}
+	{{end}}
 	<div class="ui container">
-		{{template "user/overview/header" .}}
+		{{if not .ContextUser.IsOrganization}}
+			{{template "user/overview/header" .}}
+		{{end}}
 		{{template "base/alert" .}}
 		<p><a href="{{.PackageDescriptor.FullWebLink}}">{{.PackageDescriptor.Package.Name}} ({{.PackageDescriptor.Version.Version}})</a> / <strong>{{ctx.Locale.Tr "repo.settings"}}</strong></p>
 		<h4 class="ui top attached header">

templates/user/code.tmpl

@@ -1,9 +1,8 @@
 {{template "base/head" .}}
 {{if .ContextUser.IsOrganization}}
-	<div role="main" aria-label="{{.Title}}" class="page-content repository">
-		{{template "shared/user/org_profile_avatar" .}}
+	<div role="main" aria-label="{{.Title}}" class="page-content organization code">
+		{{template "org/header" .}}
 		<div class="ui container">
-			{{template "user/overview/header" .}}
 			{{template "code/searchcombo" .}}
 		</div>
 	</div>

templates/user/overview/header.tmpl

@@ -10,7 +10,7 @@
 			<div class="ui small label">{{.RepoCount}}</div>
 		{{end}}
 	</a>
-	{{if or .ContextUser.IsIndividual (and .ContextUser.IsOrganization .CanReadProjects)}}
+	{{if or .ContextUser.IsIndividual .CanReadProjects}}
 	<a href="{{.ContextUser.HomeLink}}/-/projects" class="{{if .PageIsViewProjects}}active {{end}}item">
 		{{svg "octicon-project-symlink"}} {{ctx.Locale.Tr "user.projects"}}
 		{{if .ProjectCount}}
@@ -18,55 +18,30 @@
 		{{end}}
 	</a>
 	{{end}}
-	{{if and .IsPackageEnabled (or .ContextUser.IsIndividual (and .ContextUser.IsOrganization .CanReadPackages))}}
+	{{if and .IsPackageEnabled (or .ContextUser.IsIndividual .CanReadPackages)}}
 		<a href="{{.ContextUser.HomeLink}}/-/packages" class="{{if .IsPackagesPage}}active {{end}}item">
 			{{svg "octicon-package"}} {{ctx.Locale.Tr "packages.title"}}
 		</a>
 	{{end}}
-	{{if and .IsRepoIndexerEnabled (or .ContextUser.IsIndividual (and .ContextUser.IsOrganization .CanReadCode))}}
+	{{if and .IsRepoIndexerEnabled (or .ContextUser.IsIndividual .CanReadCode)}}
 		<a href="{{.ContextUser.HomeLink}}/-/code" class="{{if .IsCodePage}}active {{end}}item">
 			{{svg "octicon-code"}} {{ctx.Locale.Tr "user.code"}}
 		</a>
 	{{end}}
 
-	{{if .ContextUser.IsOrganization}}
-		{{if .NumMembers}}
-			<a class="{{if $.PageIsOrgMembers}}active {{end}}item" href="{{$.OrgLink}}/members">
-				{{svg "octicon-person"}}&nbsp;{{ctx.Locale.Tr "org.members"}}
-				<div class="ui small label">{{.NumMembers}}</div>
-			</a>
-		{{end}}
-		{{if .IsOrganizationMember}}
-			<a class="{{if $.PageIsOrgTeams}}active {{end}}item" href="{{$.OrgLink}}/teams">
-				{{svg "octicon-people"}}&nbsp;{{ctx.Locale.Tr "org.teams"}}
-				{{if .NumTeams}}
-					<div class="ui small label">{{.NumTeams}}</div>
-				{{end}}
-			</a>
-		{{end}}
-
-		{{if .IsOrganizationOwner}}
-			<div class="right menu">
-				<a class="item" href="{{.OrgLink}}/settings">
-				{{svg "octicon-tools"}} {{ctx.Locale.Tr "repo.settings"}}
-				</a>
-			</div>
-		{{end}}
-	{{else}}
-		<a class="{{if eq .TabName "activity"}}active {{end}}item" href="{{.ContextUser.HomeLink}}?tab=activity">
-			{{svg "octicon-rss"}} {{ctx.Locale.Tr "user.activity"}}
+	<a class="{{if eq .TabName "activity"}}active {{end}}item" href="{{.ContextUser.HomeLink}}?tab=activity">
+		{{svg "octicon-rss"}} {{ctx.Locale.Tr "user.activity"}}
+	</a>
+	{{if not .DisableStars}}
+		<a class="{{if eq .TabName "stars"}}active {{end}}item" href="{{.ContextUser.HomeLink}}?tab=stars">
+			{{svg "octicon-star"}} {{ctx.Locale.Tr "user.starred"}}
+			{{if .ContextUser.NumStars}}
+				<div class="ui small label">{{.ContextUser.NumStars}}</div>
+			{{end}}
+		</a>
+	{{else}}
+		<a class="{{if eq .TabName "watching"}}active {{end}}item" href="{{.ContextUser.HomeLink}}?tab=watching">
+			{{svg "octicon-eye"}} {{ctx.Locale.Tr "user.watched"}}
 		</a>
-		{{if not .DisableStars}}
-			<a class="{{if eq .TabName "stars"}}active {{end}}item" href="{{.ContextUser.HomeLink}}?tab=stars">
-				{{svg "octicon-star"}} {{ctx.Locale.Tr "user.starred"}}
-				{{if .ContextUser.NumStars}}
-					<div class="ui small label">{{.ContextUser.NumStars}}</div>
-				{{end}}
-			</a>
-		{{else}}
-			<a class="{{if eq .TabName "watching"}}active {{end}}item" href="{{.ContextUser.HomeLink}}?tab=watching">
-				{{svg "octicon-eye"}} {{ctx.Locale.Tr "user.watched"}}
-			</a>
-		{{end}}
 	{{end}}
 </div>

templates/user/overview/package_versions.tmpl

@@ -1,10 +1,9 @@
 {{template "base/head" .}}
 {{if .ContextUser.IsOrganization}}
-	<div role="main" aria-label="{{.Title}}" class="page-content repository packages">
-		{{template "shared/user/org_profile_avatar" .}}
+	<div role="main" aria-label="{{.Title}}" class="page-content organization packages">
+		{{template "org/header" .}}
 		<div class="ui container">
-		{{template "user/overview/header" .}}
-		{{template "package/shared/versionlist" .}}
+			{{template "package/shared/versionlist" .}}
 		</div>
 	</div>
 {{else}}

templates/user/overview/packages.tmpl

@@ -1,10 +1,9 @@
 {{template "base/head" .}}
 {{if .ContextUser.IsOrganization}}
-	<div role="main" aria-label="{{.Title}}" class="page-content repository packages">
-		{{template "shared/user/org_profile_avatar" .}}
+	<div role="main" aria-label="{{.Title}}" class="page-content organization packages">
+		{{template "org/header" .}}
 		<div class="ui container">
-		{{template "user/overview/header" .}}
-		{{template "package/shared/list" .}}
+			{{template "package/shared/list" .}}
 		</div>
 	</div>
 {{else}}

web_src/css/org.css

@@ -93,46 +93,44 @@
   min-width: 300px;
 }
 
-.organization.profile .org-avatar {
-  width: 100px;
-  height: 100px;
+.page-content.organization .org-avatar {
   margin-right: 15px;
 }
 
-.organization.profile #org-info {
+.page-content.organization #org-info {
   overflow-wrap: anywhere;
   flex: 1;
   word-break: break-all;
 }
 
-.organization.profile #org-info .ui.header {
+.page-content.organization #org-info .ui.header {
   display: flex;
   align-items: center;
   font-size: 36px;
   margin-bottom: 0;
 }
 
-.organization.profile #org-info .desc {
+.page-content.organization #org-info .desc {
   font-size: 16px;
   margin-bottom: 10px;
 }
 
-.organization.profile #org-info .meta {
+.page-content.organization #org-info .meta {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 8px;
 }
 
-.organization.profile .ui.top.header .ui.right {
+.page-content.organization .ui.top.header .ui.right {
   margin-top: 0;
 }
 
-.organization.profile .teams .item {
+.page-content.organization .teams .item {
   padding: 10px 15px;
 }
 
-.organization.profile .members .ui.avatar {
+.page-content.organization .members .ui.avatar {
   width: 48px;
   height: 48px;
   margin-right: 5px;