Fix styles for responsive footer

PaperCutSoftware · Apr 3, 2017 · 6c2efdd · 6c2efdd
1 parent b5b2058
commit 6c2efdd
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 16 deletions.
diff --git a/js/components/Footer.js b/js/components/Footer.js
@@ -1,12 +1,13 @@
 import React from 'react';
 import classNames from 'classnames';
 import Branding from './Branding';
-import { getItemPageNames } from '../../common/config';
+import { getItemPageNames, isMobileViewport } from '../../common/config';
 
 export default function Footer({ items, pageName }) {
   return (
-    <div className={classNames('footer', {'is-hidden': getItemPageNames(items).includes(pageName)})}>
+    <div className={classNames('footer', {'is-hidden': !isMobileViewport() && getItemPageNames(items).includes(pageName)})}>
       <Branding
+        modifier="footer"
         logoContent={<img src="/assets/logo.svg" width="150px" height="60px" />}
       >
         <span className="footnote">

diff --git a/js/components/FooterEnd.js b/js/components/FooterEnd.js
@@ -1,15 +1,15 @@
 import React from 'react';
 import classNames from 'classnames';
-import { getItemPageNames } from '../../common/config';
+import { getItemPageNames, isMobileViewport } from '../../common/config';
 
 export default function FooterEnd({ items, pageName }) {
   return (
-        <div className={classNames('footer-end', {'footer-end-left': getItemPageNames(items).includes(pageName)})} >
+        <div className={classNames('footer-end', {'footer-end-left': !isMobileViewport() && getItemPageNames(items).includes(pageName)})} >
             <div className="footer-social">
-                <div className="footer-social-label">
+                <div className="footer-social__label">
                     <p>Follow us:</p>
                 </div>
-                <div className="footer-social-links">
+                <div className="footer-social__links">
                     <a className="social-links-icon" href="https://www.facebook.com/aoepeople" target="_blank"><i className="socicon-facebook social-icon"></i></a>
                     <a className="social-links-icon" href="https://twitter.com/aoepeople" target="_blank"><i className="socicon-twitter social-icon"></i></a>
                     <a className="social-links-icon" href="https://www.linkedin.com/company/aoe" target="_blank"><i className="socicon-linkedin social-icon"></i></a>

diff --git a/styles/base.css b/styles/base.css
@@ -17,6 +17,7 @@
 @custom-media --until-sm (max-width: 30em);
 @custom-media --until-md (max-width: 48em);
 @custom-media --until-lg (max-width: 61.875em);
+@custom-media --until-xl (max-width: 75em);
 
 @font-face {
   font-family: 'DIN';

diff --git a/styles/components/branding.css b/styles/components/branding.css
@@ -25,4 +25,15 @@
   &.is-hidden {
     opacity: 0;
   }
+
+  @media (--until-sm) {
+    &--footer {
+      display: block;
+      text-align: center;
+    }
+  }
+
+  @media (--until-xl) {
+    margin: 15px 0 0;
+  }
 }
diff --git a/styles/components/footerend.css b/styles/components/footerend.css
@@ -11,20 +11,25 @@
     color: var(--color-gray-normal);
   }
 
-  & .footer-social {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
+  @media (--until-sm) {
+    flex-direction: column;
     align-items: center;
-
-    & .footer-social-label {
-      margin: 0 10px 0 0;
-    }
+    margin: 20px 0 0;
   }
-
 }
 
 .footer-end-left {
   flex-direction: column;
   align-items: flex-start;
-}
+}
+
+.footer-social {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+
+  &__label {
+    margin: 0 10px 0 0;
+  }
+}