#97: Fixed long document title in dropzone and summary

Changed tests
veraPDF · Jan 18, 2021 · 59d7dfe · 59d7dfe
1 parent 7d91536
commit 59d7dfe
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 5 deletions.
diff --git a/src/__tests__/integration/upload.test.js b/src/__tests__/integration/upload.test.js
@@ -37,7 +37,7 @@ describe('Upload', () => {
         integrationTest(async (store, component) => {
             await storeFile(component, store);
 
-            expect(getDropzoneText(component)).toEqual(`${TEST_FILE.name} - ${TEST_FILE.size}`);
+            expect(getDropzoneText(component)).toEqual(`${TEST_FILE.name}${TEST_FILE.size}`);
             expect(getNextStepButton(component).props().disabled).toBeFalsy();
         })
     );
@@ -71,7 +71,7 @@ describe('Upload', () => {
             moveNext(component);
             moveBack(component);
 
-            expect(getDropzoneText(component)).toEqual(`${TEST_FILE.name} - ${TEST_FILE.size}`);
+            expect(getDropzoneText(component)).toEqual(`${TEST_FILE.name}${TEST_FILE.size}`);
         })
     );
 });
diff --git a/src/components/layouts/pages/results/summary/Summary.js b/src/components/layouts/pages/results/summary/Summary.js
@@ -23,7 +23,7 @@ function Summary({ fileInfo, resultSummary }) {
     const compliancePercent = useMemo(() => calculateCompliance(resultSummary), [resultSummary]);
     return (
         <Paper className="summary">
-            <h2>{fileInfo.name}</h2>
+            <h2 className="summary__document-title">{fileInfo.name}</h2>
             <section className="summary__chart">
                 <Chart
                     chartType="PieChart"

diff --git a/src/components/layouts/pages/results/summary/Summary.scss b/src/components/layouts/pages/results/summary/Summary.scss
@@ -4,11 +4,16 @@
 .summary {
   @include centered-column;
   width: fit-content;
+  max-width: 100%;
   margin: 0 auto;
   padding: 0 20px;
 
-  h2 {
+  &__document-title {
     margin-bottom: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
   }
 
   &__chart {

diff --git a/src/components/layouts/pages/upload/dropzone/DropzoneText.js b/src/components/layouts/pages/upload/dropzone/DropzoneText.js
@@ -12,7 +12,7 @@ function DropzoneText(props) {
             {files.length ? (
                 <>
                     {files[0].name}
-                    <span className="dropzone-text__file-size"> - {formatFileSize(files[0])}</span>
+                    <span className="dropzone-text__file-size">{formatFileSize(files[0])}</span>
                 </>
             ) : (
                 DROPZONE_TEXT

diff --git a/src/components/layouts/pages/upload/dropzone/DropzoneText.scss b/src/components/layouts/pages/upload/dropzone/DropzoneText.scss
@@ -2,8 +2,15 @@
 
 .dropzone-text {
   color: $color-black--75;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  display: flex;
+  flex-direction: column;
 
   &__file-size {
+    text-align: center;
     color: $color-black--50;
     font-size: $font-size--basic;
   }