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

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

@@ -2,21 +2,10 @@ 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">
@@ -97,13 +86,6 @@ function Footer({ fixed }: Props) {
</div> </div>
</footer> </footer>
); );
};
return fixed ? (
<FixedFooterWrapper>{wrapped()}</FixedFooterWrapper>
) : (
wrapped()
);
} }
export { Footer }; export { Footer };

28
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,7 +35,8 @@ function SiteWrapper({ children }: Props) {
const { logout } = useAuthState(); const { logout } = useAuthState();
return ( return (
<div className="wrapper"> <StyledSiteContainer className="wrapper">
<StyledScrollContainer>
<Navigation.Header <Navigation.Header
theme="light" theme="light"
brandContent={ brandContent={
@@ -65,11 +80,14 @@ function SiteWrapper({ children }: Props) {
<NavMenu /> <NavMenu />
<div className="content"> <div className="content">
<div className="container-xl"> <div className="container-xl">
<StyledContainer>{children}</StyledContainer> <StyledContentContainer>{children}</StyledContentContainer>
</div> </div>
</div> </div>
<Footer fixed /> </StyledScrollContainer>
</div> <StyledFooterContainer>
<Footer />
</StyledFooterContainer>
</StyledSiteContainer>
); );
} }