SHARED:VKT(Frontend): Add and use new utility class 'gapped-xxxxl', m…

…iscellaneous UI improvements
Opetushallitus · Dec 30, 2024 · 4b255c2 · 4b255c2
1 parent b3d6f5b
commit 4b255c2
Show file tree

Hide file tree

Showing 12 changed files with 41 additions and 20 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.11.12] - 2024-12-30
+
+### Added
+
+- Class shorthand for larger gaps: gapped-xxxxl
+
 ## [1.11.11] - 2024-12-27
 
 ### 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.11.11",
+  "version": "1.11.12",
   "description": "Shared Frontend Package",
   "exports": {
     "./components": "./src/components/index.tsx",

diff --git a/frontend/packages/shared/src/styles/abstracts/common/_spacing.scss b/frontend/packages/shared/src/styles/abstracts/common/_spacing.scss
@@ -90,6 +90,10 @@
   gap: map.get($spacing, 'xxl');
 }
 
+.gapped-xxxxl {
+  gap: map.get($spacing, 'xxxxl');
+}
+
 .gapped-sm {
   gap: map.get($spacing, 'sm');
 }

diff --git a/frontend/packages/vkt/package.json b/frontend/packages/vkt/package.json
@@ -25,6 +25,6 @@
   },
   "dependencies": {
     "reduxjs-toolkit-persist": "^7.2.1",
-    "shared": "npm:@opetushallitus/[email protected].11"
+    "shared": "npm:@opetushallitus/[email protected].12"
   }
 }
diff --git a/frontend/packages/vkt/public/i18n/fi-FI/clerk.json b/frontend/packages/vkt/public/i18n/fi-FI/clerk.json
@@ -203,7 +203,7 @@
           "examiner": "Tutkinnon vastaanottaja",
           "language": "Kieli"
         },
-        "title": "Tutkinnon vastaanottajan tiedot"
+        "title": "Tutkinnon vastaanottajien tiedot"
       },
       "header": {
         "backToOph": "Takaisin Opintopolkuun",

diff --git a/frontend/packages/vkt/src/components/clerkExaminer/ClerkExaminerExamEventListing.tsx b/frontend/packages/vkt/src/components/clerkExaminer/ClerkExaminerExamEventListing.tsx
@@ -42,7 +42,7 @@ export const ClerkExaminerExamEventListing = () => {
   // TODO Table sorting not implemented yet!
 
   return (
-    <>
+    <div className="rows gapped clerk-homepage__extra-padding-top">
       <div className="columns">
         <div className="clerk-homepage__grid-container__heading">
           <H2>{t('title')}</H2>
@@ -66,6 +66,6 @@ export const ClerkExaminerExamEventListing = () => {
         rowsPerPageLabel={translateCommon('rowsPerPageLabel')}
         stickyHeader
       />
-    </>
+    </div>
   );
 };
diff --git a/frontend/packages/vkt/src/components/clerkExaminer/ClerkExaminerListing.tsx b/frontend/packages/vkt/src/components/clerkExaminer/ClerkExaminerListing.tsx
@@ -159,7 +159,7 @@ export const ClerkExaminerListing = () => {
   const examiners = useAppSelector(selectFilteredExaminers);
 
   return (
-    <>
+    <div className="rows gapped clerk-homepage__extra-padding-top">
       <div className="clerk-homepage__grid-container__heading columns grow">
         <H2>{t('title')}</H2>
       </div>
@@ -172,6 +172,6 @@ export const ClerkExaminerListing = () => {
         getRowDetails={getRowDetails}
         stickyHeader
       />
-    </>
+    </div>
   );
 };
diff --git a/frontend/packages/vkt/src/components/examinerExamEvent/listing/ExaminerExamEventListing.tsx b/frontend/packages/vkt/src/components/examinerExamEvent/listing/ExaminerExamEventListing.tsx
@@ -148,9 +148,10 @@ export const ExaminerExamEventListing = () => {
       setExaminerExamEventLanguageFilter(event.target.value as ExamLanguage),
     );
   };
+  const allExamEvents = examiner?.examEvents || [];
 
   return (
-    <div className="examiner-homepage__exam-events rows gapped-xl margin-top-xxl">
+    <div className="examiner-homepage__exam-events rows gapped-xl margin-top-sm margin-bottom-lg">
       <div className="columns">
         <H2 className="grow">{t('heading')}</H2>
         <div className="flex-end">
@@ -170,10 +171,12 @@ export const ExaminerExamEventListing = () => {
       </div>
       <Divider />
       <ExaminerExamEventToggleFilters />
-      <LanguageFilter
-        value={examEventFilters.languageFilter}
-        onChange={handleLanguageFilterChange}
-      />
+      {allExamEvents.length > 0 && (
+        <LanguageFilter
+          value={examEventFilters.languageFilter}
+          onChange={handleLanguageFilterChange}
+        />
+      )}
       {filteredExamEvents.length === 0 && (
         <Text className="empty-results">{t('labels.noExamEvents')}</Text>
       )}

diff --git a/frontend/packages/vkt/src/pages/ClerkGoodAndSatisfactoryLevelPage.tsx b/frontend/packages/vkt/src/pages/ClerkGoodAndSatisfactoryLevelPage.tsx
@@ -65,12 +65,16 @@ export const ClerkGoodAndSatisfactoryLevelPage: FC = () => {
         <Grid item>
           <Paper elevation={3} className="clerk-homepage__examiners">
             {examinersLoading ? (
-              <PublicExamEventGridSkeleton />
+              <div className="rows gapped">
+                <PublicExamEventGridSkeleton />
+              </div>
             ) : (
               <ClerkExaminerListing />
             )}
             {examEventsLoading ? (
-              <PublicExamEventGridSkeleton />
+              <div className="rows gapped">
+                <PublicExamEventGridSkeleton />
+              </div>
             ) : (
               <ClerkExaminerExamEventListing />
             )}

diff --git a/frontend/packages/vkt/src/pages/examiner/ExaminerHomePage.tsx b/frontend/packages/vkt/src/pages/examiner/ExaminerHomePage.tsx
@@ -34,7 +34,7 @@ const PublicInformation = () => {
   }
 
   return (
-    <div className="examiner-homepage__public-information rows gapped-xl margin-bottom-xxl">
+    <div className="examiner-homepage__public-information rows gapped-xl margin-top-lg margin-bottom-lg">
       <div className="columns gapped">
         <H2 className="grow">{t('heading')}</H2>
         <CustomButtonLink
@@ -79,7 +79,7 @@ const ContactRequests = () => {
   const { examiner } = useAppSelector(examinerDetailsSelector);
 
   return (
-    <div className="examiner-homepage__contact-requests rows gapped-xl margin-top-xxl margin-bottom-xxl">
+    <div className="examiner-homepage__contact-requests rows gapped-xl margin-top-sm margin-bottom-lg">
       <H2>{t('heading')}</H2>
       <Divider />
       {examiner?.contactRequests?.length === 0 ? (
@@ -94,7 +94,7 @@ const ContactRequests = () => {
 const ExaminerOverview = () => {
   return (
     <Paper elevation={3} className="examiner-homepage__overview">
-      <div className="rows gapped-xl">
+      <div className="rows gapped-xxxxl">
         <PublicInformation />
         <ContactRequests />
         <ExaminerExamEventListing />

diff --git a/frontend/packages/vkt/src/styles/pages/_clerk-homepage.scss b/frontend/packages/vkt/src/styles/pages/_clerk-homepage.scss
@@ -19,10 +19,14 @@
   & &__examiners {
     display: flex;
     flex-direction: column;
-    gap: 2rem;
+    gap: 6rem;
     padding: 2.5rem;
   }
 
+  & &__extra-padding-top {
+    padding-top: 3rem;
+  }
+
   & &__notification {
     background-color: $color-blue-200;
     color: $color-text-primary;

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -2690,7 +2690,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@opetushallitus/kieli-ja-kaantajatutkinnot.shared@workspace:packages/shared, shared@npm:@opetushallitus/[email protected].11":
+"@opetushallitus/kieli-ja-kaantajatutkinnot.shared@workspace:packages/shared, shared@npm:@opetushallitus/[email protected].12":
   version: 0.0.0-use.local
   resolution: "@opetushallitus/kieli-ja-kaantajatutkinnot.shared@workspace:packages/shared"
   languageName: unknown
@@ -2701,7 +2701,7 @@ __metadata:
   resolution: "@opetushallitus/kieli-ja-kaantajatutkinnot.vkt@workspace:packages/vkt"
   dependencies:
     reduxjs-toolkit-persist: "npm:^7.2.1"
-    shared: "npm:@opetushallitus/[email protected].11"
+    shared: "npm:@opetushallitus/[email protected].12"
   languageName: unknown
   linkType: soft