Commit 03901e5b authored by David Rhoderick's avatar David Rhoderick
Browse files

Moving footer component to global folder

and making changes to address styles etc.
parent 74439b53
import React from 'react'
import {styled, connect} from 'frontity'
import React from "react";
import { connect, styled } from "frontity";
import Container from './container'
import Link from "@frontity/components/link";
import NewsletterSocialMedia from "../partials/newsletter-socialmedia";
const Footer = ({ state }) => {
const { items } = state.source.get("/menus/footer-menu");
const { acf } = state.source.get("acf-options-page");
console.log(acf)
const Footer = ({state}) => {
return (
<StyledFooter>
<Container>
&copy; {new Date().getFullYear()} Martha's Vineyard Museum
</Container>
</StyledFooter>
)
}
<>
<NewsletterSocialMedia />
<FooterWrapper theme={state.theme}>
<FooterContainer>
<FooterAddress>
{acf.name}<br/>
{acf.street_address_first_line}<br/>
{acf.city} {acf.zip_code} {acf.state}<br/>
Phone: {acf.phone_number}<br/>
Fax: {acf.fax_number}<br/>
</FooterAddress>
<FooterMenu theme={state.theme}>
{items.map(({ title, url }, index) => {
return (
<Link link={url} key={index}>
{title}
</Link>
);
})}
</FooterMenu>
</FooterContainer>
</FooterWrapper>
export default connect(Footer)
<Copyright theme={state.theme}>&copy; {new Date().getFullYear()} {acf.copyright_owner}</Copyright>
</>
);
};
const StyledFooter = styled.footer`
export default connect(Footer);
const FooterWrapper = styled.div`
width: 100%;
height: 30vh;
position: relative;
z-index: 1;
z-index: 100;
background: ${(props) => props.theme.colors.darkGrey};
display: flex;
justify-content: center;
padding: 2rem 8rem;
`;
const FooterContainer = styled.div`
width: 100%;
height: 100%;
display: flex;
justify-content: stretch;
`;
background: white;
const FooterAddress = styled.address`
display: flex;
flex-direction: column;
width: 50%;
color: white;
justify-content: flex-start;
align-items: flex-start;
font-size: 0.9rem;
`;
const FooterMenu = styled.div`
display: flex;
width: 50%;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
font-size: 0.8rem;
a {
color: white;
display: inline-block;
margin: 0 0 auto;
&:hover {
color: ${props => props.theme.colors.orange};
}
}
`;
const Copyright = styled.small`
background: ${props => props.theme.colors.darkGrey};
position: relative;
z-index: 100;
color: white;
font-size: 0.7rem;
text-align: center;
padding: 0.25rem;
`
\ No newline at end of file
......@@ -6,7 +6,6 @@ import HeroSlideshow from "./home/hero-slideshow";
import Hours from "./home/hours";
import LinksContainer from "./home/linksContainer";
import Featured from "./home/featured";
import Footer from "./partials/footer";
const Home = ({ state, actions }) => {
const data = state.source.get(state.router.link);
......@@ -52,7 +51,6 @@ const Home = ({ state, actions }) => {
dynamicText={post.acf.object_of_the_day.post_title}
/>
)}
<Footer />
</>
);
};
......
import React from "react";
import { connect, styled } from "frontity";
import Link from "@frontity/components/link";
import Newsletter from "./newsletter";
import { faOtter } from "@fortawesome/free-solid-svg-icons";
const Footer = ({ state }) => {
const { items } = state.source.get("/menus/footer-menu");
const { acf } = state.source.get("acf-options-page");
const background_color = "#4c4c4c";
const color = "white";
const height = "20%";
return (
<>
<Newsletter />
<FooterWrapper background_color={background_color}>
<FooterContainer>
<FooterAddress>
<h3>ADDRESS</h3>
<h3>{acf.name}</h3>
<h3>{acf.street_address_first_line}</h3>
<h3>
{acf.city} {acf.zip_code} {acf.state}
</h3>
<h3>Phone: {acf.phone_number}</h3>
<h3>Fax: {acf.fax_number}</h3>
</FooterAddress>
<FooterMenu>
{items.map(({ title }, index) => {
return (
<Link
link="link"
key="index"
style={{ color: color, height: height }}
>
{title}
</Link>
);
})}
</FooterMenu>
</FooterContainer>
</FooterWrapper>
</>
);
};
export default connect(Footer);
const FooterWrapper = styled.div`
width: 100%;
height: 30vh;
position: relative;
z-index: 100;
background: ${(props) => props.background_color};
display: flex;
justify-content: center;
padding: 2rem 8rem;
`;
const FooterContainer = styled.div`
width: 100%;
height: 100%;
display: flex;
justify-content: stretch;
`;
const FooterAddress = styled.div`
display: flex;
flex-direction: column;
width: 50%;
color: white;
justify-content: flex-start;
align-items: flex-start;
h3 {
font-size: 0.7rem;
line-height: 1;
}
`;
const FooterMenu = styled.div`
display: flex;
width: 50%;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
align-items: space-between;
font-size: 0.8rem;
`;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment