s444498/gonito-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Filter implementation

Browse Source
This commit is contained in:
mattyl006 2022-07-11 13:58:24 +02:00
parent 50ca77105f
commit bc9e8f2164
8 changed files with 163 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/arrow.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 478 B

5
src/components/elements/Button.js
View File

@ -13,6 +13,11 @@ const ButtonStyle = styled(Medium)`
color: ${({theme, color}) => color ? color : theme.colors.white};
box-shadow: ${({theme}) => theme.buttonShadow};
cursor: pointer;
transition: transform 0.3s ease-in-out;
&:hover {
transform: scale(1.15);
}
`;
const Button = (props) => {

27
src/components/elements/Filter.js Normal file
View 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;

44
src/components/elements/Filters.js
View File

@ -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
View 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
src/pages/Challenges.js
View File

@ -6,7 +6,7 @@ import MiniChallenge from "../components/elements/MiniChallenge";
import Pager from "../components/elements/Pager";
import challengesResp from "../prototypeData/challenges";
import {ELEMENTS_PER_PAGE} from "../utils/globals";
import Filters from "../components/elements/Filters";
import FiltersMenu from "../components/elements/FiltersMenu";
const Challenges = () => {
const [pageNr, setPageNr] = React.useState(1);
@ -69,8 +69,8 @@ const Challenges = () => {
return (
<>
<Filters translateX={filtersMenu ? '0' : '100vw'} opacity={filtersMenu ? '1' : '0'}
toggleFiltersMenu={toggleFiltersMenu}/>
<FiltersMenu translateX={filtersMenu ? '0' : '100vw'} opacity={filtersMenu ? '1' : '0'}
toggleFiltersMenu={toggleFiltersMenu}/>
<FlexColumn as='main' alignmentY='flex-start' width='100%'
minHeight='100vh' padding='90px 0 32px 0'>
<FlexColumn alignmentX='flex-start' width='80%'>

3
src/utils/containers.js
View File

@ -17,9 +17,10 @@ const Container = styled.div`
border: ${({border}) => border ? border : 'none'};
cursor: ${({cursor}) => cursor ? cursor : 'auto'};
display: ${({display}) => display ? display : 'block'};
opacity: ${({opacity}) => opacity ? opacity : '1'};
outline: ${({outline}) => outline ? outline : '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});
`;

1
src/utils/theme.js
View File

@ -9,7 +9,6 @@ const theme = {
navShadow: '0 1px 2px 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)'
};
export default theme;