AJR/TechRadarAJR
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix styles for responsive footer

Browse Source
This commit is contained in:
Mathias Schopmans
2017-04-03 16:56:40 +02:00
parent b5b20584ef
commit 6c2efdd724
5 changed files with 34 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
js/components/Footer.js
View File

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

8
js/components/FooterEnd.js
View File

@@ -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>