From 871ba6427c08af60dea0a457d3192590f4ca9dcc Mon Sep 17 00:00:00 2001
From: Jessie Keck <jessie.keck@gmail.com>
Date: Mon, 1 Apr 2019 14:53:57 -0700
Subject: [PATCH] Update gallery theming.
- Removed scale transform
- Adds transparent border to highlighting doesn't cause jumps.
- Makes images a fixed height
- Fits the thumbnail + caption container around the content using width: min-content
- Uses flex-box for the gallery items for better x-browser compatibility
---
src/components/GalleryView.js | 3 +--
src/containers/GalleryView.js | 24 +++++++++++-------------
2 files changed, 12 insertions(+), 15 deletions(-)
diff --git a/src/components/GalleryView.js b/src/components/GalleryView.js
index b83e30652..5288795cd 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,7 +44,6 @@ export class GalleryView extends Component {
imageUrl={manifestoCanvas.thumbnail(null, 100)}
isValid={manifestoCanvas.hasValidDimensions}
maxHeight={120}
- maxWidth={100}
aspectRatio={manifestoCanvas.aspectRatio}
style={{ margin: '0 auto' }}
/>
diff --git a/src/containers/GalleryView.js b/src/containers/GalleryView.js
index 691909246..8e0aacd11 100644
--- a/src/containers/GalleryView.js
+++ b/src/containers/GalleryView.js
@@ -21,15 +21,14 @@ 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%',
},
galleryViewItem: {
'&:focus': {
@@ -37,20 +36,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}`,
},
});
--
GitLab