ThatGuyJack/nginx-proxy-manager
1
0
Fork 0
mirror of https://github.com/NginxProxyManager/nginx-proxy-manager.git synced 2025-08-28 11:40:04 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Fixes footer overlapping with content

Browse Source
This commit is contained in:
Julian Reinhardt
2021-10-26 22:02:01 +02:00
parent 780c95686e
commit 554002854c
2 changed files with 145 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
frontend/src/components/Footer.tsx
View File

@@ -2,107 +2,89 @@ import React from "react";
import { useHealthState } from "context"; import { useHealthState } from "context";
import { intl } from "locale"; import { intl } from "locale";
import styled from "styled-components";
const FixedFooterWrapper = styled.div` function Footer() {
position: fixed;
bottom: 0;
width: 100%;
`;
interface Props {
fixed?: boolean;
}
function Footer({ fixed }: Props) {
const { health } = useHealthState(); const { health } = useHealthState();
const wrapped = () => { return (
return ( <footer className="footer footer-transparent d-print-none">
<footer className="footer footer-transparent d-print-none"> <div className="container">
<div className="container"> <div className="row text-center align-items-center flex-row-reverse">
<div className="row text-center align-items-center flex-row-reverse"> <div className="col-lg-auto ms-lg-auto">
<div className="col-lg-auto ms-lg-auto"> <ul className="list-inline list-inline-dots mb-0">
<ul className="list-inline list-inline-dots mb-0"> <li className="list-inline-item">
<li className="list-inline-item"> <a
<a href="https://nginxproxymanager.com?utm_source=npm"
href="https://nginxproxymanager.com?utm_source=npm" target="_blank"
target="_blank" rel="noreferrer"
rel="noreferrer" className="link-secondary">
className="link-secondary"> {intl.formatMessage({
{intl.formatMessage({ id: "footer.userguide",
id: "footer.userguide", defaultMessage: "User Guide",
defaultMessage: "User Guide", })}
})} </a>
</a> </li>
</li> <li className="list-inline-item">
<li className="list-inline-item"> <a
<a href="https://github.com/jc21/nginx-proxy-manager/releases?utm_source=npm"
href="https://github.com/jc21/nginx-proxy-manager/releases?utm_source=npm" target="_blank"
target="_blank" rel="noreferrer"
rel="noreferrer" className="link-secondary">
className="link-secondary"> {intl.formatMessage({
{intl.formatMessage({ id: "footer.changelog",
id: "footer.changelog", defaultMessage: "Change Log",
defaultMessage: "Change Log", })}
})} </a>
</a> </li>
</li> <li className="list-inline-item">
<li className="list-inline-item"> <a
<a href="https://github.com/jc21/nginx-proxy-manager?utm_source=npm"
href="https://github.com/jc21/nginx-proxy-manager?utm_source=npm" target="_blank"
target="_blank" rel="noreferrer"
rel="noreferrer" className="link-secondary">
className="link-secondary"> {intl.formatMessage({
{intl.formatMessage({ id: "footer.github",
id: "footer.github", defaultMessage: "Github",
defaultMessage: "Github", })}
})} </a>
</a> </li>
</li> </ul>
</ul> </div>
</div> <div className="col-12 col-lg-auto mt-3 mt-lg-0">
<div className="col-12 col-lg-auto mt-3 mt-lg-0"> <ul className="list-inline list-inline-dots mb-0">
<ul className="list-inline list-inline-dots mb-0"> <li className="list-inline-item">
<li className="list-inline-item"> {intl.formatMessage(
{intl.formatMessage( {
{ id: "footer.copyright",
id: "footer.copyright", defaultMessage: "Copyright © {year} jc21.com",
defaultMessage: "Copyright © {year} jc21.com", },
}, { year: new Date().getFullYear() },
{ year: new Date().getFullYear() }, )}{" "}
)}{" "} <a
<a className="link-secondary"
className="link-secondary" href="https://preview.tabler.io/"
href="https://preview.tabler.io/" target="_blank"
target="_blank" rel="noreferrer">
rel="noreferrer"> {intl.formatMessage({
{intl.formatMessage({ id: "footer.theme",
id: "footer.theme", defaultMessage: "Theme by Tabler",
defaultMessage: "Theme by Tabler", })}
})} </a>
</a> </li>
</li> <li className="list-inline-item">
<li className="list-inline-item"> <a
<a href="https://github.com/jc21/nginx-proxy-manager/releases?utm_source=npm"
href="https://github.com/jc21/nginx-proxy-manager/releases?utm_source=npm" target="_blank"
target="_blank" className="link-secondary"
className="link-secondary" rel="noopener noreferrer">
rel="noopener noreferrer"> v{health.version} {String.fromCharCode(183)} {health.commit}
v{health.version} {String.fromCharCode(183)} {health.commit} </a>
</a> </li>
</li> </ul>
</ul>
</div>
</div> </div>
</div> </div>
</footer> </div>
); </footer>
};
return fixed ? (
<FixedFooterWrapper>{wrapped()}</FixedFooterWrapper>
) : (
wrapped()
); );
} }

116
frontend/src/components/SiteWrapper.tsx
View File

@@ -9,10 +9,24 @@ import styled from "styled-components";
import { NavMenu } from "./NavMenu"; import { NavMenu } from "./NavMenu";
const StyledContainer = styled.div` const StyledSiteContainer = styled.div`
display: flex;
flex-direction: column;
height: 100vh;
`;
const StyledScrollContainer = styled.div`
flex: 1 0 auto;
overflow: auto;
`;
const StyledContentContainer = styled.div`
padding-bottom: 30px; padding-bottom: 30px;
`; `;
const StyledFooterContainer = styled.div`
flex-shrink: 0;
`;
interface Props { interface Props {
children?: ReactNode; children?: ReactNode;
} }
@@ -21,55 +35,59 @@ function SiteWrapper({ children }: Props) {
const { logout } = useAuthState(); const { logout } = useAuthState();
return ( return (
<div className="wrapper"> <StyledSiteContainer className="wrapper">
<Navigation.Header <StyledScrollContainer>
theme="light" <Navigation.Header
brandContent={ theme="light"
<img brandContent={
src="/images/logo-bold-horizontal-grey.svg" <img
alt="Nginx Proxy Manager" src="/images/logo-bold-horizontal-grey.svg"
className="navbar-brand-image" alt="Nginx Proxy Manager"
height="32" className="navbar-brand-image"
/> height="32"
} />
avatar={<Avatar size="sm" url={user.gravatarUrl} />} }
profileName={user.nickname} avatar={<Avatar size="sm" url={user.gravatarUrl} />}
profileSubName={ profileName={user.nickname}
user.roles.includes("admin") profileSubName={
? intl.formatMessage({ user.roles.includes("admin")
id: "users.admin", ? intl.formatMessage({
defaultMessage: "Administrator", id: "users.admin",
}) defaultMessage: "Administrator",
: intl.formatMessage({ })
id: "users.standard", : intl.formatMessage({
defaultMessage: "Standard User", id: "users.standard",
}) defaultMessage: "Standard User",
} })
buttons={[<LocalePicker key="lp1" />]} }
profileItems={[ buttons={[<LocalePicker key="lp1" />]}
<Dropdown.Item key="m1-2"> profileItems={[
{intl.formatMessage({ <Dropdown.Item key="m1-2">
id: "profile.title", {intl.formatMessage({
defaultMessage: "Profile settings", id: "profile.title",
})} defaultMessage: "Profile settings",
</Dropdown.Item>, })}
<Dropdown.Item divider key="m1-4" />, </Dropdown.Item>,
<Dropdown.Item key="m1-6" onClick={logout}> <Dropdown.Item divider key="m1-4" />,
{intl.formatMessage({ <Dropdown.Item key="m1-6" onClick={logout}>
id: "profile.logout", {intl.formatMessage({
defaultMessage: "Logout", id: "profile.logout",
})} defaultMessage: "Logout",
</Dropdown.Item>, })}
]} </Dropdown.Item>,
/> ]}
<NavMenu /> />
<div className="content"> <NavMenu />
<div className="container-xl"> <div className="content">
<StyledContainer>{children}</StyledContainer> <div className="container-xl">
<StyledContentContainer>{children}</StyledContentContainer>
</div>
</div> </div>
</div> </StyledScrollContainer>
<Footer fixed /> <StyledFooterContainer>
</div> <Footer />
</StyledFooterContainer>
</StyledSiteContainer>
); );
} }