Introduce `.secondary-nav` and handle `.page-content` spacing universally (#29982)

Fixes: https://github.com/go-gitea/gitea/issues/29981. Introduce
`.secondary-nav` as a universal way for styling and margin adjustments
inside `.page-content`.

If the first child of `.page-content` is `.secondary-nav`, we add margin
below it, otherwise we add padding to the first child. Notable changes:

- `--color-header-wrapper` is replaced with `--color-secondary-nav-bg`.
- `navbar` class is removed.

---------

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

diff --git a/templates/admin/layout_head.tmpl b/templates/admin/layout_head.tmpl
index b326c82a6c6a2e7ee708687bedc12e0497c92eb6..c1f5fb331404e9ce04f675aac16969196a1aa762 100644 (file)
--- a/templates/admin/layout_head.tmpl
+++ b/templates/admin/layout_head.tmpl
@@ -1,6 +1,6 @@
 {{template "base/head" .ctxData}}
 <div role="main" aria-label="{{.ctxData.Title}}" class="page-content {{.pageClass}}">
-       <div class="ui container gt-mb-4">
+       <div class="ui container">
                {{template "base/alert" .ctxData}}
        </div>
        <div class="ui container fluid padded flex-container">

diff --git a/templates/explore/navbar.tmpl b/templates/explore/navbar.tmpl
index 8841613b9f128f10e044ec3cec83a2b39bdf7e93..8e619fa66f47a3fb11521ab5acdc44f7eb67e9d5 100644 (file)
--- a/templates/explore/navbar.tmpl
+++ b/templates/explore/navbar.tmpl
@@ -1,4 +1,4 @@
-<overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar">
+<overflow-menu class="ui secondary pointing tabular top attached borderless menu secondary-nav">
        <div class="overflow-menu-items tw-justify-center">
                <a class="{{if .PageIsExploreRepositories}}active {{end}}item" href="{{AppSubUrl}}/explore/repos">
                        {{svg "octicon-repo"}} {{ctx.Locale.Tr "explore.repos"}}

diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl
index 6edfee6c7cf7e938243f3636bf5cdb8d83c2e85f..187a56bdccfb7a8c57609887598df4a7523ad380 100644 (file)
--- a/templates/repo/header.tmpl
+++ b/templates/repo/header.tmpl
@@ -1,4 +1,4 @@
-<div class="header-wrapper">
+<div class="secondary-nav">
 {{with .Repository}}
        <div class="ui container">
                <div class="repo-header">
@@ -128,7 +128,7 @@
                {{if .IsGenerated}}<div class="fork-flag">{{ctx.Locale.Tr "repo.generated_from"}} <a href="{{(.TemplateRepo ctx).Link}}">{{(.TemplateRepo ctx).FullName}}</a></div>{{end}}
        </div>
 {{end}}
-       <overflow-menu class="ui container secondary pointing tabular top attached borderless menu navbar tw-pt-0 tw-my-0">
+       <overflow-menu class="ui container secondary pointing tabular top attached borderless menu tw-pt-0 tw-my-0">
                {{if not (or .Repository.IsBeingCreated .Repository.IsBroken)}}
                        <div class="overflow-menu-items">
                                {{if .Permission.CanRead $.UnitTypeCode}}

diff --git a/templates/user/auth/link_account.tmpl b/templates/user/auth/link_account.tmpl
index 81ea92c9594a31ce49d8444c6232e47e9dde426f..8dd49ccd6033424cefd478c4201483568fc65b47 100644 (file)
--- a/templates/user/auth/link_account.tmpl
+++ b/templates/user/auth/link_account.tmpl
@@ -1,6 +1,6 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content user link-account">
-       <overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar tw-bg-header-wrapper">
+       <overflow-menu class="ui secondary pointing tabular top attached borderless menu secondary-nav">
                <div class="overflow-menu-items tw-justify-center">
                        <!-- TODO handle .ShowRegistrationButton once other login bugs are fixed -->
                        {{if not .AllowOnlyInternalRegistration}}

diff --git a/templates/user/auth/signin_navbar.tmpl b/templates/user/auth/signin_navbar.tmpl
index a5768830652f6548be7d0903cf54e579995cb949..7f52185a7dea77881dcb49eeffe5dcc8bf1d5539 100644 (file)
--- a/templates/user/auth/signin_navbar.tmpl
+++ b/templates/user/auth/signin_navbar.tmpl
@@ -1,5 +1,5 @@
 {{if or .EnableOpenIDSignIn .EnableSSPI}}
-<overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar tw-bg-header-wrapper">
+<overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar secondary-nav">
        <div class="overflow-menu-items tw-justify-center">
                <a class="{{if .PageIsLogin}}active {{end}}item" rel="nofollow" href="{{AppSubUrl}}/user/login">
                        {{ctx.Locale.Tr "auth.login_userpass"}}

diff --git a/templates/user/auth/signup_openid_navbar.tmpl b/templates/user/auth/signup_openid_navbar.tmpl
index 9cf81b048f8a8f8d624750f866d9a1f70fb4b500..89068ddde18effe371f7b3b882e771a4f38ecb60 100644 (file)
--- a/templates/user/auth/signup_openid_navbar.tmpl
+++ b/templates/user/auth/signup_openid_navbar.tmpl
@@ -1,4 +1,4 @@
-<overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar tw-bg-header-wrapper">
+<overflow-menu class="ui secondary pointing tabular top attached borderless menu secondary-nav">
        <div class="overflow-menu-items tw-justify-center">
                <a class="{{if .PageIsOpenIDConnect}}active {{end}}item" href="{{AppSubUrl}}/user/openid/connect">
                        {{ctx.Locale.Tr "auth.openid_connect_title"}}

diff --git a/templates/user/dashboard/navbar.tmpl b/templates/user/dashboard/navbar.tmpl
index 917e024a6f9b022251f8083f30b685e616c44cfc..464228289ed598f542716e752c7af674a2433cda 100644 (file)
--- a/templates/user/dashboard/navbar.tmpl
+++ b/templates/user/dashboard/navbar.tmpl
@@ -1,4 +1,4 @@
-<div class="dashboard-navbar">
+<div class="secondary-nav tw-border-b tw-border-b-secondary">
        <div class="ui secondary stackable menu">
                <div class="item">
                        <div class="ui floating dropdown jump">
@@ -105,4 +105,3 @@
        {{end}}
        </div>
 </div>
-<div class="divider tw-mt-0"></div>

diff --git a/tests/e2e/example.test.e2e.js b/tests/e2e/example.test.e2e.js
index c741663a38f208ff090b3560f53f3f498eb90a0e..57c69a29178773f93dfbc7eae417353a1671644a 100644 (file)
--- a/tests/e2e/example.test.e2e.js
+++ b/tests/e2e/example.test.e2e.js
@@ -23,7 +23,7 @@ test('Test Register Form', async ({page}, workerInfo) => {
   await page.click('form button.ui.primary.button:visible');
   // Make sure we routed to the home page. Else login failed.
   await expect(page.url()).toBe(`${workerInfo.project.use.baseURL}/`);
-  await expect(page.locator('.dashboard-navbar span>img.ui.avatar')).toBeVisible();
+  await expect(page.locator('.secondary-nav span>img.ui.avatar')).toBeVisible();
   await expect(page.locator('.ui.positive.message.flash-success')).toHaveText('Account was successfully created. Welcome!');
 
   save_visual(page);

diff --git a/tests/e2e/utils_e2e.js b/tests/e2e/utils_e2e.js
index fba13ab426279cdc747d862fa3156775f1bf4e42..d60c78b16e04ea66473f1adc9492571686d96ca1 100644 (file)
--- a/tests/e2e/utils_e2e.js
+++ b/tests/e2e/utils_e2e.js
@@ -52,7 +52,7 @@ export async function save_visual(page) {
       fullPage: true,
       timeout: 20000,
       mask: [
-        page.locator('.dashboard-navbar span>img.ui.avatar'),
+        page.locator('.secondary-nav span>img.ui.avatar'),
         page.locator('.ui.dropdown.jump.item span>img.ui.avatar'),
       ],
     });

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 71e61eeb417a0be651a1d4c3a0f547a4e71c707e..dba379e7c83f2a46a87b0042ce04d2be9e2af15c 100644 (file)
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -738,10 +738,16 @@ img.ui.avatar,
   padding-bottom: 80px;
 }
 
-.page-content.new:is(.repo,.migrate,.org),
-.page-content.profile:is(.user,.organization),
-.page-content.user:is(.settings,.notification) {
-  padding-top: 15px;
+/* add margin below .secondary nav when it is the first child */
+.page-content > :first-child.secondary-nav {
+  margin-bottom: 14px;
+}
+
+/* add padding to all content when there is no .secondary.nav. this uses padding instead of
+   margin because with the negative margin on .ui.grid we would have to set margin-top: 0,
+   but that does not work universally for all pages */
+.page-content > :first-child:not(.secondary-nav) {
+  padding-top: 14px;
 }
 
 /* overwrite semantic width of containers inside the main page content div (div with class "page-content") */
@@ -1323,7 +1329,6 @@ strong.attention-caution, svg.attention-caution {
 }
 
 overflow-menu {
-  margin-bottom: 15px !important;
   border-bottom: 1px solid var(--color-secondary) !important;
   display: flex;
 }
@@ -1337,6 +1342,10 @@ overflow-menu .overflow-menu-items .item {
   margin-bottom: 0 !important; /* reset fomantic's margin, because the active menu has special bottom border */
 }
 
+overflow-menu .ui.label {
+  margin-left: 7px !important; /* save some space */
+}
+
 .activity-bar-graph {
   background-color: var(--color-primary);
   color: var(--color-primary-contrast);

diff --git a/web_src/css/dashboard.css b/web_src/css/dashboard.css
index 0fa81b1c2a883c9dac7733ad05d2178e8c64f536..e50f1abf42c4241fb2033d007b8a329e1bc4327b 100644 (file)
--- a/web_src/css/dashboard.css
+++ b/web_src/css/dashboard.css
@@ -77,15 +77,14 @@
   margin: 0 1px; /* Accommodate for Semantic's 1px hacks on .attached elements */
 }
 
-.dashboard .dashboard-navbar {
+.dashboard .secondary-nav {
   padding: 1px 12px; /* match .overflow-menu-items in height */
-  background: var(--color-header-wrapper);
 }
 
-.dashboard .dashboard-navbar .org-visibility .label {
+.dashboard .secondary-nav .org-visibility .label {
   margin-left: 5px;
 }
 
-.dashboard .dashboard-navbar .ui.dropdown {
+.dashboard .secondary-nav .ui.dropdown {
   max-width: 100%;
 }

diff --git a/web_src/css/explore.css b/web_src/css/explore.css
index 08858337c0da3c5c092178c89bdc238ed135830e..5cdee823c0b554b94456ac1761975b7c99832795 100644 (file)
--- a/web_src/css/explore.css
+++ b/web_src/css/explore.css
@@ -1,10 +1,8 @@
-.explore .navbar {
-  margin-bottom: 15px !important;
-  background-color: var(--color-header-wrapper) !important;
+.explore .secondary-nav {
   border-width: 1px !important;
 }
 
-.explore .navbar .svg {
+.explore .secondary-nav .svg {
   width: 16px;
   text-align: center;
   margin-right: 5px;

diff --git a/web_src/css/modules/navbar.css b/web_src/css/modules/navbar.css
index 88f4c570435d6913ebd6a8c45ce321df63efd94f..f8553d7cf09927d596427de2ee3b45c579e83403 100644 (file)
--- a/web_src/css/modules/navbar.css
+++ b/web_src/css/modules/navbar.css
@@ -136,3 +136,7 @@
   justify-content: center;
   z-index: 1; /* prevent menu button background from overlaying icon */
 }
+
+.secondary-nav {
+  background: var(--color-secondary-nav-bg) !important; /* important because of .ui.secondary.menu */
+}

diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 4503bd69e32d145db01e16eb9c7e5fb8970c8049..ca8de42a06cfa8bc4c0e0d27d7a5c31576a24bf6 100644 (file)
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -4,16 +4,6 @@
   user-select: none;
 }
 
-.repository .navbar {
-  display: flex;
-  justify-content: space-between;
-}
-
-.repository .navbar .ui.label {
-  margin-left: 7px;
-  padding: 3px 5px;
-}
-
 .repository .owner.dropdown {
   min-width: 40% !important;
 }

diff --git a/web_src/css/repo/header.css b/web_src/css/repo/header.css
index 13fb40e35d6a53978f72e62ad2be191e55104f72..55e704ed10be7007aebcbb57fd5e76593a998961 100644 (file)
--- a/web_src/css/repo/header.css
+++ b/web_src/css/repo/header.css
@@ -1,4 +1,8 @@
-.header-wrapper .fork-flag {
+.repository .secondary-nav {
+  padding-top: 12px;
+}
+
+.repository .secondary-nav .fork-flag {
   margin-top: 0.5rem;
   font-size: 12px;
 }
@@ -63,8 +67,3 @@
 .repo-buttons .ui.labeled.button.disabled > .button {
   pointer-events: none !important;
 }
-
-.repository .header-wrapper {
-  padding-top: 12px;
-  background-color: var(--color-header-wrapper);
-}

diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css
index 9cf8907e45f2dee6085bcc12a2dccb9672c70420..c769c51cdce953288296ee622137e7ad3c25762c 100644 (file)
--- a/web_src/css/themes/theme-gitea-dark.css
+++ b/web_src/css/themes/theme-gitea-dark.css
@@ -197,7 +197,6 @@
   --color-input-toggle-background: #2e353b;
   --color-input-border: var(--color-secondary);
   --color-input-border-hover: var(--color-secondary-dark-1);
-  --color-header-wrapper: #181c20;
   --color-light: #00001728;
   --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
   --color-light-border: #e8e8ff28;
@@ -227,6 +226,7 @@
   --color-nav-bg: #16191c;
   --color-nav-hover-bg: var(--color-secondary-light-1);
   --color-nav-text: var(--color-text);
+  --color-secondary-nav-bg: #181c20;
   --color-label-text: var(--color-text);
   --color-label-bg: #73828e4b;
   --color-label-hover-bg: #73828ea0;

diff --git a/web_src/css/themes/theme-gitea-light.css b/web_src/css/themes/theme-gitea-light.css
index 2ac83eefed2d220b66fb6387c8bc362d7e4ac918..2d9ab8e7210c024a8252546c1048763a3db72183 100644 (file)
--- a/web_src/css/themes/theme-gitea-light.css
+++ b/web_src/css/themes/theme-gitea-light.css
@@ -197,7 +197,6 @@
   --color-input-toggle-background: #d0d7de;
   --color-input-border: var(--color-secondary);
   --color-input-border-hover: var(--color-secondary-dark-1);
-  --color-header-wrapper: #f9fafb;
   --color-light: #00001706;
   --color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)));
   --color-light-border: #0000171d;
@@ -227,6 +226,7 @@
   --color-nav-bg: #f6f7fa;
   --color-nav-hover-bg: var(--color-secondary-light-1);
   --color-nav-text: var(--color-text);
+  --color-secondary-nav-bg: #f9fafb;
   --color-label-text: var(--color-text);
   --color-label-bg: #949da64b;
   --color-label-hover-bg: #949da6a0;

diff --git a/web_src/css/user.css b/web_src/css/user.css
index 4267ca0b7d7adea9c4774f09ef739a482cd51864..af8a2f5adc66af605bf3370e456dd725bb1b2711 100644 (file)
--- a/web_src/css/user.css
+++ b/web_src/css/user.css
@@ -112,10 +112,6 @@
   border: 1px solid var(--color-secondary);
 }
 
-#notification_div {
-  padding-top: 15px;
-}
-
 #notification_table {
   background: var(--color-box-body);
   border: 1px solid var(--color-secondary);