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>tags/v1.22.0-rc0
@@ -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"> |
@@ -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"}} |
@@ -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}} |
@@ -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}} |
@@ -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"}} |
@@ -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"}} |
@@ -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> |
@@ -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); |
@@ -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'), | |||
], | |||
}); |
@@ -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); |
@@ -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%; | |||
} |
@@ -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; |
@@ -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 */ | |||
} |
@@ -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; | |||
} |
@@ -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); | |||
} |
@@ -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; |
@@ -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; |
@@ -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); |