Show footer always at the bottom

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
This commit is contained in:
Tilman Vatteroth 2020-06-13 00:04:10 +02:00 committed by mrdrogdrog
parent 9d2a1d7035
commit 1937fe2418
3 changed files with 15 additions and 7 deletions

View file

@ -1,14 +1,18 @@
import React from 'react' import React from 'react'
import { Container } from 'react-bootstrap' import { Container } from 'react-bootstrap'
import { HeaderBar } from './layout/navigation/header-bar/header-bar'
import { Footer } from './layout/footer/footer' import { Footer } from './layout/footer/footer'
import { HeaderBar } from './layout/navigation/header-bar/header-bar'
export const LandingLayout: React.FC = ({ children }) => { export const LandingLayout: React.FC = ({ children }) => {
return ( return (
<Container className="text-white text-center"> <Container className="text-white d-flex flex-column mvh-100">
<HeaderBar/> <HeaderBar/>
{children} <div className={'d-flex flex-column justify-content-between flex-fill text-center'}>
<Footer/> <div>
{children}
</div>
<Footer/>
</div>
</Container> </Container>
) )
} }

View file

@ -1,4 +1,4 @@
import React from 'react' import React, { Fragment } from 'react'
import { Trans, useTranslation } from 'react-i18next' import { Trans, useTranslation } from 'react-i18next'
import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon' import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
import { CoverButtons } from './cover-buttons/cover-buttons' import { CoverButtons } from './cover-buttons/cover-buttons'
@ -9,7 +9,7 @@ const Intro: React.FC = () => {
const { t } = useTranslation() const { t } = useTranslation()
return ( return (
<div> <Fragment>
<h1 dir='auto'> <h1 dir='auto'>
<ForkAwesomeIcon icon="file-text"/> CodiMD <ForkAwesomeIcon icon="file-text"/> CodiMD
</h1> </h1>
@ -21,7 +21,7 @@ const Intro: React.FC = () => {
<img alt={t('landing.intro.screenShotAltText')} src={screenshot} className="img-fluid mb-5"/> <img alt={t('landing.intro.screenShotAltText')} src={screenshot} className="img-fluid mb-5"/>
<FeatureLinks/> <FeatureLinks/>
</div> </Fragment>
) )
} }

View file

@ -27,3 +27,7 @@ body {
.text-start { .text-start {
text-align: start; text-align: start;
} }
.mvh-100 {
min-height: 100vh;
}