Introduce .secondary-nav and handle margin universally

Fixes: #29981

Author: silverwind

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">

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"}}

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}}

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}}

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"}}

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"}}

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>

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);

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'),
       ],
     });

web_src/css/base.css

@@ -738,10 +738,14 @@ 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;
+}
+
+/* this uses padding instead of margin because of negative margin on .ui.grid */
+.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 +1327,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 +1340,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;
+}
+
 .activity-bar-graph {
   background-color: var(--color-primary);
   color: var(--color-primary-contrast);