From 3ca4dd5500f5a217bfe6b4da7bfe08bfac4defa3 Mon Sep 17 00:00:00 2001 From: Ahmad Abdolsaheb Date: Wed, 23 Oct 2019 21:15:15 +0300 Subject: [PATCH] feat: update footer (#37476) * feat: update footer * fix: update tests * fix: clean up * fix: rearrange links * fix: update test --- client/src/components/Footer/FooterCol.js | 9 +- .../Footer/__snapshots__/Footer.test.js.snap | 395 +++++++----------- client/src/components/Footer/footer.css | 52 ++- client/src/components/Footer/footerLinks.json | 146 ++----- client/src/components/Footer/index.js | 5 +- 5 files changed, 238 insertions(+), 369 deletions(-) diff --git a/client/src/components/Footer/FooterCol.js b/client/src/components/Footer/FooterCol.js index aebccef50c..1c919368be 100644 --- a/client/src/components/Footer/FooterCol.js +++ b/client/src/components/Footer/FooterCol.js @@ -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 ( -
-
{title}
+
+ {title ? ( +
{title}
+ ) : ( +
+ )} {links.map(({ to, text, internal }, i) => ( {text} diff --git a/client/src/components/Footer/__snapshots__/Footer.test.js.snap b/client/src/components/Footer/__snapshots__/Footer.test.js.snap index 013453cc21..fb6660d902 100644 --- a/client/src/components/Footer/__snapshots__/Footer.test.js.snap +++ b/client/src/components/Footer/__snapshots__/Footer.test.js.snap @@ -20,7 +20,12 @@ exports[`
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.

- 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. +

+

+ You can  matches snapshot 1`] = `

Our Nonprofit
@@ -45,18 +50,6 @@ exports[`
- Best Tutorials -
- - Python Tutorial - - - Git Tutorial - - - Linux Tutorial - - - JavaScript Tutorial - - - React Tutorial - - - HTML Tutorial - - - CSS Tutorial - - - SQL Tutorial - - - Java Tutorial - - - Angular Tutorial - - - WordPress Tutorial - - - Bootstrap Tutorial - -
-
-
- Best Examples -
- - Python Example - - - JavaScript Example - - - React Example - - - Linux Example - - - HTML Example - - - CSS Example - - - SQL Example - - - Java Example - - - Angular Example - - - jQuery Example - - - Bootstrap Example - - - PHP Example - -
-
-
- Trending Reference + Trending Guides
matches snapshot 1`] = ` 2019 Web Developer Roadmap - Linux Command Line Guide - - - Git Reset and Git Revert - - - Git Merge and Git Rebase - - - JavaScript Array Map - - - JavaScript Array Reduce - - - JavaScript Date - - - JavaScript String Split + Python Tutorial matches snapshot 1`] = ` CSS Flexbox Guide - CSS Grid Guide + JavaScript Tutorial - Create a Linux Sudo User + Python Example + + + HTML Tutorial + + + Linux Command Line Guide + + + JavaScript Example + + + Git Tutorial + + + React Tutorial + + + Java Tutorial + +
+
+
+ + Linux Tutorial + + + CSS Tutorial + + + jQuery Example + + + SQL Tutorial + + + CSS Example + + + React Example + + + Angular Tutorial + + + Bootstrap Example matches snapshot 1`] = ` > How to Set Up SSH Keys + + WordPress Tutorial + + + PHP Example +
diff --git a/client/src/components/Footer/footer.css b/client/src/components/Footer/footer.css index f6a398137a..495378997a 100644 --- a/client/src/components/Footer/footer.css +++ b/client/src/components/Footer/footer.css @@ -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; } } diff --git a/client/src/components/Footer/footerLinks.json b/client/src/components/Footer/footerLinks.json index 18d014edb1..88d0bb463e 100644 --- a/client/src/components/Footer/footerLinks.json +++ b/client/src/components/Footer/footerLinks.json @@ -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" } ] } ] diff --git a/client/src/components/Footer/index.js b/client/src/components/Footer/index.js index 666f6ff1ca..4b40879cf1 100644 --- a/client/src/components/Footer/index.js +++ b/client/src/components/Footer/index.js @@ -37,7 +37,10 @@ function Footer() {

Donations to freeCodeCamp go toward our education initiatives, and - help pay for servers, services, and staff. You can  + help pay for servers, services, and staff. +

+

+ You can  make a tax-deductible donation here