Skip to content

Commit 0c5993b

Browse files
OustanDingOustanDing
authored
[Improvement] Add mobile responsiveness to applicant facing screens (#235)
* Add mobile responsiveness to applicant facing screens * Mobile fixes for ID verification and review steps
1 parent 2e9f456 commit 0c5993b

File tree

13 files changed

+375
-191
lines changed

13 files changed

+375
-191
lines changed

‎components/applicant/FAQs.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -341,7 +341,7 @@ const TRAVELLING_FAQs: ReadonlyArray<{ question: string; answer: ReactNode | str
341341

342342
const FAQs: FC = () => {
343343
return (
344-
<VStack align="stretch" spacing="24px" mt="24px">
344+
<VStack align="stretch" spacing={{ sm: '32px', md: '24px' }} mt={{ sm: '32px', md: '24px' }}>
345345
<VStack align="flex-start">
346346
<Text as="h2" textStyle="display-small-semibold">
347347
Overview of the parking permit program

‎components/applicant/Layout.tsx‎

Lines changed: 41 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@ import {
1111
Button,
1212
Center,
1313
Text,
14-
Spacer,
1514
Divider,
1615
HStack,
1716
VStack,
17+
Stack,
1818
} from '@chakra-ui/react'; // Chakra UI
1919

2020
type Props = {
@@ -26,15 +26,15 @@ type Props = {
2626
// Applicant Layout component
2727
export default function Layout({ children, header = true, footer = true }: Props) {
2828
return (
29-
<Box textAlign="center">
29+
<Box width="100vw" textAlign="center">
3030
<Meta />
31-
<Flex flexDirection="column" alignItems="center" minHeight="100vh">
31+
<Flex width="100%" flexDirection="column" alignItems="stretch" minHeight="100vh">
3232
{header && <Header />}
3333
<Flex
3434
flexGrow={1}
3535
width="100%"
3636
justifyContent="center"
37-
paddingY="64px"
37+
paddingY={{ sm: '44px', lg: '64px' }}
3838
backgroundColor="background.white"
3939
>
4040
<ApplicantGrid>{children}</ApplicantGrid>
@@ -66,8 +66,8 @@ function Meta() {
6666
function Header() {
6767
return (
6868
<Center height="108px" width="100%" backgroundColor="background.grey">
69-
<ApplicantGrid alignItems="center" isContent={false}>
70-
<GridItem colSpan={10}>
69+
<ApplicantGrid alignItems="center">
70+
<GridItem colSpan={{ sm: 12, lg: 10 }}>
7171
<HStack align="center" spacing="12px">
7272
<Link href="/">
7373
<Flex justifyContent="left" cursor="pointer">
@@ -84,7 +84,7 @@ function Header() {
8484
</VStack>
8585
</HStack>
8686
</GridItem>
87-
<GridItem colStart={11} colSpan={2}>
87+
<GridItem colStart={11} colSpan={2} display={{ sm: 'none', lg: 'initial' }}>
8888
<a href="https://www.rcdrichmond.org/">
8989
<Button height="48px" px="24px" py="12px" variant="outline" size="lg">
9090
Go to main site
@@ -99,17 +99,22 @@ function Header() {
9999
// Footer
100100
function Footer() {
101101
return (
102-
<Center flexDirection="column" width="100%" paddingTop={20} backgroundColor="background.grey">
103-
<ApplicantGrid marginBottom={10} isContent={false}>
104-
<GridItem colSpan={2} textAlign="left">
102+
<Center
103+
flexDirection="column"
104+
width="100%"
105+
paddingTop={{ sm: '32px', lg: '48px' }}
106+
backgroundColor="background.grey"
107+
>
108+
<ApplicantGrid marginBottom={10}>
109+
<GridItem colSpan={{ sm: 12, lg: 2 }} textAlign={{ sm: 'center', lg: 'left' }}>
105110
<Image src="/assets/logo.svg" alt="RCD Logo" height={92} width={82} priority />
106111
<a href="https://www.rcdrichmond.org/">
107112
<Text textStyle="heading">Go to main site</Text>
108113
</a>
109114
</GridItem>
110-
<GridItem colStart={3} colSpan={10}>
111-
<Flex>
112-
<Box flexGrow={1} textAlign="left">
115+
<GridItem colStart={{ sm: 1, lg: 3 }} colSpan={{ sm: 12, lg: 10 }}>
116+
<Stack direction={{ sm: 'column', lg: 'row' }} spacing={{ sm: '32px', lg: '16px' }}>
117+
<Box flexGrow={1} textAlign={{ sm: 'center', lg: 'left' }}>
113118
<Text marginBottom={4} textStyle="body-bold">
114119
Location
115120
</Text>
@@ -124,22 +129,17 @@ function Footer() {
124129
</Text>
125130
</Box>
126131

127-
<Spacer minWidth={16} />
128-
<Box flexGrow={1} textAlign="left">
132+
<Box flexGrow={1} textAlign={{ sm: 'center', lg: 'left' }}>
129133
<Text marginBottom={4} textStyle="body-bold">
130134
Hours
131135
</Text>
132136
<Text textStyle="caption">Monday to Friday </Text>
133137
<Text textStyle="caption" marginBottom={4}>
134138
11 a.m. to 4 p.m.
135139
</Text>
136-
<Text textStyle="caption">
137-
We are closed on
138-
<br /> statutory holidays
139-
</Text>
140+
<Text textStyle="caption">We are closed on statutory holidays</Text>
140141
</Box>
141-
<Spacer minWidth={16} />
142-
<Box flexGrow={1} textAlign="left">
142+
<Box flexGrow={1} textAlign={{ sm: 'center', lg: 'left' }}>
143143
<Text marginBottom={4} textStyle="body-bold">
144144
Social Media
145145
</Text>
@@ -164,21 +164,31 @@ function Footer() {
164164
</Text>
165165
</a>
166166
</Box>
167-
<Spacer minWidth={16} />
168-
<Box flexGrow={1} textAlign="left">
167+
<Box flexGrow={1} textAlign={{ sm: 'center', lg: 'left' }}>
169168
<Text marginBottom={4} textStyle="body-bold">
170169
Contact Info
171170
</Text>
172171
<Text textStyle="caption">Tel: 604-232-2404</Text>
173172
<a href="mailto:parkingpermit@rcdrichmond.org">
174-
<Text textStyle="caption">Email: parkingpermit@rcdrichmond.org</Text>
173+
<Text textStyle="caption" wordBreak="break-all">
174+
Email: parkingpermit@rcdrichmond.org
175+
</Text>
175176
</a>
176177
</Box>
177-
</Flex>
178+
</Stack>
178179
</GridItem>
179180
</ApplicantGrid>
180-
<Divider />
181-
<Flex width="100%" maxWidth="1200px" paddingY={10} justifyContent="space-between">
181+
<Box width="100%" paddingX={{ sm: '32px', md: '80px', lg: 'initial' }}>
182+
<Divider />
183+
</Box>
184+
<Flex
185+
width="100%"
186+
maxWidth="1200px"
187+
paddingY={10}
188+
paddingX={{ sm: '32px', md: '80px', lg: 'initial' }}
189+
flexDirection={{ sm: 'column', md: 'initial' }}
190+
justifyContent="space-between"
191+
>
182192
<Text textStyle="body-regular">© 2021 Richmond Centre for Disability</Text>
183193
<Box>
184194
<a href="#">
@@ -202,23 +212,17 @@ type ApplicantGridProps = {
202212
children: ReactNode;
203213
alignItems?: string;
204214
marginBottom?: number;
205-
isContent?: boolean;
206215
};
207216

208-
function ApplicantGrid({
209-
children,
210-
alignItems,
211-
marginBottom,
212-
isContent = true,
213-
}: ApplicantGridProps) {
217+
function ApplicantGrid({ children, alignItems, marginBottom }: ApplicantGridProps) {
214218
return (
215219
<Grid
216220
flexGrow={1}
217221
width="100%"
218-
maxWidth={{ xl: '1200px' }}
219-
marginX={isContent ? '120px' : undefined}
222+
maxWidth={{ lg: '1200px' }}
223+
marginX={{ sm: '16px', md: '80px', lg: '120px' }}
220224
templateColumns="repeat(12, 1fr)"
221-
gap="20px"
225+
gap={{ sm: '8px', md: '32px', lg: '20px' }}
222226
alignItems={alignItems}
223227
marginBottom={marginBottom}
224228
>

‎components/applicant/renewals/IdentityVerification.tsx‎

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
AlertDescription,
1919
VStack,
2020
AlertTitle,
21+
Stack,
2122
} from '@chakra-ui/react'; // Chakra UI
2223
import { InfoOutlineIcon } from '@chakra-ui/icons'; // Chakra UI Icons
2324
import TOSModal from '@components/applicant/renewals/TOSModal'; // TOS Modal
@@ -82,10 +83,14 @@ const IdentityVerification: FC = () => {
8283
};
8384

8485
return (
85-
<GridItem colSpan={8} colStart={3}>
86+
<GridItem colSpan={{ sm: 12, md: 8 }} colStart={{ sm: 1, md: 3 }}>
8687
<Flex width="100%" justifyContent="flex-start">
8788
<Flex width="100%" flexFlow="column" alignItems="flex-start">
88-
<Text as="h2" textStyle="display-medium-bold" mb="20px">
89+
<Text
90+
as="h2"
91+
textStyle={{ sm: 'heading', md: 'display-medium-bold' }}
92+
mb={{ sm: '40px', md: '48px' }}
93+
>
8994
Renewal Form
9095
</Text>
9196
<Alert status="info" marginBottom="48px">
@@ -102,7 +107,11 @@ const IdentityVerification: FC = () => {
102107
</AlertDescription>
103108
</VStack>
104109
</Alert>
105-
<Text as="h1" textStyle="display-xlarge" mb="20px">{`Verify your Identity`}</Text>
110+
<Text
111+
as="h1"
112+
textStyle={{ sm: 'display-medium-bold', md: 'display-xlarge' }}
113+
mb="20px"
114+
>{`Verify your Identity`}</Text>
106115
<Text as="p" textStyle="body-bold" textAlign="left" marginBottom="20px">
107116
{`You must have a record with Richmond Centre for Disability before proceeding. Please fill
108117
out the information below so we may validate your identity:`}
@@ -154,7 +163,7 @@ const IdentityVerification: FC = () => {
154163
/>
155164
</Box>
156165

157-
<Box marginBottom="20px" textAlign={'left'}>
166+
<Box marginBottom={{ sm: '40px', md: '20px' }} textAlign={'left'}>
158167
<DateField name="dateOfBirth" label="Date of Birth" width="184px">
159168
<FormHelperText>
160169
<Text>Please enter your date of birth in YYYY-MM-DD format.</Text>
@@ -177,9 +186,14 @@ const IdentityVerification: FC = () => {
177186
</Box>
178187
)}
179188

180-
<Flex width="100%" justifyContent="flex-end">
189+
<Stack
190+
width="100%"
191+
direction={{ sm: 'column-reverse', md: 'row' }}
192+
justifyContent="flex-end"
193+
spacing={{ sm: '16px', md: '12px' }}
194+
>
181195
<Link href="/">
182-
<Button variant="outline" marginRight="12px">{`Go back to home page`}</Button>
196+
<Button variant="outline">{`Go back to home page`}</Button>
183197
</Link>
184198
<Button
185199
type="submit"
@@ -193,7 +207,7 @@ const IdentityVerification: FC = () => {
193207
!values.dateOfBirth
194208
}
195209
>{`Continue`}</Button>
196-
</Flex>
210+
</Stack>
197211
</Form>
198212
)}
199213
</Formik>

‎components/applicant/renewals/RenewalForm/AdditionalInformationSection.tsx‎

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Box, Button, Flex, HStack, Radio, VStack } from '@chakra-ui/react';
1+
import { Box, Button, Radio, Stack, VStack } from '@chakra-ui/react';
22
import RadioGroupField from '@components/form/RadioGroupField';
33
import TextArea from '@components/form/TextAreaField';
44
import RenewalFlow from '@containers/RenewalFlow';
@@ -59,10 +59,10 @@ const AdditionalInformationSection: FC = () => {
5959
required
6060
value={Number(values.usesAccessibleConvertedVan)}
6161
>
62-
<HStack spacing="32px">
62+
<Stack direction={{ sm: 'column', md: 'row' }} spacing={{ md: '32px' }}>
6363
<Radio value={1}>{'Yes, I am'}</Radio>
6464
<Radio value={0}>{'No, I am not'}</Radio>
65-
</HStack>
65+
</Stack>
6666
</RadioGroupField>
6767
{Number(values.usesAccessibleConvertedVan) === 1 && (
6868
<RadioGroupField
@@ -71,10 +71,10 @@ const AdditionalInformationSection: FC = () => {
7171
required
7272
value={values.accessibleConvertedVanLoadingMethod || undefined}
7373
>
74-
<HStack spacing="32px">
74+
<Stack direction={{ sm: 'column', md: 'row' }} spacing={{ md: '32px' }}>
7575
<Radio value="SIDE_LOADING">Side loading</Radio>
7676
<Radio value="END_LOADING">End loading</Radio>
77-
</HStack>
77+
</Stack>
7878
</RadioGroupField>
7979
)}
8080
<RadioGroupField
@@ -83,10 +83,10 @@ const AdditionalInformationSection: FC = () => {
8383
required
8484
value={Number(values.requiresWiderParkingSpace)}
8585
>
86-
<HStack spacing="32px">
86+
<Stack direction={{ sm: 'column', md: 'row' }} spacing={{ md: '32px' }}>
8787
<Radio value={1}>{'Yes, I do'}</Radio>
8888
<Radio value={0}>{'No, I do not'}</Radio>
89-
</HStack>
89+
</Stack>
9090
</RadioGroupField>
9191
{Number(values.requiresWiderParkingSpace) === 1 && (
9292
<RadioGroupField
@@ -95,11 +95,15 @@ const AdditionalInformationSection: FC = () => {
9595
required
9696
value={values.requiresWiderParkingSpaceReason || undefined}
9797
>
98-
<VStack align="flex-start">
98+
<Stack
99+
align="flex-start"
100+
direction={{ sm: 'column', md: 'row' }}
101+
spacing={{ md: '32px' }}
102+
>
99103
<Radio value="HAS_ACCESSIBLE_VAN">I have an accessible van</Radio>
100104
<Radio value="MEDICAL_REASONS">For medical reasons</Radio>
101105
<Radio value="OTHER">Other</Radio>
102-
</VStack>
106+
</Stack>
103107
</RadioGroupField>
104108
)}
105109
{Number(values.requiresWiderParkingSpace) === 1 &&
@@ -108,12 +112,18 @@ const AdditionalInformationSection: FC = () => {
108112
)}
109113
</VStack>
110114
{!isValid && <IncompleteSectionAlert />}
111-
<Flex width="100%" justifyContent="flex-end" mt="40px">
112-
<Button variant="outline" onClick={prevStep} marginRight="32px">{`Previous`}</Button>
115+
<Stack
116+
width="100%"
117+
direction={{ sm: 'column-reverse', md: 'row' }}
118+
spacing={{ sm: '12px', md: '32px' }}
119+
justifyContent="flex-end"
120+
mt="40px"
121+
>
122+
<Button variant="outline" onClick={prevStep}>{`Previous`}</Button>
113123
<Button variant="solid" type="submit" isDisabled={!isValid}>
114124
{isReviewing ? `Review request` : `Next`}
115125
</Button>
116-
</Flex>
126+
</Stack>
117127
</Box>
118128
</Form>
119129
)}

‎components/applicant/renewals/RenewalForm/ContactInformationSection.tsx‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Box, Button, Flex, FormHelperText, HStack, Radio, Text, VStack } from '@chakra-ui/react';
1+
import { Box, Button, FormHelperText, Radio, Stack, Text, VStack } from '@chakra-ui/react';
22
import CheckboxField from '@components/form/CheckboxField';
33
import RadioGroupField from '@components/form/RadioGroupField';
44
import TextField from '@components/form/TextField';
@@ -72,10 +72,10 @@ const ContactInformationSection: FC = () => {
7272
values.updatedContactInfo === null ? undefined : Number(values.updatedContactInfo)
7373
}
7474
>
75-
<HStack spacing="32px">
75+
<Stack direction={{ sm: 'column', md: 'row' }} spacing={{ md: '32px' }}>
7676
<Radio value={1}>{`Yes, I have`}</Radio>
7777
<Radio value={0}>{'No, I have not'}</Radio>
78-
</HStack>
78+
</Stack>
7979
</RadioGroupField>
8080
{/* Conditionally render form based on whether contact info was updated */}
8181
{!!Number(values.updatedContactInfo) && (
@@ -105,12 +105,18 @@ const ContactInformationSection: FC = () => {
105105
</Box>
106106
)}
107107
{!isValid && <IncompleteSectionAlert />}
108-
<Flex width="100%" justifyContent="flex-end" mt="40px">
109-
<Button variant="outline" onClick={prevStep} marginRight="32px">{`Previous`}</Button>
108+
<Stack
109+
width="100%"
110+
direction={{ sm: 'column-reverse', md: 'row' }}
111+
justifyContent="flex-end"
112+
spacing={{ sm: '12px', md: '32px' }}
113+
mt="40px"
114+
>
115+
<Button variant="outline" onClick={prevStep}>{`Previous`}</Button>
110116
<Button variant="solid" isDisabled={!isValid} type="submit">
111117
{isReviewing ? `Review request` : `Next`}
112118
</Button>
113-
</Flex>
119+
</Stack>
114120
</Box>
115121
</Form>
116122
)}

0 commit comments

Comments
 (0)