Skip to content

Commit 0202080

Browse files
pkoivistopkoivisto
committed
YKI(Frontend): Rewrite exam session listing on mobile. Use multiple cells per row, use CSS to force into responsive shape. [deploy]
1 parent 576d465 commit 0202080

File tree

5 files changed

+72
-48
lines changed

5 files changed

+72
-48
lines changed

‎frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListingHeader.tsx‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,21 @@
11
import { TableCell, TableHead, TableRow } from '@mui/material';
2-
import { useWindowProperties } from 'shared/hooks';
32

43
import { useCommonTranslation } from 'configs/i18n';
54

65
export const PublicExamSessionListingHeader = () => {
76
const translateCommon = useCommonTranslation();
8-
const { isPhone } = useWindowProperties();
97

108
return (
11-
<TableHead className="heading-text">
12-
{!isPhone && (
13-
<TableRow>
14-
<TableCell>{translateCommon('examSession')}</TableCell>
15-
<TableCell>{translateCommon('examDate')}</TableCell>
16-
<TableCell>{translateCommon('institution')}</TableCell>
17-
<TableCell>{translateCommon('registrationPeriod')}</TableCell>
18-
<TableCell>{translateCommon('price')}</TableCell>
19-
<TableCell>{translateCommon('placesAvailable')}</TableCell>
20-
<TableCell>{translateCommon('actions')}</TableCell>
21-
</TableRow>
22-
)}
9+
<TableHead className="heading-text public-exam-session-listing__header">
10+
<TableRow>
11+
<TableCell>{translateCommon('examSession')}</TableCell>
12+
<TableCell>{translateCommon('examDate')}</TableCell>
13+
<TableCell>{translateCommon('institution')}</TableCell>
14+
<TableCell>{translateCommon('registrationPeriod')}</TableCell>
15+
<TableCell>{translateCommon('price')}</TableCell>
16+
<TableCell>{translateCommon('placesAvailable')}</TableCell>
17+
<TableCell>{translateCommon('actions')}</TableCell>
18+
</TableRow>
2319
</TableHead>
2420
);
2521
};

‎frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListingRow.tsx‎

Lines changed: 35 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,8 @@ import { ExamSessionUtils } from 'utils/examSession';
2020

2121
const RegisterToExamButton = ({
2222
examSession,
23-
ariaLabelPrefix,
2423
}: {
2524
examSession: ExamSession;
26-
ariaLabelPrefix?: string;
2725
}) => {
2826
const dispatch = useAppDispatch();
2927
const { t } = usePublicTranslation({
@@ -34,12 +32,6 @@ const RegisterToExamButton = ({
3432
const { availablePlaces, availableQueue } =
3533
ExamSessionUtils.getEffectiveRegistrationPeriodDetails(examSession);
3634

37-
const label = availablePlaces
38-
? t('register')
39-
: availableQueue
40-
? t('orderCancellationNotification')
41-
: t('full');
42-
4335
return (
4436
<CustomButtonLink
4537
color={Color.Secondary}
@@ -50,9 +42,12 @@ const RegisterToExamButton = ({
5042
}}
5143
to={AppRoutes.ExamSession.replace(/:examSessionId$/, `${examSession.id}`)}
5244
fullWidth={isPhone}
53-
aria-label={ariaLabelPrefix ? `${ariaLabelPrefix}: ${label}` : undefined}
5445
>
55-
{label}
46+
{availablePlaces
47+
? t('register')
48+
: availableQueue
49+
? t('orderCancellationNotification')
50+
: t('full')}
5651
</CustomButtonLink>
5752
);
5853
};
@@ -113,7 +108,7 @@ const AdmissionPeriodText = ({ examSession }: { examSession: ExamSession }) => {
113108
} else {
114109
return (
115110
<>
116-
{translateCommon('postAdmission')}:<br />
111+
{translateCommon('postAdmission')}:<br aria-hidden={true} />
117112
{renderAdmissionPeriod(relevantPeriod)}
118113
</>
119114
);
@@ -174,43 +169,52 @@ const PublicExamSessionListingCellsForPhone = ({
174169
const translateCommon = useCommonTranslation();
175170

176171
return (
177-
<TableCell>
178-
<div className="rows grow gapped-xs">
172+
<>
173+
<TableCell>
179174
<Typography variant="h2" component="p">
180175
{ExamSessionUtils.languageAndLevelText(examSession)}
181176
</Typography>
177+
</TableCell>
178+
<TableCell>
182179
<Text>
183-
<b>{translateCommon('examDate')}</b>
184-
<br />
180+
<b aria-hidden={true}>{translateCommon('examDate')}</b>
181+
<br aria-hidden={true} />
185182
{DateUtils.formatOptionalDate(examSession.session_date, 'l')}
186183
</Text>
184+
</TableCell>
185+
<TableCell>
187186
<Text>
188-
<b>{translateCommon('institution')}</b>
189-
<br />
187+
<b aria-hidden={true}>{translateCommon('institution')}</b>
188+
<br aria-hidden={true} />
190189
{locationInfo.name}
191-
<br />
190+
<br aria-hidden={true} />
192191
{ExamSessionUtils.getMunicipality(locationInfo)}
193192
</Text>
193+
</TableCell>
194+
<TableCell>
194195
<Text>
195-
<b>{translateCommon('registrationPeriod')}</b>
196-
<br />
196+
<b aria-hidden={true}>{translateCommon('registrationPeriod')}</b>
197+
<br aria-hidden={true} />
197198
<AdmissionPeriodText examSession={examSession} />
198199
</Text>
200+
</TableCell>
201+
<TableCell>
199202
<Text>
200-
<b>{translateCommon('price')}</b>
201-
<br />
203+
<b aria-hidden={true}>{translateCommon('price')}</b>
204+
<br aria-hidden={true} />
202205
{examSession.exam_fee} €
203206
</Text>
207+
</TableCell>
208+
<TableCell>
204209
<Text>
205-
<b>{translateCommon('placesAvailable')}</b>
206-
<br />
210+
<b aria-hidden={true}>{translateCommon('placesAvailable')}</b>
211+
<br aria-hidden={true} />
207212
{availablePlacesText}
208213
</Text>
214+
</TableCell>
215+
<TableCell>
209216
{registerActionAvailable ? (
210-
<RegisterToExamButton
211-
examSession={examSession}
212-
ariaLabelPrefix={translateCommon('actions')}
213-
/>
217+
<RegisterToExamButton examSession={examSession} />
214218
) : (
215219
<Text
216220
className="centered uppercase"
@@ -219,8 +223,8 @@ const PublicExamSessionListingCellsForPhone = ({
219223
<RegistrationUnavailableText examSession={examSession} />
220224
</Text>
221225
)}
222-
</div>
223-
</TableCell>
226+
</TableCell>
227+
</>
224228
);
225229
};
226230

@@ -248,7 +252,7 @@ export const PublicExamSessionListingRow = ({
248252

249253
if (isPhone) {
250254
return (
251-
<TableRow>
255+
<TableRow className="rows gapped-xs">
252256
<PublicExamSessionListingCellsForPhone
253257
examSession={examSession}
254258
availablePlacesText={availablePlacesText}

‎frontend/packages/yki/src/styles/components/registration/_exam-session-listing.scss‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.public-exam-session-listing {
2+
@include phone {
3+
thead {
4+
display: none;
5+
}
6+
7+
tr {
8+
border-bottom: 1px solid $color-divider;
9+
display: flex;
10+
padding: 1.6rem;
11+
}
12+
13+
td {
14+
border: 0;
15+
display: block;
16+
padding: 0;
17+
}
18+
}
19+
}

‎frontend/packages/yki/src/styles/styles.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
@import 'components/layouts/footer';
1010
@import 'components/layouts/session-header';
1111
@import 'components/registration/exam-session-filters';
12+
@import 'components/registration/exam-session-listing';
1213
@import 'components/registration/public-registration';
1314

1415
// Pages

‎frontend/packages/yki/src/tests/jest/components/registration/examSession/__snapshots__/PublicExamSessionListing.test.tsx.snap‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ Array [
139139
role={null}
140140
>
141141
<thead
142-
className="MuiTableHead-root heading-text css-15wwp11-MuiTableHead-root"
142+
className="MuiTableHead-root heading-text public-exam-session-listing__header css-15wwp11-MuiTableHead-root"
143143
role={null}
144144
>
145145
<tr
@@ -232,7 +232,9 @@ Array [
232232
>
233233
postAdmission
234234
:
235-
<br />
235+
<br
236+
aria-hidden={true}
237+
/>
236238
<span
237239
aria-label="6/1/2023 klo 10.00 — 8/1/2023 klo 16.00"
238240
>
@@ -295,7 +297,9 @@ Array [
295297
>
296298
postAdmission
297299
:
298-
<br />
300+
<br
301+
aria-hidden={true}
302+
/>
299303
<span
300304
aria-label="8/1/2023 klo 10.00 — 9/1/2024 klo 16.00"
301305
>

0 commit comments

Comments
 (0)