From 1937fe24188ef59129d9efd0216b8c3350250346 Mon Sep 17 00:00:00 2001
From: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
Date: Sat, 13 Jun 2020 00:04:10 +0200
Subject: [PATCH] Show footer always at the bottom

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
---
 src/components/landing/landing-layout.tsx    | 12 ++++++++----
 src/components/landing/pages/intro/intro.tsx |  6 +++---
 src/global-style/index.scss                  |  4 ++++
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/landing/landing-layout.tsx b/src/components/landing/landing-layout.tsx
index 652eeebdb..421fda9eb 100644
--- a/src/components/landing/landing-layout.tsx
+++ b/src/components/landing/landing-layout.tsx
@@ -1,14 +1,18 @@
 import React from 'react'
 import { Container } from 'react-bootstrap'
-import { HeaderBar } from './layout/navigation/header-bar/header-bar'
 import { Footer } from './layout/footer/footer'
+import { HeaderBar } from './layout/navigation/header-bar/header-bar'
 
 export const LandingLayout: React.FC = ({ children }) => {
   return (
-    <Container className="text-white text-center">
+    <Container className="text-white d-flex flex-column mvh-100">
       <HeaderBar/>
-      {children}
-      <Footer/>
+      <div className={'d-flex flex-column justify-content-between flex-fill text-center'}>
+        <div>
+          {children}
+        </div>
+        <Footer/>
+      </div>
     </Container>
   )
 }
diff --git a/src/components/landing/pages/intro/intro.tsx b/src/components/landing/pages/intro/intro.tsx
index 1cc98a585..e52341a84 100644
--- a/src/components/landing/pages/intro/intro.tsx
+++ b/src/components/landing/pages/intro/intro.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Fragment } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
 import { CoverButtons } from './cover-buttons/cover-buttons'
@@ -9,7 +9,7 @@ const Intro: React.FC = () => {
   const { t } = useTranslation()
 
   return (
-    <div>
+    <Fragment>
       <h1 dir='auto'>
         <ForkAwesomeIcon icon="file-text"/> CodiMD
       </h1>
@@ -21,7 +21,7 @@ const Intro: React.FC = () => {
 
       <img alt={t('landing.intro.screenShotAltText')} src={screenshot} className="img-fluid mb-5"/>
       <FeatureLinks/>
-    </div>
+    </Fragment>
   )
 }
 
diff --git a/src/global-style/index.scss b/src/global-style/index.scss
index b45dd3cdb..54f0cd7c4 100644
--- a/src/global-style/index.scss
+++ b/src/global-style/index.scss
@@ -27,3 +27,7 @@ body {
 .text-start {
   text-align: start;
 }
+
+.mvh-100 {
+  min-height: 100vh;
+}