Merge pull request #2359 from ProjectMirador/2312-gallery-stylez

Update gallery view styling/layout

__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);

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>

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}`,
   },
 });