diff --git a/__tests__/src/components/GalleryView.test.js b/__tests__/src/components/GalleryView.test.js index 942bb8f81becdaa447c9e80406b245b6c082fc4b..c5ff7624684b0b0bcca9709e3dbc9502cd4aaf82 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 b83e30652443c4b7c358aded49c69bff10fea150..f3be7776033e5278fa3655d18215cf74ae6001e9 100644 --- a/src/components/GalleryView.js +++ b/src/components/GalleryView.js @@ -32,7 +32,7 @@ export class GalleryView extends Component { className={ classNames( classes.galleryViewItem, - canvas.index === window.canvasIndex ? classes.currentCanvas : '', + canvas.index === window.canvasIndex ? classes.galleryViewItemCurrent : '', ) } onClick={() => setCanvas(window.id, canvas.index)} @@ -44,11 +44,10 @@ export class GalleryView extends Component { imageUrl={manifestoCanvas.thumbnail(null, 100)} isValid={manifestoCanvas.hasValidDimensions} maxHeight={120} - maxWidth={100} 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 691909246b4eb6ec6f736edb25c4e84ccfc80bde..eef04ee8ef2f322dbefd61678ed4f5d7c18965b3 100644 --- a/src/containers/GalleryView.js +++ b/src/containers/GalleryView.js @@ -21,15 +21,24 @@ const mapStateToProps = (state, { window }) => ( * Styles to be passed to the withStyles HOC */ const styles = theme => ({ - currentCanvas: { - border: `2px solid ${theme.palette.secondary.main}`, - padding: theme.spacing.unit / 2, - }, galleryContainer: { - flex: '1', + alignItems: 'flex-start', + flexDirection: 'row', + flexWrap: 'wrap', overflowX: 'hidden', overflowY: 'scroll', 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': { @@ -37,20 +46,19 @@ const styles = theme => ({ }, '&:hover': { border: `2px solid ${theme.palette.secondary.main}`, - padding: theme.spacing.unit / 2, - transform: 'scale(1.05)', - transition: '.1s transform ease-out', }, - boxSizing: 'border-box', + border: '2px solid transparent', cursor: 'pointer', display: 'inline-block', - height: '160px', + height: '165px', margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`, - maxWidth: '100px', + minWidth: '60px', overflow: 'hidden', padding: theme.spacing.unit / 2, - textOverflow: 'elipsis', - transition: '.1s transform ease-out', + width: 'min-content', + }, + galleryViewItemCurrent: { + border: `2px solid ${theme.palette.secondary.main}`, }, });