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

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