Merge pull request #2213 from ProjectMirador/2212-truncate-osd-info

Fix truncating viewer info; fixes #2212

__tests__/src/components/ViewerInfo.test.js

@@ -21,8 +21,11 @@ describe('ViewerNavigation', () => {
 
   it('renders the component', () => {
     wrapper = createWrapper();
-    expect(wrapper.find(Typography).length).toBe(1);
+
+    expect(wrapper.find(Typography).length).toBe(2);
     expect(wrapper.find(Typography).at(0)
-      .matchesElement(<Typography>3 of 8 • testLabel</Typography>)).toBe(true);
+      .matchesElement(<Typography>3 of 8</Typography>)).toBe(true);
+    expect(wrapper.find(Typography).at(1)
+      .matchesElement(<Typography> • testLabel</Typography>)).toBe(true);
   });
 });

src/components/ViewerInfo.js

@@ -18,9 +18,11 @@ export class ViewerInfo extends Component {
 
     return (
       <div className={ns('osd-info')}>
-        <Typography variant="caption" className={ns('canvas-label')}>
+        <Typography inline variant="caption" className={ns('canvas-count')}>
           {`${canvasIndex + 1} ${t('of')} ${canvasCount}`}
-          {canvasLabel && ` ${String.fromCharCode(8226)} ${canvasLabel}`}
+        </Typography>
+        <Typography inline variant="caption" className={ns('canvas-label')}>
+          {canvasLabel && ` • ${canvasLabel}`}
         </Typography>
       </div>
     );

src/styles/index.scss

@@ -124,7 +124,12 @@
   }
 
   &-osd-info {
-    order: 2
+    order: 2;
+    overflow: hidden;
+    padding-bottom: 3px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
   }
 
   &-canvas-nav {
@@ -135,12 +140,6 @@
     text-align: center;
   }
 
-  &-canvas-label {
-    width: 100%;
-    text-overflow: ellipsis;
-    padding-bottom: 3px;
-  }
-
   &-thumb-navigation {
 
     .mirador-thumbnail-nav-canvas {