Responsive background images for main page cards

src/client/components/main_layout/Main.js

@@ -47,6 +47,7 @@ const styles = theme => ({
 const Main = props => {
   const { classes, perspectives } = props
   const xsScreen = useMediaQuery(theme => theme.breakpoints.down('xs'))
+  const smScreen = useMediaQuery(theme => theme.breakpoints.between('sm', 'md'))
   const xlScreen = useMediaQuery(theme => theme.breakpoints.up('xl'))
 
   const gridForLargeScreen = () => {
@@ -78,16 +79,13 @@ const Main = props => {
         <Grid className={classes.lowerRow} container justify='center' spacing={3}>
           {lowerRowItems}
         </Grid>
-        <div className={classes.licenceTextContainer}>
-          <Typography className={classes.licenceText}>{intl.getHTML('mainPageImageLicence')}</Typography>
-        </div>
       </>
     )
   }
 
   const basicGrid = () =>
     <>
-      <Grid container spacing={1} justify={xsScreen ? 'center' : 'flex-start'}>
+      <Grid container spacing={smScreen ? 2 : 1} justify={xsScreen || smScreen ? 'center' : 'flex-start'}>
         {props.perspectives.map(perspective =>
           <MainCard
             key={perspective.id}
@@ -95,7 +93,6 @@ const Main = props => {
             cardHeadingVariant='h5'
           />)}
       </Grid>
-      <Typography className={classes.licenceText}>{intl.getHTML('mainPageImageLicence')}</Typography>
     </>
 
   return (
@@ -113,6 +110,9 @@ const Main = props => {
           </Typography>
         </div>
         {xlScreen ? gridForLargeScreen() : basicGrid()}
+        <div className={classes.licenceTextContainer}>
+          <Typography className={classes.licenceText}>{intl.getHTML('mainPageImageLicence')}</Typography>
+        </div>
       </div>
     </div>
   )

src/client/components/main_layout/MainCard.js

@@ -5,16 +5,20 @@ import Paper from '@material-ui/core/Paper'
 import Grid from '@material-ui/core/Grid'
 import intl from 'react-intl-universal'
 import { makeStyles } from '@material-ui/core/styles'
+import useMediaQuery from '@material-ui/core/useMediaQuery'
 import { Link } from 'react-router-dom'
 
 const useStyles = makeStyles(theme => ({
-  link: {
-    textDecoration: 'none'
+  gridItem: {
+    textDecoration: 'none',
+    [theme.breakpoints.down('xs')]: {
+      justifyContent: 'center'
+    }
   },
   perspectiveCard: props => ({
     padding: theme.spacing(1.5),
     color: '#fff',
-    background: `linear-gradient( rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45) ), url(${props.perspective.frontPageImage})`,
+    background: `linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) ), url(${props.perspective.frontPageImage})`,
     backgroundRepeat: 'no-repeat',
     backgroundSize: 'cover',
     backgroundPosition: 'center',
@@ -24,9 +28,19 @@ const useStyles = makeStyles(theme => ({
       backgroundSize: 'cover',
       backgroundPosition: 'center'
     },
-    [theme.breakpoints.down('md')]: {
+    [theme.breakpoints.down('xs')]: {
+      width: 351 - theme.spacing(3),
+      height: 180
+    },
+    [theme.breakpoints.between(600, 780)]: {
       height: 180
     },
+    [theme.breakpoints.between(780, 960)]: {
+      height: 238
+    },
+    // [theme.breakpoints.between(801, 'md')]: {
+    //   height: 220
+    // },
     [theme.breakpoints.between('md', 'lg')]: {
       height: 100
     },
@@ -39,13 +53,16 @@ const useStyles = makeStyles(theme => ({
 const MainCard = props => {
   const classes = useStyles(props)
   const { perspective, cardHeadingVariant } = props
+  const xsScreen = useMediaQuery(theme => theme.breakpoints.down('xs'))
+  // const smScreen = useMediaQuery(theme => theme.breakpoints.between('sm', 'md'))
   return (
     <Grid
-      className={classes.link}
+      className={classes.gridItem}
       key={perspective.id}
       item xs={12} sm={6} md lg xl={4}
       component={Link}
       to={`/${perspective.id}/faceted-search`}
+      container={xsScreen}
     >
       <Paper className={classes.perspectiveCard}>
         <Typography gutterBottom variant={cardHeadingVariant} component='h2'>

src/client/configs/mmm/PerspectiveConfig.js

@@ -4,11 +4,11 @@ import AddLocationIcon from '@material-ui/icons/AddLocation'
 import LocationOnIcon from '@material-ui/icons/LocationOn'
 import RedoIcon from '@material-ui/icons/Redo'
 import CloudDownloadIcon from '@material-ui/icons/CloudDownload'
-import manuscriptsImage from '../../img/manuscripts-214x124.jpg'
-import worksImage from '../../img/works-214x124.jpg'
-import eventsImage from '../../img/events-214x124.jpg'
-import actorsImage from '../../img/actors-214x124.jpg'
-import placesImage from '../../img/places-214x124.jpg'
+import manuscriptsImage from '../../img/manuscripts-452x262.jpg'
+import worksImage from '../../img/works-452x262.jpg'
+import eventsImage from '../../img/events-452x262.jpg'
+import actorsImage from '../../img/actors-452x262.jpg'
+import placesImage from '../../img/places-452x262.jpg'
 
 export const perspectiveConfig = [
   {