fix: PDF no longer fixed to 700px scroll; adjust button layout

City-of-Helsinki · Jun 21, 2023 · 45dbf39 · 45dbf39
1 parent ee7f7ee
commit 45dbf39
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 72 deletions.
diff --git a/frontend/benefit/applicant/public/locales/en/common.json b/frontend/benefit/applicant/public/locales/en/common.json
@@ -519,8 +519,8 @@
     "errorMessage": "Something went wrong. Please try again later."
   },
   "pdfViewer": {
-    "previous": "Previous",
-    "next": "Next",
+    "previous": "Previous page",
+    "next": "Next page",
     "page": "Page",
     "terms": "Terms.PDF"
   },

diff --git a/frontend/benefit/applicant/public/locales/fi/common.json b/frontend/benefit/applicant/public/locales/fi/common.json
@@ -519,8 +519,8 @@
     "errorMessage": "Jotakin meni vikaan. Ole hyvä ja kokeile uudelleen myöhemmin."
   },
   "pdfViewer": {
-    "previous": "Edellinen",
-    "next": "Seuraava",
+    "previous": "Edellinen sivu",
+    "next": "Seuraava sivu",
     "page": "Sivu",
     "terms": "Ehdot.PDF"
   },

diff --git a/frontend/benefit/applicant/public/locales/sv/common.json b/frontend/benefit/applicant/public/locales/sv/common.json
@@ -519,9 +519,9 @@
     "errorMessage": "Något gick fel. Vänligen försök igen senare."
   },
   "pdfViewer": {
-    "previous": "Previous",
-    "next": "Next",
-    "page": "Page",
+    "previous": "Föregående sida",
+    "next": "Nästa sida",
+    "page": "Sida",
     "terms": "Terms.PDF"
   },
   "utility": {

diff --git a/...it/applicant/src/components/applications/forms/application/step6/ApplicationFormStep6.tsx b/...it/applicant/src/components/applications/forms/application/step6/ApplicationFormStep6.tsx
@@ -58,11 +58,7 @@ const ApplicationFormStep6: React.FC<
           {data && (
             <>
               <$GridCell $colSpan={12}>
-                <PdfViewer
-                  file={applicantTermsInEffectUrl}
-                  scale={1.8}
-                  documentMarginLeft="-70px"
-                />
+                <PdfViewer file={applicantTermsInEffectUrl} scale={1.8} />
               </$GridCell>
               <$GridCell
                 $colSpan={5}

diff --git a/frontend/benefit/applicant/src/components/pdfViewer/PdfViewer.sc.ts b/frontend/benefit/applicant/src/components/pdfViewer/PdfViewer.sc.ts
@@ -1,14 +1,12 @@
 import styled from 'styled-components';
 
-export const $ViewerWrapper = styled.div<{
-  documentMarginLeft: undefined | string;
-}>`
+export const $ViewerWrapper = styled.div`
+  box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.1);
   .Document {
-    margin-left: ${(props) =>
-      props.documentMarginLeft ? props.documentMarginLeft : '0'};
+    min-height: 100%;
+    height: 100%;
   }
-  overflow: scroll;
-  height: 700px;
+  height: 100%;
 
   /* width */
   ::-webkit-scrollbar {

diff --git a/frontend/benefit/applicant/src/components/pdfViewer/PdfViewer.tsx b/frontend/benefit/applicant/src/components/pdfViewer/PdfViewer.tsx
@@ -18,15 +18,10 @@ pdfjs.GlobalWorkerOptions.workerSrc = String(url);
 
 type PdfViewerProps = {
   file: string;
-  documentMarginLeft?: string; // FIXME: A way to crop pdf white margins will be better because not all pdf have same margins
   scale?: number;
 };
 
-const PdfViewer: React.FC<PdfViewerProps> = ({
-  file,
-  documentMarginLeft,
-  scale,
-}) => {
+const PdfViewer: React.FC<PdfViewerProps> = ({ file, scale }) => {
   const {
     t,
     handleDocumentLoadSuccess,
@@ -39,46 +34,51 @@ const PdfViewer: React.FC<PdfViewerProps> = ({
   const theme = useTheme();
 
   return (
-    <$ViewerWrapper documentMarginLeft={documentMarginLeft}>
-      <Document
-        onLoadSuccess={handleDocumentLoadSuccess}
-        file={file}
-        className="Document"
-      >
-        <Page pageNumber={currentPage} scale={scale} />
-      </Document>
-      <$Grid
-        css={`
-          margin-bottom: ${theme.spacing.l};
-        `}
-      >
-        <$GridCell>
-          <Button
-            disabled={currentPage === 1}
-            theme="black"
-            variant="secondary"
-            onClick={handleBack}
-          >
-            {t('common:pdfViewer.previous')}
-          </Button>
-        </$GridCell>
-        <$GridCell>
-          <$ActionsWrapper>
-            {`${t('common:pdfViewer.page')} ${currentPage} / ${pagesCount}`}
-          </$ActionsWrapper>
-        </$GridCell>
-        <$GridCell>
-          <Button
-            disabled={currentPage === pagesCount}
-            theme="black"
-            variant="secondary"
-            onClick={handleNext}
-          >
-            {t('common:pdfViewer.next')}
-          </Button>
-        </$GridCell>
-      </$Grid>
-    </$ViewerWrapper>
+    <>
+      <$ViewerWrapper>
+        <Document
+          onLoadSuccess={handleDocumentLoadSuccess}
+          file={file}
+          className="Document"
+        >
+          <Page pageNumber={currentPage} scale={scale} />
+        </Document>
+      </$ViewerWrapper>
+      {pagesCount > 1 ? (
+        <$Grid
+          css={`
+            margin-top: ${theme.spacing.l};
+            margin-bottom: ${theme.spacing.xl};
+          `}
+        >
+          <$GridCell>
+            <Button
+              disabled={currentPage === 1}
+              theme="black"
+              variant="secondary"
+              onClick={handleBack}
+            >
+              {t('common:pdfViewer.previous')}
+            </Button>
+          </$GridCell>
+          <$GridCell>
+            <$ActionsWrapper>
+              {`${t('common:pdfViewer.page')} ${currentPage} / ${pagesCount}`}
+            </$ActionsWrapper>
+          </$GridCell>
+          <$GridCell>
+            <Button
+              disabled={currentPage === pagesCount}
+              theme="black"
+              variant="secondary"
+              onClick={handleNext}
+            >
+              {t('common:pdfViewer.next')}
+            </Button>
+          </$GridCell>
+        </$Grid>
+      ) : null}
+    </>
   );
 };
 

diff --git a/frontend/benefit/applicant/src/components/termsOfService/TermsOfService.tsx b/frontend/benefit/applicant/src/components/termsOfService/TermsOfService.tsx
@@ -42,17 +42,20 @@ const TermsOfService: React.FC<TermsOfServiceProps> = ({
             {t('common:login.termsOfServiceHeader')}
           </h2>
         </$GridCell>
-        <$GridCell $colSpan={12}>
-          <PdfViewer
-            file={termsInEffectUrl}
-            scale={1.8}
-            documentMarginLeft="-70px"
-          />
+        <$GridCell
+          $colSpan={12}
+          css={`
+            margin-bottom: var(--spacing-xl);
+            margin-top: var(--spacing-xl);
+          `}
+        >
+          <PdfViewer file={termsInEffectUrl} scale={1.8} />
         </$GridCell>
         <$GridCell
           $colSpan={5}
           css={`
-            margin-bottom: var(--spacing-l);
+            margin-bottom: var(--spacing-xl);
+            margin-top: var(--spacing-xl);
           `}
         >
           <Button