Skip to content

Redo footer component #170

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 29, 2022
Merged

Redo footer component #170

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"private": true,
"dependencies": {
"@babel/plugin-proposal-decorators": "^7.16.7",
"@fortawesome/free-brands-svg-icons": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/react-fontawesome": "^0.1.18",
"@mdx-js/loader": "^1.6.22",
Expand Down
66 changes: 0 additions & 66 deletions src/components/marginals/Footer/Footer.css
View file
Open in desktop

This file was deleted.

127 changes: 56 additions & 71 deletions src/components/marginals/Footer/Footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,80 +1,65 @@
/* eslint-disable max-len */
/* eslint-disable jsx-a11y/anchor-is-valid */
import React from 'react';
import './Footer.css';
import { Container, Row, Col } from 'react-bootstrap';
import { ImTwitter, ImMail, ImGithub } from 'react-icons/im';
import { IoLogoSlack } from 'react-icons/io';
import RocketImg from '../../../assets/rocket.webp';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { FooterContainer, SecondaryContainer, UpperDiv, Logo, LinksContainer, Heading2, Heading3, NoStyleNav, SocialDiv, LowerDiv } from './styles';
import { footer } from '../../../config/content';

function Footer () {

function Footer() {
return (
<Container fluid>
<Row className='footer-above'>
<Col xs={12} md={3}>
<img src={RocketImg} alt='rocket' height={130} width={69} />
</Col>
<Col xs={12} sm={12} md={3}>
<h4>Useful Links</h4>
<li className='footer-link'>
<a href='https://github.com/codeisscience' target='_blank' rel='noreferrer'>
Contribute
</a>
</li>
<li className='footer-link'>
<a
href='https://codeisscience.github.io/manifesto/manifesto.html'
target='_blank'
rel='noreferrer'
>
Manifesto
</a>
</li>
<li className='footer-link'>
<a href='#'>Code of conduct</a>
</li>
</Col>
<Col xs={12} sm={12} md={3}>
<h4>Resources</h4>
<li className='footer-link'>
<a href='#'>Authors</a>
</li>
<li className='footer-link'>
<a href='#'>Open science</a>
</li>
<li className='footer-link'>
<a href='#'>Contributors</a>
</li>
</Col>
<Col xs={12} sm={12} md={3}>
<h4>Contact Us</h4>
<FooterContainer>
<SecondaryContainer>

<UpperDiv>
<Logo src={footer.img.src} alt={footer.img.alt} />

<LinksContainer>
<Heading2>
{footer.col1.head}
</Heading2>
{footer.col1.links.map(({ id, sub, link }) => (
<NoStyleNav key={id} href={link} target='_blank' rel='noreferrer'>
<Heading3>{sub}</Heading3>
</NoStyleNav>
))}
</LinksContainer>

<LinksContainer>
<Heading2>
{footer.col2.head}
</Heading2>
{footer.col2.links.map(({ id, sub, link }) => (
<NoStyleNav key={id} href={link} target='_blank' rel='noreferrer'>
<Heading3>{sub}</Heading3>
</NoStyleNav>
))}
</LinksContainer>

<LinksContainer>
<Heading2>
{footer.socials.head}
</Heading2>
{footer.socials.links.map(({ id, icon, head, link, color }) => (
<a key={id} href={link} target='_blank' rel='noreferrer'>
<SocialDiv key={id} >
<FontAwesomeIcon icon={icon} color={color} />
<Heading3>{head}</Heading3>
</SocialDiv>
</a>
))}
</LinksContainer>

</UpperDiv>

<li className='footer-link'>
<a href='mailto:contact@codeisscience.com' target='_blank' rel='noreferrer'>
<ImMail className='email-icon icons'/> Email
</a>
</li>
<li className='footer-link'>
<a href='https://twitter.com/codeisscience' target='_blank' rel='noreferrer'>
<ImTwitter className='twitter-icon icons'/>
&nbsp;Twitter
</a>
</li>
<a href='https://github.com/codeisscience' target='_blank' rel='noreferrer'>
<ImGithub className='github-icon icons'/> GitHub
</a>


<li className='footer-link'>
<a href='#'>
<IoLogoSlack className='slack-icon icons'/> Slack
</a>
</li>
</Col>
</Row>
<Row className='footer-below'>
<p>Copyright © {new Date().getFullYear()} Code is Science</p>
</Row>
</Container>
</SecondaryContainer>
<LowerDiv>
Copyright © {new Date().getFullYear()} Code is Science
</LowerDiv>
</FooterContainer>
);
}

export default Footer;
export default Footer;
72 changes: 72 additions & 0 deletions src/components/marginals/Footer/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import styled from 'styled-components';

export const FooterContainer = styled.div`
width: 100%;
overflow-x: hidden;
`;

export const SecondaryContainer = styled.div`
display: grid;
width: 100%;
background-color: #4c4c4d;
justify-content: center;
`;


export const UpperDiv = styled.div`
width: 100%;
display: grid;
grid-template-columns: repeat(4, minmax(100px, 1fr));
padding-top: 2rem;
gap: 10rem;
@media (max-width: 990px) {
grid-template-columns: repeat(2, minmax(100px, 1fr));
gap: 1.5rem 10rem;
};
@media (max-width: 484px) {
grid-template-columns: repeat(1, minmax(100px, 1fr));
gap: 1.5rem 10rem;
}
`;

export const Logo = styled.img`
width: 6rem;
height: auto;
`;

export const LinksContainer = styled.div`
display: flex;
flex-direction: column;
`;

export const Heading2 = styled.h1`
font-size: 1.3rem;
margin-bottom: 1rem;
`

export const NoStyleNav = styled.a`
no-underline
mt-2
`;

export const Heading3 = styled.p`
font-size: 0.875rem;
color: white;
margin-bottom: 0.5rem;
`;

export const SocialDiv = styled.div`
display:flex;
gap: 5px;
`;

export const SocialLogo = styled.img`
width: 100%;
`;

export const LowerDiv = styled.div`
background: #069;
color: #fff;
text-align: center;
padding: 1rem 0rem 1rem 0;
`;
28 changes: 21 additions & 7 deletions src/config/content/footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import { ImTwitter, ImMail, ImGithub } from 'react-icons/im';
import { IoLogoSlack } from 'react-icons/io';
/* eslint-disable import/no-unresolved */
import {faTwitter, faGithub, faSlack} from '@fortawesome/free-brands-svg-icons';
import {faEnvelope} from '@fortawesome/free-solid-svg-icons';


export default{
img: {
src: 'https://res.cloudinary.com/dh6j2zoog/image/upload/v1655702085/CiS/rocket_vkcatz.png',
alt: 'Code Is Science',
},
copyright: 'Copyright © 2022 Code is Science',
copyright: 'Copyright © {{ new Date().getFullYear() }} Code is Science',
col1: {
head: 'Useful Links',
links: [
Expand Down Expand Up @@ -51,20 +53,32 @@ export default{
head: 'Contact Us',
links: [
{
icon: ImMail,
id: 1,
icon: faEnvelope,
head: 'Email',
link: 'mailto:contact@codeisscience.com',
color: 'white',
},
{
icon: ImTwitter,
id: 2,
icon: faTwitter,
head: 'Twitter',
link: 'https://twitter.com/codeisscience',
color: '#00acee',
},
{
icon: ImGithub,
id: 3,
icon: faGithub,
head: 'Github',
link: 'https://github.com/codeisscience',
color: 'black',
},
{
icon: IoLogoSlack,
id: 4,
icon: faSlack,
head: 'Slack',
link: '',
color: '#e01e5a',
}
]
}
Expand Down