Tweaks on resize

frontend/src/components/university/UniversityTemplate.js

@@ -43,6 +43,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 });
   };
@@ -50,23 +62,28 @@ class UniversityTemplate extends React.Component {
   render() {
     const { classes } = 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;
     return (
       <div>
 
         <div>
-         <CoverGallery></CoverGallery>
+          <CoverGallery></CoverGallery>
         </div>
         <div className={classes.root}>
           <AppBar position="sticky" color="default">
             <Tabs
               value={value}
               onChange={this.handleChange}
-              scrollable
+              scrollable={width < 1000 ? true : false}
+              centered={width >= 1000 ? true : false}
               scrollButtons="on"
               indicatorColor="primary"
               textColor="primary"
-              centered
             >
               <Tab label="Généralités" icon={<PhoneIcon />} />
               <Tab label="Précédents départs" icon={<HelpIcon />} />
@@ -75,7 +92,7 @@ class UniversityTemplate extends React.Component {
               <Tab label="Autres" icon={<ShoppingBasket />} />
             </Tabs>
           </AppBar>
-          {value === 0 && <TabContainer>Item One <Lorem count={10}/></TabContainer>}
+          {value === 0 && <TabContainer>Item One <Lorem count={10} /></TabContainer>}
           {value === 1 && <TabContainer>Item Two</TabContainer>}
           {value === 2 && <TabContainer>Item Three</TabContainer>}
           {value === 3 && <TabContainer>Item Four</TabContainer>}