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

fix Filter hover transform on chrome, and handler after reset

Browse Source
This commit is contained in:
mattyl006 2022-08-01 10:55:34 +02:00
parent 4ff84194fa
commit 897ec4766d
3 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/elements/Filter.js
View File

@ -12,10 +12,21 @@ const FilterStyle = styled(FlexRow)`
box-shadow: ${({theme}) => theme.shadow};
cursor: pointer;
background-color: ${({theme, active}) => active ? theme.colors.dark : theme.colors.white};
//transition: color, background-color 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
z-index: 2;
&:hover {
//background-color: ${({theme}) => theme.colors.dark};
transform: scale(1.1);
// p {
// color: ${({theme}) => theme.colors.white};
// }
//
// span {
// background-color: ${({theme}) => theme.colors.white};
// }
}
p {
@ -33,6 +44,7 @@ const FilterStyle = styled(FlexRow)`
const Filter = (props) => {
const onCheckHandler = (e) => {
console.log('elo');
if (e.target.checked)
props.handler(Number(e.target.value));
};
@ -44,7 +56,8 @@ const Filter = (props) => {
{props.children}
</FilterStyle>
<FlexRow display='none' as='input' type='radio' value={props.index}
id={props.id} name={props.name} onChange={(e) => onCheckHandler(e)}/>
id={props.id} name={props.name} checked={props.option === props.index}
onChange={(e) => onCheckHandler(e)}/>
</>
);
};

1
src/components/elements/FiltersMenu/FiltersMenu.js
View File

@ -40,7 +40,6 @@ const FiltersMenuStyle = styled(FlexColumn)`
const FiltersMenu = (props) => {
const resetHandler = () => {
console.log('siema');
props.sortByHandler(0);
props.statusHandler(0);
props.challengeTypeHandler(0);

5
src/components/sections/FilterBy.js
View File

@ -29,7 +29,7 @@ const FilterBy = (props) => {
};
return (
<FlexColumn as='fieldset' width='94%' alignmentX='flex-start'>
<FlexColumn as='fieldset' width='100%' alignmentX='flex-start' padding='8px'>
<Media query={theme.mobile}>
<Medium as='legend' textTransform='uppercase' margin='0 0 12px 0'>
{props.header}
@ -39,9 +39,8 @@ const FilterBy = (props) => {
<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' position='relative'>
{renderFilterOptions()}
</Grid>
</FlexColumn>