From c928c546a3602f9b34c6a265c6fe08fe594a5653 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Thu, 22 Nov 2018 12:51:10 +0100
Subject: [PATCH] Sticky footer for all pages

Currently the footer is based on top margins which looks odd on big screen sizes.
Also, the footer shows up on the top of the page on pages take a moment to load (while ng-view is rendering).

- True sticky footer based on flexbox
- Ensure footer stays at bottom while ng-view div does not exist yet
---
 public/sass/components/_footer.scss |  3 ++-
 public/sass/layout/_page.scss       | 23 +++++++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/public/sass/components/_footer.scss b/public/sass/components/_footer.scss
index 9bc99c30d1d..893eea02914 100644
--- a/public/sass/components/_footer.scss
+++ b/public/sass/components/_footer.scss
@@ -4,7 +4,7 @@
 
 .footer {
   color: $footer-link-color;
-  padding: 5rem 0 1rem 0;
+  padding: 1rem 0 1rem 0;
   font-size: $font-size-sm;
   position: relative;
   width: 98%; /* was causing horiz scrollbars - need to examine */
@@ -38,6 +38,7 @@
   }
 }
 
+// Keeping footer inside the graphic on Login screen
 .login-page {
   .footer {
     bottom: $spacer;
diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss
index faa5b94d4ad..312248086fa 100644
--- a/public/sass/layout/_page.scss
+++ b/public/sass/layout/_page.scss
@@ -40,6 +40,29 @@
   &--dashboard {
     height: calc(100% - 56px);
   }
+
+  // Sticky footer
+  display: flex;
+  flex-direction: column;
+
+  > div {
+    flex-grow: 1;
+  }
+
+  > .footer {
+    flex-shrink: 0;
+  }
+
+  // Render in correct position even ng-view div is not rendered yet
+  > .footer:first-child {
+    flex-grow: 1;
+    display: flex;
+
+    > * {
+      width: 100%;
+      align-self: flex-end;
+    }
+  }
 }
 
 // fix for phantomjs