Commit 9f86de64 authored by David Rhoderick's avatar David Rhoderick
Browse files

Fixing MVM-200, adding the hero slideshow.

parent d8a45189
......@@ -17,6 +17,7 @@ const settings = {
name: '@frontity/wp-source',
state: {
source: {
homepage: '/marthas-vineyard-museum',
url: 'http://staging.mvmuseum.org'
}
}
......
......@@ -1226,6 +1226,14 @@
"prop-types": "^15.7.2"
}
},
"react-scroll-parallax": {
"version": "2.3.5",
"resolved": "https://registry.npmjs.org/react-scroll-parallax/-/react-scroll-parallax-2.3.5.tgz",
"integrity": "sha512-+bcye104p4rKZoilT7243gQyLgiKjLTFVtUketp7t6V6Fd6/TrOAeuTtjUfy+nQE92JumG2jQtw6/9bY5YhPrg==",
"requires": {
"prop-types": "^15.5.10"
}
},
"react-slick": {
"version": "0.27.13",
"resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.27.13.tgz",
......
......@@ -15,6 +15,7 @@
"frontity": "^1.13.0",
"global": "^4.4.0",
"react-loader-spinner": "^3.1.14",
"react-scroll-parallax": "^2.3.5",
"react-slick": "^0.27.13",
"slick-carousel": "^1.8.1"
}
......
......@@ -44,7 +44,7 @@ const Header = ({state}) => {
const [openDropdown, setOpenDropdown] = useState(null)
return (
<header>
<StyledHeader>
<TopBar theme={state.theme}>
<Link href="/" clickHandler={() => toggleMobileMenu(false)}>{ logo ? <Image src={logo.url} alt={name}/> : <h1 dangerouslySetInnerHTML={{__html:name}} /> }</Link>
......@@ -90,13 +90,20 @@ const Header = ({state}) => {
})}
</div>
</DesktopNav>
</header>
</StyledHeader>
)
}
export default connect(Header)
const TopBar = styled.header`
const StyledHeader = styled.header`
z-index: 2000;
position: fixed;
width: 100%;
`
const TopBar = styled.div`
position: relative;
width: 100%;
display: flex;
justify-content: space-between;
......@@ -106,6 +113,7 @@ const TopBar = styled.header`
line-height: 1rem;
height: 5rem;
z-index: 1000;
background: ${props => props.theme.colors.white};
> a {
max-width: 20%;
......@@ -166,6 +174,7 @@ const DesktopNav = styled.nav`
width: 100%;
padding: .5rem 2rem;
background: ${props => props.theme.colors.transPurple};
z-index: 2000;
${props => props.theme.breakPoints.lg} {
display: none;
......
import React from 'react'
import {connect} from 'frontity'
import Switch from '@frontity/components/switch'
import HeroSlideshow from './home/hero-slideshow'
const Home = ({state}) => {
const data = state.source.get(state.router.link)
const post = state.source[data.type][data.id]
return (
<>
<HeroSlideshow heroSlideshow={post.acf.hero_slideshow} />
{/* {post.acf.content.map((section, index) =>
<Switch key={index}>
<Testimonials when={section.acf_fc_layout === 'testimonials'} section={section} />
</Switch>
)} */}
</>
)
}
export default connect(Home)
\ No newline at end of file
import React, {useState, useEffect} from 'react'
import {connect, styled} from 'frontity'
import Image from '@frontity/components/image'
import {Parallax} from 'react-scroll-parallax';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
import {faAngleDown} from '@fortawesome/free-solid-svg-icons'
import Link from '../partials/link'
const HeroSlideshow = ({heroSlideshow, state, libraries}) => {
const [activeSlide, setActiveSlide] = useState(0)
useEffect(() => {
const slide = setTimeout(() => {
setActiveSlide((activeSlide === heroSlideshow.length - 1 ? 0 : activeSlide + 1))
}, 5000)
return () => clearTimeout(slide)
})
return(
<HeroContainer>
<Slideshow>
{heroSlideshow.map(({image, title, link}, index) => {
console.log(link)
return(<>
<Parallax y={[200, -200]} key={index}>
<SlideImage src={image.sizes.large} activeSlide={index === activeSlide} previousSlide={index === activeSlide - 1} />
<ScrollDownContainer>
<ScrollDown theme={state.theme}>
<FontAwesomeIcon icon={faAngleDown} />
<FontAwesomeIcon icon={faAngleDown} />
<FontAwesomeIcon icon={faAngleDown} />
</ScrollDown>
</ScrollDownContainer>
</Parallax>
<TextContainer theme={state.theme}>
<h1>{title}</h1>
<Link link={link.url}>{link.title}</Link>
</TextContainer>
</>);
})}
</Slideshow>
</HeroContainer>
)
}
export default connect(HeroSlideshow)
const HeroContainer = styled.section`
position: relative;
`
const Slideshow = styled.div`
position: relative;
`
const SlideImage = styled(Image)`
position: relative;
top: 0;
height: calc(100vh);
left: 0;
width: 100%;
object-fit: cover;
transition: opacity 0.5s;
z-index: -2;
opacity: 0;
${props => props.activeSlide ? `opacity: 1; z-index: 1;` : ``}
`
const ScrollDownContainer = styled.div`
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
`
const ScrollDown = styled.div`
position: relative;
z-index: 1;
margin: -12.5rem auto 0;
width: 5.5rem;
height: 5.5rem;
border: 5px solid ${props => props.theme.colors.white};
border-radius: 100rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 3rem;
color: ${props => props.theme.colors.white};
svg {
-webkit-animation: fadeInAndOut 1s infinite;
-moz-animation: fadeInAndOut 1s infinite;
-o-animation: fadeInAndOut 1s infinite;
animation: fadeInAndOut 1s infinite;
}
svg:nth-of-type(1) {
color: ${props => props.theme.colors.white};
}
svg:nth-of-type(2) {
color: ${props => props.theme.colors.white};
margin-top: -1.75rem;
animation-delay: 0.125s;
}
svg:nth-of-type(3) {
color: ${props => props.theme.colors.white};
margin-top: -1.75rem;
animation-delay: 0.25s;
}
`
const TextContainer = styled.div`
position: absolute;
bottom: 10rem;
display: inline-block;
z-index: 1000;
background: rgba(0, 0, 0, 0.67);
padding: 3rem 2rem 3rem 1rem;
h1 {
font-size: 1.5rem;
color: ${props => props.theme.colors.white};
}
a {
text-decoration: underline;
color: ${props => props.theme.colors.white};
&:hover {
color: ${props => props.theme.colors.grey};
}
}
`
\ No newline at end of file
......@@ -2,6 +2,7 @@ import React, {useEffect} from 'react'
import {connect, Global, css, styled} from 'frontity'
import Switch from '@frontity/components/switch'
import document from 'global/document'
import {ParallaxProvider} from 'react-scroll-parallax'
// import {dom, config} from '@fortawesome/fontawesome-svg-core'
import slickCSS from 'slick-carousel/slick/slick.css'
......@@ -15,7 +16,7 @@ import Header from './global/header'
import Footer from './global/footer'
import Loading from './loading'
// import Home from './home'
import Home from './home'
import Post from './post'
// import Archive from './archive'
import PageError from './page-error'
......@@ -24,6 +25,7 @@ import PageError from './page-error'
const Root = ({state}) => {
const data = state.source.get(state.router.link)
const post = state.source[data.type][data.id]
useEffect(() => {
(function(d) {
......@@ -157,20 +159,43 @@ const Root = ({state}) => {
src: url('${slickEOT}');
src: url('${slickEOT}?#iefix') format('embedded-opentype'), url('${slickWOFF}') format('woff'), url('${slickTTF}') format('truetype'), url('${slickSVG}#slick') format('svg');
}
@keyframes fadeInAndOut {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-o-keyframes fadeInAndOut {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes fadeInAndOut {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes fadeInAndOut {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
`}
/>
<Header />
<SiteContent theme={state.theme}>
<Switch>
<Loading when={data.isLoading} />
{/* <Home when={data.isHome} /> */}
<Post when={data.isPostType} />
{/* <Archive when={data.isArchive || data.isHome} /> */}
<PageError when={data.isError} />
</Switch>
</SiteContent>
<ParallaxProvider>
<SiteContent theme={state.theme}>
<Switch>
<Loading when={data.isLoading} />
<Home when={data.isHome} />
<Post when={data.isPostType} />
{/* <Archive when={data.isArchive || data.isHome} /> */}
<PageError when={data.isError} />
</Switch>
</SiteContent>
</ParallaxProvider>
<Footer />
</>
......@@ -180,7 +205,7 @@ const Root = ({state}) => {
export default connect(Root)
const SiteContent = styled.main`
margin-top: 5rem;
${'' /* margin-top: 5rem; */}
flex: 1;
${props => props.theme.breakPoints.md} {
......
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