FiltersMenu on desktop
This commit is contained in:
parent
76bdb473e9
commit
f8463fe60d
@ -5,6 +5,7 @@ import theme from "../../../utils/theme";
|
|||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
import FilterBy from "../../sections/FilterBy";
|
import FilterBy from "../../sections/FilterBy";
|
||||||
import filterOptions from "./filterOptions";
|
import filterOptions from "./filterOptions";
|
||||||
|
import Media from "react-media";
|
||||||
|
|
||||||
const FiltersMenuStyle = styled(FlexColumn)`
|
const FiltersMenuStyle = styled(FlexColumn)`
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@ -16,17 +17,29 @@ const FiltersMenuStyle = styled(FlexColumn)`
|
|||||||
max-height: 650px;
|
max-height: 650px;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
padding: 14px 16px 14px 24px;
|
padding: 14px 16px 14px 24px;
|
||||||
box-shadow: ${({theme}) => theme.filtersShadow};
|
box-shadow: ${({theme}) => theme.filtersShadowLeft};
|
||||||
background-color: ${({theme}) => theme.colors.white};
|
background-color: ${({theme}) => theme.colors.white};
|
||||||
transition: transform 0.5s ease-in-out;
|
transition: transform 0.5s ease-in-out;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
|
|
||||||
|
@media (min-width: ${({theme}) => theme.overMobile}) {
|
||||||
|
width: 310px;
|
||||||
|
max-height: none;
|
||||||
|
top: 50px;
|
||||||
|
right: auto;
|
||||||
|
left: 0;
|
||||||
|
height: 100vh;
|
||||||
|
box-shadow: ${({theme}) => theme.filtersShadowRight};
|
||||||
|
padding: 32px 32px 64px;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const FiltersMenu = (props) => {
|
const FiltersMenu = (props) => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<TransBack backgroundColor={theme.colors.dark03} translateX={props.translateX}
|
<TransBack backgroundColor={theme.colors.dark03} translateX={props.translateX}
|
||||||
opacity={props.opacity} onClick={props.toggleFiltersMenu}/>
|
opacity={props.opacity} onClick={props.toggleFiltersMenu}
|
||||||
|
display={props.transBackDisplay ? props.transBackDisplay : 'flex'}/>
|
||||||
<FiltersMenuStyle translateX={props.translateX} gap='16px'>
|
<FiltersMenuStyle translateX={props.translateX} gap='16px'>
|
||||||
<FilterBy header='Sort by' options={filterOptions[0]}
|
<FilterBy header='Sort by' options={filterOptions[0]}
|
||||||
handler={props.sortByHandler} option={props.sortBy}/>
|
handler={props.sortByHandler} option={props.sortBy}/>
|
||||||
@ -36,15 +49,25 @@ const FiltersMenu = (props) => {
|
|||||||
handler={props.challengeTypeHandler} option={props.challengeType}/>
|
handler={props.challengeTypeHandler} option={props.challengeType}/>
|
||||||
<FilterBy header='Commercial' options={filterOptions[3]}
|
<FilterBy header='Commercial' options={filterOptions[3]}
|
||||||
handler={props.commercialHandler} option={props.commercial}/>
|
handler={props.commercialHandler} option={props.commercial}/>
|
||||||
<FlexRow gap='16px' margin='14px 0 0 0'>
|
<Media query={theme.mobile}>
|
||||||
<Button as='button' width='64px' height='28px'>
|
<FlexRow gap='16px' margin='14px 0 0 0'>
|
||||||
Done
|
<Button as='button' width='64px' height='28px'>
|
||||||
</Button>
|
Done
|
||||||
<Button as='button' width='64px' height='28px'
|
</Button>
|
||||||
backgroundColor={theme.colors.dark}>
|
<Button as='button' width='64px' height='28px'
|
||||||
Clear
|
backgroundColor={theme.colors.dark}>
|
||||||
</Button>
|
Reset
|
||||||
</FlexRow>
|
</Button>
|
||||||
|
</FlexRow>
|
||||||
|
</Media>
|
||||||
|
<Media query={theme.desktop}>
|
||||||
|
<FlexRow margin='20px 0 0 0' width='94%' alignmentX='flex-start'>
|
||||||
|
<Button as='button' width='72px' height='34px'
|
||||||
|
backgroundColor={theme.colors.green}>
|
||||||
|
Reset
|
||||||
|
</Button>
|
||||||
|
</FlexRow>
|
||||||
|
</Media>
|
||||||
</FiltersMenuStyle>
|
</FiltersMenuStyle>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
@ -18,6 +18,12 @@ const LeftArrow = styled(Svg)`
|
|||||||
cursor: ${({backgroundColor}) => (backgroundColor === 'transparent') ? 'auto' : 'pointer'};
|
cursor: ${({backgroundColor}) => (backgroundColor === 'transparent') ? 'auto' : 'pointer'};
|
||||||
width: 10px;
|
width: 10px;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
|
transition: transform 0.3s ease-in-out;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
@media (min-width: ${({theme}) => theme.overMobile}) {
|
@media (min-width: ${({theme}) => theme.overMobile}) {
|
||||||
width: 12px;
|
width: 12px;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
@ -30,6 +36,12 @@ const RightArrow = styled(Svg)`
|
|||||||
cursor: ${({backgroundColor}) => (backgroundColor === 'transparent') ? 'auto' : 'pointer'};
|
cursor: ${({backgroundColor}) => (backgroundColor === 'transparent') ? 'auto' : 'pointer'};
|
||||||
width: 10px;
|
width: 10px;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
|
transition: transform 0.3s ease-in-out;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: rotate(180deg) scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
@media (min-width: ${({theme}) => theme.overMobile}) {
|
@media (min-width: ${({theme}) => theme.overMobile}) {
|
||||||
width: 12px;
|
width: 12px;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
|
@ -28,6 +28,10 @@ const SearchStyle = styled(FlexRow)`
|
|||||||
&:hover {
|
&:hover {
|
||||||
transform: scale(1.25);
|
transform: scale(1.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: ${({theme}) => theme.overMobile}) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
|
@ -1,11 +1,12 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import {FlexColumn, Grid, Svg} from "../../utils/containers";
|
import {FlexColumn, Grid, Svg} from "../../utils/containers";
|
||||||
import Filter from "../elements/Filter";
|
import Filter from "../elements/Filter";
|
||||||
import {Body, Medium} from "../../utils/fonts";
|
import {Body, H3, Medium} from "../../utils/fonts";
|
||||||
import arrow from "../../assets/arrow.svg";
|
import arrow from "../../assets/arrow.svg";
|
||||||
|
import Media from "react-media";
|
||||||
|
import theme from "../../utils/theme";
|
||||||
|
|
||||||
const FilterBy = (props) => {
|
const FilterBy = (props) => {
|
||||||
|
|
||||||
const renderFilterOptions = () => {
|
const renderFilterOptions = () => {
|
||||||
return (
|
return (
|
||||||
props.options.map((option, index) => {
|
props.options.map((option, index) => {
|
||||||
@ -27,10 +28,18 @@ const FilterBy = (props) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<FlexColumn as='fieldset' width='220px' alignmentX='flex-start'>
|
<FlexColumn as='fieldset' width='94%' alignmentX='flex-start'>
|
||||||
<Medium as='legend' textTransform='uppercase' margin='0 0 12px 0'>
|
<Media query={theme.mobile}>
|
||||||
{props.header}
|
<Medium as='legend' textTransform='uppercase' margin='0 0 12px 0'>
|
||||||
</Medium>
|
{props.header}
|
||||||
|
</Medium>
|
||||||
|
</Media>
|
||||||
|
<Media query={theme.desktop}>
|
||||||
|
<H3 as='legend' textTransform='uppercase' margin='0 0 24px 0'>
|
||||||
|
{props.header}
|
||||||
|
</H3>
|
||||||
|
|
||||||
|
</Media>
|
||||||
<Grid gridTemplateColumns='auto auto' gridGap='12px'>
|
<Grid gridTemplateColumns='auto auto' gridGap='12px'>
|
||||||
{renderFilterOptions()}
|
{renderFilterOptions()}
|
||||||
</Grid>
|
</Grid>
|
||||||
|
@ -10,6 +10,8 @@ const FooterStyle = styled(FlexRow)`
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color: ${({theme}) => theme.colors.green};
|
background-color: ${({theme}) => theme.colors.green};
|
||||||
|
z-index: 1000;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
p, a {
|
p, a {
|
||||||
color: ${({theme}) => theme.colors.white}
|
color: ${({theme}) => theme.colors.white}
|
||||||
|
@ -104,20 +104,26 @@ const Challenges = () => {
|
|||||||
|
|
||||||
const desktopRender = () => {
|
const desktopRender = () => {
|
||||||
return (
|
return (
|
||||||
<FlexColumn as='main' alignmentY='flex-start' width='100%'
|
<>
|
||||||
minHeight='100vh' padding='112px 0 82px 0'>
|
<FiltersMenu toggleFiltersMenu={toggleFiltersMenu} transBackDisplay='none'
|
||||||
<FlexColumn alignmentX='flex-start'>
|
sortByHandler={sortByHandler} statusHandler={statusHandler}
|
||||||
<H1 as='h1' margin='0 0 32px 0'>
|
challengeTypeHandler={challengeTypeHandler} commercialHandler={commercialHandler}
|
||||||
Challenges
|
sortBy={sortBy} status={status} challengeType={challengeType} commercial={commercial}/>
|
||||||
</H1>
|
<FlexColumn as='main' alignmentY='flex-start' width='100%'
|
||||||
<Search searchQueryHandler={searchQueryHandler} toggleFiltersMenu={toggleFiltersMenu}/>
|
minHeight='100vh' padding='112px 0 82px 310px'>
|
||||||
<FlexColumn width='100%'>
|
<FlexColumn alignmentX='flex-start'>
|
||||||
{renderChallenges()}
|
<H1 as='h1' margin='0 0 32px 0'>
|
||||||
|
Challenges
|
||||||
|
</H1>
|
||||||
|
<Search searchQueryHandler={searchQueryHandler} toggleFiltersMenu={toggleFiltersMenu}/>
|
||||||
|
<FlexColumn width='100%'>
|
||||||
|
{renderChallenges()}
|
||||||
|
</FlexColumn>
|
||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
|
<Pager pageNr={pageNr} pages={calcPages()}
|
||||||
|
nextPage={nextPage} previousPage={previousPage}/>
|
||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
<Pager pageNr={pageNr} pages={calcPages()}
|
</>
|
||||||
nextPage={nextPage} previousPage={previousPage}/>
|
|
||||||
</FlexColumn>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -12,6 +12,10 @@ const ChallengesGrid = styled(Grid)`
|
|||||||
grid-gap: 64px;
|
grid-gap: 64px;
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1600px) {
|
||||||
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const _renderChallenges = (pageNr, challenges) => {
|
const _renderChallenges = (pageNr, challenges) => {
|
||||||
|
@ -8,7 +8,8 @@ const theme = {
|
|||||||
shadow: '1px 2px 4px rgba(52, 52, 52, 0.25)',
|
shadow: '1px 2px 4px rgba(52, 52, 52, 0.25)',
|
||||||
navShadow: '0 1px 2px rgba(52, 52, 52, 0.25)',
|
navShadow: '0 1px 2px rgba(52, 52, 52, 0.25)',
|
||||||
buttonShadow: '0 4px 4px rgba(52, 52, 52, 0.25)',
|
buttonShadow: '0 4px 4px rgba(52, 52, 52, 0.25)',
|
||||||
filtersShadow: '-4px 4px 4px rgba(52, 52, 52, 0.25)'
|
filtersShadowLeft: '-4px 4px 4px rgba(52, 52, 52, 0.25)',
|
||||||
|
filtersShadowRight: '2px 2px 4px rgba(52, 52, 52, 0.25)'
|
||||||
};
|
};
|
||||||
|
|
||||||
export default theme;
|
export default theme;
|
Loading…
Reference in New Issue
Block a user