Skip to content
Snippets Groups Projects
Commit 55ba859b authored by esikkala's avatar esikkala
Browse files

Hide footer on small screens

parent 2ffe58c7
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/client/components/main_layout/Footer.js
+ 9
− 12
View file @ 55ba859b
......@@ -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);
src/client/components/main_layout/Main.js
+ 58
− 131
View file @ 55ba859b
......@@ -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>
......
src/client/containers/SemanticPortal.js
+ 1
− 1
View file @ 55ba859b
......@@ -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)',
},
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment