diff --git a/__tests__/src/components/ViewerInfo.test.js b/__tests__/src/components/ViewerInfo.test.js index 357d0392db8f679aa9c9124a690328b07c6cedaf..287b68ae24309a4250a48fb357d2fdb32bb1d691 100644 --- a/__tests__/src/components/ViewerInfo.test.js +++ b/__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); }); }); diff --git a/src/components/ViewerInfo.js b/src/components/ViewerInfo.js index 94c1b361f57312dd049e91d40268b16dd892e5d8..ac677a5752224b6a640908b90c72ec8f78cd44b9 100644 --- a/src/components/ViewerInfo.js +++ b/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> ); diff --git a/src/styles/index.scss b/src/styles/index.scss index f98a75a1529efcf006c108fa43c9f58b34f9dfd7..86a7c489099cfe16835f1f31b3aaf68beedb005c 100644 --- a/src/styles/index.scss +++ b/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 {