From 55ba859bbef6bddd23ca3a58bfb09dddfcd02984 Mon Sep 17 00:00:00 2001
From: esikkala <esko.ikkala@aalto.fi>
Date: Tue, 23 Apr 2019 11:12:21 +0300
Subject: [PATCH] Hide footer on small screens
---
src/client/components/main_layout/Footer.js | 21 +--
src/client/components/main_layout/Main.js | 189 ++++++--------------
src/client/containers/SemanticPortal.js | 2 +-
3 files changed, 68 insertions(+), 144 deletions(-)
diff --git a/src/client/components/main_layout/Footer.js b/src/client/components/main_layout/Footer.js
index 19011e93..dfa7e63e 100644
--- a/src/client/components/main_layout/Footer.js
+++ b/src/client/components/main_layout/Footer.js
@@ -18,6 +18,9 @@ import akaLogo from '../../img/logos/funders/aka_en_vaaka_rgb.jpg';
const styles = theme => ({
root: {
position: 'absolute',
+ [ theme.breakpoints.down('sm')]: {
+ display: 'none'
+ },
bottom: 0,
left: 0,
boxShadow: '0 -20px 20px -20px #333',
@@ -26,7 +29,7 @@ const styles = theme => ({
},
layout: {
width: 'auto',
- height: 150,
+ height: 115,
marginTop: theme.spacing.unit,
marginBottom: theme.spacing.unit,
marginLeft: theme.spacing.unit * 2,
@@ -43,16 +46,10 @@ const styles = theme => ({
justifyContent: 'center'
},
logo: {
- height: 50,
- [ theme.breakpoints.down(1090) ]: {
- height: 40
- }
+ height: 40,
},
aaltoLogo: {
- height: 42,
- [ theme.breakpoints.down(1090) ]: {
- height: 35
- }
+ height: 37,
},
});
@@ -75,10 +72,10 @@ const Footer = props => {
<img className={classes.logo} src={cnrsLogo} alt='logo' />
</Grid>
<Grid item xs className={classes.logoContainer}>
- <img className={classes.aaltoLogo} src={aaltoLogo} alt='logo' />
+ <img className={classes.logo} src={secoLogo} alt='logo' />
</Grid>
<Grid item xs className={classes.logoContainer}>
- <img className={classes.logo} src={secoLogo} alt='logo' />
+ <img className={classes.aaltoLogo} src={aaltoLogo} alt='logo' />
</Grid>
</Grid>
<Grid container spacing={24} item xs={12}>
@@ -104,7 +101,7 @@ const Footer = props => {
};
Footer.propTypes = {
- classes: PropTypes.object.isRequired
+ classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(Footer);
diff --git a/src/client/components/main_layout/Main.js b/src/client/components/main_layout/Main.js
index 772f5b63..a3f5d41c 100644
--- a/src/client/components/main_layout/Main.js
+++ b/src/client/components/main_layout/Main.js
@@ -8,14 +8,17 @@ import CardMedia from '@material-ui/core/CardMedia';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import { withStyles } from '@material-ui/core/styles';
-import { NavLink } from 'react-router-dom';
+import { Link } from 'react-router-dom';
import thumbImage from '../../img/thumb.png';
const styles = theme => ({
root: {
width: '100%',
height: 'calc(100% - 150px)',
- overflow: 'auto'
+ overflow: 'auto',
+ [ theme.breakpoints.down('sm')]: {
+ height: '100%'
+ },
},
icon: {
marginRight: theme.spacing.unit * 2,
@@ -38,9 +41,6 @@ const styles = theme => ({
marginRight: 'auto',
},
},
- card: {
- //maxWidth: 340,
- },
media: {
height: 100,
[ theme.breakpoints.down('md')]: {
@@ -54,12 +54,38 @@ const styles = theme => ({
let Main = props => {
const { classes } = props;
-
- const ManuscriptsLink = props => <NavLink to="/manuscripts" {...props}/>;
- const WorksLink = props => <NavLink to="/works" {...props}/>;
- const PeopleLink = props => <NavLink to="/people" {...props}/>;
- const OrganizationsLink = props => <NavLink to="/organizations" {...props}/>;
- const PlacesLink = props => <NavLink to="/places" {...props}/>;
+ const perspectives = [
+ {
+ id: 'manuscripts',
+ label: 'Manuscripts',
+ desc: 'Physical manuscript objects.'
+ },
+ {
+ id: 'works',
+ label: 'Works',
+ desc: 'Intellectual content carried out by manuscripts.'
+ },
+ {
+ id: 'events',
+ label: 'Events',
+ desc: 'Events related to manuscripts.'
+ },
+ {
+ id: 'people',
+ label: 'People',
+ desc: 'People related to manuscripts and works.'
+ },
+ {
+ id: 'organizations',
+ label: 'Organizations',
+ desc: 'Organizations related to manuscripts.'
+ },
+ {
+ id: 'places',
+ label: 'Places',
+ desc: 'Places related to manuscripts and works.'
+ },
+ ];
return (
<div className={classes.root}>
@@ -77,126 +103,27 @@ let Main = props => {
</div>
<div className={classNames(classes.layout, classes.cardGrid)}>
<Grid container spacing={40}>
-
- <Grid item xs={12} sm={6} md={4}>
- <Card className={classes.card}>
- <CardActionArea component={ManuscriptsLink}>
- <CardMedia
- className={classes.media}
- image={thumbImage}
- title="Manuscripts"
- />
- <CardContent className={classes.cardContent}>
- <Typography gutterBottom variant="h5" component="h2">
- Manuscripts
- </Typography>
- <Typography component="p">
- Physical manuscript objects.
- </Typography>
- </CardContent>
- </CardActionArea>
- </Card>
- </Grid>
-
- <Grid item xs={12} sm={6} md={4}>
- <Card className={classes.card}>
- <CardActionArea component={WorksLink}>
- <CardMedia
- className={classes.media}
- image={thumbImage}
- title="Works"
- />
- <CardContent className={classes.cardContent}>
- <Typography gutterBottom variant="h5" component="h2">
- Works
- </Typography>
- <Typography component="p">
- Intellectual content carried out by manuscripts.
- </Typography>
- </CardContent>
- </CardActionArea>
- </Card>
- </Grid>
-
- <Grid item xs={12} sm={6} md={4}>
- <Card className={classes.card}>
- <CardActionArea disabled>
- <CardMedia
- className={classes.media}
- image={thumbImage}
- title="Events"
- />
- <CardContent className={classes.cardContent}>
- <Typography gutterBottom variant="h5" component="h2">
- Events
- </Typography>
- <Typography component="p">
- Events related to manuscripts.
- </Typography>
- </CardContent>
- </CardActionArea>
- </Card>
- </Grid>
-
- <Grid item xs={12} sm={6} md={4}>
- <Card className={classes.card}>
- <CardActionArea component={PeopleLink}>
- <CardMedia
- className={classes.media}
- image={thumbImage}
- title="People"
- />
- <CardContent className={classes.cardContent}>
- <Typography gutterBottom variant="h5" component="h2">
- People
- </Typography>
- <Typography component="p">
- People related to manuscripts and works.
- </Typography>
- </CardContent>
- </CardActionArea>
- </Card>
- </Grid>
-
- <Grid item xs={12} sm={6} md={4}>
- <Card className={classes.card}>
- <CardActionArea component={OrganizationsLink}>
- <CardMedia
- className={classes.media}
- image={thumbImage}
- title="Organizations"
- />
- <CardContent className={classes.cardContent}>
- <Typography gutterBottom variant="h5" component="h2">
- Organizations
- </Typography>
- <Typography component="p">
- Organizations related to manuscripts.
- </Typography>
- </CardContent>
- </CardActionArea>
- </Card>
- </Grid>
-
- <Grid item xs={12} sm={6} md={4}>
- <Card className={classes.card}>
- <CardActionArea component={PlacesLink}>
- <CardMedia
- className={classes.media}
- image={thumbImage}
- title="Places"
- />
- <CardContent className={classes.cardContent}>
- <Typography gutterBottom variant="h5" component="h2">
- Places
- </Typography>
- <Typography component="p">
- Places related to manuscripts and works.
- </Typography>
- </CardContent>
- </CardActionArea>
- </Card>
- </Grid>
+ {perspectives.map(perspective =>
+ <Grid key={perspective.id} item xs={12} sm={6} md={4}>
+ <Card className={classes.card}>
+ <CardActionArea component={Link} to={`/${perspective.id}`}>
+ <CardMedia
+ className={classes.media}
+ image={thumbImage}
+ title={perspective.label}
+ />
+ <CardContent className={classes.cardContent}>
+ <Typography gutterBottom variant="h5" component="h2">
+ {perspective.label}
+ </Typography>
+ <Typography component="p">
+ {perspective.desc}
+ </Typography>
+ </CardContent>
+ </CardActionArea>
+ </Card>
+ </Grid>
+ )}
</Grid>
</div>
</div>
diff --git a/src/client/containers/SemanticPortal.js b/src/client/containers/SemanticPortal.js
index c405a0ef..fb451b5d 100644
--- a/src/client/containers/SemanticPortal.js
+++ b/src/client/containers/SemanticPortal.js
@@ -53,7 +53,7 @@ const styles = theme => ({
mainContainer: {
marginTop: 64,
height: 'calc(100% - 64px)',
- [theme.breakpoints.down(600)]: {
+ [theme.breakpoints.down('sm')]: {
marginTop: 56,
height: 'calc(100% - 56px)',
},
--
GitLab