Commit d9a9307e authored by David Rhoderick's avatar David Rhoderick
Browse files

Merge branch '204-mvm-211-section-component' into 'development'

Resolve "MVM Default Template Section component"

Closes #204

See merge request !8
parents a4bdd19b 4f0e702c
......@@ -6834,6 +6834,11 @@
"prop-types": "^15.6.2"
}
},
"react-collapse": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/react-collapse/-/react-collapse-5.1.0.tgz",
"integrity": "sha512-5v0ywsn9HjiR/odNzbRDs0RZfrnbdSippJebWOBCFFDA12Vx8DddrbI4qWVf1P2wTiVagrpcSy07AU0b6+gM9Q=="
},
"react-dom": {
"version": "16.14.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
......
import React, {children, useState, useEffect} from 'react'
import {connect, styled} from 'frontity'
import React, { children, useState, useEffect } from "react";
import { connect, styled } from "frontity";
const Container = ({state, children, className}) => {
return (
<StyledContainer className={className}>
{children}
</StyledContainer>
)
}
const Container = ({ state, children, className }) => {
return <StyledContainer className={className}>{children}</StyledContainer>;
};
export default connect(Container)
export default connect(Container);
const StyledContainer = styled.div`
margin: 0 auto;
width: 992px;
`
\ No newline at end of file
max-width: 992px;
`;
......@@ -8,8 +8,6 @@ const Footer = ({ state }) => {
const { items } = state.source.get("/menus/footer-menu");
const { acf } = state.source.get("acf-options-page");
console.log(acf);
return (
<>
<NewsletterSocialMedia />
......
......@@ -232,7 +232,7 @@ const SearchButton = styled(FontAwesomeIcon)`
const DesktopNav = styled.nav`
width: 100%;
padding: 0.5rem 2rem;
padding: 0 2rem;
background: ${(props) => props.theme.colors.transPurple};
z-index: 2000;
......
......@@ -11,8 +11,6 @@ const Home = ({ state, actions }) => {
const data = state.source.get(state.router.link);
const post = state.source[data.type][data.id];
console.log(post);
// For each of Upcoming Event, Current Exhibition, and Object of the day,
const objectOfTheDayLink = `/${post.acf.object_of_the_day.post_type}/${post.acf.object_of_the_day.post_name}`;
......
......@@ -25,7 +25,6 @@ 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) {
......@@ -190,7 +189,7 @@ const Root = ({state}) => {
<Switch>
<Loading when={data.isLoading} />
<Home when={data.isHome} />
<Post when={data.isPostType} />
<Post when={data.isPostType} /> {/* Lazar: Start here*/ }
{/* <Archive when={data.isArchive || data.isHome} /> */}
<PageError when={data.isError} />
</Switch>
......
......@@ -43,6 +43,7 @@ const DropdownParent = styled.button`
cursor: pointer;
font-size: 0.9rem;
font-weight: bold;
padding: 0.5rem 0;
${props => props.theme.breakPoints.md} {
margin: .5rem;
......@@ -57,7 +58,7 @@ const StyledDropdownContainer = styled.div`
const Dropdown = styled.div`
position: absolute;
padding: .5rem;
margin-top: 0.5rem;
${'' /* margin-top: 0.5rem; */}
display: ${props => props.showDropdown ? 'flex' : 'none'};
flex-direction: column;
background: ${props => props.theme.colors.purple};
......
......@@ -24,7 +24,7 @@ export default connect(NavLink)
const StyledNavLink = styled(Link)`
display: inline-block;
padding: 0.25rem;
padding: 0.5rem 0.25rem;
margin: 0 .5rem;
text-decoration: none;
cursor: pointer;
......
import React from "react";
import { connect, styled } from "frontity";
import window from "global/window";
import Container from "../global/container";
import Facebook from "../../img/facebook.png";
import Instagram from "../../img/instagram.png";
import Twitter from "../../img/twitter.png";
import FacebookMobile from "../../img/facebook_mobile.png";
import InstagramMobile from "../../img/instagram_mobile.png";
import TwitterMobile from "../../img/twitter_mobile.png";
import NewsletterPic from "../../img/newsletter.png";
import Image from "@frontity/components/image";
const NewsletterSocialMedia = ({ state }) => {
const options = state.source.get("acf-options-page");
console.log(options);
const facebookSrc =
window.innerWidth > state.theme.breakPoints.md ? Facebook : FacebookMobile;
const instagramSrc =
window.innerWidth > state.theme.breakPoints.md
? Instagram
: InstagramMobile;
const twitterSrc =
window.innerWidth > state.theme.breakPoints.md ? Twitter : TwitterMobile;
return (
<NewsletterSocialMediaContainer theme={state.theme}>
<NewsletterForm theme={state.theme}>
......@@ -33,13 +47,13 @@ const NewsletterSocialMedia = ({ state }) => {
<SocialIconsContainer theme={state.theme}>
<a target="_blank">
<Image src={Facebook} />
<Image src={facebookSrc} />
</a>
<a target="_blank">
<Image src={Instagram} />
<Image src={instagramSrc} />
</a>
<a target="_blank">
<Image src={Twitter} />
<Image src={twitterSrc} />
</a>
</SocialIconsContainer>
</SocialMedia>
......@@ -135,10 +149,4 @@ const SocialIconsContainer = styled.div`
width: 1.75rem;
margin: 0.67rem;
}
${(props) => props.theme.breakPoints.md} {
a {
background: white;
}
}
`;
import React from 'react'
import {styled, connect} from 'frontity'
import React, { Fragment, useState } from "react";
import Switch from "@frontity/components/switch";
import { styled, connect } from "frontity";
import { library } from "@fortawesome/fontawesome-svg-core";
import { Collapse } from "react-collapse";
const Post = ({state}) => {
import Container from "./global/container";
import header from "./global/header";
import Link from "@frontity/components/link";
const Post = ({ state, libraries }) => {
const data = state.source.get(state.router.link);
const post = state.source[data.type][data.id];
const Html2React = libraries.html2react.Component;
const { template, acf } = post; // Lazar, test this for "mvm-default-page.php"
const { content } = acf; // This contains an array of ACF Flexible Content layouts
console.log(acf);
// Make this component return a <Switch> component (https://docs.frontity.org/api-reference-1/frontity-components#switch)
// Create a new component called <ComingSoon> and add the content below to that.
// Also, please fix the display of it, it's currently being hidden by the header
// so it probably needs a top margin for now.
// Then create a new component called <Page> and show it if template === "mvm-default-page.php"
// Each of the elements of the content array above should render it's header as the content for an <h2> and it's content into the html property of an <Html2React> component
// <Html2React> details can be found at https://docs.frontity.org/api-reference-1/frontity-html2react#how-to-use (it's already installed, it needs to be instantiated from libraries)
const CollapsableItem = ({ header, content, index }) => {
const [componentIsOpen, setComponentIsOpen] = useState(false);
const [collapseCtrlButton, setCollapseCtrlButton] = useState("+");
const changeCollapseCtrlButton = () => {
const newCollapseCtrlButton = collapseCtrlButton === "+" ? "-" : "+";
const newStateForCollapsableComponent =
componentIsOpen === true ? false : true;
setCollapseCtrlButton(newCollapseCtrlButton);
setComponentIsOpen(newStateForCollapsableComponent);
};
return (
<Fragment key={index}>
<HeaderText theme={state.theme}>
{header}{" "}
<button
onClick={() => {
changeCollapseCtrlButton();
}}
>
{collapseCtrlButton}
</button>
</HeaderText>
<Collapse isOpened={componentIsOpen}>
<Html2React html={content} key={index} />
</Collapse>
</Fragment>
);
};
const Page = () => {
return content.map(({ content, header }, index) => {
return (
<CollapsableItem header={header} index={index} content={content} />
);
});
};
const CommingSoon = () => {
return (
<section>
<h1>Coming soon...</h1>
<p>
This page is under construction and will show content soon enough.
Thanks for your patience!
</p>
</section>
);
};
return (
<section>
<h1>Coming soon...</h1>
<StylesContainer theme={state.theme}>
<Switch>
{template === "mvm-default-page.php" && <Page when={data.isPage} />}
<CommingSoon theme={state.theme} />
</Switch>
</StylesContainer>
);
};
export default connect(Post);
const StylesContainer = styled(Container)`
margin-top: 7rem !important;
${(props) => props.theme.breakPoints.md} {
margin-top: 0 !important;
}
`;
const Wrapper = styled.div`
margin-top: 7rem;
${(props) => props.theme.breakPoints.md} {
margin-top: 0 !important;
padding-left: 0.7rem;
padding-right: 0.7rem;
}
`;
const CommingSoon = styled.div`
margin-top: 50px !important;
padding-left: 2rem !important;
margin-top: 5rem !important;
${(props) => theme.breakPoints.md} {
margin-top: 0 !important;
padding-left: 1rem !important;
padding-right: 1rem !important;
}
`;
<p>This page is under construction and will show content soon enough. Thanks for your patience!</p>
</section>
)
}
const HeaderText = styled.div`
width: 100%;
border-bottom: 1px solid blue;
margin-bottom: 2rem;
position: relative;
padding-left: 2rem;
padding-bottom: 1rem;
padding-top: 1rem;
export default connect(Post)
\ No newline at end of file
button {
padding: 0.4rem 0.4rem;
position: absolute;
right: 2rem;
bottom: 1rem;
top: 1rem;
border: 1px solid black;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
`;
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