Commit ec8fbab1 authored by Florent Chehab's avatar Florent Chehab
Browse files

Better handling of different width

parent 97f308c4
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles'; import { withStyles } from '@material-ui/core/styles';
import withWidth, { isWidthUp } from '@material-ui/core/withWidth';
import { compose } from 'recompose';
import AppBar from '@material-ui/core/AppBar'; import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs'; import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab'; import Tab from '@material-ui/core/Tab';
...@@ -44,33 +47,18 @@ class UniversityTemplate extends React.Component { ...@@ -44,33 +47,18 @@ class UniversityTemplate extends React.Component {
value: 0, value: 0,
}; };
handlerResize() {
this.forceUpdate();
}
componentDidMount() {
window.addEventListener("resize", this.handlerResize.bind(this));
}
componentWillUnmount() {
window.addEventListener("resize", this.handlerResize.bind(this));
}
handleChange = (event, value) => { handleChange = (event, value) => {
this.setState({ value }); this.setState({ value });
}; };
render() { render() {
const { classes } = this.props; const { classes, univId, width } = this.props;
const { value } = this.state; const { value } = this.state;
const w = window,
d = document,
documentElement = d.documentElement,
body = d.getElementsByTagName('body')[0],
width = w.innerWidth || documentElement.clientWidth || body.clientWidth,
height = w.innerHeight || documentElement.clientHeight || body.clientHeight;
const { univId } = this.props; let scroll = true;
if (isWidthUp('lg', width)) {
scroll = false;
}
return ( return (
<div> <div>
...@@ -83,8 +71,8 @@ class UniversityTemplate extends React.Component { ...@@ -83,8 +71,8 @@ class UniversityTemplate extends React.Component {
<Tabs <Tabs
value={value} value={value}
onChange={this.handleChange} onChange={this.handleChange}
scrollable={width < 1000 ? true : false} scrollable={scroll}
centered={width >= 1000 ? true : false} centered={!scroll}
scrollButtons="on" scrollButtons="on"
indicatorColor="primary" indicatorColor="primary"
textColor="primary" textColor="primary"
...@@ -113,4 +101,7 @@ UniversityTemplate.propTypes = { ...@@ -113,4 +101,7 @@ UniversityTemplate.propTypes = {
univId: PropTypes.string.isRequired, univId: PropTypes.string.isRequired,
}; };
export default withStyles(styles)(UniversityTemplate); export default compose(
\ No newline at end of file withWidth({ noSSR: true }),
withStyles(styles)
)(UniversityTemplate);
...@@ -8,10 +8,13 @@ import Badge from '@material-ui/core/Badge'; ...@@ -8,10 +8,13 @@ import Badge from '@material-ui/core/Badge';
import Grid from '@material-ui/core/Grid'; import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
import Paper from '@material-ui/core/Paper'; import Paper from '@material-ui/core/Paper';
import Chip from '@material-ui/core/Chip';
import Avatar from '@material-ui/core/Avatar';
import SettingsBackRestoreIcon from '@material-ui/icons/SettingsBackupRestore'; import SettingsBackRestoreIcon from '@material-ui/icons/SettingsBackupRestore';
import CreateIcon from '@material-ui/icons/Create'; import CreateIcon from '@material-ui/icons/Create';
import VerifiedUserIcon from '@material-ui/icons/VerifiedUser'; import VerifiedUserIcon from '@material-ui/icons/VerifiedUser';
import LinkIcon from '@material-ui/icons/Link';
import FullScreenDialog from '../../shared/FullScreenDialog'; import FullScreenDialog from '../../shared/FullScreenDialog';
...@@ -25,6 +28,11 @@ const styles = theme => ({ ...@@ -25,6 +28,11 @@ const styles = theme => ({
padding: 1 * theme.spacing.unit, padding: 1 * theme.spacing.unit,
// marginBottom: 2 * theme.spacing.unit // marginBottom: 2 * theme.spacing.unit
}, },
rootLinks: {
display: 'flex',
justifyContent: 'flex-start',
flexWrap: 'wrap',
},
badge: { badge: {
// margin: 0.5 * theme.spacing.unit, // margin: 0.5 * theme.spacing.unit,
top: -0.5 * theme.spacing.unit, top: -0.5 * theme.spacing.unit,
...@@ -44,10 +52,13 @@ const styles = theme => ({ ...@@ -44,10 +52,13 @@ const styles = theme => ({
color: theme.palette.action.disabled color: theme.palette.action.disabled
}, },
button: { button: {
width: 5*theme.spacing.unit, width: 5 * theme.spacing.unit,
height: 5*theme.spacing.unit, height: 5 * theme.spacing.unit,
// margin: 0.5 * theme.spacing.unit, // margin: 0.5 * theme.spacing.unit,
}, },
chip: {
margin: theme.spacing.unit,
},
}) })
...@@ -68,7 +79,7 @@ class GenericModule extends React.Component { ...@@ -68,7 +79,7 @@ class GenericModule extends React.Component {
const { classes, title } = this.props; const { classes, title } = this.props;
return ( return (
<div> <div>
<FullScreenDialog open={this.state.fullScreenDialogOpen} handleClose={this.handleCloseFullScreenDialog}/> <FullScreenDialog open={this.state.fullScreenDialogOpen} handleClose={this.handleCloseFullScreenDialog} />
<Paper className={classes.root} square={true}> <Paper className={classes.root} square={true}>
<Grid container spacing={8}> <Grid container spacing={8}>
<Grid item xs> <Grid item xs>
...@@ -76,7 +87,7 @@ class GenericModule extends React.Component { ...@@ -76,7 +87,7 @@ class GenericModule extends React.Component {
<Typography variant='caption'> Mis à jour par <em>chehabfl</em> le 08/09/2018 à 15h20</Typography> <Typography variant='caption'> Mis à jour par <em>chehabfl</em> le 08/09/2018 à 15h20</Typography>
</Grid> </Grid>
<Grid item xs={4} style={{ textAlign: 'right' }}> <Grid item xs={4} style={{ textAlign: 'right' }}>
<Tooltip title="Informations sur la modération" placement="top"> <Tooltip title="Informations sur la modération" placement="top">
<Badge classes={{ badge: classes.badge }} badgeContent={4} color="secondary"> <Badge classes={{ badge: classes.badge }} badgeContent={4} color="secondary">
<IconButton aria-label="Modération" className={classes.button}> <IconButton aria-label="Modération" className={classes.button}>
...@@ -104,6 +115,20 @@ class GenericModule extends React.Component { ...@@ -104,6 +115,20 @@ class GenericModule extends React.Component {
<div> <div>
{this.props.children} {this.props.children}
</div> </div>
<div className={classes.rootLinks}>
<Chip
avatar={
<Avatar>
<LinkIcon />
</Avatar>
}
label="Site de l'EPFL"
className={classes.chip}
color="secondary"
onClick={() => console.log("test")}
variant="outlined"
/>
</div>
</Paper> </Paper>
</div> </div>
) )
......
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Markdown from '../../shared/Markdown';
import Typography from '@material-ui/core/Typography';
import CloudQueueIcon from '@material-ui/icons/CloudQueue';
import LocalFloristIcon from '@material-ui/icons/LocalFlorist';
import MyComponent from '../../MyComponent';
import TextLink from '../../other/TextLink';
import GenericModule from './GenericModule';
import Grid from '@material-ui/core/Grid';
import Divider from '@material-ui/core/Divider';
const styles = theme => ({
root: {
width: '100%',
overflowX: 'auto',
},
tableCell: {
padding: '2px',
},
content: {
display: "flex",
alignItems: "center",
},
icon: {
paddingRight: theme.spacing.unit
}
});
const comment = "**Attention certaines activités commencent avant cette période**";
class UniversitySemestersDates extends React.Component {
render() {
const { classes, theme } = this.props;
return (
<GenericModule title={"Date des semestres"}>
<div className={classes.root}>
<Table >
<TableHead>
<TableRow key={0}>
<TableCell className={classes.tableCell} component="th" > Semestre </TableCell>
<TableCell className={classes.tableCell} component="th" > Date de début </TableCell>
<TableCell className={classes.tableCell} component="th" > Date de fin </TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow key={1}>
<TableCell className={classes.tableCell} component="td">
<div className={classes.content}>
<CloudQueueIcon color='disabled' className={classes.icon} />
<div>Automne</div>
</div>
</TableCell>
<TableCell className={classes.tableCell} component="td" >12/03/2018</TableCell>
<TableCell className={classes.tableCell} component="td" >12/03/2018</TableCell>
</TableRow>
<TableRow key={2}>
<TableCell className={classes.tableCell} component="td">
<div className={classes.content}>
<LocalFloristIcon color='disabled' className={classes.icon}/>
<div>Printemps</div>
</div>
</TableCell>
<TableCell className={classes.tableCell} component="td" >12/03/2018</TableCell>
<TableCell className={classes.tableCell} component="td" >12/03/2018</TableCell>
</TableRow>
</TableBody>
</Table>
</div>
<Markdown source={comment}/>
</GenericModule>
)
}
}
export default withStyles(styles, { withTheme: true })(UniversitySemestersDates);
...@@ -2,45 +2,82 @@ import React from 'react'; ...@@ -2,45 +2,82 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles'; import { withStyles } from '@material-ui/core/styles';
import MyComponent from '../../MyComponent'; import MyComponent from '../../MyComponent';
import { compose } from 'recompose';
import GenericModule from '../modules/GenericModule'; import GenericModule from '../modules/GenericModule';
import UniversityGeneral from '../modules/UniversityGeneral';
import Grid from '@material-ui/core/Grid'; import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
import Lorem from 'react-lorem-component'; import Lorem from 'react-lorem-component';
import UniversityGeneral from '../modules/UniversityGeneral';
import UniversitySemestersDates from '../modules/UniversitySemestersDates';
import withWidth, { isWidthUp } from '@material-ui/core/withWidth';
const styles = theme => ({ const styles = theme => ({
root: {}, root: { flexGrow: 1, },
}); });
class GeneralInfo extends MyComponent { class GeneralInfo extends MyComponent {
myRender() { myRender() {
return ( const { classes } = this.props;
<div> // Resizing with the grid was causing weird gaps so we rerender depending on the width
<Grid container spacing={16}> if (isWidthUp('lg', this.props.width)) {
<Grid item xs={8}> return (
<UniversityGeneral /> <div className={classes.root}>
</Grid> <Grid container spacing={16} justify='center' alignItems="flex-start" >
<Grid item xs={4}>
<GenericModule title={"Date des semestres"} /> <Grid item lg={7}>
</Grid> <Grid className={classes.root} container spacing={16} direction='column' >
<Grid item xs={12} md={6}> <Grid item xs>
<GenericModule title={"DRI"} /> <UniversityGeneral />
</Grid> </Grid>
<Grid item xs={12} md={6}> <Grid item xs>
<GenericModule title={"Offres de départs"} /> <GenericModule title={"DRI"} />
</Grid>
</Grid>
</Grid>
<Grid item lg={5}>
<Grid className={classes.root} container spacing={16} direction='column' >
<Grid item xs>
<UniversitySemestersDates />
</Grid>
<Grid item xs>
<GenericModule title={"Offres de départs"} />
</Grid>
</Grid>
</Grid>
</Grid> </Grid>
<Grid item xs={12}>
<GenericModule title={"Résumé Départs"} /> <Lorem count={20} />
</div>
);
} else {
return (
<div className={classes.root}>
<Grid container spacing={16} >
<Grid item xs={12}>
<UniversityGeneral />
</Grid>
<Grid item xs={12}>
<GenericModule title={"DRI"} />
</Grid>
<Grid item xs={12}>
<UniversitySemestersDates />
</Grid>
<Grid item xs={12}>
<GenericModule title={"Offres de départs"} />
</Grid>
</Grid> </Grid>
</Grid>
<Lorem count={20} /> <Lorem count={20} />
</div> </div>
); );
}
} }
} }
...@@ -50,4 +87,7 @@ class GeneralInfo extends MyComponent { ...@@ -50,4 +87,7 @@ class GeneralInfo extends MyComponent {
// univId: PropTypes.string.isRequired, // univId: PropTypes.string.isRequired,
// }; // };
export default withStyles(styles)(GeneralInfo); export default compose(
\ No newline at end of file withWidth({ noSSR: true }),
withStyles(styles)
)(GeneralInfo);
\ No newline at end of file
Markdown is supported
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