Skip to content
Snippets Groups Projects
Commit 2529b954 authored by Jessie Keck's avatar Jessie Keck
Browse files

Use line-clamp and (not fully supported) -webkit-box display for a pure-css...

Use line-clamp and (not fully supported) -webkit-box display for a pure-css multi-line caption truncation.
parent 871ba642
Branches
No related tags found
No related merge requests found
......@@ -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);
......
......@@ -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>
......
......@@ -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',
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment