Filter implementation
This commit is contained in:
parent
50ca77105f
commit
bc9e8f2164
3
src/assets/arrow.svg
Normal file
3
src/assets/arrow.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="8" height="11" viewBox="0 0 8 11" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M4.35355 0.646446C4.15829 0.451184 3.84171 0.451184 3.64645 0.646446L0.464466 3.82843C0.269204 4.02369 0.269204 4.34027 0.464466 4.53553C0.659728 4.7308 0.976311 4.7308 1.17157 4.53553L4 1.70711L6.82843 4.53553C7.02369 4.7308 7.34027 4.7308 7.53553 4.53553C7.7308 4.34027 7.7308 4.02369 7.53553 3.82843L4.35355 0.646446ZM4.5 11L4.5 1H3.5L3.5 11H4.5Z" fill="#343434"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 478 B |
@ -13,6 +13,11 @@ const ButtonStyle = styled(Medium)`
|
|||||||
color: ${({theme, color}) => color ? color : theme.colors.white};
|
color: ${({theme, color}) => color ? color : theme.colors.white};
|
||||||
box-shadow: ${({theme}) => theme.buttonShadow};
|
box-shadow: ${({theme}) => theme.buttonShadow};
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
transition: transform 0.3s ease-in-out;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.15);
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Button = (props) => {
|
const Button = (props) => {
|
||||||
|
|||||||
27
src/components/elements/Filter.js
Normal file
27
src/components/elements/Filter.js
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import React from "react";
|
||||||
|
import styled from "styled-components";
|
||||||
|
import {Body} from "../../utils/fonts";
|
||||||
|
|
||||||
|
const FilterStyle = styled(Body)`
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: fit-content;
|
||||||
|
height: 36px;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 32px;
|
||||||
|
border: 1px solid ${({theme}) => theme.colors.dark};
|
||||||
|
box-shadow: ${({theme}) => theme.shadow};
|
||||||
|
gap: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Filter = (props) => {
|
||||||
|
return (
|
||||||
|
<FilterStyle as='button'>
|
||||||
|
{props.children}
|
||||||
|
</FilterStyle>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Filter;
|
||||||
@ -1,44 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import {FlexColumn, FlexRow, TransBack} from "../../utils/containers";
|
|
||||||
import Button from "./Button";
|
|
||||||
import theme from "../../utils/theme";
|
|
||||||
import styled from "styled-components";
|
|
||||||
|
|
||||||
const FiltersStyle = styled(FlexColumn)`
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
overflow-y: scroll;
|
|
||||||
width: 240px;
|
|
||||||
min-height: 626px;
|
|
||||||
height: 100vh;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 56px 16px 14px 24px;
|
|
||||||
box-shadow: ${({theme}) => theme.filtersShadow};
|
|
||||||
background-color: ${({theme}) => theme.colors.white};
|
|
||||||
transition: transform 0.5s ease-in-out;
|
|
||||||
z-index: 3;
|
|
||||||
`;
|
|
||||||
|
|
||||||
|
|
||||||
const Filters = (props) => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<TransBack backgroundColor={theme.colors.dark03} translateX={props.translateX}
|
|
||||||
opacity={props.opacity} onClick={props.toggleFiltersMenu}/>
|
|
||||||
<FiltersStyle translateX={props.translateX} gap='16px'>
|
|
||||||
<FlexRow gap='16px' margin='14px 0 0 0'>
|
|
||||||
<Button as='button' width='64px' height='28px'>
|
|
||||||
Done
|
|
||||||
</Button>
|
|
||||||
<Button as='button' width='64px' height='28px'
|
|
||||||
backgroundColor={theme.colors.dark}>
|
|
||||||
Clear
|
|
||||||
</Button>
|
|
||||||
</FlexRow>
|
|
||||||
</FiltersStyle>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Filters;
|
|
||||||
123
src/components/elements/FiltersMenu.js
Normal file
123
src/components/elements/FiltersMenu.js
Normal file
@ -0,0 +1,123 @@
|
|||||||
|
import React from "react";
|
||||||
|
import {FlexColumn, FlexRow, Grid, TransBack} from "../../utils/containers";
|
||||||
|
import Button from "./Button";
|
||||||
|
import theme from "../../utils/theme";
|
||||||
|
import styled from "styled-components";
|
||||||
|
import {Medium} from "../../utils/fonts";
|
||||||
|
import Filter from "./Filter";
|
||||||
|
|
||||||
|
const FiltersMenuStyle = styled(FlexColumn)`
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
overflow-y: scroll;
|
||||||
|
width: 240px;
|
||||||
|
height: 100vh;
|
||||||
|
justify-content: space-around;
|
||||||
|
@media (max-height: 626px) {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
padding: 14px 16px 14px 24px;
|
||||||
|
box-shadow: ${({theme}) => theme.filtersShadow};
|
||||||
|
background-color: ${({theme}) => theme.colors.white};
|
||||||
|
transition: transform 0.5s ease-in-out;
|
||||||
|
z-index: 3;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const FiltersMenu = (props) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<TransBack backgroundColor={theme.colors.dark03} translateX={props.translateX}
|
||||||
|
opacity={props.opacity} onClick={props.toggleFiltersMenu}/>
|
||||||
|
<FiltersMenuStyle translateX={props.translateX} gap='16px'>
|
||||||
|
<FlexColumn width='200px' alignmentX='flex-start' gap='12px'>
|
||||||
|
<Medium as='p' textTransform='uppercase'>
|
||||||
|
Sort by
|
||||||
|
</Medium>
|
||||||
|
<Grid gridTemplateColumns='auto auto' gridGap='12px'>
|
||||||
|
<Filter>
|
||||||
|
Closing
|
||||||
|
</Filter>
|
||||||
|
<Filter>
|
||||||
|
Closing
|
||||||
|
</Filter>
|
||||||
|
<Filter>
|
||||||
|
Hotness
|
||||||
|
</Filter>
|
||||||
|
<Filter>
|
||||||
|
Hotness
|
||||||
|
</Filter>
|
||||||
|
<Filter>
|
||||||
|
Reward
|
||||||
|
</Filter>
|
||||||
|
<Filter>
|
||||||
|
Reward
|
||||||
|
</Filter>
|
||||||
|
</Grid>
|
||||||
|
</FlexColumn>
|
||||||
|
<FlexColumn width='200px' alignmentX='flex-start' gap='12px'>
|
||||||
|
<Medium as='p' textTransform='uppercase'>
|
||||||
|
Status
|
||||||
|
</Medium>
|
||||||
|
<Grid gridTemplateColumns='auto auto' gridGap='12px'>
|
||||||
|
<Filter>
|
||||||
|
Both
|
||||||
|
</Filter>
|
||||||
|
<Filter>
|
||||||
|
Completed
|
||||||
|
</Filter>
|
||||||
|
<Filter>
|
||||||
|
Active
|
||||||
|
</Filter>
|
||||||
|
</Grid>
|
||||||
|
</FlexColumn>
|
||||||
|
<FlexColumn width='200px' alignmentX='flex-start' gap='12px'>
|
||||||
|
<Medium as='p' textTransform='uppercase'>
|
||||||
|
Challenge type
|
||||||
|
</Medium>
|
||||||
|
<Grid gridTemplateColumns='auto auto' gridGap='12px'>
|
||||||
|
<Filter>
|
||||||
|
All
|
||||||
|
</Filter>
|
||||||
|
<Filter>
|
||||||
|
Tabular
|
||||||
|
</Filter>
|
||||||
|
<Filter>
|
||||||
|
Text
|
||||||
|
</Filter>
|
||||||
|
<Filter>
|
||||||
|
Image
|
||||||
|
</Filter>
|
||||||
|
</Grid>
|
||||||
|
</FlexColumn>
|
||||||
|
<FlexColumn width='200px' alignmentX='flex-start' gap='12px'>
|
||||||
|
<Medium as='p' textTransform='uppercase'>
|
||||||
|
Commercial
|
||||||
|
</Medium>
|
||||||
|
<Grid gridTemplateColumns='auto auto' gridGap='12px'>
|
||||||
|
<Filter>
|
||||||
|
Both
|
||||||
|
</Filter>
|
||||||
|
<Filter>
|
||||||
|
Yes
|
||||||
|
</Filter>
|
||||||
|
<Filter>
|
||||||
|
No
|
||||||
|
</Filter>
|
||||||
|
</Grid>
|
||||||
|
</FlexColumn>
|
||||||
|
<FlexRow gap='16px' margin='14px 0 0 0'>
|
||||||
|
<Button as='button' width='64px' height='28px'>
|
||||||
|
Done
|
||||||
|
</Button>
|
||||||
|
<Button as='button' width='64px' height='28px'
|
||||||
|
backgroundColor={theme.colors.dark}>
|
||||||
|
Clear
|
||||||
|
</Button>
|
||||||
|
</FlexRow>
|
||||||
|
</FiltersMenuStyle>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default FiltersMenu;
|
||||||
@ -6,7 +6,7 @@ import MiniChallenge from "../components/elements/MiniChallenge";
|
|||||||
import Pager from "../components/elements/Pager";
|
import Pager from "../components/elements/Pager";
|
||||||
import challengesResp from "../prototypeData/challenges";
|
import challengesResp from "../prototypeData/challenges";
|
||||||
import {ELEMENTS_PER_PAGE} from "../utils/globals";
|
import {ELEMENTS_PER_PAGE} from "../utils/globals";
|
||||||
import Filters from "../components/elements/Filters";
|
import FiltersMenu from "../components/elements/FiltersMenu";
|
||||||
|
|
||||||
const Challenges = () => {
|
const Challenges = () => {
|
||||||
const [pageNr, setPageNr] = React.useState(1);
|
const [pageNr, setPageNr] = React.useState(1);
|
||||||
@ -69,7 +69,7 @@ const Challenges = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Filters translateX={filtersMenu ? '0' : '100vw'} opacity={filtersMenu ? '1' : '0'}
|
<FiltersMenu translateX={filtersMenu ? '0' : '100vw'} opacity={filtersMenu ? '1' : '0'}
|
||||||
toggleFiltersMenu={toggleFiltersMenu}/>
|
toggleFiltersMenu={toggleFiltersMenu}/>
|
||||||
<FlexColumn as='main' alignmentY='flex-start' width='100%'
|
<FlexColumn as='main' alignmentY='flex-start' width='100%'
|
||||||
minHeight='100vh' padding='90px 0 32px 0'>
|
minHeight='100vh' padding='90px 0 32px 0'>
|
||||||
|
|||||||
@ -17,9 +17,10 @@ const Container = styled.div`
|
|||||||
border: ${({border}) => border ? border : 'none'};
|
border: ${({border}) => border ? border : 'none'};
|
||||||
cursor: ${({cursor}) => cursor ? cursor : 'auto'};
|
cursor: ${({cursor}) => cursor ? cursor : 'auto'};
|
||||||
display: ${({display}) => display ? display : 'block'};
|
display: ${({display}) => display ? display : 'block'};
|
||||||
opacity: ${({opacity}) => opacity ? opacity : '1'};
|
|
||||||
outline: ${({outline}) => outline ? outline : 'none'};
|
outline: ${({outline}) => outline ? outline : 'none'};
|
||||||
text-decoration: ${({textDecoration}) => textDecoration ? textDecoration : 'none'};
|
text-decoration: ${({textDecoration}) => textDecoration ? textDecoration : 'none'};
|
||||||
|
text-transform: ${({textTransform}) => textTransform ? textTransform : 'none'};
|
||||||
|
opacity: ${({opacity}) => opacity ? opacity : '1'};
|
||||||
transform: translate(${({translateX}) => translateX ? translateX : 0}, ${({translateY}) => translateY ? translateY : 0});
|
transform: translate(${({translateX}) => translateX ? translateX : 0}, ${({translateY}) => translateY ? translateY : 0});
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|||||||
@ -9,7 +9,6 @@ const theme = {
|
|||||||
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)'
|
filtersShadow: '-4px 4px 4px rgba(52, 52, 52, 0.25)'
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default theme;
|
export default theme;
|
||||||
Loading…
Reference in New Issue
Block a user