Breakpoints for main page grid

src/client/components/main_layout/Main.js

@@ -4,6 +4,7 @@ import intl from 'react-intl-universal'
 import Grid from '@material-ui/core/Grid'
 import Typography from '@material-ui/core/Typography'
 import { withStyles } from '@material-ui/core/styles'
+import useMediaQuery from '@material-ui/core/useMediaQuery'
 import MainCard from './MainCard'
 
 const styles = theme => ({
@@ -32,11 +33,70 @@ const styles = theme => ({
   licenceText: {
     marginTop: theme.spacing(0.5),
     fontSize: '0.7em'
+  },
+  lowerRow: {
+    marginTop: theme.spacing(1)
+  },
+  licenceTextContainer: {
+    marginTop: theme.spacing(1),
+    display: 'flex',
+    justifyContent: 'center'
   }
 })
 
 const Main = props => {
-  const { classes } = props
+  const { classes, perspectives } = props
+  const xlScreen = useMediaQuery(theme => theme.breakpoints.up('xl'))
+
+  const gridForLargeScreen = () => {
+    const upperRowItems = []
+    const lowerRowItems = []
+    for (let i = 0; i < 3; i++) {
+      const perspective = perspectives[i]
+      upperRowItems.push(
+        <MainCard
+          key={perspective.id}
+          perspective={perspective}
+          cardHeadingVariant='h4'
+        />)
+    }
+    for (let i = 3; i < 5; i++) {
+      const perspective = perspectives[i]
+      lowerRowItems.push(
+        <MainCard
+          key={perspective.id}
+          perspective={perspective}
+          cardHeadingVariant='h4'
+        />)
+    }
+    return (
+      <>
+        <Grid container spacing={3}>
+          {upperRowItems}
+        </Grid>
+        <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}>
+        {props.perspectives.map(perspective =>
+          <MainCard
+            key={perspective.id}
+            perspective={perspective}
+            cardHeadingVariant='h5'
+          />)}
+      </Grid>
+      <Typography className={classes.licenceText}>{intl.getHTML('mainPageImageLicence')}</Typography>
+    </>
+
   return (
     <div className={classes.root}>
       <div className={classes.layout}>
@@ -51,10 +111,7 @@ const Main = props => {
             {intl.get('selectPerspective')}
           </Typography>
         </div>
-        <Grid container spacing={1}>
-          {props.perspectives.map(perspective => <MainCard key={perspective.id} perspective={perspective} />)}
-        </Grid>
-        <Typography className={classes.licenceText}>{intl.getHTML('mainPageImageLicence')}</Typography>
+        {xlScreen ? gridForLargeScreen() : basicGrid()}
       </div>
     </div>
   )

src/client/components/main_layout/MainCard.js

@@ -22,7 +22,7 @@ const useStyles = makeStyles(theme => ({
       backgroundSize: 'cover',
       backgroundPosition: 'center'
     },
-    [theme.breakpoints.up('lg')]: {
+    [theme.breakpoints.up('xl')]: {
       height: 180,
       backgroundSize: 'cover'
     },
@@ -34,17 +34,17 @@ const useStyles = makeStyles(theme => ({
 
 const MainCard = props => {
   const classes = useStyles(props)
-  const { perspective } = props
+  const { perspective, cardHeadingVariant } = props
   return (
     <Grid
       className={classes.link}
       key={perspective.id}
-      item xs={12} sm={4} md lg={4}
+      item xs={12} sm={4} md lg xl={4}
       component={Link}
       to={`/${perspective.id}/faceted-search`}
     >
       <Paper className={classes.perspectiveCard}>
-        <Typography gutterBottom variant='h5' component='h2'>
+        <Typography gutterBottom variant={cardHeadingVariant} component='h2'>
           {intl.get(`perspectives.${perspective.id}.label`)}
         </Typography>
         <Typography component='p'>
@@ -57,7 +57,8 @@ const MainCard = props => {
 }
 
 MainCard.propTypes = {
-  perspective: PropTypes.object.isRequired
+  perspective: PropTypes.object.isRequired,
+  cardHeadingVariant: PropTypes.string.isRequired
 }
 
 export default MainCard