Añadir plantilla

Base para front

16 files changed, 1299 insertions, 0 deletions

diff --git a/front/odiparpack/app/containers/Layouts/demos/AutoLayout.js b/front/odiparpack/app/containers/Layouts/demos/AutoLayout.js
new file mode 100644
index 0000000..864d17e
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/AutoLayout.js
@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Typography, Paper, Divider, Grid } from '@material-ui/core';
+
+const styles = theme => ({
+  container: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(12, 1fr)',
+    gridGap: `${theme.spacing(3)}px`,
+  },
+  paper: {
+    padding: theme.spacing(1),
+    textAlign: 'center',
+    color: theme.palette.text.secondary,
+    whiteSpace: 'nowrap',
+    marginBottom: theme.spacing(1),
+    backgroundColor: theme.palette.secondary.light,
+  },
+  divider: {
+    margin: `${theme.spacing(2)}px 0`,
+  },
+});
+
+function CSSGrid(props) {
+  const { classes } = props;
+
+  return (
+    <div>
+      <Typography variant="subtitle1" gutterBottom>
+        Material-UI Grid:
+      </Typography>
+      <Grid container spacing={3}>
+        <Grid item xs={3}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </Grid>
+        <Grid item xs={3}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </Grid>
+        <Grid item xs={3}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </Grid>
+        <Grid item xs={3}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </Grid>
+        <Grid item xs={8}>
+          <Paper className={classes.paper}>xs=8</Paper>
+        </Grid>
+        <Grid item xs={4}>
+          <Paper className={classes.paper}>xs=4</Paper>
+        </Grid>
+      </Grid>
+      <Divider className={classes.divider} />
+      <Typography variant="subtitle1" gutterBottom>
+        CSS Grid Layout:
+      </Typography>
+      <div className={classes.container}>
+        <div style={{ gridColumnEnd: 'span 3' }}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </div>
+        <div style={{ gridColumnEnd: 'span 3' }}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </div>
+        <div style={{ gridColumnEnd: 'span 3' }}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </div>
+        <div style={{ gridColumnEnd: 'span 3' }}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </div>
+        <div style={{ gridColumnEnd: 'span 8' }}>
+          <Paper className={classes.paper}>xs=8</Paper>
+        </div>
+        <div style={{ gridColumnEnd: 'span 4' }}>
+          <Paper className={classes.paper}>xs=4</Paper>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+CSSGrid.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CSSGrid);
diff --git a/front/odiparpack/app/containers/Layouts/demos/Breakpoint.js b/front/odiparpack/app/containers/Layouts/demos/Breakpoint.js
new file mode 100644
index 0000000..be557b4
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/Breakpoint.js
@@ -0,0 +1,115 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import compose from 'recompose/compose';
+import { withStyles } from '@material-ui/core/styles';
+import { Paper, Hidden, Divider, withWidth, Typography } from '@material-ui/core';
+
+const styles = theme => ({
+  root: {
+    flexGrow: 1,
+  },
+  container: {
+    display: 'flex',
+  },
+  paper: {
+    padding: theme.spacing(2),
+    textAlign: 'center',
+    color: theme.palette.text.secondary,
+    flex: '1 0 auto',
+    margin: theme.spacing(1),
+  },
+  divider: {
+    display: 'block',
+    margin: `${theme.spacing(3)}px 0`,
+  }
+});
+
+function Breakpoint(props) {
+  const { classes } = props;
+
+  return (
+    <div className={classes.root}>
+      {/* Breakpoin up block */}
+      <Typography variant="h5">Breakpoint up</Typography>
+      <Typography gutterBottom noWrap>
+        Using any breakpoint up property, the given children will be hidden at or above the breakpoint.
+      </Typography>
+      <div className={classes.container}>
+        <Hidden xsUp>
+          <Paper className={classes.paper}>xsUp</Paper>
+        </Hidden>
+        <Hidden smUp>
+          <Paper className={classes.paper}>smUp</Paper>
+        </Hidden>
+        <Hidden mdUp>
+          <Paper className={classes.paper}>mdUp</Paper>
+        </Hidden>
+        <Hidden lgUp>
+          <Paper className={classes.paper}>lgUp</Paper>
+        </Hidden>
+        <Hidden xlUp>
+          <Paper className={classes.paper}>xlUp</Paper>
+        </Hidden>
+      </div>
+      <Typography variant="caption" gutterBottom align="center">
+Current width:
+        {props.width}
+      </Typography>
+      <Divider className={classes.divider} />
+      {/* Breakpoin down block */}
+      <Typography variant="h5">Breakpoint down</Typography>
+      <Typography gutterBottom noWrap>
+        Using any breakpoint down property, the given children will be hidden at or below the breakpoint.
+      </Typography>
+      <div className={classes.container}>
+        <Hidden xsDown>
+          <Paper className={classes.paper}>xsDown</Paper>
+        </Hidden>
+        <Hidden smDown>
+          <Paper className={classes.paper}>smDown</Paper>
+        </Hidden>
+        <Hidden mdDown>
+          <Paper className={classes.paper}>mdDown</Paper>
+        </Hidden>
+        <Hidden lgDown>
+          <Paper className={classes.paper}>lgDown</Paper>
+        </Hidden>
+        <Hidden xlDown>
+          <Paper className={classes.paper}>xlDown</Paper>
+        </Hidden>
+      </div>
+      <Typography variant="caption" gutterBottom align="center">
+Current width:
+        {props.width}
+      </Typography>
+      <Divider className={classes.divider} />
+      {/* Breakpoin only block */}
+      <Typography variant="h5">Breakpoint only</Typography>
+      <Typography gutterBottom noWrap>
+        Using the breakpoint only property, the given children will be hidden at the specified breakpoint(s).
+      </Typography>
+      <div className={classes.container}>
+        <Hidden only="lg">
+          <Paper className={classes.paper}>Hidden on lg</Paper>
+        </Hidden>
+        <Hidden only="sm">
+          <Paper className={classes.paper}>Hidden on sm</Paper>
+        </Hidden>
+        <Hidden only={['sm', 'lg']}>
+          <Paper className={classes.paper}>Hidden on sm and lg</Paper>
+        </Hidden>
+      </div>
+      <Typography variant="caption" gutterBottom align="center">
+Current width:
+        {props.width}
+      </Typography>
+    </div>
+  );
+}
+
+Breakpoint.propTypes = {
+  classes: PropTypes.object.isRequired,
+  width: PropTypes.string.isRequired,
+};
+
+export default compose(withStyles(styles), withWidth())(Breakpoint);
diff --git a/front/odiparpack/app/containers/Layouts/demos/BreakpointGrid.js b/front/odiparpack/app/containers/Layouts/demos/BreakpointGrid.js
new file mode 100644
index 0000000..cd94ef9
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/BreakpointGrid.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import compose from 'recompose/compose';
+import { withStyles } from '@material-ui/core/styles';
+import { Paper, Grid, withWidth, Typography } from '@material-ui/core';
+
+const styles = theme => ({
+  root: {
+    flexGrow: 1,
+  },
+  container: {
+    display: 'flex',
+  },
+  paper: {
+    padding: theme.spacing(2),
+    textAlign: 'center',
+    color: theme.palette.text.secondary,
+    flex: '1 0 auto',
+    margin: theme.spacing(1),
+  },
+});
+
+function GridIntegration(props) {
+  const { classes } = props;
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.container}>
+        <Grid container spacing={3}>
+          <Grid item xs hidden={{ xsUp: true }}>
+            <Paper className={classes.paper}>xsUp</Paper>
+          </Grid>
+          <Grid item xs hidden={{ smUp: true }}>
+            <Paper className={classes.paper}>smUp</Paper>
+          </Grid>
+          <Grid item xs hidden={{ mdUp: true }}>
+            <Paper className={classes.paper}>mdUp</Paper>
+          </Grid>
+          <Grid item xs hidden={{ lgUp: true }}>
+            <Paper className={classes.paper}>lgUp</Paper>
+          </Grid>
+          <Grid item xs hidden={{ xlUp: true }}>
+            <Paper className={classes.paper}>xlUp</Paper>
+          </Grid>
+        </Grid>
+      </div>
+      <Typography variant="caption" align="center">
+Current width:
+        {props.width}
+      </Typography>
+    </div>
+  );
+}
+
+GridIntegration.propTypes = {
+  classes: PropTypes.object.isRequired,
+  width: PropTypes.string.isRequired,
+};
+
+export default compose(withStyles(styles), withWidth())(GridIntegration);
diff --git a/front/odiparpack/app/containers/Layouts/demos/Centered.js b/front/odiparpack/app/containers/Layouts/demos/Centered.js
new file mode 100644
index 0000000..cdd1c10
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/Centered.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Paper, Grid } from '@material-ui/core';
+
+const styles = theme => ({
+  root: {
+    flexGrow: 1,
+  },
+  paper: {
+    padding: theme.spacing(2),
+    textAlign: 'center',
+    color: theme.palette.text.secondary,
+    backgroundColor: theme.palette.secondary.light,
+  },
+});
+
+function CenteredGrid(props) {
+  const { classes } = props;
+
+  return (
+    <div className={classes.root}>
+      <Grid container spacing={3}>
+        <Grid item xs={12}>
+          <Paper className={classes.paper}>xs=12</Paper>
+        </Grid>
+        <Grid item xs={6}>
+          <Paper className={classes.paper}>xs=6</Paper>
+        </Grid>
+        <Grid item xs={6}>
+          <Paper className={classes.paper}>xs=6</Paper>
+        </Grid>
+        <Grid item xs={3}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </Grid>
+        <Grid item xs={3}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </Grid>
+        <Grid item xs={3}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </Grid>
+        <Grid item xs={3}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </Grid>
+      </Grid>
+    </div>
+  );
+}
+
+CenteredGrid.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CenteredGrid);
diff --git a/front/odiparpack/app/containers/Layouts/demos/FullHeader.js b/front/odiparpack/app/containers/Layouts/demos/FullHeader.js
new file mode 100644
index 0000000..d5ef402
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/FullHeader.js
@@ -0,0 +1,153 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import MenuIcon from '@material-ui/icons/Menu';
+import { Drawer, AppBar, Toolbar, List, Typography, Divider, IconButton, Hidden } from '@material-ui/core';
+import { mailFolderListItems, otherMailFolderListItems } from './menuData';
+
+
+const drawerWidth = 240;
+
+const styles = theme => ({
+  root: {
+    flexGrow: 1,
+    height: 430,
+    zIndex: 1,
+    overflow: 'hidden',
+    position: 'relative',
+    display: 'flex',
+  },
+  appBar: {
+    zIndex: theme.zIndex.drawer + 1,
+  },
+  menuButton: {
+    marginLeft: 0,
+    marginRight: 36,
+  },
+  drawerPaper: {
+    width: drawerWidth,
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+    [theme.breakpoints.up('md')]: {
+      position: 'relative',
+    },
+  },
+  drawerPaperClose: {
+    overflowX: 'hidden',
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+    width: 70,
+    [theme.breakpoints.up('sm')]: {
+      width: 70,
+    },
+  },
+  toolbar: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    padding: '0 8px',
+    ...theme.mixins.toolbar,
+  },
+  content: {
+    flexGrow: 1,
+    backgroundColor: theme.palette.background.default,
+    padding: theme.spacing(3),
+  },
+});
+
+class FullHeader extends React.Component {
+  state = {
+    open: true,
+  };
+
+  componentDidMount() {
+    window.addEventListener('resize', this.resize.bind(this));
+    this.resize();
+  }
+
+  resize() {
+    this.setState({ open: window.innerWidth >= 760 });
+  }
+
+  handleDrawerToggle = () => {
+    this.setState({ open: !this.state.open });
+  };
+
+  render() {
+    const { classes } = this.props;
+    const { open } = this.state;
+    const drawer = (
+      <div>
+        <div className={classes.toolbar} />
+        <Divider />
+        <List>{mailFolderListItems}</List>
+        <Divider />
+        <List>{otherMailFolderListItems}</List>
+      </div>
+    );
+    return (
+      <div className={classes.root}>
+        <AppBar
+          position="absolute"
+          className={classes.appBar}
+        >
+          <Toolbar>
+            <IconButton
+              color="inherit"
+              aria-label="open drawer"
+              onClick={this.handleDrawerToggle}
+              className={classNames(classes.menuButton)}
+            >
+              <MenuIcon />
+            </IconButton>
+            <Typography variant="h6" color="inherit" noWrap>
+              Clipped under the app bar
+            </Typography>
+          </Toolbar>
+        </AppBar>
+        <Hidden mdUp>
+          <Drawer
+            variant="temporary"
+            anchor="left"
+            open={open}
+            onClose={this.handleDrawerToggle}
+            classes={{
+              paper: classes.drawerPaper,
+            }}
+            ModalProps={{
+              keepMounted: true, // Better open performance on mobile.
+            }}
+          >
+            {drawer}
+          </Drawer>
+        </Hidden>
+        <Hidden smDown implementation="css">
+          <Drawer
+            variant="permanent"
+            classes={{
+              paper: classNames(classes.drawerPaper, !open && classes.drawerPaperClose),
+            }}
+            open={open}
+          >
+            {drawer}
+          </Drawer>
+        </Hidden>
+        <main className={classes.content}>
+          <div className={classes.toolbar} />
+          <Typography noWrap>Your App Content</Typography>
+        </main>
+      </div>
+    );
+  }
+}
+
+FullHeader.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles, { withTheme: true })(FullHeader);
diff --git a/front/odiparpack/app/containers/Layouts/demos/FullWidth.js b/front/odiparpack/app/containers/Layouts/demos/FullWidth.js
new file mode 100644
index 0000000..fa7dbce
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/FullWidth.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Paper, Grid } from '@material-ui/core';
+
+const styles = theme => ({
+  root: {
+    flexGrow: 1,
+  },
+  paper: {
+    padding: theme.spacing(2),
+    textAlign: 'center',
+    color: theme.palette.text.secondary,
+    backgroundColor: theme.palette.secondary.light
+  },
+});
+
+function FullWidthGrid(props) {
+  const { classes } = props;
+
+  return (
+    <div className={classes.root}>
+      <Grid container spacing={3}>
+        <Grid item xs={12}>
+          <Paper className={classes.paper}>xs=12</Paper>
+        </Grid>
+        <Grid item xs={12} sm={6}>
+          <Paper className={classes.paper}>xs=12 sm=6</Paper>
+        </Grid>
+        <Grid item xs={12} sm={6}>
+          <Paper className={classes.paper}>xs=12 sm=6</Paper>
+        </Grid>
+        <Grid item xs={6} sm={3}>
+          <Paper className={classes.paper}>xs=6 sm=3</Paper>
+        </Grid>
+        <Grid item xs={6} sm={3}>
+          <Paper className={classes.paper}>xs=6 sm=3</Paper>
+        </Grid>
+        <Grid item xs={6} sm={3}>
+          <Paper className={classes.paper}>xs=6 sm=3</Paper>
+        </Grid>
+        <Grid item xs={6} sm={3}>
+          <Paper className={classes.paper}>xs=6 sm=3</Paper>
+        </Grid>
+      </Grid>
+    </div>
+  );
+}
+
+FullWidthGrid.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(FullWidthGrid);
diff --git a/front/odiparpack/app/containers/Layouts/demos/GridLayout.js b/front/odiparpack/app/containers/Layouts/demos/GridLayout.js
new file mode 100644
index 0000000..d764c1c
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/GridLayout.js
@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Grid, FormLabel, FormControlLabel, Radio, RadioGroup, Paper } from '@material-ui/core';
+
+const styles = theme => ({
+  root: {
+    flexGrow: 1,
+  },
+  paper: {
+    height: 140,
+    width: 100,
+    backgroundColor: theme.palette.secondary.light,
+  },
+  control: {
+    marginTop: theme.spacing(2),
+    padding: theme.spacing(2),
+  },
+});
+
+class GuttersGrid extends React.Component {
+  state = {
+    spacing: '2',
+  };
+
+  handleChange = key => (event, value) => {
+    this.setState({
+      [key]: value,
+    });
+  };
+
+  render() {
+    const { classes } = this.props;
+    const { spacing } = this.state;
+
+    return (
+      <Grid container className={classes.root}>
+        <Grid item xs={12}>
+          <Grid container className={classes.demo} justify="center" spacing={Number(spacing)}>
+            {[0, 1, 2].map(value => (
+              <Grid key={value} item>
+                <Paper className={classes.paper} />
+              </Grid>
+            ))}
+          </Grid>
+        </Grid>
+        <Grid item xs={12}>
+          <Paper className={classes.control}>
+            <Grid container>
+              <Grid item>
+                <FormLabel>spacing</FormLabel>
+                <RadioGroup
+                  name="spacing"
+                  aria-label="spacing"
+                  value={spacing}
+                  onChange={this.handleChange('spacing')}
+                  row
+                >
+                  <FormControlLabel value="0" control={<Radio />} label="0" />
+                  <FormControlLabel value="1" control={<Radio />} label="1" />
+                  <FormControlLabel value="2" control={<Radio />} label="2" />
+                  <FormControlLabel value="3" control={<Radio />} label="3" />
+                  <FormControlLabel value="4" control={<Radio />} label="4" />
+                </RadioGroup>
+              </Grid>
+            </Grid>
+          </Paper>
+        </Grid>
+      </Grid>
+    );
+  }
+}
+
+GuttersGrid.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(GuttersGrid);
diff --git a/front/odiparpack/app/containers/Layouts/demos/Interactive.js b/front/odiparpack/app/containers/Layouts/demos/Interactive.js
new file mode 100644
index 0000000..2f46841
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/Interactive.js
@@ -0,0 +1,138 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Grid, FormControl, FormLabel, FormControlLabel, RadioGroup, Radio, Paper } from '@material-ui/core';
+
+const styles = theme => ({
+  root: {
+    flexGrow: 1,
+  },
+  demo: {
+    height: 240,
+  },
+  paper: {
+    padding: theme.spacing(2),
+    height: '100%',
+    backgroundColor: theme.palette.secondary.light,
+  },
+  control: {
+    padding: theme.spacing(2),
+  },
+});
+
+class InteractiveGrid extends React.Component {
+  state = {
+    direction: 'row',
+    justify: 'center',
+    alignItems: 'center',
+  };
+
+  handleChange = key => (event, value) => {
+    this.setState({
+      [key]: value,
+    });
+  };
+
+  render() {
+    const { classes } = this.props;
+    const { alignItems, direction, justify } = this.state;
+    return (
+      <Grid container className={classes.root}>
+        <Grid item xs={12}>
+          <Grid
+            container
+            className={classes.demo}
+            alignItems={alignItems}
+            direction={direction}
+            justify={justify}
+          >
+            {[0, 1, 2].map(value => (
+              <Grid key={value} item>
+                <Paper
+                  className={classes.paper}
+                  style={{ paddingTop: (value + 1) * 10, paddingBottom: (value + 1) * 10 }}
+                >
+                  {`Cell ${value + 1}`}
+                </Paper>
+              </Grid>
+            ))}
+          </Grid>
+        </Grid>
+        <Grid item xs={12}>
+          <Paper className={classes.control}>
+            <Grid container>
+              <Grid item xs={6} sm={4}>
+                <FormControl component="fieldset">
+                  <FormLabel>direction</FormLabel>
+                  <RadioGroup
+                    name="direction"
+                    aria-label="direction"
+                    value={direction}
+                    onChange={this.handleChange('direction')}
+                  >
+                    <FormControlLabel value="row" control={<Radio />} label="row" />
+                    <FormControlLabel value="row-reverse" control={<Radio />} label="row-reverse" />
+                    <FormControlLabel value="column" control={<Radio />} label="column" />
+                    <FormControlLabel
+                      value="column-reverse"
+                      control={<Radio />}
+                      label="column-reverse"
+                    />
+                  </RadioGroup>
+                </FormControl>
+              </Grid>
+              <Grid item xs={6} sm={4}>
+                <FormControl component="fieldset">
+                  <FormLabel>justify</FormLabel>
+                  <RadioGroup
+                    name="justify"
+                    aria-label="justify"
+                    value={justify}
+                    onChange={this.handleChange('justify')}
+                  >
+                    <FormControlLabel value="flex-start" control={<Radio />} label="flex-start" />
+                    <FormControlLabel value="center" control={<Radio />} label="center" />
+                    <FormControlLabel value="flex-end" control={<Radio />} label="flex-end" />
+                    <FormControlLabel
+                      value="space-between"
+                      control={<Radio />}
+                      label="space-between"
+                    />
+                    <FormControlLabel
+                      value="space-around"
+                      control={<Radio />}
+                      label="space-around"
+                    />
+                  </RadioGroup>
+                </FormControl>
+              </Grid>
+              <Grid item xs={6} sm={4}>
+                <FormControl component="fieldset">
+                  <FormLabel>alignItems</FormLabel>
+                  <RadioGroup
+                    name="alignItems"
+                    aria-label="alignItems"
+                    value={alignItems}
+                    onChange={this.handleChange('alignItems')}
+                  >
+                    <FormControlLabel value="flex-start" control={<Radio />} label="flex-start" />
+                    <FormControlLabel value="center" control={<Radio />} label="center" />
+                    <FormControlLabel value="flex-end" control={<Radio />} label="flex-end" />
+                    <FormControlLabel value="stretch" control={<Radio />} label="stretch" />
+                    <FormControlLabel value="baseline" control={<Radio />} label="baseline" />
+                  </RadioGroup>
+                </FormControl>
+              </Grid>
+            </Grid>
+          </Paper>
+        </Grid>
+      </Grid>
+    );
+  }
+}
+
+InteractiveGrid.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(InteractiveGrid);
diff --git a/front/odiparpack/app/containers/Layouts/demos/Limitation.js b/front/odiparpack/app/containers/Layouts/demos/Limitation.js
new file mode 100644
index 0000000..076c85f
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/Limitation.js
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Paper, Grid, Avatar, Typography } from '@material-ui/core';
+
+const styles = theme => ({
+  root: {
+    overflow: 'hidden',
+    padding: `0 ${theme.spacing(3)}px`,
+  },
+  wrapper: {
+    maxWidth: 400,
+  },
+  paper: {
+    margin: theme.spacing(1),
+    padding: theme.spacing(2),
+    backgroundColor: theme.palette.secondary.light,
+  },
+});
+
+function AutoGridNoWrap(props) {
+  const { classes } = props;
+  const message = `Truncation should be conditionally applicable on this long line of text
+                    as this is a much longer line than what the container can support. `;
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.wrapper}>
+        <Paper className={classes.paper}>
+          <Grid container wrap="nowrap">
+            <Grid item>
+              <Avatar>W</Avatar>
+            </Grid>
+            <Grid item xs zeroMinWidth>
+              <Typography noWrap>{message}</Typography>
+            </Grid>
+          </Grid>
+        </Paper>
+        <Paper className={classes.paper}>
+          <Grid container wrap="nowrap">
+            <Grid item>
+              <Avatar>W</Avatar>
+            </Grid>
+            <Grid item xs>
+              <Typography noWrap>{message}</Typography>
+            </Grid>
+          </Grid>
+        </Paper>
+        <Paper className={classes.paper}>
+          <Grid container wrap="nowrap">
+            <Grid item>
+              <Avatar>W</Avatar>
+            </Grid>
+            <Grid item xs>
+              <Typography>{message}</Typography>
+            </Grid>
+          </Grid>
+        </Paper>
+      </div>
+    </div>
+  );
+}
+
+AutoGridNoWrap.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(AutoGridNoWrap);
diff --git a/front/odiparpack/app/containers/Layouts/demos/MediaQueries.js b/front/odiparpack/app/containers/Layouts/demos/MediaQueries.js
new file mode 100644
index 0000000..89de6fc
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/MediaQueries.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { red, green, indigo as blue } from '@material-ui/core/colors';
+import { Typography } from '@material-ui/core';
+
+const styles = theme => ({
+  root: {
+    padding: theme.spacing(1),
+    '& h3': {
+      color: theme.palette.common.white,
+    },
+    [theme.breakpoints.down('sm')]: {
+      backgroundColor: red[500],
+    },
+    [theme.breakpoints.up('md')]: {
+      backgroundColor: blue[500],
+    },
+    [theme.breakpoints.up('lg')]: {
+      backgroundColor: green[500],
+    },
+  },
+});
+
+function MediaQuery(props) {
+  const { classes } = props;
+
+  return (
+    <div className={classes.root}>
+      <Typography variant="subtitle1">down(sm): red</Typography>
+      <Typography variant="subtitle1">up(md): blue</Typography>
+      <Typography variant="subtitle1">up(lg): green</Typography>
+    </div>
+  );
+}
+
+MediaQuery.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(MediaQuery);
diff --git a/front/odiparpack/app/containers/Layouts/demos/SidebarLayout.js b/front/odiparpack/app/containers/Layouts/demos/SidebarLayout.js
new file mode 100644
index 0000000..3f1c10c
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/SidebarLayout.js
@@ -0,0 +1,169 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import MenuIcon from '@material-ui/icons/Menu';
+import { Drawer, AppBar, Toolbar, List, Typography, Divider, IconButton, Hidden } from '@material-ui/core';
+import { mailFolderListItems, otherMailFolderListItems } from './menuData';
+
+
+const drawerWidth = 240;
+
+const styles = theme => ({
+  root: {
+    flexGrow: 1,
+    height: 430,
+    zIndex: 1,
+    overflow: 'hidden',
+    position: 'relative',
+    display: 'flex',
+  },
+  appBar: {
+    zIndex: theme.zIndex.drawer + 1,
+    transition: theme.transitions.create(['width', 'margin'], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+  },
+  appBarShift: {
+    marginLeft: 0,
+    width: '100%',
+    transition: theme.transitions.create(['width', 'margin'], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+    [theme.breakpoints.up('md')]: {
+      marginLeft: drawerWidth,
+      width: `calc(100% - ${drawerWidth}px)`,
+    },
+  },
+  menuButton: {
+    marginLeft: 0,
+    marginRight: 36,
+  },
+  drawerPaper: {
+    width: drawerWidth,
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+    [theme.breakpoints.up('md')]: {
+      position: 'relative',
+    },
+  },
+  drawerPaperClose: {
+    overflowX: 'hidden',
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+    width: 70,
+    [theme.breakpoints.up('sm')]: {
+      width: 70,
+    },
+  },
+  toolbar: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    padding: '0 8px',
+    ...theme.mixins.toolbar,
+  },
+  content: {
+    flexGrow: 1,
+    backgroundColor: theme.palette.background.default,
+    padding: theme.spacing(3),
+  },
+});
+
+class SidebarLayout extends React.Component {
+  state = {
+    open: true,
+  };
+
+  componentDidMount() {
+    window.addEventListener('resize', this.resize.bind(this));
+    this.resize();
+  }
+
+  resize() {
+    this.setState({ open: window.innerWidth >= 760 });
+  }
+
+  handleDrawerToggle = () => {
+    this.setState({ open: !this.state.open });
+  };
+
+  render() {
+    const { classes } = this.props;
+    const { open } = this.state;
+    const drawer = (
+      <div>
+        <div className={classes.toolbar} />
+        <Divider />
+        <List>{mailFolderListItems}</List>
+        <Divider />
+        <List>{otherMailFolderListItems}</List>
+      </div>
+    );
+    return (
+      <div className={classes.root}>
+        <AppBar
+          position="absolute"
+          className={classNames(classes.appBar, open && classes.appBarShift)}
+        >
+          <Toolbar>
+            <IconButton
+              color="inherit"
+              aria-label="open drawer"
+              onClick={this.handleDrawerToggle}
+              className={classNames(classes.menuButton)}
+            >
+              <MenuIcon />
+            </IconButton>
+            <Typography variant="h6" color="inherit" noWrap>
+              App Layout with Sidebar
+            </Typography>
+          </Toolbar>
+        </AppBar>
+        <Hidden mdUp>
+          <Drawer
+            variant="temporary"
+            anchor="left"
+            open={open}
+            onClose={this.handleDrawerToggle}
+            classes={{
+              paper: classes.drawerPaper,
+            }}
+            ModalProps={{
+              keepMounted: true, // Better open performance on mobile.
+            }}
+          >
+            {drawer}
+          </Drawer>
+        </Hidden>
+        <Hidden smDown implementation="css">
+          <Drawer
+            variant="permanent"
+            classes={{
+              paper: classNames(classes.drawerPaper, !open && classes.drawerPaperClose),
+            }}
+            open={open}
+          >
+            {drawer}
+          </Drawer>
+        </Hidden>
+        <main className={classes.content}>
+          <div className={classes.toolbar} />
+          <Typography noWrap>Your App Content</Typography>
+        </main>
+      </div>
+    );
+  }
+}
+
+SidebarLayout.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles, { withTheme: true })(SidebarLayout);
diff --git a/front/odiparpack/app/containers/Layouts/demos/SidebarLayoutRight.js b/front/odiparpack/app/containers/Layouts/demos/SidebarLayoutRight.js
new file mode 100644
index 0000000..85c5229
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/SidebarLayoutRight.js
@@ -0,0 +1,175 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import MenuIcon from '@material-ui/icons/Menu';
+import { Drawer, AppBar, Toolbar, List, Typography, Divider, IconButton, Hidden } from '@material-ui/core';
+import { mailFolderListItems, otherMailFolderListItems } from './menuData';
+
+
+const drawerWidth = 240;
+
+const styles = theme => ({
+  root: {
+    flexGrow: 1,
+    height: 430,
+    zIndex: 1,
+    overflow: 'hidden',
+    position: 'relative',
+    display: 'flex',
+  },
+  flexwrap: {
+    display: 'flex'
+  },
+  flex: {
+    flex: 1
+  },
+  appBar: {
+    zIndex: theme.zIndex.drawer + 1,
+    transition: theme.transitions.create(['width', 'margin'], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+  },
+  appBarShift: {
+    marginRight: 0,
+    width: '100%',
+    transition: theme.transitions.create(['width', 'margin'], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+    [theme.breakpoints.up('md')]: {
+      marginRight: drawerWidth,
+      width: `calc(100% - ${drawerWidth}px)`,
+    },
+  },
+  menuButton: {
+    marginRight: 0,
+    marginLeft: 36,
+  },
+  drawerPaper: {
+    width: drawerWidth,
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+    [theme.breakpoints.up('md')]: {
+      position: 'relative',
+    },
+  },
+  drawerPaperClose: {
+    overflowX: 'hidden',
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+    width: 70,
+    [theme.breakpoints.up('sm')]: {
+      width: 70,
+    },
+  },
+  toolbar: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    padding: '0 8px',
+    ...theme.mixins.toolbar,
+  },
+  content: {
+    flexGrow: 1,
+    backgroundColor: theme.palette.background.default,
+    padding: theme.spacing(3),
+  },
+});
+
+class SidebarLayoutRight extends React.Component {
+  state = {
+    open: true,
+  };
+
+  componentDidMount() {
+    window.addEventListener('resize', this.resize.bind(this));
+    this.resize();
+  }
+
+  resize() {
+    this.setState({ open: window.innerWidth >= 760 });
+  }
+
+  handleDrawerToggle = () => {
+    this.setState({ open: !this.state.open });
+  };
+
+  render() {
+    const { classes } = this.props;
+    const { open } = this.state;
+    const drawer = (
+      <div>
+        <div className={classes.toolbar} />
+        <Divider />
+        <List>{mailFolderListItems}</List>
+        <Divider />
+        <List>{otherMailFolderListItems}</List>
+      </div>
+    );
+    return (
+      <div className={classes.root}>
+        <AppBar
+          position="absolute"
+          className={classNames(classes.appBar, open && classes.appBarShift)}
+        >
+          <Toolbar className={classes.flexwrap}>
+            <Typography variant="h6" color="inherit" className={classes.flex} noWrap>
+              App Layout with Right Sidebar
+            </Typography>
+            <IconButton
+              color="inherit"
+              aria-label="open drawer"
+              onClick={this.handleDrawerToggle}
+              className={classNames(classes.menuButton)}
+            >
+              <MenuIcon />
+            </IconButton>
+          </Toolbar>
+        </AppBar>
+        <main className={classes.content}>
+          <div className={classes.toolbar} />
+          <Typography noWrap>Your App Content</Typography>
+        </main>
+        <Hidden mdUp>
+          <Drawer
+            variant="temporary"
+            anchor="right"
+            open={open}
+            onClose={this.handleDrawerToggle}
+            classes={{
+              paper: classes.drawerPaper,
+            }}
+            ModalProps={{
+              keepMounted: true, // Better open performance on mobile.
+            }}
+          >
+            {drawer}
+          </Drawer>
+        </Hidden>
+        <Hidden smDown implementation="css">
+          <Drawer
+            variant="permanent"
+            classes={{
+              paper: classNames(classes.drawerPaper, !open && classes.drawerPaperClose),
+            }}
+            open={open}
+          >
+            {drawer}
+          </Drawer>
+        </Hidden>
+      </div>
+    );
+  }
+}
+
+SidebarLayoutRight.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles, { withTheme: true })(SidebarLayoutRight);
diff --git a/front/odiparpack/app/containers/Layouts/demos/WIthWIdth.js b/front/odiparpack/app/containers/Layouts/demos/WIthWIdth.js
new file mode 100644
index 0000000..2aab0e3
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/WIthWIdth.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withWidth, Typography } from '@material-ui/core';
+
+const components = {
+  sm: 'em',
+  md: 'u',
+  lg: 'del',
+};
+
+function WithWidth(props) {
+  const { width } = props;
+  const Component = components[width] || 'span';
+
+  return (
+    <Typography variant="subtitle1">
+      <Component>{`Current width: ${width}`}</Component>
+    </Typography>
+  );
+}
+
+WithWidth.propTypes = {
+  width: PropTypes.string.isRequired,
+};
+
+export default withWidth()(WithWidth);
diff --git a/front/odiparpack/app/containers/Layouts/demos/breakpoint.md b/front/odiparpack/app/containers/Layouts/demos/breakpoint.md
new file mode 100644
index 0000000..e5037ec
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/breakpoint.md
@@ -0,0 +1,6 @@
+
+ | innerWidth  |xs | sm  | md  | lg  | xl  |
+ |--------|-----|----|----|----|----|----|
+ | width  |   xs   |   sm   |   md   |   lg   |   xl |
+ | smUp   |   show | hide  |
+ | mdDown |        |       |     hide | show |
diff --git a/front/odiparpack/app/containers/Layouts/demos/index.js b/front/odiparpack/app/containers/Layouts/demos/index.js
new file mode 100644
index 0000000..70f3804
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/index.js
@@ -0,0 +1,13 @@
+export AutoLayout from './AutoLayout';
+export Centered from './Centered';
+export FullWidth from './FullWidth';
+export GridLayout from './GridLayout';
+export Interactive from './Interactive';
+export Limitation from './Limitation';
+export SidebarLayout from './SidebarLayout';
+export SidebarLayoutRight from './SidebarLayoutRight';
+export FullHeader from './FullHeader';
+export Breakpoint from './Breakpoint';
+export BreakpointGrid from './BreakpointGrid';
+export MediaQueries from './MediaQueries';
+export WIthWIdth from './WIthWIdth';
diff --git a/front/odiparpack/app/containers/Layouts/demos/menuData.js b/front/odiparpack/app/containers/Layouts/demos/menuData.js
new file mode 100644
index 0000000..cd2d653
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/menuData.js
@@ -0,0 +1,64 @@
+// This file is shared across the demos.
+
+import React from 'react';
+import InboxIcon from '@material-ui/icons/MoveToInbox';
+import DraftsIcon from '@material-ui/icons/Drafts';
+import StarIcon from '@material-ui/icons/Star';
+import SendIcon from '@material-ui/icons/Send';
+import MailIcon from '@material-ui/icons/Mail';
+import DeleteIcon from '@material-ui/icons/Delete';
+import ReportIcon from '@material-ui/icons/Report';
+
+import { ListItem, ListItemIcon, ListItemText } from '@material-ui/core';
+
+export const mailFolderListItems = (
+  <div>
+    <ListItem button>
+      <ListItemIcon>
+        <InboxIcon />
+      </ListItemIcon>
+      <ListItemText primary="Inbox" />
+    </ListItem>
+    <ListItem button>
+      <ListItemIcon>
+        <StarIcon />
+      </ListItemIcon>
+      <ListItemText primary="Starred" />
+    </ListItem>
+    <ListItem button>
+      <ListItemIcon>
+        <SendIcon />
+      </ListItemIcon>
+      <ListItemText primary="Send mail" />
+    </ListItem>
+    <ListItem button>
+      <ListItemIcon>
+        <DraftsIcon />
+      </ListItemIcon>
+      <ListItemText primary="Drafts" />
+    </ListItem>
+  </div>
+);
+
+export const otherMailFolderListItems = (
+  <div>
+    <ListItem button>
+      <ListItemIcon>
+        <MailIcon />
+      </ListItemIcon>
+      <ListItemText primary="All mail" />
+    </ListItem>
+    <ListItem button>
+      <ListItemIcon>
+        <DeleteIcon />
+      </ListItemIcon>
+      <ListItemText primary="Trash" />
+    </ListItem>
+    <ListItem button>
+      <ListItemIcon>
+        <ReportIcon />
+      </ListItemIcon>
+      <ListItemText primary="Spam" />
+    </ListItem>
+  </div>
+);