Better handling of different width

frontend/src/components/university/UniversityTemplate.js

 import React from 'react';
 import PropTypes from 'prop-types';
 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 Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
@@ -44,33 +47,18 @@ class UniversityTemplate extends React.Component {
     value: 0,
   };
 
-  handlerResize() {
-    this.forceUpdate();
-  }
-
-  componentDidMount() {
-    window.addEventListener("resize", this.handlerResize.bind(this));
-  }
-
-  componentWillUnmount() {
-    window.addEventListener("resize", this.handlerResize.bind(this));
-  }
-
   handleChange = (event, value) => {
     this.setState({ value });
   };
 
   render() {
-    const { classes } = this.props;
+    const { classes, univId, width } = this.props;
     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 (
       <div>
@@ -83,8 +71,8 @@ class UniversityTemplate extends React.Component {
             <Tabs
               value={value}
               onChange={this.handleChange}
-              scrollable={width < 1000 ? true : false}
-              centered={width >= 1000 ? true : false}
+              scrollable={scroll}
+              centered={!scroll}
               scrollButtons="on"
               indicatorColor="primary"
               textColor="primary"
@@ -113,4 +101,7 @@ UniversityTemplate.propTypes = {
   univId: PropTypes.string.isRequired,
 };
 
-export default withStyles(styles)(UniversityTemplate);
\ No newline at end of file
+export default compose(
+  withWidth({ noSSR: true }),
+  withStyles(styles)
+)(UniversityTemplate);

frontend/src/components/university/modules/GenericModule.js

@@ -8,10 +8,13 @@ import Badge from '@material-ui/core/Badge';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 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 CreateIcon from '@material-ui/icons/Create';
 import VerifiedUserIcon from '@material-ui/icons/VerifiedUser';
+import LinkIcon from '@material-ui/icons/Link';
 
 import FullScreenDialog from '../../shared/FullScreenDialog';
 
@@ -25,6 +28,11 @@ const styles = theme => ({
     padding: 1 * theme.spacing.unit,
     // marginBottom: 2 * theme.spacing.unit
   },
+  rootLinks: {
+    display: 'flex',
+    justifyContent: 'flex-start',
+    flexWrap: 'wrap',
+  },
   badge: {
     // margin: 0.5 * theme.spacing.unit,
     top: -0.5 * theme.spacing.unit,
@@ -44,10 +52,13 @@ const styles = theme => ({
     color: theme.palette.action.disabled
   },
   button: {
-    width: 5*theme.spacing.unit,
-    height: 5*theme.spacing.unit,
+    width: 5 * theme.spacing.unit,
+    height: 5 * theme.spacing.unit,
     // margin: 0.5 * theme.spacing.unit,
   },
+  chip: {
+    margin: theme.spacing.unit,
+  },
 })
 
 
@@ -68,7 +79,7 @@ class GenericModule extends React.Component {
     const { classes, title } = this.props;
     return (
       <div>
-        <FullScreenDialog open={this.state.fullScreenDialogOpen} handleClose={this.handleCloseFullScreenDialog}/>
+        <FullScreenDialog open={this.state.fullScreenDialogOpen} handleClose={this.handleCloseFullScreenDialog} />
         <Paper className={classes.root} square={true}>
           <Grid container spacing={8}>
             <Grid item xs>
@@ -76,7 +87,7 @@ class GenericModule extends React.Component {
               <Typography variant='caption'> Mis à jour par <em>chehabfl</em> le 08/09/2018 à 15h20</Typography>
             </Grid>
             <Grid item xs={4} style={{ textAlign: 'right' }}>
-              
+
               <Tooltip title="Informations sur la modération" placement="top">
                 <Badge classes={{ badge: classes.badge }} badgeContent={4} color="secondary">
                   <IconButton aria-label="Modération" className={classes.button}>
@@ -104,6 +115,20 @@ class GenericModule extends React.Component {
           <div>
             {this.props.children}
           </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>
       </div>
     )

frontend/src/components/university/modules/UniversitySemestersDates.js

+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);

frontend/src/components/university/tabs/GeneralInfoTab.js

@@ -2,45 +2,82 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import MyComponent from '../../MyComponent';
+import { compose } from 'recompose';
 
 import GenericModule from '../modules/GenericModule';
-import UniversityGeneral from '../modules/UniversityGeneral';
 import Grid from '@material-ui/core/Grid';
 
 import Typography from '@material-ui/core/Typography';
 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 => ({
-  root: {},
+  root: { flexGrow: 1, },
 });
 
 class GeneralInfo extends MyComponent {
-
   myRender() {
-    return (
-      <div>
-        <Grid container spacing={16}>
-          <Grid item xs={8}>
-            <UniversityGeneral />
-          </Grid>
-          <Grid item xs={4}>
-            <GenericModule title={"Date des semestres"} />
-          </Grid>
-          <Grid item xs={12} md={6}>
-            <GenericModule title={"DRI"} />
-          </Grid>
-          <Grid item xs={12} md={6}>
-            <GenericModule title={"Offres de départs"} />
+    const { classes } = this.props;
+    // Resizing with the grid was causing weird gaps so we rerender depending on the width 
+    if (isWidthUp('lg', this.props.width)) {
+      return (
+        <div className={classes.root}>
+          <Grid container spacing={16} justify='center' alignItems="flex-start" >
+
+            <Grid item lg={7}>
+              <Grid className={classes.root} container spacing={16} direction='column' >
+                <Grid item xs>
+                  <UniversityGeneral />
+                </Grid>
+                <Grid item xs>
+                  <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 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>
 
-        <Lorem count={20} />
-      </div>
-    );
+          <Lorem count={20} />
+        </div>
+      );
+    }
   }
 
 }
@@ -50,4 +87,7 @@ class GeneralInfo extends MyComponent {
 //   univId: PropTypes.string.isRequired,
 // };
 
-export default withStyles(styles)(GeneralInfo);
\ No newline at end of file
+export default compose(
+  withWidth({ noSSR: true }),
+  withStyles(styles)
+)(GeneralInfo);
\ No newline at end of file