From 0ed3d78de42aa150c4eca6d8f6d2540c3d246960 Mon Sep 17 00:00:00 2001
From: Tom Raithel <t.raithel@googlemail.com>
Date: Wed, 8 Mar 2017 21:01:38 +0100
Subject: [PATCH] Add babel polyfill and tweak some styles for firefox

---
 js/client.js                   |  1 +
 js/components/Footer.js        | 27 +++++++++++++--------------
 package.json                   |  1 +
 styles/base.css                |  4 ++++
 styles/components/branding.css |  6 ++++++
 styles/components/footer.css   |  9 +++++++++
 styles/components/page.css     |  2 +-
 7 files changed, 35 insertions(+), 15 deletions(-)
 create mode 100644 styles/components/footer.css

diff --git a/js/client.js b/js/client.js
index 4f62663..b78d5e8 100644
--- a/js/client.js
+++ b/js/client.js
@@ -1,3 +1,4 @@
+import 'babel-polyfill';
 import React from 'react';
 import { render } from 'react-dom';
 import { createStore, applyMiddleware } from 'redux';
diff --git a/js/components/Footer.js b/js/components/Footer.js
index e30f57a..43dd00f 100644
--- a/js/components/Footer.js
+++ b/js/components/Footer.js
@@ -1,22 +1,21 @@
 import React from 'react';
+import classNames from 'classnames';
 import Branding from './Branding';
 import { getItemPageNames } from '../../common/config';
 
 export default function Footer({ items, pageName }) {
-  if (getItemPageNames(items).includes(pageName)) {
-    return null;
-  }
-
   return (
-    <Branding
-      logoContent={<img src="/assets/logo.svg" width="150px" height="60px" />}
-    >
-      <span className="footnote">
-        AOE is a leading provider of Enterprise Open Source web solutions.
-        Using current agile development methods, more than 250+ developers
-        and consultants in 8 global locations develop customized Open Source
-        solutions for global companies and corporations.
-      </span>
-    </Branding>
+    <div className={classNames('footer', {'is-hidden': getItemPageNames(items).includes(pageName)})}>
+      <Branding
+        logoContent={<img src="/assets/logo.svg" width="150px" height="60px" />}
+      >
+        <span className="footnote">
+          AOE is a leading provider of Enterprise Open Source web solutions.
+          Using current agile development methods, more than 250+ developers
+          and consultants in 8 global locations develop customized Open Source
+          solutions for global companies and corporations.
+        </span>
+      </Branding>
+    </div>
   );
 }
diff --git a/package.json b/package.json
index ace4099..53a0c45 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "autoprefixer": "6.7.1",
     "babel-cli": "6.22.2",
     "babel-loader": "6.2.10",
+    "babel-polyfill": "6.23.0",
     "babel-preset-latest": "6.22.0",
     "babel-preset-react": "6.23.0",
     "babel-preset-stage-0": "6.22.0",
diff --git a/styles/base.css b/styles/base.css
index 6a963f4..8801edf 100644
--- a/styles/base.css
+++ b/styles/base.css
@@ -40,3 +40,7 @@ body {
     color: blue;
   }
 }
+
+#root {
+  min-height: 100vh;
+}
diff --git a/styles/components/branding.css b/styles/components/branding.css
index ebee26d..05d402f 100644
--- a/styles/components/branding.css
+++ b/styles/components/branding.css
@@ -4,6 +4,8 @@
   align-items: center;
   justify-content: space-between;
   min-height: 60px;
+  transition: opacity 450ms cubic-bezier(0.24, 1.12, 0.71, 0.98);
+  opacity: 1;
 
   &__backlink {
     flex: 0 0 auto;
@@ -19,4 +21,8 @@
   &__content {
     flex: 0 1 auto;
   }
+
+  &.is-hidden {
+    opacity: 0;
+  }
 }
diff --git a/styles/components/footer.css b/styles/components/footer.css
new file mode 100644
index 0000000..5dc18f2
--- /dev/null
+++ b/styles/components/footer.css
@@ -0,0 +1,9 @@
+.footer {
+  border-top: 1px solid var(--color-gray-normal);
+  transition: opacity 450ms cubic-bezier(0.24, 1.12, 0.71, 0.98);
+  opacity: 1;
+
+  &.is-hidden {
+    opacity: 0;
+  }
+}
diff --git a/styles/components/page.css b/styles/components/page.css
index 074deec..91d760c 100644
--- a/styles/components/page.css
+++ b/styles/components/page.css
@@ -5,6 +5,7 @@
   padding: 0 10px;
   display: flex;
   flex-direction: column;
+  min-height: 100vh;
 
   &__header {
     flex: 0 0 auto;
@@ -18,7 +19,6 @@
   }
 
   &__footer {
-    border-top: 1px solid var(--color-gray-normal);
     flex: 0 0 auto;
   }
 }