From 2529b9542d822eac634ce1cb85a5b53115a1ae81 Mon Sep 17 00:00:00 2001 From: Jessie Keck <jessie.keck@gmail.com> Date: Mon, 1 Apr 2019 15:59:26 -0700 Subject: [PATCH] Use line-clamp and (not fully supported) -webkit-box display for a pure-css multi-line caption truncation. --- __tests__/src/components/GalleryView.test.js | 4 ++-- src/components/GalleryView.js | 2 +- src/containers/GalleryView.js | 10 ++++++++++ 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/__tests__/src/components/GalleryView.test.js b/__tests__/src/components/GalleryView.test.js index 942bb8f81..c5ff76246 100644 --- a/__tests__/src/components/GalleryView.test.js +++ b/__tests__/src/components/GalleryView.test.js @@ -9,7 +9,7 @@ function createWrapper(props) { return shallow( <GalleryView canvases={manifesto.create(manifestJson).getSequences()[0].getCanvases()} - classes={{ currentCanvas: 'currentCanvas' }} + classes={{ galleryViewItemCurrent: 'galleryViewItemCurrent' }} window={{ canvasIndex: 0, id: '1234', @@ -34,7 +34,7 @@ describe('GalleryView', () => { expect(wrapper.find('div[role="button"]').length).toBe(3); }); it('sets a mirador-current-canvas class on current canvas', () => { - expect(wrapper.find('div[role="button"]').at(0).props().className).toEqual('currentCanvas'); + expect(wrapper.find('div[role="button"]').at(0).props().className).toEqual('galleryViewItemCurrent'); }); it('renders the canvas labels for each canvas in canvas items', () => { expect(wrapper.find('WithStyles(Typography)').length).toBe(3); diff --git a/src/components/GalleryView.js b/src/components/GalleryView.js index 5288795cd..f3be77760 100644 --- a/src/components/GalleryView.js +++ b/src/components/GalleryView.js @@ -47,7 +47,7 @@ export class GalleryView extends Component { aspectRatio={manifestoCanvas.aspectRatio} style={{ margin: '0 auto' }} /> - <Typography variant="caption"> + <Typography variant="caption" className={classes.galleryViewCaption}> {manifestoCanvas.getLabel()} </Typography> </div> diff --git a/src/containers/GalleryView.js b/src/containers/GalleryView.js index 8e0aacd11..eef04ee8e 100644 --- a/src/containers/GalleryView.js +++ b/src/containers/GalleryView.js @@ -30,6 +30,16 @@ const styles = theme => ({ padding: '50px 0 50px 20px', width: '100%', }, + galleryViewCaption: { + boxOrient: 'vertical', + display: '-webkit-box', + height: '3em', + lineClamp: '2', + lineHeight: '1.5em', + overflow: 'hidden', + textOverflow: 'ellipsis', + wordBreak: 'break-word', + }, galleryViewItem: { '&:focus': { outline: 'none', -- GitLab