M #~: Update main layout in FireEdge (#61)

src/fireedge/src/public/components/HOC/InternalLayout.js

@@ -14,7 +14,7 @@
 /* -------------------------------------------------------------------------- */
 
 import React from 'react';
-import { Drawer, Box, Grid } from '@material-ui/core';
+import { Drawer, Box, Container } from '@material-ui/core';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import Header from '../containers/Header';
@@ -23,30 +23,15 @@ import PrincipalMenu from '../containers/PrincipalMenu';
 import { showMenu } from '../../actions';
 
 const InternalLayout = ({ children, display, displayMenu, title }) => (
-  <Box
-    style={{
-      display: 'flex',
-      flexDirection: 'column',
-      flexBasis: '100%'
-    }}
-  >
+  <Box display="flex" width="100%">
     <Header title={title} />
     <Drawer anchor="left" open={display} onClose={() => displayMenu(false)}>
       <PrincipalMenu />
     </Drawer>
-    <Grid container style={{ flexGrow: 1 }}>
-      <Grid item xs={12} style={{ flexGrow: 1, height: '100%' }}>
-        {children}
-      </Grid>
-      <Grid
-        item
-        xs={12}
-        className={'footer'}
-        style={{ bottom: 0, position: 'sticky' }}
-      >
-        <Footer />
-      </Grid>
-    </Grid>
+    <Container component="main" style={{ paddingTop: 96, paddingBottom: 96, height: '100vh' }}>
+      {children}
+    </Container>
+    <Footer />
   </Box>
 );
 

src/fireedge/src/public/components/containers/Footer/index.js

@@ -14,18 +14,16 @@
 /* -------------------------------------------------------------------------- */
 
 import React from 'react';
-import { Grid, Link } from '@material-ui/core';
+import { Box, Link } from '@material-ui/core';
 import classnames from 'classnames';
 import constants from '../../../constants';
 
 const { by } = constants;
 const { text, url } = by;
 const Footer = () => (
-  <Grid className={classnames('footer')}>
-    <Grid item>
+  <Box className={classnames('footer')}>
       <Link href={url}>{text}</Link>
-    </Grid>
-  </Grid>
+  </Box>
 );
 
 export default Footer;

src/fireedge/src/public/components/containers/Header/index.js

@@ -28,7 +28,7 @@ const Header = ({ display, displayMenu: displayMenuFromProps, title }) => {
     displayMenuFromProps(!display);
   };
   return (
-    <AppBar position="sticky" className={classnames('header')}>
+    <AppBar position="fixed" className={classnames('header')}>
       <Toolbar>
         <IconButton
           onClick={displayMenu}

src/fireedge/src/public/scss/footer.scss

@@ -13,10 +13,16 @@
 /* limitations under the License.                                             */
 /* -------------------------------------------------------------------------- */
 
-.footer{
+.footer {
+  position: fixed;
+  bottom: 0;
+  left: auto;
+  right: 0;
+  width: 100%;
+  z-index: 1100;
   background-color: $quaternary;
   text-align: center;
-  padding: .3rem;
+  padding: .5rem;
   a{
     color: $secondary
   }