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,6 +1,5 @@
-<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 vertically grid head">
 			<div class="column">
@@ -15,10 +14,10 @@
 			</div>
 		</div>
 	</div>
-	{{end}}
+{{end}}
 
-	<div class="ui tabs container">
+<div class="ui tabs container">
-		<div class="ui tabular stackable menu navbar">
+	<div class="ui secondary stackable pointing menu">
 		<a class="item" href="{{.ContextUser.HomeLink}}">
 			{{svg "octicon-repo"}} {{.locale.Tr "user.repositories"}}
 		</a>
@@ -80,6 +79,4 @@
 		{{end}}
 
 	</div>
-	</div>
-	<div class="ui tabs divider"></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;
+}