Commit 7d61ed45 authored by KS Support 2's avatar KS Support 2
Browse files

fixing mobile responsivness- problem with the width

parent 1f9c7b31
......@@ -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,10 @@ const FooterWrapper = styled.div`
display: flex;
justify-content: center;
padding: 2rem 8rem;
${(props) => props.theme.breakPoints.md} {
height: 70vh;
}
`;
const FooterContainer = styled.div`
......@@ -58,6 +69,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 +86,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`
......@@ -86,17 +110,23 @@ const FooterMenu = styled.div`
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
`;
......@@ -5,12 +5,15 @@ import Link from "@frontity/components/link";
const Featured = ({ text, dynamicText, state, color, img }) => {
return (
<Link link="#">
<FeatureContainer>
<TextOnTheLeft color={color}>
<FeatureContainer theme={state.theme}>
<TextOnTheLeft color={color} theme={state.theme}>
<h2>{text}</h2>
</TextOnTheLeft>
<ItemsDetails img={img}>
<ItemsDetailsText color={color}>
<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>
......@@ -31,6 +34,11 @@ const FeatureContainer = styled.div`
background: white;
padding-bottom: 1rem;
${(props) => props.theme.breakPoints.md} {
display: flex;
flex-direction: column;
}
`;
const TextOnTheLeft = styled.div`
......@@ -48,6 +56,14 @@ const TextOnTheLeft = styled.div`
margin: 0;
color: white !important;
}
${(props) => props.theme.breakPoints.md} {
flex-order: 1;
align-self: center;
width: 95%;
height: 20%;
margin: 0;
}
`;
const ItemsDetails = styled.div`
......@@ -60,6 +76,33 @@ const ItemsDetails = styled.div`
background-repeat: no-repeat;
background-size: cover;
bacground-position: center;
${(props) => props.theme.breakPoints.md} {
margin: 0;
align-self: center;
flex-order: 2;
width: 95%;
height: 80%;
}
`;
const ItemsDetailsMobileText = styled.div`
display: none;
width: 100%;
heigth: 20%;
color: ${(props) => props.color};
position: absolute;
bottom: 20%;
left: 0;
background: white;
${(props) => props.theme.breakPoints.md} {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
text-decoration: underline;
}