Add babel polyfill and tweak some styles for firefox

js/client.js

@@ -1,3 +1,4 @@
+import 'babel-polyfill';
 import React from 'react';
 import { render } from 'react-dom';
 import { createStore, applyMiddleware } from 'redux';

js/components/Footer.js

@@ -1,13 +1,11 @@
 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 (
+    <div className={classNames('footer', {'is-hidden': getItemPageNames(items).includes(pageName)})}>
       <Branding
         logoContent={<img src="/assets/logo.svg" width="150px" height="60px" />}
       >
@@ -18,5 +16,6 @@ export default function Footer({ items, pageName }) {
           solutions for global companies and corporations.
         </span>
       </Branding>
+    </div>
   );
 }

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",

styles/base.css

@@ -40,3 +40,7 @@ body {
     color: blue;
   }
 }
+
+#root {
+  min-height: 100vh;
+}

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;
+  }
 }

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;
+  }
+}

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;
   }
 }