Use secondary pointing menu for tabs on user/organization home page (#24162)

Close #24108

Use secondary pointing menu for tabs on user/organization home page so
the tabs look the same.
Main changes:
1. modified a part of dom structure in
`templates/user/overview/header.tmpl` to make it the same as
`templates/org/header.tmpl` in order to produce the same ui.
2. Move some css to `web_src/css/shared/repoorgshared.css` to make them
shareable between `templates/user/overview/header.tmpl` and
`templates/org/header.tmpl`

After:


https://user-images.githubusercontent.com/17645053/232400617-2add5bec-d483-4ab1-b48d-eaee157f7b09.mov

For further improvements. Need some thoughts: 

For [this
TODO](729ad294cb/templates/user/overview/header.tmpl (L1)),
it is viable to make it a shared template for [this
part](729ad294cb/templates/user/overview/header.tmpl (L2-L17))
and [this
part](729ad294cb/templates/org/header.tmpl (L1-L16))
because they are the same except for the variable. But for the menu
parts, they are quite different so might not be suitable to use a shared
template. So need some thoughts and advice about extracting the shared
template from these two headers.

---------

Co-authored-by: Giteabot <teabot@gitea.io>

templates/user/overview/header.tmpl

@@ -1,85 +1,82 @@
-<div class="header-wrapper">
+<!-- TODO: make template org and user can share -->
-	<!-- TODO: make template org and user can share -->
+{{with .ContextUser}}
-	{{with .ContextUser}}
+	<div class="ui container">
-		<div class="ui container">
+		<div class="ui vertically grid head">
-			<div class="ui vertically grid head">
+			<div class="column">
-				<div class="column">
+				<div class="ui header">
-					<div class="ui header">
+					{{avatar $.Context . 100}}
-						{{avatar $.Context . 100}}
+					<span class="text thin grey"><a href="{{.HomeLink}}">{{.DisplayName}}</a></span>
-						<span class="text thin grey"><a href="{{.HomeLink}}">{{.DisplayName}}</a></span>
+					<span class="org-visibility">
-						<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.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}}
-							{{if .Visibility.IsPrivate}}<div class="ui medium basic horizontal label">{{$.locale.Tr "org.settings.visibility.private_shortname"}}</div>{{end}}
+					</span>
-						</span>
-					</div>
 				</div>
 			</div>
 		</div>
-	{{end}}
-
-	<div class="ui tabs container">
-		<div class="ui tabular stackable menu navbar">
-			<a class="item" href="{{.ContextUser.HomeLink}}">
-				{{svg "octicon-repo"}} {{.locale.Tr "user.repositories"}}
-			</a>
-			{{if and .IsProjectEnabled (or .ContextUser.IsIndividual (and .ContextUser.IsOrganization .CanReadProjects))}}
-			<a href="{{.ContextUser.HomeLink}}/-/projects" class="{{if .PageIsViewProjects}}active {{end}}item">
-				{{svg "octicon-project-symlink"}} {{.locale.Tr "user.projects"}}
-			</a>
-			{{end}}
-			{{if and .IsPackageEnabled (or .ContextUser.IsIndividual (and .ContextUser.IsOrganization .CanReadPackages))}}
-				<a href="{{.ContextUser.HomeLink}}/-/packages" class="{{if .IsPackagesPage}}active {{end}}item">
-					{{svg "octicon-package"}} {{.locale.Tr "packages.title"}}
-				</a>
-			{{end}}
-			{{if and .IsRepoIndexerEnabled (or .ContextUser.IsIndividual (and .ContextUser.IsOrganization .CanReadCode))}}
-				<a href="{{.ContextUser.HomeLink}}/-/code" class="{{if .IsCodePage}}active {{end}}item">
-					{{svg "octicon-code"}} {{.locale.Tr "user.code"}}
-				</a>
-			{{end}}
-
-			{{if .ContextUser.IsOrganization}}
-				{{if .IsOrganizationMember}}
-					<a class="item" href="{{$.OrgLink}}/members">
-						{{svg "octicon-person"}}&nbsp;{{$.locale.Tr "org.members"}}
-						{{if .NumMembers}}
-							<div class="ui primary label">{{.NumMembers}}</div>
-						{{end}}
-					</a>
-					<a class="item" href="{{$.OrgLink}}/teams">
-						{{svg "octicon-people"}}&nbsp;{{$.locale.Tr "org.teams"}}
-						{{if .NumTeams}}
-							<div class="ui primary label">{{.NumTeams}}</div>
-						{{end}}
-					</a>
-				{{end}}
-
-				{{if .IsOrganizationOwner}}
-					<div class="right menu">
-						<a class="item" href="{{.OrgLink}}/settings">
-						{{svg "octicon-tools"}} {{.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"}} {{.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"}} {{.locale.Tr "user.starred"}}
-						{{if .Owner.NumStars}}
-							<div class="ui primary label">{{.Owner.NumStars}}</div>
-						{{end}}
-					</a>
-				{{else}}
-					<a class='{{if eq .TabName "watching"}}active {{end}}item' href="{{.ContextUser.HomeLink}}?tab=watching">
-						{{svg "octicon-eye"}} {{.locale.Tr "user.watched"}}
-					</a>
-				{{end}}
-			{{end}}
-
-		</div>
 	</div>
-	<div class="ui tabs divider"></div>
+{{end}}
+
+<div class="ui tabs container">
+	<div class="ui secondary stackable pointing menu">
+		<a class="item" href="{{.ContextUser.HomeLink}}">
+			{{svg "octicon-repo"}} {{.locale.Tr "user.repositories"}}
+		</a>
+		{{if and .IsProjectEnabled (or .ContextUser.IsIndividual (and .ContextUser.IsOrganization .CanReadProjects))}}
+		<a href="{{.ContextUser.HomeLink}}/-/projects" class="{{if .PageIsViewProjects}}active {{end}}item">
+			{{svg "octicon-project-symlink"}} {{.locale.Tr "user.projects"}}
+		</a>
+		{{end}}
+		{{if and .IsPackageEnabled (or .ContextUser.IsIndividual (and .ContextUser.IsOrganization .CanReadPackages))}}
+			<a href="{{.ContextUser.HomeLink}}/-/packages" class="{{if .IsPackagesPage}}active {{end}}item">
+				{{svg "octicon-package"}} {{.locale.Tr "packages.title"}}
+			</a>
+		{{end}}
+		{{if and .IsRepoIndexerEnabled (or .ContextUser.IsIndividual (and .ContextUser.IsOrganization .CanReadCode))}}
+			<a href="{{.ContextUser.HomeLink}}/-/code" class="{{if .IsCodePage}}active {{end}}item">
+				{{svg "octicon-code"}} {{.locale.Tr "user.code"}}
+			</a>
+		{{end}}
+
+		{{if .ContextUser.IsOrganization}}
+			{{if .IsOrganizationMember}}
+				<a class="item" href="{{$.OrgLink}}/members">
+					{{svg "octicon-person"}}&nbsp;{{$.locale.Tr "org.members"}}
+					{{if .NumMembers}}
+						<div class="ui primary label">{{.NumMembers}}</div>
+					{{end}}
+				</a>
+				<a class="item" href="{{$.OrgLink}}/teams">
+					{{svg "octicon-people"}}&nbsp;{{$.locale.Tr "org.teams"}}
+					{{if .NumTeams}}
+						<div class="ui primary label">{{.NumTeams}}</div>
+					{{end}}
+				</a>
+			{{end}}
+
+			{{if .IsOrganizationOwner}}
+				<div class="right menu">
+					<a class="item" href="{{.OrgLink}}/settings">
+					{{svg "octicon-tools"}} {{.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"}} {{.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"}} {{.locale.Tr "user.starred"}}
+					{{if .Owner.NumStars}}
+						<div class="ui primary label">{{.Owner.NumStars}}</div>
+					{{end}}
+				</a>
+			{{else}}
+				<a class='{{if eq .TabName "watching"}}active {{end}}item' href="{{.ContextUser.HomeLink}}?tab=watching">
+					{{svg "octicon-eye"}} {{.locale.Tr "user.watched"}}
+				</a>
+			{{end}}
+		{{end}}
+
+	</div>
 </div>

web_src/css/index.css

@@ -2,6 +2,7 @@
 
 @import "./animations.css";
 @import "./shared/issuelist.css";
+@import "./shared/repoorg.css";
 @import "./features/dropzone.css";
 @import "./features/gitgraph.css";
 @import "./features/heatmap.css";

web_src/css/organization.css

@@ -40,12 +40,6 @@
   }
 }
 
-.organization .head .ui.header .text {
-  vertical-align: middle;
-  font-size: 1.6rem;
-  margin-left: 15px;
-}
-
 .organization .head .ui.header .org-visibility .label {
   margin-left: 5px;
   margin-top: 5px;
@@ -55,12 +49,6 @@
   margin-top: 5px;
 }
 
-.organization .ui.secondary.stackable.pointing.menu {
-  flex-wrap: wrap;
-  margin-top: 5px;
-  margin-bottom: 10px;
-}
-
 .organization.new.org form {
   margin: auto;
 }

web_src/css/repository.css

@@ -153,12 +153,9 @@
   padding-left: 23px;
 }
 
-.repository .ui.tabs.container {
+/* For the secondary pointing menu, respect its own border-bottom */
-  margin-top: 14px;
+/* style reference: https://semantic-ui.com/collections/menu.html#pointing */
-  margin-bottom: 0;
+.repository .ui.tabs.container .ui.menu:not(.secondary.pointing) {
-}
-
-.repository .ui.tabs.container .ui.menu {
   border-bottom: 0;
 }
 

web_src/css/shared/repoorg.css

@@ -0,0 +1,19 @@
+.repository .head .ui.header .text,
+.organization .head .ui.header .text {
+  vertical-align: middle;
+  font-size: 1.6rem;
+  margin-left: 15px;
+}
+
+.repository .ui.secondary.stackable.pointing.menu,
+.organization .ui.secondary.stackable.pointing.menu {
+  flex-wrap: wrap;
+  margin-top: 5px;
+  margin-bottom: 10px;
+}
+
+.repository .ui.tabs.container,
+.organization .ui.tabs.container {
+  margin-top: 14px;
+  margin-bottom: 0;
+}