YKI(Frontend): Rewrite exam session listing on mobile. Use multiple c…

…ells per row, use CSS to force into responsive shape. [deploy]
Opetushallitus · Oct 12, 2023 · 99c3622 · 99c3622
1 parent 783990b
commit 99c3622
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 48 deletions.
diff --git a/...d/packages/yki/src/components/registration/examSession/PublicExamSessionListingHeader.tsx b/...d/packages/yki/src/components/registration/examSession/PublicExamSessionListingHeader.tsx
@@ -1,25 +1,21 @@
 import { TableCell, TableHead, TableRow } from '@mui/material';
-import { useWindowProperties } from 'shared/hooks';
 
 import { useCommonTranslation } from 'configs/i18n';
 
 export const PublicExamSessionListingHeader = () => {
   const translateCommon = useCommonTranslation();
-  const { isPhone } = useWindowProperties();
 
   return (
-    <TableHead className="heading-text">
-      {!isPhone && (
-        <TableRow>
-          <TableCell>{translateCommon('examSession')}</TableCell>
-          <TableCell>{translateCommon('examDate')}</TableCell>
-          <TableCell>{translateCommon('institution')}</TableCell>
-          <TableCell>{translateCommon('registrationPeriod')}</TableCell>
-          <TableCell>{translateCommon('price')}</TableCell>
-          <TableCell>{translateCommon('placesAvailable')}</TableCell>
-          <TableCell>{translateCommon('actions')}</TableCell>
-        </TableRow>
-      )}
+    <TableHead className="heading-text public-exam-session-listing__header">
+      <TableRow>
+        <TableCell>{translateCommon('examSession')}</TableCell>
+        <TableCell>{translateCommon('examDate')}</TableCell>
+        <TableCell>{translateCommon('institution')}</TableCell>
+        <TableCell>{translateCommon('registrationPeriod')}</TableCell>
+        <TableCell>{translateCommon('price')}</TableCell>
+        <TableCell>{translateCommon('placesAvailable')}</TableCell>
+        <TableCell>{translateCommon('actions')}</TableCell>
+      </TableRow>
     </TableHead>
   );
 };
diff --git a/...tend/packages/yki/src/components/registration/examSession/PublicExamSessionListingRow.tsx b/...tend/packages/yki/src/components/registration/examSession/PublicExamSessionListingRow.tsx
@@ -20,10 +20,8 @@ import { ExamSessionUtils } from 'utils/examSession';
 
 const RegisterToExamButton = ({
   examSession,
-  ariaLabelPrefix,
 }: {
   examSession: ExamSession;
-  ariaLabelPrefix?: string;
 }) => {
   const dispatch = useAppDispatch();
   const { t } = usePublicTranslation({
@@ -34,12 +32,6 @@ const RegisterToExamButton = ({
   const { availablePlaces, availableQueue } =
     ExamSessionUtils.getEffectiveRegistrationPeriodDetails(examSession);
 
-  const label = availablePlaces
-    ? t('register')
-    : availableQueue
-    ? t('orderCancellationNotification')
-    : t('full');
-
   return (
     <CustomButtonLink
       color={Color.Secondary}
@@ -50,9 +42,12 @@ const RegisterToExamButton = ({
       }}
       to={AppRoutes.ExamSession.replace(/:examSessionId$/, `${examSession.id}`)}
       fullWidth={isPhone}
-      aria-label={ariaLabelPrefix ? `${ariaLabelPrefix}: ${label}` : undefined}
     >
-      {label}
+      {availablePlaces
+        ? t('register')
+        : availableQueue
+        ? t('orderCancellationNotification')
+        : t('full')}
     </CustomButtonLink>
   );
 };
@@ -113,7 +108,7 @@ const AdmissionPeriodText = ({ examSession }: { examSession: ExamSession }) => {
   } else {
     return (
       <>
-        {translateCommon('postAdmission')}:<br />
+        {translateCommon('postAdmission')}:<br aria-hidden={true} />
         {renderAdmissionPeriod(relevantPeriod)}
       </>
     );
@@ -174,43 +169,52 @@ const PublicExamSessionListingCellsForPhone = ({
   const translateCommon = useCommonTranslation();
 
   return (
-    <TableCell>
-      <div className="rows grow gapped-xs">
+    <>
+      <TableCell>
         <Typography variant="h2" component="p">
           {ExamSessionUtils.languageAndLevelText(examSession)}
         </Typography>
+      </TableCell>
+      <TableCell>
         <Text>
-          <b>{translateCommon('examDate')}</b>
-          <br />
+          <b aria-hidden={true}>{translateCommon('examDate')}</b>
+          <br aria-hidden={true} />
           {DateUtils.formatOptionalDate(examSession.session_date, 'l')}
         </Text>
+      </TableCell>
+      <TableCell>
         <Text>
-          <b>{translateCommon('institution')}</b>
-          <br />
+          <b aria-hidden={true}>{translateCommon('institution')}</b>
+          <br aria-hidden={true} />
           {locationInfo.name}
-          <br />
+          <br aria-hidden={true} />
           {ExamSessionUtils.getMunicipality(locationInfo)}
         </Text>
+      </TableCell>
+      <TableCell>
         <Text>
-          <b>{translateCommon('registrationPeriod')}</b>
-          <br />
+          <b aria-hidden={true}>{translateCommon('registrationPeriod')}</b>
+          <br aria-hidden={true} />
           <AdmissionPeriodText examSession={examSession} />
         </Text>
+      </TableCell>
+      <TableCell>
         <Text>
-          <b>{translateCommon('price')}</b>
-          <br />
+          <b aria-hidden={true}>{translateCommon('price')}</b>
+          <br aria-hidden={true} />
           {examSession.exam_fee} €
         </Text>
+      </TableCell>
+      <TableCell>
         <Text>
-          <b>{translateCommon('placesAvailable')}</b>
-          <br />
+          <b aria-hidden={true}>{translateCommon('placesAvailable')}</b>
+          <br aria-hidden={true} />
           {availablePlacesText}
         </Text>
+      </TableCell>
+      <TableCell>
         {registerActionAvailable ? (
-          <RegisterToExamButton
-            examSession={examSession}
-            ariaLabelPrefix={translateCommon('actions')}
-          />
+          <RegisterToExamButton examSession={examSession} />
         ) : (
           <Text
             className="centered uppercase"
@@ -219,8 +223,8 @@ const PublicExamSessionListingCellsForPhone = ({
             <RegistrationUnavailableText examSession={examSession} />
           </Text>
         )}
-      </div>
-    </TableCell>
+      </TableCell>
+    </>
   );
 };
 
@@ -248,7 +252,7 @@ export const PublicExamSessionListingRow = ({
 
   if (isPhone) {
     return (
-      <TableRow>
+      <TableRow className="rows gapped-xs">
         <PublicExamSessionListingCellsForPhone
           examSession={examSession}
           availablePlacesText={availablePlacesText}

diff --git a/frontend/packages/yki/src/styles/components/registration/_exam-session-listing.scss b/frontend/packages/yki/src/styles/components/registration/_exam-session-listing.scss
@@ -0,0 +1,19 @@
+.public-exam-session-listing {
+  @include phone {
+    thead {
+      display: none;
+    }
+
+    tr {
+      border-bottom: 1px solid $color-divider;
+      display: flex;
+      padding: 1.6rem;
+    }
+
+    td {
+      border: 0;
+      display: block;
+      padding: 0;
+    }
+  }
+}
diff --git a/frontend/packages/yki/src/styles/styles.scss b/frontend/packages/yki/src/styles/styles.scss
@@ -9,6 +9,7 @@
 @import 'components/layouts/footer';
 @import 'components/layouts/session-header';
 @import 'components/registration/exam-session-filters';
+@import 'components/registration/exam-session-listing';
 @import 'components/registration/public-registration';
 
 // Pages

diff --git a/.../components/registration/examSession/__snapshots__/PublicExamSessionListing.test.tsx.snap b/.../components/registration/examSession/__snapshots__/PublicExamSessionListing.test.tsx.snap
@@ -139,7 +139,7 @@ Array [
     role={null}
   >
     <thead
-      className="MuiTableHead-root heading-text css-15wwp11-MuiTableHead-root"
+      className="MuiTableHead-root heading-text public-exam-session-listing__header css-15wwp11-MuiTableHead-root"
       role={null}
     >
       <tr
@@ -232,7 +232,9 @@ Array [
         >
           postAdmission
           :
-          <br />
+          <br
+            aria-hidden={true}
+          />
           <span
             aria-label="6/1/2023 klo 10.00 — 8/1/2023 klo 16.00"
           >
@@ -295,7 +297,9 @@ Array [
         >
           postAdmission
           :
-          <br />
+          <br
+            aria-hidden={true}
+          />
           <span
             aria-label="8/1/2023 klo 10.00 — 9/1/2024 klo 16.00"
           >