Skip to content

Commit 751b19e

Browse files
wbglaeserwbglaeser
committed
fix button sizes on mobile
1 parent e99f468 commit 751b19e

10 files changed

Lines changed: 93 additions & 60 deletions

‎src/ui/language/translations.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -254,6 +254,8 @@ const translations = {
254254
administrativeLevels: "Administrative level",
255255
providingAgencies: "Providing agency",
256256
associatedLaws: "Associated law",
257+
btnClose: "Close filter",
258+
btn: "Open filter",
257259
tags: "Tag",
258260
},
259261
item: {
@@ -634,6 +636,8 @@ const translations = {
634636
administrativeLevels: "Verwaltungsebene",
635637
providingAgencies: "Zuständige Behörde",
636638
associatedLaws: "Zugehöriges Gesetz",
639+
btnClose: "Filter schließen",
640+
btn: "Filter öffnen",
637641
tags: "Schlagwort"
638642
},
639643
item: {

‎src/ui/screens/benefit-page/components/BenefitPageHeader.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const BenefitPageHeader = ({ id, benefit, validatedStatus, categoryTitles }) =>
1717
return (
1818
<HBox sx={{ justifyContent: 'space-between', gap: 4, flexWrap: 'wrap' }}>
1919
<VBox sx={{ gap: 2 }}>
20-
<Typography variant="h1">
20+
<Typography variant="h1" sx={{ wordBreak: 'break-word' }}>
2121
{benefit?.title}
2222
</Typography>
2323
<VBox sx={{ gap: 2 }}>

‎src/ui/screens/benefit-page/components/BenefitPageMarkDownElement.js‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const BenefitPageMarkdownElement = ({ content, icon = null }) => {
1212
h4: (props) => <Typography variant="h4" gutterBottom {...props} />,
1313
h5: (props) => <Typography variant="h5" gutterBottom {...props} />,
1414
h6: (props) => <Typography variant="h6" gutterBottom {...props} />,
15-
p: (props) => <Typography variant="body1" component="p" {...props} />,
15+
p: (props) => <Typography variant="body1" component="p" {...props} />,
1616

1717
ul: ({ node, ...props }) => (
1818
<Box
@@ -21,7 +21,8 @@ const BenefitPageMarkdownElement = ({ content, icon = null }) => {
2121
mt: 0.5,
2222
mb: 1.25,
2323
pl: icon ? 0 : 2.25,
24-
listStyle: icon ? "none" : "disc",
24+
listStyleType: icon ? "none" : "disc",
25+
listStylePosition: "outside",
2526
}}
2627
{...props}
2728
/>
@@ -31,27 +32,23 @@ const BenefitPageMarkdownElement = ({ content, icon = null }) => {
3132
return (
3233
<Box
3334
component="li"
34-
sx={{ display: "flex", alignItems: "flex-start", mb: 1, listStyle: "none" }}
35+
sx={{ display: "list-item", mb: 1, listStyleType: "none" }}
3536
{...props}
3637
>
37-
<Box sx={{ mr: 1, mt: "2px" }}>{icon}</Box>
38-
<Box sx={{ flex: 1 }}>
39-
<Typography variant="body1" component="div">
40-
{children}
41-
</Typography>
38+
<Box sx={{ display: "flex", alignItems: "flex-start" }}>
39+
<Box sx={{ mr: 1, mt: "2px" }}>{icon}</Box>
40+
<Typography variant="body1" component="div">{children}</Typography>
4241
</Box>
4342
</Box>
4443
);
4544
}
4645
return (
4746
<Box
4847
component="li"
49-
sx={{ display: "block", mb: 1 }}
48+
sx={{ display: "list-item", mb: 1 }}
5049
{...props}
5150
>
52-
<Typography variant="body1" component="div">
53-
{children}
54-
</Typography>
51+
<Typography variant="body1" component="div">{children}</Typography>
5552
</Box>
5653
);
5754
},

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,12 @@ import EligibilityOverviewFilter from './components/EligibilityOverviewFilter';
99
import RegularButton from "@/ui/shared-components/buttons/RegularButton";
1010
import featureFlags from "@/featureFlags";
1111
import { useSelectedBenefitsStore } from "@/ui/storage/zustand";
12+
import EastIcon from '@mui/icons-material/East';
1213

1314
const EligibilityOverviewScreen = ({
1415
t,
1516
eligibilityData,
17+
isDesktop,
1618
filterOptions,
1719
filters,
1820
onChangeFilters,
@@ -43,6 +45,7 @@ const EligibilityOverviewScreen = ({
4345
<VBox sx={{ gap: { xs: 2, md: 4 } }}>
4446
<EligibilityOverviewFilter
4547
t={t}
48+
isDesktop={isDesktop}
4649
filterOptions={filterOptions}
4750
filters={filters}
4851
onChangeFilters={onChangeFilters}
@@ -53,6 +56,7 @@ const EligibilityOverviewScreen = ({
5356
variant={'blueContained'}
5457
link='/onboarding-welcome'
5558
onClick={doSetSelectedBenefits}
59+
endIcon={<EastIcon/>}
5660
/>
5761
}
5862
{
@@ -62,6 +66,7 @@ const EligibilityOverviewScreen = ({
6266
eligibilityData["social_benefit"] && (
6367
<EligibilityOverviewSection
6468
t={t}
69+
isDesktop={isDesktop}
6570
category={t('app.topicSelection.socialBenefitsTitle')}
6671
eligibilitySection={eligibilityData["social_benefit"]}
6772
/>
@@ -71,6 +76,7 @@ const EligibilityOverviewScreen = ({
7176
eligibilityData["business"] && (
7277
<EligibilityOverviewSection
7378
t={t}
79+
isDesktop={isDesktop}
7480
category={t('app.topicSelection.businessTitle')}
7581
eligibilitySection={eligibilityData["business"]}
7682
/>

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,12 @@ import { useMetadataStore, useSelectedFiltersStore } from '@/ui/storage/zustand'
99
import useProduceValidationReport from './hooks/useProduceValidationReport';
1010
import useFilterEligibilityData from './hooks/useFilterEligibilityData';
1111
import { useInitialiseFilters, useFilterChangeHandler } from './hooks/useBuildFilterSetup';
12+
import { useStore } from "@/ui/shared-components/ViewportUpdater";
1213

1314
const EligibilityOverviewScreenContainer = () => {
1415
const { t } = useTranslation();
1516
const language = useLanguageStore((state) => state.language);
17+
const isDesktop = useStore((state) => state.isDesktop);
1618
const [searchParams, setSearchParams] = useSearchParams();
1719
const { selectedFilters, setSelectedFilters } = useSelectedFiltersStore();
1820

@@ -28,6 +30,7 @@ const EligibilityOverviewScreenContainer = () => {
2830
<EligibilityOverviewScreen
2931
t={t}
3032
eligibilityData={filteredEligibilityData}
33+
isDesktop={isDesktop}
3134
filterOptions={filterOptions}
3235
filters={filters}
3336
onChangeFilters={handleChangeFilters}

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

Lines changed: 53 additions & 34 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,
@@ -13,7 +13,8 @@ import EligibilityOverviewTag from './EligibilityOverviewTag';
1313
import RegularButton from '@/ui/shared-components/buttons/RegularButton';
1414
import theme from '@/theme';
1515

16-
const EligibilityOverviewFilter = ({ t, filterOptions, filters, onChangeFilters }) => {
16+
const EligibilityOverviewFilter = ({ t, filterOptions, isDesktop, filters, onChangeFilters }) => {
17+
const [open, setOpen] = useState(false);
1718
const handleChange = (key) => (event) => {
1819
onChangeFilters(prev => ({
1920
...prev,
@@ -44,30 +45,44 @@ const EligibilityOverviewFilter = ({ t, filterOptions, filters, onChangeFilters
4445
<Typography variant="h4" sx={{ color: 'blue.main', fontWeight: '400' }}>
4546
{t('app.browseAll.filter.title')}
4647
</Typography>
47-
<HBox sx={{ gap: 4, flexWrap: 'wrap' }}>
48-
{Object.keys(filterOptions).length > 0 && (
49-
Object.keys(filterOptions).map((key, index) => (
50-
<FormControl key={index} sx={{ minWidth: 200 }}>
51-
<InputLabel id={`${key}-label`}>{t(`app.browseAll.filter.${key}`)}</InputLabel>
52-
<Select
53-
labelId={`${key}-label`}
54-
multiple
55-
value={filters[key] || []}
56-
onChange={handleChange(key)}
57-
label={t(`app.browseAll.filter.${key}`)}
58-
renderValue={() => t(`app.browseAll.filter.${key}`)}
59-
sx={{ borderRadius: theme.shape.borderRadius }}
60-
>
61-
{filterOptions[key].map(item => (
62-
<MenuItem key={item.id} value={item.id}>
63-
<Checkbox checked={!!filters[key]?.includes(item.id)} /> <ListItemText primary={item.label} />
64-
</MenuItem>
65-
))}
66-
</Select>
67-
</FormControl>
68-
))
69-
)}
70-
</HBox>
48+
{
49+
!isDesktop && (
50+
<RegularButton
51+
onClick={() => setOpen(!open)}
52+
variant={'whiteOutlinedBlue'}
53+
text={open ? 'app.browseAll.filter.btnClose' : 'app.browseAll.filter.btn'}
54+
size={'small'}
55+
/>
56+
)
57+
}
58+
{
59+
(isDesktop || open) && (
60+
<HBox sx={{ gap: 4, flexWrap: 'wrap' }}>
61+
{Object.keys(filterOptions).length > 0 && (
62+
Object.keys(filterOptions).map((key, index) => (
63+
<FormControl key={index} sx={{ minWidth: 200 }}>
64+
<InputLabel id={`${key}-label`}>{t(`app.browseAll.filter.${key}`)}</InputLabel>
65+
<Select
66+
labelId={`${key}-label`}
67+
multiple
68+
value={filters[key] || []}
69+
onChange={handleChange(key)}
70+
label={t(`app.browseAll.filter.${key}`)}
71+
renderValue={() => t(`app.browseAll.filter.${key}`)}
72+
sx={{ borderRadius: theme.shape.borderRadius }}
73+
>
74+
{filterOptions[key].map(item => (
75+
<MenuItem key={item.id} value={item.id}>
76+
<Checkbox checked={!!filters[key]?.includes(item.id)} /> <ListItemText primary={item.label} />
77+
</MenuItem>
78+
))}
79+
</Select>
80+
</FormControl>
81+
))
82+
)}
83+
</HBox>
84+
)
85+
}
7186
</HBox>
7287
{
7388
Object.entries(groupedSelected).length > 0 && (
@@ -84,14 +99,18 @@ const EligibilityOverviewFilter = ({ t, filterOptions, filters, onChangeFilters
8499
</HBox>
85100
)
86101
}
87-
<HBox sx={{ justifyContent: 'flex-end' }}>
88-
<RegularButton
89-
text={'Clear filters'}
90-
variant={'greyContained'}
91-
onClick={() => onChangeFilters(() => ({}))}
92-
size='xsmall'
93-
/>
94-
</HBox>
102+
{
103+
(isDesktop || open) && (
104+
<HBox sx={{ justifyContent: 'flex-end' }}>
105+
<RegularButton
106+
text={'Clear filters'}
107+
variant={'greyContained'}
108+
onClick={() => onChangeFilters(() => ({}))}
109+
size='xsmall'
110+
/>
111+
</HBox>
112+
)
113+
}
95114
</VBox>
96115
);
97116
};

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

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ import RegularButton from '@/ui/shared-components/buttons/RegularButton';
66
import { useSelectedBenefitsStore, useSelectedTopicsStore } from "@/ui/storage/zustand";
77
import EligibilityOverviewTag from './EligibilityOverviewTag';
88
import EligibilityOverviewBanner from './EligibilityOverviewBanner';
9-
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
109
import AddIcon from '@mui/icons-material/Add';
1110
import RemoveIcon from '@mui/icons-material/Remove';
11+
import EastIcon from '@mui/icons-material/East';
1212

1313
const filterKeys = [
1414
'benefitCategories',
@@ -18,7 +18,7 @@ const filterKeys = [
1818
'tags'
1919
];
2020

21-
const EligibilityOverviewItem = ({ t, item, eligible }) => {
21+
const EligibilityOverviewItem = ({ t, item, eligible, isDesktop }) => {
2222
const [isVisible, setIsVisible] = useState(false);
2323
const setSelectedBenefits = useSelectedBenefitsStore((state) => state.setSelectedBenefits);
2424
const clearSelectedTopics = useSelectedTopicsStore((state) => state.clear);
@@ -52,7 +52,7 @@ const EligibilityOverviewItem = ({ t, item, eligible }) => {
5252
<HBox sx={{ alignItems: 'flex-end', gap: 2, flexWrap: 'wrap', width: '100%' }}>
5353
<HBox sx={{ alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
5454
<HBox sx={{ alignItems: 'center', gap: 2, flexWrap: 'wrap' }}>
55-
<Typography variant='h2' sx={{ fontWeight: '400', wordBreak: 'break-word' }}>
55+
<Typography variant='h2' sx={{ fontWeight: '500', wordBreak: 'break-word' }}>
5656
{item.title}
5757
</Typography>
5858
{item.status === "beta" && (
@@ -118,17 +118,19 @@ const EligibilityOverviewItem = ({ t, item, eligible }) => {
118118
<EligibilityOverviewTag
119119
key={tag.id}
120120
tag={tag.label}
121+
isDesktop={isDesktop}
121122
tagType="benefitCategories"
122123
/>
123124
))}
124125
</HBox>
125126
)}
126127
</HBox>
127-
<HBox sx={{ justifyContent: 'flex-end', flexWrap: 'wrap', gap: 2, alignItems: 'center', flex: 3 }}>
128+
<HBox sx={{ justifyContent: { xs: 'flex-start', md: 'flex-end' }, flexWrap: 'wrap', gap: 2, alignItems: 'center', flex: 3 }}>
128129
<RegularButton
129130
variant={'blackOutlined'}
130131
text={'app.browseAll.learnMoreBtn'}
131132
link={`/benefit-page/${item.id}`}
133+
size={isDesktop ? 'medium' : 'small'}
132134
/>
133135
{eligible === 'indeterminate' &&
134136
<RegularButton
@@ -139,7 +141,8 @@ const EligibilityOverviewItem = ({ t, item, eligible }) => {
139141
}}
140142
text={'app.browseAll.checkElBtn'}
141143
link={`/onboarding-welcome`}
142-
endIcon={<ChevronRightIcon sx={{ fontSize: '16px' }} />}
144+
endIcon={<EastIcon sx={{ fontSize: '16px' }} />}
145+
size={isDesktop ? 'medium' : 'small'}
143146
/>
144147
}
145148
</HBox>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Typography } from '@mui/material';
33
import { VBox } from '@/ui/shared-components/LayoutBoxes';
44
import EligibilityOverviewItem from "./EligibilityOverviewItem";
55

6-
const EligibilityOverviewList = ({ t, items, eligible, iconPath }) => {
6+
const EligibilityOverviewList = ({ t, items, isDesktop, eligible, iconPath }) => {
77
const headerText = (() => {
88
switch (eligible) {
99
case 'eligible':
@@ -28,7 +28,7 @@ const EligibilityOverviewList = ({ t, items, eligible, iconPath }) => {
2828
</Typography>
2929
<VBox sx={{ gap: 2 }}>
3030
{sortedItems.map((item, index) => (
31-
<EligibilityOverviewItem t={t} key={index} item={item} eligible={eligible} iconPath={iconPath}/>
31+
<EligibilityOverviewItem t={t} key={index} isDesktop={isDesktop} item={item} eligible={eligible} iconPath={iconPath}/>
3232
))}
3333
</VBox>
3434
</VBox>

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { VBox } from "@/ui/shared-components/LayoutBoxes";
44
import theme from "@/theme";
55
import EligibilityOverviewList from "./EligibilityOverviewList";
66

7-
const EligibilityOverviewSection = ({ t, category, eligibilitySection }) => {
7+
const EligibilityOverviewSection = ({ t, category, isDesktop, eligibilitySection }) => {
88
const eligibleBenefitsComplete = eligibilitySection['ff:eligible'] || [];
99
const ineligibleBenefits = eligibilitySection['ff:ineligible'] || []
1010
const undeterminableBenefits = eligibilitySection['ff:missingData'] || []
@@ -25,11 +25,11 @@ const EligibilityOverviewSection = ({ t, category, eligibilitySection }) => {
2525
}}
2626
>
2727
{eligibleBenefitsComplete.length > 0 &&
28-
<EligibilityOverviewList t={t} items={eligibleBenefitsComplete} eligible={'eligible'} />}
28+
<EligibilityOverviewList t={t} isDesktop={isDesktop} items={eligibleBenefitsComplete} eligible={'eligible'} />}
2929
{ineligibleBenefits.length > 0 &&
30-
<EligibilityOverviewList t={t} items={ineligibleBenefits} eligible={'non-eligible'} />}
30+
<EligibilityOverviewList t={t} isDesktop={isDesktop} items={ineligibleBenefits} eligible={'non-eligible'} />}
3131
{undeterminableBenefits.length > 0 &&
32-
<EligibilityOverviewList t={t} items={undeterminableBenefits} eligible={'indeterminate'} />}
32+
<EligibilityOverviewList t={t} isDesktop={isDesktop} items={undeterminableBenefits} eligible={'indeterminate'} />}
3333
</VBox>
3434
</VBox >
3535
);

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,16 @@ import { Typography } from '@mui/material';
44
import { HBox } from '@/ui/shared-components/LayoutBoxes';
55
import theme from '@/theme';
66

7-
const EligibilityOverTag = ({ tag }) => {
7+
const EligibilityOverTag = ({ tag, isDesktop }) => {
8+
const textSize = isDesktop ? 'body1' : 'body2';
89

910
return (
1011
<HBox sx={{
1112
backgroundColor: 'greyTransparent.main',
1213
padding: '6px 18px',
1314
borderRadius: theme.shape.borderRadius,
1415
}}>
15-
<Typography variant='body1' sx={{}}>
16+
<Typography variant={textSize}>
1617
{tag}
1718
</Typography>
1819
</HBox>

0 commit comments

Comments
 (0)