Skip to content

Commit bb7d78f

Browse files
wbglaeserwbglaeser
committed
remove filter by default on mobile view
1 parent 13b1dac commit bb7d78f

3 files changed

Lines changed: 80 additions & 52 deletions

File tree

‎src/ui/language/translations.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -656,8 +656,8 @@ const translations = {
656656
tags: "Tags"
657657
},
658658
item: {
659-
eligible: "Sie haben womöglich Anspruch",
660-
notEligible: "Sie haben voraussichtlich keinen Anspruch"
659+
eligible: "Womöglich Anspruch",
660+
notEligible: "Voraussichtlich kein Anspruch"
661661
},
662662
orgTag: "Für Organisationen"
663663
},

‎src/ui/screens/eligibilty-overview/EligibilityOverviewScreen.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ const EligibilityOverviewScreen = ({
4747
filterOptions={filterOptions}
4848
filters={filters}
4949
onChangeFilters={onChangeFilters}
50+
isDesktop={isDesktop}
5051
/>
5152
{atLeastOneWithMissingData() &&
5253
<RegularButton

‎src/ui/screens/eligibilty-overview/components/EligibilityOverviewFilter.js‎

Lines changed: 77 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import {
33
Typography,
44
FormControl,
@@ -7,15 +7,18 @@ import {
77
MenuItem,
88
Checkbox,
99
ListItemText,
10+
IconButton
1011
} from '@mui/material'
1112
import { VBox, HBox } from '@/ui/shared-components/LayoutBoxes';
1213
import EligibilityOverviewTag from './EligibilityOverviewTag';
1314
import RegularButton from '@/ui/shared-components/buttons/RegularButton';
1415
import CloseIcon from '@mui/icons-material/Close';
1516
import FilterAltIcon from '@mui/icons-material/FilterAlt';
17+
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
1618
import theme from '@/theme';
1719

18-
const EligibilityOverviewFilter = ({ t, filterOptions, filters, onChangeFilters }) => {
20+
const EligibilityOverviewFilter = ({ t, filterOptions, filters, onChangeFilters, isDesktop }) => {
21+
const [open, setOpen] = useState(isDesktop);
1922
const handleChange = (key) => (event) => {
2023
onChangeFilters(prev => ({
2124
...prev,
@@ -47,58 +50,82 @@ const EligibilityOverviewFilter = ({ t, filterOptions, filters, onChangeFilters
4750
alignItems: 'center',
4851
flexWrap: 'wrap',
4952
gap: 2,
50-
borderBottom: '1px solid',
53+
borderBottom: open ? '1px solid' : 'none',
5154
borderColor: 'grey.300',
52-
paddingBottom: 2,
55+
paddingBottom: open ? 2 : 0,
5356
}}>
54-
<HBox sx={{ gap: 1, alignItems: 'center' }}>
55-
<FilterAltIcon sx={{ color: 'black.main', fontSize: 24 }} />
56-
<Typography variant="h2" sx={{ fontWeight: 400 }}>
57-
{t('app.browseAll.filter.title')}
58-
</Typography>
59-
</HBox>
60-
<HBox sx={{ justifyContent: 'flex-end' }}>
61-
<RegularButton
62-
text={t('app.browseAll.filter.btnReset')}
63-
variant={'transparentPink'}
64-
onClick={() => onChangeFilters(() => ({}))}
65-
size='small'
66-
endIcon={<CloseIcon sx={{ fontSize: '16px' }} />}
67-
/>
68-
</HBox>
69-
</HBox>
70-
<HBox sx={{
71-
gap: 4,
72-
alignItems: 'center',
73-
flexWrap: 'wrap',
74-
justifyContent: 'space-between'
75-
}}>
76-
<HBox sx={{ gap: 4, flexWrap: 'wrap' }}>
77-
{Object.keys(filterOptions).length > 0 && (
78-
Object.keys(filterOptions).map((key, index) => (
79-
<FormControl key={index} sx={{ minWidth: 200 }}>
80-
<InputLabel id={`${key}-label`}>{t(`app.browseAll.filter.${key}`)}</InputLabel>
81-
<Select
82-
labelId={`${key}-label`}
83-
multiple
84-
value={filters[key] || []}
85-
onChange={handleChange(key)}
86-
label={t(`app.browseAll.filter.${key}`)}
87-
renderValue={() => t(`app.browseAll.filter.${key}`)}
88-
sx={{ borderRadius: theme.shape.borderRadius }}
89-
>
90-
{filterOptions[key].map(item => (
91-
<MenuItem key={item.id} value={item.id}>
92-
<Checkbox checked={!!filters[key]?.includes(item.id)} />
93-
<ListItemText primary={item.label} />
94-
</MenuItem>
95-
))}
96-
</Select>
97-
</FormControl>
98-
))
99-
)}
57+
<HBox sx={{ width: { xs: "100%", sm: "0%" }, alignItems: 'center', justifyContent: 'space-between' }}>
58+
<HBox sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
59+
<FilterAltIcon sx={{ color: 'black.main', fontSize: 24 }} />
60+
<Typography variant="h2" sx={{ fontWeight: 400 }}>
61+
{t('app.browseAll.filter.title')}
62+
</Typography>
63+
</HBox>
64+
{
65+
!isDesktop && (
66+
<IconButton
67+
sx={{
68+
transition: "transform 0.3s",
69+
transform: open ? "rotate(180deg)" : "rotate(0deg)",
70+
marginLeft: "8px",
71+
}}
72+
onClick={() => setOpen(!open)}
73+
>
74+
<ExpandMoreIcon />
75+
</IconButton>
76+
)
77+
}
10078
</HBox>
79+
{
80+
open && Object.entries(groupedSelected).length > 0 && (
81+
<HBox sx={{ justifyContent: 'flex-end' }}>
82+
<RegularButton
83+
text={t('app.browseAll.filter.btnReset')}
84+
variant={'transparentPink'}
85+
onClick={() => onChangeFilters(() => ({}))}
86+
size='xsmall'
87+
endIcon={<CloseIcon sx={{ fontSize: '16px' }} />}
88+
/>
89+
</HBox>
90+
)
91+
}
10192
</HBox>
93+
{
94+
open && (
95+
<HBox sx={{
96+
gap: 4,
97+
alignItems: 'center',
98+
flexWrap: 'wrap',
99+
justifyContent: 'space-between'
100+
}}>
101+
<HBox sx={{ gap: 4, flexWrap: 'wrap' }}>
102+
{Object.keys(filterOptions).length > 0 && (
103+
Object.keys(filterOptions).map((key, index) => (
104+
<FormControl key={index} sx={{ minWidth: 200 }}>
105+
<InputLabel id={`${key}-label`}>{t(`app.browseAll.filter.${key}`)}</InputLabel>
106+
<Select
107+
labelId={`${key}-label`}
108+
multiple
109+
value={filters[key] || []}
110+
onChange={handleChange(key)}
111+
label={t(`app.browseAll.filter.${key}`)}
112+
renderValue={() => t(`app.browseAll.filter.${key}`)}
113+
sx={{ borderRadius: theme.shape.borderRadius }}
114+
>
115+
{filterOptions[key].map(item => (
116+
<MenuItem key={item.id} value={item.id}>
117+
<Checkbox checked={!!filters[key]?.includes(item.id)} />
118+
<ListItemText primary={item.label} />
119+
</MenuItem>
120+
))}
121+
</Select>
122+
</FormControl>
123+
))
124+
)}
125+
</HBox>
126+
</HBox>
127+
)
128+
}
102129
{
103130
Object.entries(groupedSelected).length > 0 && (
104131
<HBox> {

0 commit comments

Comments
 (0)