Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-10 15:35:49 +01:00
Code Issues Packages Projects Releases Activity

Fix navbar at the top of the page (#2128)

Browse Source
This commit is contained in:
Florian Scholdei
2022-10-11 16:01:22 +02:00
committed by GitHub
parent ca047b7953
commit 33f7dd994a
7 changed files with 46 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
gradle/changelog/fixted_navbar.yaml Normal file
View File

@@ -0,0 +1,2 @@
- type: changed
description: Fix navbar at the top of the page ([#2128](https://github.com/scm-manager/scm-manager/pull/2128))

8
scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
View File

@@ -71458,7 +71458,7 @@ exports[`Storyshots Secondary Navigation Active when match 1`] = `
className="column is-3" className="column is-3"
> >
<aside <aside
className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 NSEld menu" className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 cZyrQa menu"
> >
<div> <div>
<p <p
@@ -71520,7 +71520,7 @@ exports[`Storyshots Secondary Navigation Default 1`] = `
className="column is-3" className="column is-3"
> >
<aside <aside
className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 NSEld menu" className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 cZyrQa menu"
> >
<div> <div>
<p <p
@@ -71582,7 +71582,7 @@ exports[`Storyshots Secondary Navigation Extension Point 1`] = `
className="column is-3" className="column is-3"
> >
<aside <aside
className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 NSEld menu" className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 cZyrQa menu"
> >
<div> <div>
<p <p
@@ -71670,7 +71670,7 @@ exports[`Storyshots Secondary Navigation Sub Navigation 1`] = `
className="column is-3" className="column is-3"
> >
<aside <aside
className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 NSEld menu" className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 cZyrQa menu"
> >
<div> <div>
<p <p

6
scm-ui/ui-components/src/layout/Header.tsx
View File

@@ -28,10 +28,6 @@ type Props = {
authenticated?: boolean; authenticated?: boolean;
}; };
const SmallHeader: FC = ({ children }) => {
return <div className="has-scm-background">{children}</div>;
};
const LargeHeader: FC = () => { const LargeHeader: FC = () => {
return ( return (
<div className="hero has-scm-background is-small"> <div className="hero has-scm-background is-small">
@@ -50,7 +46,7 @@ const LargeHeader: FC = () => {
const Header: FC<Props> = ({ authenticated, children }) => { const Header: FC<Props> = ({ authenticated, children }) => {
if (authenticated) { if (authenticated) {
return <SmallHeader>{children}</SmallHeader>; return <>{children}</>;
} else { } else {
return <LargeHeader />; return <LargeHeader />;
} }

2
scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
View File

@@ -40,7 +40,7 @@ type CollapsedProps = {
const SectionContainer = styled.aside` const SectionContainer = styled.aside`
position: sticky; position: sticky;
position: -webkit-sticky; /* Safari */ position: -webkit-sticky; /* Safari */
top: 2rem; top: 5rem;
width: 100%; width: 100%;
@media (max-height: 900px) { @media (max-height: 900px) {

7
scm-ui/ui-styles/src/components/_main.scss
View File

@@ -490,6 +490,11 @@ ul.is-separated {
} }
} }
// navbar
.has-navbar-fixed-top {
padding-top: $navbar-height;
}
// card columns for repo and plugins overview // card columns for repo and plugins overview
.card-columns { .card-columns {
.column { .column {
@@ -904,7 +909,7 @@ form .field:not(.is-grouped) {
} }
.is-vertical-align-middle { .is-vertical-align-middle {
vertical-align: middle !important vertical-align: middle !important;
} }
// radio // radio

3
scm-ui/ui-webapp/src/containers/App.tsx
View File

@@ -25,6 +25,7 @@ import React, { FC } from "react";
import Main from "./Main"; import Main from "./Main";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import classNames from "classnames";
import { useIndex, useSubject } from "@scm-manager/ui-api"; import { useIndex, useSubject } from "@scm-manager/ui-api";
import { ErrorPage, Footer, Header, Loading } from "@scm-manager/ui-components"; import { ErrorPage, Footer, Header, Loading } from "@scm-manager/ui-components";
import { binder } from "@scm-manager/ui-extensions"; import { binder } from "@scm-manager/ui-extensions";
@@ -90,7 +91,7 @@ const App: FC = () => {
} }
return ( return (
<AppWrapper className="App"> <AppWrapper className={classNames("App", { "has-navbar-fixed-top": authenticatedOrAnonymous})}>
<Header authenticated={authenticatedOrAnonymous}> <Header authenticated={authenticatedOrAnonymous}>
<NavigationBar links={index._links} /> <NavigationBar links={index._links} />
</Header> </Header>

58
scm-ui/ui-webapp/src/containers/NavigationBar.tsx
View File

@@ -116,36 +116,38 @@ const NavigationBar: FC<Props> = ({ links }) => {
}, [burgerActive]); }, [burgerActive]);
return ( return (
<StyledNavBar className="navbar mb-0 container" aria-label="main navigation"> <StyledNavBar className="navbar is-fixed-top has-scm-background" aria-label="main navigation">
<div className="navbar-brand"> <div className="container">
<LogoItem className="navbar-item logo"> <div className="navbar-brand">
<Logo withText={false} className="image is-32x32" /> <LogoItem className="navbar-item logo">
</LogoItem> <Logo withText={false} className="image is-32x32" />
<button </LogoItem>
className={classNames("navbar-burger", { "is-active": burgerActive })} <button
aria-expanded="true" className={classNames("navbar-burger", { "is-active": burgerActive })}
onClick={() => setBurgerActive(active => !active)} aria-expanded="true"
aria-label={t("primary-navigation.navbarBurger")} onClick={() => setBurgerActive((active) => !active)}
> aria-label={t("primary-navigation.navbarBurger")}
<span aria-hidden="true" /> >
<span aria-hidden="true" /> <span aria-hidden="true" />
<span aria-hidden="true" /> <span aria-hidden="true" />
</button> <span aria-hidden="true" />
</div> </button>
<div className="is-active navbar-header-actions">
<Alerts className="navbar-item" />
<OmniSearch links={links} />
<Notifications className="navbar-item" />
</div>
<StyledMenuBar className={classNames("navbar-menu", { "is-active": burgerActive })}>
<div className="navbar-start">
<PrimaryNavigation links={links} />
</div> </div>
<div className="navbar-end"> <div className="is-active navbar-header-actions">
<LogoutButton burgerMode={burgerActive} links={links} /> <Alerts className="navbar-item" />
<LoginButton burgerMode={burgerActive} links={links} /> <OmniSearch links={links} />
<Notifications className="navbar-item" />
</div> </div>
</StyledMenuBar> <StyledMenuBar className={classNames("navbar-menu", { "is-active": burgerActive })}>
<div className="navbar-start">
<PrimaryNavigation links={links} />
</div>
<div className="navbar-end">
<LogoutButton burgerMode={burgerActive} links={links} />
<LoginButton burgerMode={burgerActive} links={links} />
</div>
</StyledMenuBar>
</div>
</StyledNavBar> </StyledNavBar>
); );
}; };