Commit 4f0e702c authored by KS Support 2's avatar KS Support 2
Browse files

fixing collapsable component

parent a10deaf3
......@@ -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;
`;
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");
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 {template, acf} = post // Lazar, test this for "mvm-default-page.php"
const {content} = acf // This contains an array of ACF Flexible Content layouts
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