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](https://github.com/HesterG/gitea/blob/729ad294cbec7a77623b2e3eab750ea7a20e8ee0/templates/user/overview/header.tmpl#L1),
it is viable to make it a shared template for [this
part](https://github.com/HesterG/gitea/blob/729ad294cbec7a77623b2e3eab750ea7a20e8ee0/templates/user/overview/header.tmpl#L2-L17)
and [this
part](https://github.com/HesterG/gitea/blob/729ad294cbec7a77623b2e3eab750ea7a20e8ee0/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>

4 files changed, 23 insertions, 18 deletions

diff --git a/web_src/css/index.css b/web_src/css/index.css
index e8d4e290d0..2530830338 100644
--- a/web_src/css/index.css
+++ b/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";
diff --git a/web_src/css/organization.css b/web_src/css/organization.css
index 35eaa3ae22..42a6dcc5ea 100644
--- a/web_src/css/organization.css
+++ b/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;
 }
diff --git a/web_src/css/repository.css b/web_src/css/repository.css
index 8674793bf0..77b41e4d16 100644
--- a/web_src/css/repository.css
+++ b/web_src/css/repository.css
@@ -153,12 +153,9 @@
   padding-left: 23px;
 }
 
-.repository .ui.tabs.container {
-  margin-top: 14px;
-  margin-bottom: 0;
-}
-
-.repository .ui.tabs.container .ui.menu {
+/* For the secondary pointing menu, respect its own border-bottom */
+/* style reference: https://semantic-ui.com/collections/menu.html#pointing */
+.repository .ui.tabs.container .ui.menu:not(.secondary.pointing) {
   border-bottom: 0;
 }
 
diff --git a/web_src/css/shared/repoorg.css b/web_src/css/shared/repoorg.css
new file mode 100644
index 0000000000..ee9d94bafa
--- /dev/null
+++ b/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;
+}