gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(client): footer: use react-bootstrap, simplify layout, correct links

Browse Source
This commit is contained in:
Valeriy S
2019-01-24 16:02:37 +03:00
committed by Stuart Taylor
parent 271e7dd077
commit 8a70f14319
2 changed files with 105 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
client/src/components/Footer/footer.css
View File

@ -1,13 +1,21 @@
footer { .footer {
position: absolute;
background-color: #e0e0e0; background-color: #e0e0e0;
color: #555555; color: #555555;
background-size: cover;
font-size: 0.9em; font-size: 0.9em;
width: 100%; width: 100%;
padding-top: 40px; padding-top: 40px;
} }
footer b { .footer .col-header {
padding-bottom: 5px; padding-bottom: 5px;
font-weight: bold;
}
.footer a:not([class*='inline']) {
display: block;
}
.footer .external-link-icon {
margin-left: 5px;
color: #6d6d6d;
} }

139
client/src/components/Footer/index.js
View File

@ -1,13 +1,44 @@
/* eslint-disable max-len*/
import React from 'react'; import React from 'react';
import { Link as GatsbyLink } from 'gatsby';
import { Grid, Row, Col } from '@freecodecamp/react-bootstrap';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
import './footer.css'; import './footer.css';
const ColHeader = ({ children, ...other }) => (
<div className='col-header' {...other}>
{children}
</div>
);
const Link = ({ children, to, external, ...other }) => {
if (!external && (/^\/(?!\/)/).test(to)) {
return (
<GatsbyLink to={to} {...other}>
{children}
</GatsbyLink>
);
}
return (
<a href={to} {...other} rel='noopener noreferrer' target='_blank'>
{children}
<FontAwesomeIcon
className='external-link-icon'
icon={faExternalLinkAlt}
size='xs'
/>
</a>
);
};
function Footer() { function Footer() {
return ( return (
<footer className='pt-5 pb-4 footer' id='contact'> <footer className='footer'>
<div className='container'> <Grid>
<div className='row'> <Row>
<div className='col-lg-5 col-md-6 col-sm-6 '> <Col lg={5} sm={6}>
<p> <p>
freeCodeCamp is a donor-supported tax-exempt 501(c)(3) nonprofit freeCodeCamp is a donor-supported tax-exempt 501(c)(3) nonprofit
organization (United States Federal Tax Identification Number: organization (United States Federal Tax Identification Number:
@ -18,52 +49,68 @@ function Footer() {
this by creating thousands of videos, articles, and interactive this by creating thousands of videos, articles, and interactive
coding lessons - all freely available to the public. We also have coding lessons - all freely available to the public. We also have
thousands of freeCodeCamp study groups around the world. thousands of freeCodeCamp study groups around the world.
</p><p> </p>
<p>
Donations to freeCodeCamp go toward our education initiatives, and Donations to freeCodeCamp go toward our education initiatives, and
help pay for servers, services, and staff. You can&nbsp; help pay for servers, services, and staff. You can&nbsp;
<a className='underline white' href='https://donate.freecodecamp.org'>make a tax-deductible donation here</a>. <Link className='inline' href='https://donate.freecodecamp.org'>
make a tax-deductible donation here
</Link>
.
</p> </p>
</div> </Col>
<div className='col-lg-2 col-md-2 col-sm-2 col-xs-6'> <Col sm={2} xs={6}>
<div className='row'> <ColHeader>Our Nonprofit</ColHeader>
<b className='paddingLow font-weight-bold col-xs-12'>Our Nonprofit</b> <Link to='https://about.freecodecamp.org'>About</Link>
<a className=' col-xs-12' href='https://about.freecodecamp.org'>About </a> <Link to='https://donate.freecodecamp.org'>Donate</Link>
<a className=' col-xs-12' href='https://donate.freecodecamp.org'>Donate</a> <Link to='https://shop.freecodecamp.org'>Shop</Link>
<a className=' col-xs-12' href='https://shop.freecodecamp.org'>Shop</a> <Link to='https://sponsors.freecodecamp.org'>Sponsors</Link>
<a className=' col-xs-12' href='https://sponsors.freecodecamp.org'>Sponsors</a> <Link to='mailto:team@freecodecamp.org'>Contact email</Link>
<a className=' col-xs-12' href='mailto:team@freecodecamp.org'>Contact email</a> </Col>
</div> <Col sm={2} xs={6}>
</div> <ColHeader>Our Community</ColHeader>
<div className='col-lg-2 col-md-2 col-sm-2 col-xs-6'> <Link external={true} to='/news'>
<div className='row'> News
<b className='paddingLow font-weight-bold col-xs-12'>Our Community</b> </Link>
<a className=' col-xs-12' href='https://www.linkedin.com/school/free-code-camp/people/'>Alumni Network </a> <Link to='https://www.linkedin.com/school/free-code-camp/people/'>
<a className=' col-xs-12' href='https://study-group-directory.freecodecamp.org'>Study Groups </a> Alumni Network
<a className=' col-xs-12' href='https://www.freecodecamp.org/forum'>Forum </a> </Link>
<a className=' col-xs-12' href='https://gitter.im/FreeCodeCamp/home'>Gitter </a> <Link to='https://study-group-directory.freecodecamp.org'>
<a className=' col-xs-12' href='https://github.com/freeCodeCamp/'>GitHub</a> Study Groups
<a className=' col-xs-12' href='https://support.freecodecamp.org'>Support </a> </Link>
<a className=' col-xs-12' href='https://code-of-conduct.freecodecamp.org'>Code of Conduct </a> <Link external={true} to='/forum'>
<a className=' col-xs-12' href='https://privacy.freecodecamp.org'>Privacy Policy</a> Forum
<a className=' col-xs-12' href='https://terms-of-service.freecodecamp.org'>Terms of Service </a> </Link>
</div> <Link to='https://gitter.im/FreeCodeCamp/home'>Gitter</Link>
</div> <Link to='https://github.com/freeCodeCamp/'>GitHub</Link>
<div className='col-lg-3 col-md-2 col-sm-2 col-xs-12'> <Link to='https://support.freecodecamp.org'>Support</Link>
<div className='row'> <Link to='https://code-of-conduct.freecodecamp.org'>
<b className='paddingLow font-weight-bold col-xs-12'>Our Learning Resources</b> Code of Conduct
<a className=' col-xs-12' href='https://learn.freecodecamp.org'>Curriculum </a> </Link>
<a className=' col-xs-12' href='https://guide.freecodecamp.org'>Guide </a> <Link to='https://privacy.freecodecamp.org'>Privacy Policy</Link>
<a className=' col-xs-12' href='https://www.youtube.com/freecodecamp'>Youtube </a> <Link to='https://terms-of-service.freecodecamp.org'>
<a className=' col-xs-12' href='https://podcast.freecodecamp.org'>Podcast </a> Terms of Service
<a className=' col-xs-12' href='https://twitter.com/freecodecamp'>Twitter </a> </Link>
<a className=' col-xs-12' href='https://medium.freecodecamp.org'>Medium </a> </Col>
<a className=' col-xs-12' href='https://instagram.com/freecodecamp'>Instagram </a> <Col lg={3} sm={2} xs={12}>
</div> <ColHeader>Our Learning Resources</ColHeader>
</div> <Link target='_blank' to='/learn'>
</div> Curriculum
</div> </Link>
<Link target='_blank' to='/guide'>
Guide
</Link>
<Link to='https://www.youtube.com/freecodecamp'>Youtube</Link>
<Link to='https://podcast.freecodecamp.org'>Podcast</Link>
<Link to='https://twitter.com/freecodecamp'>Twitter</Link>
<Link to='https://medium.freecodecamp.org'>Medium</Link>
<Link to='https://instagram.com/freecodecamp'>Instagram</Link>
</Col>
</Row>
</Grid>
</footer> </footer>
); );
} }
Footer.displayName = 'Footer';
export default Footer; export default Footer;