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

Merge branch '209-home-page-mobile-responsiveness' into 'development'

Resolve "Home page mobile-responsiveness"

Closes #209

See merge request !7
parents 1f9c7b31 2ba46d47
......@@ -8,20 +8,25 @@ const Footer = ({ state }) => {
const { items } = state.source.get("/menus/footer-menu");
const { acf } = state.source.get("acf-options-page");
console.log(acf)
console.log(acf);
return (
<>
<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/>
<FooterContainer theme={state.theme}>
<FooterAddress theme={state.theme}>
{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) => {
......@@ -35,7 +40,9 @@ const Footer = ({ state }) => {
</FooterContainer>
</FooterWrapper>
<Copyright theme={state.theme}>&copy; {new Date().getFullYear()} {acf.copyright_owner}</Copyright>
<Copyright theme={state.theme}>
&copy; {new Date().getFullYear()} {acf.copyright_owner}
</Copyright>
</>
);
};
......@@ -51,6 +58,11 @@ const FooterWrapper = styled.div`
display: flex;
justify-content: center;
padding: 2rem 8rem;
${(props) => props.theme.breakPoints.md} {
height: 70vh;
padding: 2rem 1rem;
}
`;
const FooterContainer = styled.div`
......@@ -58,6 +70,12 @@ const FooterContainer = styled.div`
height: 100%;
display: flex;
justify-content: stretch;
${(props) => props.theme.breakPoints.md} {
flex-direction: column;
justify-content: space-between;
align-items: space-between;
}
`;
const FooterAddress = styled.address`
......@@ -69,6 +87,13 @@ const FooterAddress = styled.address`
align-items: flex-start;
font-size: 0.9rem;
${(props) => props.theme.breakPoints.md} {
width: 100%;
justify-content: center;
align-items: center;
text-align: center;
}
`;
const FooterMenu = styled.div`
......@@ -76,27 +101,34 @@ const FooterMenu = styled.div`
width: 50%;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
justify-content: flex-start;
align-items: flex-start;
font-size: 0.8rem;
a {
color: white;
&, &:visited {
color: white;
}
display: inline-block;
margin: 0 0 auto;
&:hover {
color: ${props => props.theme.colors.orange};
color: ${(props) => props.theme.colors.orange};
}
}
${(props) => props.theme.breakPoints.md} {
width: 100%;
justify-content: center;
align-items: center;
}
`;
const Copyright = styled.small`
background: ${props => props.theme.colors.darkGrey};
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
`;
import React, {useState, useEffect} from 'react'
import {connect, styled} from 'frontity'
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
import {faSearch} from '@fortawesome/free-solid-svg-icons'
import React, { useState, useEffect } from "react";
import { connect, styled } from "frontity";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faSearch } from "@fortawesome/free-solid-svg-icons";
import Image from '@frontity/components/image'
import Image from "@frontity/components/image";
import Link from '../partials/link'
import NavLink from '../partials/nav-link'
import DropdownNavLink from '../partials/dropdown-nav-link'
import Link from "../partials/link";
import NavLink from "../partials/nav-link";
import DropdownNavLink from "../partials/dropdown-nav-link";
const MobileNavToggle = ({theme, clickHandler}) => {
const MobileNavToggle = ({ theme, clickHandler }) => {
return (
<StyledMobileNavToggle theme={theme} onClick={clickHandler}>
<span></span>
<span></span>
<span></span>
</StyledMobileNavToggle>
)
}
);
};
const Header = ({state}) => {
const {items} = state.source.get('/menus/primary-menu')
const options = state.source.get('acf-options-page')
const Header = ({ state }) => {
const { items } = state.source.get("/menus/primary-menu");
const options = state.source.get("acf-options-page");
const {name} = (state.source.get('nameAndDescription'))
const logo = options.acf.logo
const areThereLinks = items != null && items.length > 0
const { name } = state.source.get("nameAndDescription");
const logo = options.acf.logo;
const areThereLinks = items != null && items.length > 0;
const [mobileMenuShown, toggleMobileMenu] = useState(false)
const [mobileMenuShown, toggleMobileMenu] = useState(false);
const [desktopSearch, setDesktopSearch] = useState(null)
const [desktopSearch, setDesktopSearch] = useState(null);
const focusDesktopSearch = () => {
desktopSearch.placeholder = 'Type your search'
desktopSearch.style.borderBottomWidth = '1px';
}
desktopSearch.placeholder = "Type your search";
desktopSearch.style.borderBottomWidth = "1px";
};
const blurDesktopSearch = () => {
desktopSearch.placeholder = 'Search'
desktopSearch.style.borderBottomWidth = '0px';
}
desktopSearch.placeholder = "Search";
desktopSearch.style.borderBottomWidth = "0px";
};
const [openDropdown, setOpenDropdown] = useState(null)
const [openDropdown, setOpenDropdown] = useState(null);
return (
<StyledHeader>
<StyledHeader theme={state.theme}>
<TopBar theme={state.theme}>
<Link href="/" clickHandler={() => toggleMobileMenu(false)}>{ logo ? <Image src={logo.url} alt={name}/> : <h1 dangerouslySetInnerHTML={{__html:name}} /> }</Link>
<Link href="/" clickHandler={() => toggleMobileMenu(false)}>
{logo ? (
<Image src={logo.url} alt={name} />
) : (
<h1 dangerouslySetInnerHTML={{ __html: name }} />
)}
</Link>
<DesktopSearch theme={state.theme}>
<Search theme={state.theme} type="text" placeholder="Search" ref={setDesktopSearch} onFocus={focusDesktopSearch} onBlur={blurDesktopSearch} />
<SearchButton theme={state.theme} icon={faSearch} onClick={() => console.log(search.value)}/>
<Search
theme={state.theme}
type="text"
placeholder="Search"
ref={setDesktopSearch}
onFocus={focusDesktopSearch}
onBlur={blurDesktopSearch}
/>
<SearchButton
theme={state.theme}
icon={faSearch}
onClick={() => console.log(search.value)}
/>
</DesktopSearch>
<MobileNavToggle theme={state.theme} clickHandler={() => toggleMobileMenu(!mobileMenuShown)} />
<MobileNavToggle
theme={state.theme}
clickHandler={() => toggleMobileMenu(!mobileMenuShown)}
/>
<MobileNav theme={state.theme} showMenu={mobileMenuShown}>
{areThereLinks &&
items.map((item, index) => {
const {child_items} = item
if(typeof child_items !== 'undefined' && child_items.length > 0) {
return <DropdownNavLink openDropdown={openDropdown} setOpenDropdown={setOpenDropdown} index={index} navLink={item} key={index} closeMobileMenu={() => toggleMobileMenu(false)} />
const { child_items } = item;
if (
typeof child_items !== "undefined" &&
child_items.length > 0
) {
return (
<DropdownNavLink
openDropdown={openDropdown}
setOpenDropdown={setOpenDropdown}
index={index}
navLink={item}
key={index}
closeMobileMenu={() => toggleMobileMenu(false)}
/>
);
}
return <NavLink navLink={item} key={index} closeMobileMenu={() => toggleMobileMenu(false)} />
return (
<NavLink
navLink={item}
key={index}
closeMobileMenu={() => toggleMobileMenu(false)}
/>
);
})}
</MobileNav>
</TopBar>
......@@ -73,34 +111,56 @@ const Header = ({state}) => {
<MobileSearch theme={state.theme}>
{/* <Search theme={state.theme} type="text" placeholder="Search" ref={setMobileSearch} onFocus={focusMobileSearch} onBlur={blurMobileSearch} /> */}
<SearchButton theme={state.theme} icon={faSearch} onClick={() => console.log(search.value)}/>
<SearchButton
theme={state.theme}
icon={faSearch}
onClick={() => console.log(search.value)}
/>
</MobileSearch>
<DesktopNav theme={state.theme}>
<div>
{areThereLinks &&
items.map((item, index) => {
const {child_items} = item
if(typeof child_items !== 'undefined' && child_items.length > 0) {
return <DropdownNavLink openDropdown={openDropdown} setOpenDropdown={setOpenDropdown} index={index} navLink={item} key={index} closeMobileMenu={() => toggleMobileMenu(false)} />
const { child_items } = item;
if (
typeof child_items !== "undefined" &&
child_items.length > 0
) {
return (
<DropdownNavLink
openDropdown={openDropdown}
setOpenDropdown={setOpenDropdown}
index={index}
navLink={item}
key={index}
closeMobileMenu={() => toggleMobileMenu(false)}
/>
);
}
return <NavLink navLink={item} key={index} closeMobileMenu={() => toggleMobileMenu(false)} />
return (
<NavLink
navLink={item}
key={index}
closeMobileMenu={() => toggleMobileMenu(false)}
/>
);
})}
</div>
</DesktopNav>
</StyledHeader>
)
}
);
};
export default connect(Header)
export default connect(Header);
const StyledHeader = styled.header`
z-index: 2000;
position: fixed;
width: 100%;
`
`;
const TopBar = styled.div`
position: relative;
......@@ -109,11 +169,11 @@ const TopBar = styled.div`
justify-content: space-between;
align-items: center;
padding: 0.5rem 1rem;
${'' /* position: fixed; */}
${"" /* position: fixed; */}
line-height: 1rem;
height: 5rem;
z-index: 1000;
background: ${props => props.theme.colors.white};
background: ${(props) => props.theme.colors.white};
> a {
max-width: 20%;
......@@ -121,17 +181,17 @@ const TopBar = styled.div`
img {
max-width: 100%;
max-height: 5rem;
padding: .5rem;
padding: 0.5rem;
}
}
${props => props.theme.breakPoints.lg} {
${(props) => props.theme.breakPoints.lg} {
padding: 1rem;
height: 3.5rem;
> a {
max-width: 67%;
img {
max-width: 75%;
max-height: 3rem;
......@@ -140,43 +200,43 @@ const TopBar = styled.div`
justify-content: space-between;
}
`
`;
const DesktopSearch = styled.div`
display: block;
${props => props.theme.breakPoints.lg} {
${(props) => props.theme.breakPoints.lg} {
display: none;
}
`
`;
const MobileSearch = styled.div`
display: none;
${'' /* ${props => props.theme.breakPoints.lg} {
${"" /* ${props => props.theme.breakPoints.lg} {
display: block;
} */}
`
`;
const Search = styled.input`
background: transparent;
border-bottom-color: ${props => props.theme.colors.purple};
border-bottom-color: ${(props) => props.theme.colors.purple};
border-bottom-style: solid;
color: ${props => props.theme.colors.purple};
`
color: ${(props) => props.theme.colors.purple};
`;
const SearchButton = styled(FontAwesomeIcon)`
color: ${props => props.theme.colors.purple};
color: ${(props) => props.theme.colors.purple};
cursor: pointer;
`
`;
const DesktopNav = styled.nav`
width: 100%;
padding: .5rem 2rem;
background: ${props => props.theme.colors.transPurple};
padding: 0.5rem 2rem;
background: ${(props) => props.theme.colors.transPurple};
z-index: 2000;
${props => props.theme.breakPoints.lg} {
${(props) => props.theme.breakPoints.lg} {
display: none;
}
......@@ -186,26 +246,28 @@ const DesktopNav = styled.nav`
justify-content: center;
align-items: center;
${props => props.theme.breakPoints.lg} {
> div, > a {
${(props) => props.theme.breakPoints.lg} {
> div,
> a {
margin: 0 auto;
}
}
> button, > a {
color: ${props => props.theme.colors.white};
> button,
> a {
color: ${(props) => props.theme.colors.white};
}
}
> div > * {
margin: 0 1rem;
}
`
`;
const StyledMobileNavToggle = styled.button`
display: none;
${props => props.theme.breakPoints.lg} {
${(props) => props.theme.breakPoints.lg} {
display: block;
height: 3rem;
......@@ -215,13 +277,13 @@ const StyledMobileNavToggle = styled.button`
border: none;
cursor: pointer;
span {
width: 100%;
height: 5.5%;
margin-bottom: 20%;
display: block;
background: ${props => props.theme.colors.purple};
background: ${(props) => props.theme.colors.purple};
border-radius: 10px;
&:last-of-type {
......@@ -229,35 +291,37 @@ const StyledMobileNavToggle = styled.button`
}
}
}
`
`;
const MobileNav = styled.nav`
display: none;
${props => props.theme.breakPoints.lg} {
${(props) => props.theme.breakPoints.lg} {
display: flex;
flex-direction: column;
align-items: flex-start;
max-height: ${props => props.showMenu ? '800px' : '0'};
max-height: ${(props) => (props.showMenu ? "800px" : "0")};
transition: max-height 0.25s ease-in-out;
overflow: hidden;
background: ${props => props.theme.colors.purple};
background: ${(props) => props.theme.colors.purple};
position: absolute;
left: 0;
right: 0;
top: 3.5rem;
a, button {
a,
button {
color: white !important;
}
> div, > a {
> div,
> a {
width: auto;
display: inline-block;
margin: .5rem;
margin: 0.5rem;
}
}
`
\ No newline at end of file
`;
......@@ -34,7 +34,7 @@ const Home = ({ state, actions }) => {
const text_for_featured = ["Object of the day"];
const colors = state.theme.colors;
const use_colors = [colors.green, colors.orange, "#39aee3"];
const use_colors = [colors.green, colors.orange, colors.lightBlue];
return (
<>
......
......@@ -4,70 +4,116 @@ import Link from "@frontity/components/link";
const Featured = ({ text, dynamicText, state, color, img }) => {
return (
<Link link="#">
<FeatureContainer>
<TextOnTheLeft color={color}>
<FeatureContainer theme={state.theme}>
<Link link="#">
<TitleContainer color={color} theme={state.theme}>
<h2>{text}</h2>
</TextOnTheLeft>
<ItemsDetails img={img}>
<ItemsDetailsText color={color}>
</TitleContainer>
<ItemsDetails img={img} theme={state.theme}>
<ItemsDetailsMobileText color={color} theme={state.theme}>
<h3>Read more about this project</h3>
</ItemsDetailsMobileText>
<ItemsDetailsText color={color} theme={state.theme}>
<h3>{dynamicText}</h3>
</ItemsDetailsText>
</ItemsDetails>
</FeatureContainer>
</Link>
</Link>
</FeatureContainer>
);
};
export default connect(Featured);
const FeatureContainer = styled.div`
width: 100%;
height: 40vh;
display: grid;
grid-template-column: repeat (3, 1fr);
padding: 0 1rem 1rem;
position: relative;
z-index: 100;
background: white;
a {
display: flex;
${'' /* height: 40vh; */}
padding-bottom: 1rem;