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>
This commit is contained in:
silverwind 2024-03-23 00:54:09 +01:00 committed by GitHub
parent bc92478575
commit 3ccda41a53
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
18 changed files with 40 additions and 46 deletions

View File

@ -1,6 +1,6 @@
{{template "base/head" .ctxData}} {{template "base/head" .ctxData}}
<div role="main" aria-label="{{.ctxData.Title}}" class="page-content {{.pageClass}}"> <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}} {{template "base/alert" .ctxData}}
</div> </div>
<div class="ui container fluid padded flex-container"> <div class="ui container fluid padded flex-container">

View File

@ -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"> <div class="overflow-menu-items tw-justify-center">
<a class="{{if .PageIsExploreRepositories}}active {{end}}item" href="{{AppSubUrl}}/explore/repos"> <a class="{{if .PageIsExploreRepositories}}active {{end}}item" href="{{AppSubUrl}}/explore/repos">
{{svg "octicon-repo"}} {{ctx.Locale.Tr "explore.repos"}} {{svg "octicon-repo"}} {{ctx.Locale.Tr "explore.repos"}}

View File

@ -1,4 +1,4 @@
<div class="header-wrapper"> <div class="secondary-nav">
{{with .Repository}} {{with .Repository}}
<div class="ui container"> <div class="ui container">
<div class="repo-header"> <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}} {{if .IsGenerated}}<div class="fork-flag">{{ctx.Locale.Tr "repo.generated_from"}} <a href="{{(.TemplateRepo ctx).Link}}">{{(.TemplateRepo ctx).FullName}}</a></div>{{end}}
</div> </div>
{{end}} {{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)}} {{if not (or .Repository.IsBeingCreated .Repository.IsBroken)}}
<div class="overflow-menu-items"> <div class="overflow-menu-items">
{{if .Permission.CanRead $.UnitTypeCode}} {{if .Permission.CanRead $.UnitTypeCode}}

View File

@ -1,6 +1,6 @@
{{template "base/head" .}} {{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content user link-account"> <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"> <div class="overflow-menu-items tw-justify-center">
<!-- TODO handle .ShowRegistrationButton once other login bugs are fixed --> <!-- TODO handle .ShowRegistrationButton once other login bugs are fixed -->
{{if not .AllowOnlyInternalRegistration}} {{if not .AllowOnlyInternalRegistration}}

View File

@ -1,5 +1,5 @@
{{if or .EnableOpenIDSignIn .EnableSSPI}} {{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"> <div class="overflow-menu-items tw-justify-center">
<a class="{{if .PageIsLogin}}active {{end}}item" rel="nofollow" href="{{AppSubUrl}}/user/login"> <a class="{{if .PageIsLogin}}active {{end}}item" rel="nofollow" href="{{AppSubUrl}}/user/login">
{{ctx.Locale.Tr "auth.login_userpass"}} {{ctx.Locale.Tr "auth.login_userpass"}}

View File

@ -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"> <div class="overflow-menu-items tw-justify-center">
<a class="{{if .PageIsOpenIDConnect}}active {{end}}item" href="{{AppSubUrl}}/user/openid/connect"> <a class="{{if .PageIsOpenIDConnect}}active {{end}}item" href="{{AppSubUrl}}/user/openid/connect">
{{ctx.Locale.Tr "auth.openid_connect_title"}} {{ctx.Locale.Tr "auth.openid_connect_title"}}

View File

@ -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="ui secondary stackable menu">
<div class="item"> <div class="item">
<div class="ui floating dropdown jump"> <div class="ui floating dropdown jump">
@ -105,4 +105,3 @@
{{end}} {{end}}
</div> </div>
</div> </div>
<div class="divider tw-mt-0"></div>

View File

@ -23,7 +23,7 @@ test('Test Register Form', async ({page}, workerInfo) => {
await page.click('form button.ui.primary.button:visible'); await page.click('form button.ui.primary.button:visible');
// Make sure we routed to the home page. Else login failed. // Make sure we routed to the home page. Else login failed.
await expect(page.url()).toBe(`${workerInfo.project.use.baseURL}/`); 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!'); await expect(page.locator('.ui.positive.message.flash-success')).toHaveText('Account was successfully created. Welcome!');
save_visual(page); save_visual(page);

View File

@ -52,7 +52,7 @@ export async function save_visual(page) {
fullPage: true, fullPage: true,
timeout: 20000, timeout: 20000,
mask: [ 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'), page.locator('.ui.dropdown.jump.item span>img.ui.avatar'),
], ],
}); });

View File

@ -738,10 +738,16 @@ img.ui.avatar,
padding-bottom: 80px; padding-bottom: 80px;
} }
.page-content.new:is(.repo,.migrate,.org), /* add margin below .secondary nav when it is the first child */
.page-content.profile:is(.user,.organization), .page-content > :first-child.secondary-nav {
.page-content.user:is(.settings,.notification) { margin-bottom: 14px;
padding-top: 15px; }
/* 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") */ /* 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 { overflow-menu {
margin-bottom: 15px !important;
border-bottom: 1px solid var(--color-secondary) !important; border-bottom: 1px solid var(--color-secondary) !important;
display: flex; 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 */ 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 { .activity-bar-graph {
background-color: var(--color-primary); background-color: var(--color-primary);
color: var(--color-primary-contrast); color: var(--color-primary-contrast);

View File

@ -77,15 +77,14 @@
margin: 0 1px; /* Accommodate for Semantic's 1px hacks on .attached elements */ 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 */ 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; margin-left: 5px;
} }
.dashboard .dashboard-navbar .ui.dropdown { .dashboard .secondary-nav .ui.dropdown {
max-width: 100%; max-width: 100%;
} }

View File

@ -1,10 +1,8 @@
.explore .navbar { .explore .secondary-nav {
margin-bottom: 15px !important;
background-color: var(--color-header-wrapper) !important;
border-width: 1px !important; border-width: 1px !important;
} }
.explore .navbar .svg { .explore .secondary-nav .svg {
width: 16px; width: 16px;
text-align: center; text-align: center;
margin-right: 5px; margin-right: 5px;

View File

@ -136,3 +136,7 @@
justify-content: center; justify-content: center;
z-index: 1; /* prevent menu button background from overlaying icon */ 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 */
}

View File

@ -4,16 +4,6 @@
user-select: none; user-select: none;
} }
.repository .navbar {
display: flex;
justify-content: space-between;
}
.repository .navbar .ui.label {
margin-left: 7px;
padding: 3px 5px;
}
.repository .owner.dropdown { .repository .owner.dropdown {
min-width: 40% !important; min-width: 40% !important;
} }

View File

@ -1,4 +1,8 @@
.header-wrapper .fork-flag { .repository .secondary-nav {
padding-top: 12px;
}
.repository .secondary-nav .fork-flag {
margin-top: 0.5rem; margin-top: 0.5rem;
font-size: 12px; font-size: 12px;
} }
@ -63,8 +67,3 @@
.repo-buttons .ui.labeled.button.disabled > .button { .repo-buttons .ui.labeled.button.disabled > .button {
pointer-events: none !important; pointer-events: none !important;
} }
.repository .header-wrapper {
padding-top: 12px;
background-color: var(--color-header-wrapper);
}

View File

@ -197,7 +197,6 @@
--color-input-toggle-background: #2e353b; --color-input-toggle-background: #2e353b;
--color-input-border: var(--color-secondary); --color-input-border: var(--color-secondary);
--color-input-border-hover: var(--color-secondary-dark-1); --color-input-border-hover: var(--color-secondary-dark-1);
--color-header-wrapper: #181c20;
--color-light: #00001728; --color-light: #00001728;
--color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
--color-light-border: #e8e8ff28; --color-light-border: #e8e8ff28;
@ -227,6 +226,7 @@
--color-nav-bg: #16191c; --color-nav-bg: #16191c;
--color-nav-hover-bg: var(--color-secondary-light-1); --color-nav-hover-bg: var(--color-secondary-light-1);
--color-nav-text: var(--color-text); --color-nav-text: var(--color-text);
--color-secondary-nav-bg: #181c20;
--color-label-text: var(--color-text); --color-label-text: var(--color-text);
--color-label-bg: #73828e4b; --color-label-bg: #73828e4b;
--color-label-hover-bg: #73828ea0; --color-label-hover-bg: #73828ea0;

View File

@ -197,7 +197,6 @@
--color-input-toggle-background: #d0d7de; --color-input-toggle-background: #d0d7de;
--color-input-border: var(--color-secondary); --color-input-border: var(--color-secondary);
--color-input-border-hover: var(--color-secondary-dark-1); --color-input-border-hover: var(--color-secondary-dark-1);
--color-header-wrapper: #f9fafb;
--color-light: #00001706; --color-light: #00001706;
--color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled))); --color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)));
--color-light-border: #0000171d; --color-light-border: #0000171d;
@ -227,6 +226,7 @@
--color-nav-bg: #f6f7fa; --color-nav-bg: #f6f7fa;
--color-nav-hover-bg: var(--color-secondary-light-1); --color-nav-hover-bg: var(--color-secondary-light-1);
--color-nav-text: var(--color-text); --color-nav-text: var(--color-text);
--color-secondary-nav-bg: #f9fafb;
--color-label-text: var(--color-text); --color-label-text: var(--color-text);
--color-label-bg: #949da64b; --color-label-bg: #949da64b;
--color-label-hover-bg: #949da6a0; --color-label-hover-bg: #949da6a0;

View File

@ -112,10 +112,6 @@
border: 1px solid var(--color-secondary); border: 1px solid var(--color-secondary);
} }
#notification_div {
padding-top: 15px;
}
#notification_table { #notification_table {
background: var(--color-box-body); background: var(--color-box-body);
border: 1px solid var(--color-secondary); border: 1px solid var(--color-secondary);