Merge pull request #584 from Opetushallitus/feature/OPHYKIKEH-305

SHARED:YKI(Frontend): OPHYKIKEH-305 Tutkintolistaustaulukon Toiminnot-sarakkeen tekstit mobiilissa
Opetushallitus · Oct 26, 2023 · 0304c2c · 0304c2c
2 parents fb9e894 + ebd55db
commit 0304c2c
Show file tree

Hide file tree

Showing 12 changed files with 152 additions and 72 deletions.
diff --git a/frontend/packages/shared/CHANGELOG.MD b/frontend/packages/shared/CHANGELOG.MD
@@ -9,6 +9,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Released]
 
+## [1.9.30] - 2023-10-24
+
+### Added
+
+- New utility classes `.uppercase` and `.display-none`
+
 ## [1.9.29] - 2023-10-20
 
 ### Changed

diff --git a/frontend/packages/shared/package.json b/frontend/packages/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opetushallitus/kieli-ja-kaantajatutkinnot.shared",
-  "version": "1.9.29",
+  "version": "1.9.30",
   "description": "Shared Frontend Package",
   "exports": {
     "./components": "./src/components/index.tsx",

diff --git a/frontend/packages/shared/src/styles/abstracts/common/_layout.scss b/frontend/packages/shared/src/styles/abstracts/common/_layout.scss
@@ -1,3 +1,7 @@
+.display-none {
+  display: none;
+}
+
 /* FLEX */
 .rows {
   display: flex;
@@ -75,4 +79,4 @@
   &#{&} {
     table-layout: auto;
   }
-}
+}
diff --git a/frontend/packages/shared/src/styles/abstracts/common/_typography.scss b/frontend/packages/shared/src/styles/abstracts/common/_typography.scss
@@ -48,6 +48,12 @@ thead.heading-text th {
   }
 }
 
+.uppercase {
+  &#{&} {
+    text-transform: uppercase;
+  }
+}
+
 .text-transform-none {
   &#{&} {
     text-transform: none;

diff --git a/frontend/packages/yki/package.json b/frontend/packages/yki/package.json
@@ -26,7 +26,7 @@
     "yki:tslint": "yarn g:tsc --pretty --noEmit"
   },
   "dependencies": {
-    "shared": "npm:@opetushallitus/[email protected].29"
+    "shared": "npm:@opetushallitus/[email protected].30"
   },
   "devDependencies": {
     "multer": "^1.4.5-lts.1"

diff --git a/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListing.tsx b/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListing.tsx
@@ -1,3 +1,4 @@
+import { Typography } from '@mui/material';
 import { LabelDisplayedRowsArgs } from '@mui/material/TablePagination';
 import { Box } from '@mui/system';
 import { TFunction } from 'i18next';
@@ -123,7 +124,9 @@ export const PublicExamSessionListing = ({
       return (
         <>
           <div ref={listingHeaderRef}>
-            <H3
+            <Typography
+              variant="h2"
+              component="h3"
               aria-label={translateCommon(
                 'component.table.header.searchResultsAriaLabel',
                 {
@@ -134,7 +137,7 @@ export const PublicExamSessionListing = ({
               {translateCommon('component.table.header.searchResults', {
                 count: examSessions.length,
               })}
-            </H3>
+            </Typography>
           </div>
           <PublicExamSessionsTable
             examSessions={examSessions}

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
@@ -1,5 +1,6 @@
 import { TableCell, TableRow, Typography } from '@mui/material';
 import dayjs, { Dayjs } from 'dayjs';
+import { ReactNode } from 'react';
 import { CustomButtonLink, Text } from 'shared/components';
 import { Color, Variant } from 'shared/enums';
 import { useWindowProperties } from 'shared/hooks';
@@ -93,7 +94,7 @@ const renderAdmissionPeriod = ({
   return (
     <span aria-label={`${startTimeStr} — ${endTimeStr}`}>
       {startTimeStr} —
-      <br />
+      <br aria-hidden={true} />
       {endTimeStr}
     </span>
   );
@@ -108,7 +109,8 @@ const AdmissionPeriodText = ({ examSession }: { examSession: ExamSession }) => {
   } else {
     return (
       <>
-        {translateCommon('postAdmission')}:<br />
+        {translateCommon('postAdmission')}:
+        <br aria-hidden={true} />
         {renderAdmissionPeriod(relevantPeriod)}
       </>
     );
@@ -155,6 +157,21 @@ const PublicExamSessionListingCellsForDesktop = ({
   );
 };
 
+const TableCellForPhone = ({
+  columnName,
+  children,
+}: {
+  columnName: string;
+  children: ReactNode;
+}) => (
+  <TableCell>
+    <Typography variant="h3" component="h5">
+      {columnName}
+    </Typography>
+    <Text>{children}</Text>
+  </TableCell>
+);
+
 const PublicExamSessionListingCellsForPhone = ({
   examSession,
   locationInfo,
@@ -169,47 +186,44 @@ const PublicExamSessionListingCellsForPhone = ({
   const translateCommon = useCommonTranslation();
 
   return (
-    <TableCell>
-      <div className="rows grow gapped-xs">
-        <Typography variant="h2" component="p">
+    <>
+      <TableCell>
+        <Typography variant="h2" component="h4">
           {ExamSessionUtils.languageAndLevelText(examSession)}
         </Typography>
-        <Text>
-          <b>{translateCommon('examDate')}</b>
-          <br />
-          {DateUtils.formatOptionalDate(examSession.session_date, 'l')}
-        </Text>
-        <Text>
-          <b>{translateCommon('institution')}</b>
-          <br />
-          {locationInfo.name}
-          <br />
-          {ExamSessionUtils.getMunicipality(locationInfo)}
-        </Text>
-        <Text>
-          <b>{translateCommon('registrationPeriod')}</b>
-          <br />
-          <AdmissionPeriodText examSession={examSession} />
-        </Text>
-        <Text>
-          <b>{translateCommon('price')}</b>
-          <br />
-          {examSession.exam_fee} €
-        </Text>
-        <Text>
-          <b>{translateCommon('placesAvailable')}</b>
-          <br />
-          {availablePlacesText}
-        </Text>
+      </TableCell>
+      <TableCellForPhone columnName={translateCommon('examDate')}>
+        {DateUtils.formatOptionalDate(examSession.session_date, 'l')}
+      </TableCellForPhone>
+      <TableCellForPhone columnName={translateCommon('institution')}>
+        {locationInfo.name}
+        <br aria-hidden={true} />
+        {ExamSessionUtils.getMunicipality(locationInfo)}
+      </TableCellForPhone>
+      <TableCellForPhone columnName={translateCommon('registrationPeriod')}>
+        <AdmissionPeriodText examSession={examSession} />
+      </TableCellForPhone>
+      <TableCellForPhone columnName={translateCommon('price')}>
+        {examSession.exam_fee} €
+      </TableCellForPhone>
+      <TableCellForPhone columnName={translateCommon('placesAvailable')}>
+        {availablePlacesText}
+      </TableCellForPhone>
+      <TableCell>
         {registerActionAvailable ? (
           <RegisterToExamButton examSession={examSession} />
         ) : (
-          <Text>
-            <RegistrationUnavailableText examSession={examSession} />
-          </Text>
+          <>
+            <Typography variant="h3" component="h5" className="display-none">
+              {translateCommon('actions')}
+            </Typography>
+            <Text className="centered uppercase">
+              <RegistrationUnavailableText examSession={examSession} />
+            </Text>
+          </>
         )}
-      </div>
-    </TableCell>
+      </TableCell>
+    </>
   );
 };
 
@@ -237,7 +251,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