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

feat: update footer (#37476)

Browse Source 
* feat: update footer

* fix: update tests

* fix: clean up

* fix: rearrange links

* fix: update test
This commit is contained in:
Ahmad Abdolsaheb
2019-10-23 21:15:15 +03:00
committed by mrugesh
parent da1fe7971e
commit 3ca4dd5500
5 changed files with 238 additions and 369 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
client/src/components/Footer/FooterCol.js
View File

@ -2,11 +2,16 @@ import React from 'react';
import PropTypes from 'prop-types';
import Link from '../helpers/Link';
import { dasherize } from '../../../../utils/slugs';
function FooterCol({ title, links }) {
return (
<div className='footer-col'>
<div className='col-header'>{title}</div>
<div className={`footer-col ${dasherize(title)}`}>
{title ? (
<div className={`col-header `}>{title}</div>
) : (
<div className='col-spacer'></div>
)}
{links.map(({ to, text, internal }, i) => (
<Link external={!internal} key={`link-${i}`} to={to}>
{text}

395
client/src/components/Footer/__snapshots__/Footer.test.js.snap
View File

@ -20,7 +20,12 @@ exports[`<Footer /> matches snapshot 1`] = `
Our mission: to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons - all freely available to the public. We also have thousands of freeCodeCamp study groups around the world.
</p>
<p>
Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff. You can 
Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.
</p>
<p
className="footer-donation"
>
You can 
<a
className="inline"
href="/donate"
@ -31,10 +36,10 @@ exports[`<Footer /> matches snapshot 1`] = `
</p>
</div>
<div
className="footer-col"
className="footer-col our-nonprofit"
>
<div
className="col-header"
className="col-header "
>
Our Nonprofit
</div>
@ -45,18 +50,6 @@ exports[`<Footer /> matches snapshot 1`] = `
>
About
</a>
<a
href="/donate"
>
Donate
</a>
<a
href="/news/shop/"
rel="noopener noreferrer"
target="_blank"
>
Shop
</a>
<a
href="https://www.linkedin.com/school/free-code-camp/people/"
rel="noopener noreferrer"
@ -71,6 +64,13 @@ exports[`<Footer /> matches snapshot 1`] = `
>
Open Source
</a>
<a
href="/news/shop/"
rel="noopener noreferrer"
target="_blank"
>
Shop
</a>
<a
href="/news/support/"
rel="noopener noreferrer"
@ -122,198 +122,12 @@ exports[`<Footer /> matches snapshot 1`] = `
</a>
</div>
<div
className="footer-col"
className="footer-col trending-guides"
>
<div
className="col-header"
className="col-header "
>
Best Tutorials
</div>
<a
href="/news/best-python-tutorial/"
rel="noopener noreferrer"
target="_blank"
>
Python Tutorial
</a>
<a
href="/news/best-git-tutorial/"
rel="noopener noreferrer"
target="_blank"
>
Git Tutorial
</a>
<a
href="/news/the-best-linux-tutorials/"
rel="noopener noreferrer"
target="_blank"
>
Linux Tutorial
</a>
<a
href="/news/best-javascript-tutorial/"
rel="noopener noreferrer"
target="_blank"
>
JavaScript Tutorial
</a>
<a
href="/news/best-react-javascript-tutorial/"
rel="noopener noreferrer"
target="_blank"
>
React Tutorial
</a>
<a
href="/news/best-html-html5-tutorial/"
rel="noopener noreferrer"
target="_blank"
>
HTML Tutorial
</a>
<a
href="/news/best-css-and-css3-tutorial/"
rel="noopener noreferrer"
target="_blank"
>
CSS Tutorial
</a>
<a
href="/news/best-sql-database-tutorial/"
rel="noopener noreferrer"
target="_blank"
>
SQL Tutorial
</a>
<a
href="/news/best-java-8-tutorial/"
rel="noopener noreferrer"
target="_blank"
>
Java Tutorial
</a>
<a
href="/news/best-angular-tutorial-angularjs/"
rel="noopener noreferrer"
target="_blank"
>
Angular Tutorial
</a>
<a
href="/news/best-wordpress-tutorial/"
rel="noopener noreferrer"
target="_blank"
>
WordPress Tutorial
</a>
<a
href="/news/best-bootstrap-tutorial-responsive-web-design/"
rel="noopener noreferrer"
target="_blank"
>
Bootstrap Tutorial
</a>
</div>
<div
className="footer-col"
>
<div
className="col-header"
>
Best Examples
</div>
<a
href="/news/python-example/"
rel="noopener noreferrer"
target="_blank"
>
Python Example
</a>
<a
href="/news/javascript-example/"
rel="noopener noreferrer"
target="_blank"
>
JavaScript Example
</a>
<a
href="/news/react-examples-reactjs/"
rel="noopener noreferrer"
target="_blank"
>
React Example
</a>
<a
href="/news/linux-example-bash-command-line/"
rel="noopener noreferrer"
target="_blank"
>
Linux Example
</a>
<a
href="/news/html-and-html5-example/"
rel="noopener noreferrer"
target="_blank"
>
HTML Example
</a>
<a
href="/news/css-example-css3/"
rel="noopener noreferrer"
target="_blank"
>
CSS Example
</a>
<a
href="/news/sql-example/"
rel="noopener noreferrer"
target="_blank"
>
SQL Example
</a>
<a
href="/news/java-example/"
rel="noopener noreferrer"
target="_blank"
>
Java Example
</a>
<a
href="/news/the-best-angular-examples/"
rel="noopener noreferrer"
target="_blank"
>
Angular Example
</a>
<a
href="/news/the-best-jquery-examples/"
rel="noopener noreferrer"
target="_blank"
>
jQuery Example
</a>
<a
href="/news/the-best-bootstrap-examples/"
rel="noopener noreferrer"
target="_blank"
>
Bootstrap Example
</a>
<a
href="/news/the-best-php-examples/"
rel="noopener noreferrer"
target="_blank"
>
PHP Example
</a>
</div>
<div
className="footer-col"
>
<div
className="col-header"
>
Trending Reference
Trending Guides
</div>
<a
href="/news/2019-web-developer-roadmap/"
@ -323,53 +137,11 @@ exports[`<Footer /> matches snapshot 1`] = `
2019 Web Developer Roadmap
</a>
<a
href="/news/linux-command-line-bash-tutorial/"
href="/news/best-python-tutorial/"
rel="noopener noreferrer"
target="_blank"
>
Linux Command Line Guide
</a>
<a
href="/news/the-ultimate-guide-to-git-reset-and-git-revert/"
rel="noopener noreferrer"
target="_blank"
>
Git Reset and Git Revert
</a>
<a
href="/news/the-ultimate-guide-to-git-merge-and-git-rebase/"
rel="noopener noreferrer"
target="_blank"
>
Git Merge and Git Rebase
</a>
<a
href="/news/the-ultimate-guide-to-javascript-array-methods-map/"
rel="noopener noreferrer"
target="_blank"
>
JavaScript Array Map
</a>
<a
href="/news/the-ultimate-guide-to-javascript-array-methods-reduce/"
rel="noopener noreferrer"
target="_blank"
>
JavaScript Array Reduce
</a>
<a
href="/news/the-ultimate-guide-to-javascript-date-and-moment-js/"
rel="noopener noreferrer"
target="_blank"
>
JavaScript Date
</a>
<a
href="/news/the-ultimate-guide-to-javascript-string-methods-split/"
rel="noopener noreferrer"
target="_blank"
>
JavaScript String Split
Python Tutorial
</a>
<a
href="/news/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af/"
@ -379,18 +151,123 @@ exports[`<Footer /> matches snapshot 1`] = `
CSS Flexbox Guide
</a>
<a
href="/news/11-things-i-learned-reading-the-css-grid-specification-fb3983aa5e0/"
href="/news/best-javascript-tutorial/"
rel="noopener noreferrer"
target="_blank"
>
CSS Grid Guide
JavaScript Tutorial
</a>
<a
href="/news/the-ultimate-guide-to-linux-creating-a-sudo-user/"
href="/news/python-example/"
rel="noopener noreferrer"
target="_blank"
>
Create a Linux Sudo User
Python Example
</a>
<a
href="/news/best-html-html5-tutorial/"
rel="noopener noreferrer"
target="_blank"
>
HTML Tutorial
</a>
<a
href="/news/linux-command-line-bash-tutorial/"
rel="noopener noreferrer"
target="_blank"
>
Linux Command Line Guide
</a>
<a
href="/news/javascript-example/"
rel="noopener noreferrer"
target="_blank"
>
JavaScript Example
</a>
<a
href="/news/best-git-tutorial/"
rel="noopener noreferrer"
target="_blank"
>
Git Tutorial
</a>
<a
href="/news/best-react-javascript-tutorial/"
rel="noopener noreferrer"
target="_blank"
>
React Tutorial
</a>
<a
href="/news/best-java-8-tutorial/"
rel="noopener noreferrer"
target="_blank"
>
Java Tutorial
</a>
</div>
<div
className="footer-col "
>
<div
className="col-spacer"
/>
<a
href="/news/the-best-linux-tutorials/"
rel="noopener noreferrer"
target="_blank"
>
Linux Tutorial
</a>
<a
href="/news/best-css-and-css3-tutorial/"
rel="noopener noreferrer"
target="_blank"
>
CSS Tutorial
</a>
<a
href="/news/the-best-jquery-examples/"
rel="noopener noreferrer"
target="_blank"
>
jQuery Example
</a>
<a
href="/news/best-sql-database-tutorial/"
rel="noopener noreferrer"
target="_blank"
>
SQL Tutorial
</a>
<a
href="/news/css-example-css3/"
rel="noopener noreferrer"
target="_blank"
>
CSS Example
</a>
<a
href="/news/react-examples-reactjs/"
rel="noopener noreferrer"
target="_blank"
>
React Example
</a>
<a
href="/news/best-angular-tutorial-angularjs/"
rel="noopener noreferrer"
target="_blank"
>
Angular Tutorial
</a>
<a
href="/news/the-best-bootstrap-examples/"
rel="noopener noreferrer"
target="_blank"
>
Bootstrap Example
</a>
<a
href="/news/the-ultimate-guide-to-ssh-setting-up-ssh-keys/"
@ -399,6 +276,20 @@ exports[`<Footer /> matches snapshot 1`] = `
>
How to Set Up SSH Keys
</a>
<a
href="/news/best-wordpress-tutorial/"
rel="noopener noreferrer"
target="_blank"
>
WordPress Tutorial
</a>
<a
href="/news/the-best-php-examples/"
rel="noopener noreferrer"
target="_blank"
>
PHP Example
</a>
</div>
</div>
</div>

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

@ -23,6 +23,7 @@
font-family: 'Lato', sans-serif;
margin: 0 0 1.45rem;
font-size: 15px;
line-height: 30px;
}
.footer-container a {
@ -30,9 +31,11 @@
}
.footer-container .col-header {
padding-bottom: 5px;
padding-bottom: 30px;
font-weight: 700;
font-size: 16px;
}
.footer-row {
display: flex;
flex-direction: row;
@ -46,11 +49,11 @@
padding-left: 15px;
padding-right: 15px;
font-size: 15px;
margin: 0 0 1.45rem;
margin: 0 0 3rem;
}
.footer-col a {
text-decoration: none;
padding: 5px 0px;
}
.footer-col a:hover {
@ -63,17 +66,34 @@
flex-direction: column;
padding-left: 15px;
padding-right: 15px;
margin-bottom: 30px;
}
.footer-desc-col a {
text-decoration: underline;
}
p.footer-donation {
font-weight: 700;
font-size: 18px;
}
.footer-container .col-spacer {
margin-top: -3rem;
}
@media (min-width: 500px) {
.footer-col {
flex: 1 0 45%;
flex: 1 0 50%;
height: auto;
font-size: 16.5;
margin: 0 0 1.45rem;
}
.footer-col:last-of-type {
margin-left: 50%;
}
.footer-container .col-spacer {
margin-top: -1.45rem;
}
}
@ -82,12 +102,20 @@
width: 750px;
}
.footer-col {
flex: 1 0 100px;
flex: 1 0 25%;
height: auto;
font-size: 16.5;
}
/* .our-nonprofit {
flex: 1 0 35%;
} */
.footer-col:last-of-type {
flex: 1 0 180px;
/* flex: 1 0 30%; */
margin-left: 0px;
}
.footer-container .col-spacer {
margin-top: 54px;
}
}
@ -102,12 +130,16 @@
width: 1170px;
}
.footer-desc-col {
flex: 1 0 31%;
flex: 1 0 35%;
}
.footer-col {
flex: 1 0 120px;
flex: 1 0 9%;
}
.footer-col:last-of-type {
flex: 4 0 100px;
.trending-guides {
flex: 1 0 15%;
}
p.footer-donation {
margin-top: 18px;
}
}

146
client/src/components/Footer/footerLinks.json
View File

@ -4,13 +4,12 @@
"title": "Our Nonprofit",
"links": [
{ "to": "/news/about/", "text": "About" },
{ "to": "/donate", "text": "Donate", "internal": true },
{ "to": "/news/shop/", "text": "Shop" },
{
"to": "https://www.linkedin.com/school/free-code-camp/people/",
"text": "Alumni Network"
},
{ "to": "https://github.com/freeCodeCamp/", "text": "Open Source" },
{ "to": "/news/shop/", "text": "Shop" },
{ "to": "/news/support/", "text": "Support" },
{ "to": "/news/sponsors/", "text": "Sponsors" },
{
@ -24,125 +23,64 @@
]
},
{
"title": "Best Tutorials",
"links": [
{ "to": "/news/best-python-tutorial/", "text": "Python Tutorial" },
{ "to": "/news/best-git-tutorial/", "text": "Git Tutorial" },
{ "to": "/news/the-best-linux-tutorials/", "text": "Linux Tutorial" },
{
"to": "/news/best-javascript-tutorial/",
"text": "JavaScript Tutorial"
},
{
"to": "/news/best-react-javascript-tutorial/",
"text": "React Tutorial"
},
{ "to": "/news/best-html-html5-tutorial/", "text": "HTML Tutorial" },
{ "to": "/news/best-css-and-css3-tutorial/", "text": "CSS Tutorial" },
{ "to": "/news/best-sql-database-tutorial/", "text": "SQL Tutorial" },
{ "to": "/news/best-java-8-tutorial/", "text": "Java Tutorial" },
{
"to": "/news/best-angular-tutorial-angularjs/",
"text": "Angular Tutorial"
},
{
"to": "/news/best-wordpress-tutorial/",
"text": "WordPress Tutorial"
},
{
"to": "/news/best-bootstrap-tutorial-responsive-web-design/",
"text": "Bootstrap Tutorial"
}
]
},
{
"title": "Best Examples",
"links": [
{ "to": "/news/python-example/", "text": "Python Example" },
{ "to": "/news/javascript-example/", "text": "JavaScript Example" },
{ "to": "/news/react-examples-reactjs/", "text": "React Example" },
{
"to": "/news/linux-example-bash-command-line/",
"text": "Linux Example"
},
{ "to": "/news/html-and-html5-example/", "text": "HTML Example" },
{ "to": "/news/css-example-css3/", "text": "CSS Example" },
{ "to": "/news/sql-example/", "text": "SQL Example" },
{ "to": "/news/java-example/", "text": "Java Example" },
{
"to": "/news/the-best-angular-examples/",
"text": "Angular Example"
},
{ "to": "/news/the-best-jquery-examples/", "text": "jQuery Example" },
{
"to": "/news/the-best-bootstrap-examples/",
"text": "Bootstrap Example"
},
{ "to": "/news/the-best-php-examples/", "text": "PHP Example" }
]
},
{
"title": "Trending Reference",
"title": "Trending Guides",
"links": [
{
"to": "/news/2019-web-developer-roadmap/",
"text": "2019 Web Developer Roadmap"
},
{
"to": "/news/linux-command-line-bash-tutorial/",
"text": "Linux Command Line Guide"
},
{
"to": "/news/the-ultimate-guide-to-git-reset-and-git-revert/",
"text": "Git Reset and Git Revert"
},
{
"to": "/news/the-ultimate-guide-to-git-merge-and-git-rebase/",
"text": "Git Merge and Git Rebase"
},
{
"to": "/news/the-ultimate-guide-to-javascript-array-methods-map/",
"text": "JavaScript Array Map"
},
{
"to": "/news/the-ultimate-guide-to-javascript-array-methods-reduce/",
"text": "JavaScript Array Reduce"
},
{
"to": "/news/the-ultimate-guide-to-javascript-date-and-moment-js/",
"text": "JavaScript Date"
},
{
"to": "/news/the-ultimate-guide-to-javascript-string-methods-split/",
"text": "JavaScript String Split"
},
{ "to": "/news/best-python-tutorial/", "text": "Python Tutorial" },
{
"to": "/news/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af/",
"text": "CSS Flexbox Guide"
},
{
"to": "/news/11-things-i-learned-reading-the-css-grid-specification-fb3983aa5e0/",
"text": "CSS Grid Guide"
"to": "/news/best-javascript-tutorial/",
"text": "JavaScript Tutorial"
},
{ "to": "/news/python-example/", "text": "Python Example" },
{ "to": "/news/best-html-html5-tutorial/", "text": "HTML Tutorial" },
{
"to": "/news/the-ultimate-guide-to-linux-creating-a-sudo-user/",
"text": "Create a Linux Sudo User"
"to": "/news/linux-command-line-bash-tutorial/",
"text": "Linux Command Line Guide"
},
{ "to": "/news/javascript-example/", "text": "JavaScript Example" },
{ "to": "/news/best-git-tutorial/", "text": "Git Tutorial" },
{
"to": "/news/best-react-javascript-tutorial/",
"text": "React Tutorial"
},
{ "to": "/news/best-java-8-tutorial/", "text": "Java Tutorial" }
]
},
{
"title": "",
"links": [
{ "to": "/news/the-best-linux-tutorials/", "text": "Linux Tutorial" },
{ "to": "/news/best-css-and-css3-tutorial/", "text": "CSS Tutorial" },
{ "to": "/news/the-best-jquery-examples/", "text": "jQuery Example" },
{ "to": "/news/best-sql-database-tutorial/", "text": "SQL Tutorial" },
{ "to": "/news/css-example-css3/", "text": "CSS Example" },
{ "to": "/news/react-examples-reactjs/", "text": "React Example" },
{
"to": "/news/best-angular-tutorial-angularjs/",
"text": "Angular Tutorial"
},
{
"to": "/news/the-best-bootstrap-examples/",
"text": "Bootstrap Example"
},
{
"to": "/news/the-ultimate-guide-to-ssh-setting-up-ssh-keys/",
"text": "How to Set Up SSH Keys"
}
},
{
"to": "/news/best-wordpress-tutorial/",
"text": "WordPress Tutorial"
},
{ "to": "/news/the-best-php-examples/", "text": "PHP Example" }
]
}
]

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

@ -37,7 +37,10 @@ function Footer() {
</p>
<p>
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.
</p>
<p className='footer-donation'>
You can&nbsp;
<Link className='inline' to='/donate'>
make a tax-deductible donation here
</Link>