From e13e630cd6e4fc0b1ff92098a28a770794c7bb9a Mon Sep 17 00:00:00 2001
From: gabrhr <73925454+gabrhr@users.noreply.github.com>
Date: Wed, 20 Apr 2022 10:19:29 -0500
Subject: =?UTF-8?q?A=C3=B1adir=20plantilla?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Base para front
---
.../odiparpack/app/containers/Layouts/AppLayout.js | 45 ++++++
front/odiparpack/app/containers/Layouts/Grid.js | 96 +++++++++++
.../app/containers/Layouts/Responsive.js | 54 +++++++
.../app/containers/Layouts/demos/AutoLayout.js | 85 ++++++++++
.../app/containers/Layouts/demos/Breakpoint.js | 115 ++++++++++++++
.../app/containers/Layouts/demos/BreakpointGrid.js | 60 +++++++
.../app/containers/Layouts/demos/Centered.js | 54 +++++++
.../app/containers/Layouts/demos/FullHeader.js | 153 ++++++++++++++++++
.../app/containers/Layouts/demos/FullWidth.js | 54 +++++++
.../app/containers/Layouts/demos/GridLayout.js | 78 +++++++++
.../app/containers/Layouts/demos/Interactive.js | 138 ++++++++++++++++
.../app/containers/Layouts/demos/Limitation.js | 68 ++++++++
.../app/containers/Layouts/demos/MediaQueries.js | 41 +++++
.../app/containers/Layouts/demos/SidebarLayout.js | 169 ++++++++++++++++++++
.../containers/Layouts/demos/SidebarLayoutRight.js | 175 +++++++++++++++++++++
.../app/containers/Layouts/demos/WIthWIdth.js | 26 +++
.../app/containers/Layouts/demos/breakpoint.md | 6 +
.../app/containers/Layouts/demos/index.js | 13 ++
.../app/containers/Layouts/demos/menuData.js | 64 ++++++++
19 files changed, 1494 insertions(+)
create mode 100644 front/odiparpack/app/containers/Layouts/AppLayout.js
create mode 100644 front/odiparpack/app/containers/Layouts/Grid.js
create mode 100644 front/odiparpack/app/containers/Layouts/Responsive.js
create mode 100644 front/odiparpack/app/containers/Layouts/demos/AutoLayout.js
create mode 100644 front/odiparpack/app/containers/Layouts/demos/Breakpoint.js
create mode 100644 front/odiparpack/app/containers/Layouts/demos/BreakpointGrid.js
create mode 100644 front/odiparpack/app/containers/Layouts/demos/Centered.js
create mode 100644 front/odiparpack/app/containers/Layouts/demos/FullHeader.js
create mode 100644 front/odiparpack/app/containers/Layouts/demos/FullWidth.js
create mode 100644 front/odiparpack/app/containers/Layouts/demos/GridLayout.js
create mode 100644 front/odiparpack/app/containers/Layouts/demos/Interactive.js
create mode 100644 front/odiparpack/app/containers/Layouts/demos/Limitation.js
create mode 100644 front/odiparpack/app/containers/Layouts/demos/MediaQueries.js
create mode 100644 front/odiparpack/app/containers/Layouts/demos/SidebarLayout.js
create mode 100644 front/odiparpack/app/containers/Layouts/demos/SidebarLayoutRight.js
create mode 100644 front/odiparpack/app/containers/Layouts/demos/WIthWIdth.js
create mode 100644 front/odiparpack/app/containers/Layouts/demos/breakpoint.md
create mode 100644 front/odiparpack/app/containers/Layouts/demos/index.js
create mode 100644 front/odiparpack/app/containers/Layouts/demos/menuData.js
(limited to 'front/odiparpack/app/containers/Layouts')
diff --git a/front/odiparpack/app/containers/Layouts/AppLayout.js b/front/odiparpack/app/containers/Layouts/AppLayout.js
new file mode 100644
index 0000000..c0e96d0
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/AppLayout.js
@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { SidebarLayout, SidebarLayoutRight, FullHeader } from './demos';
+
+class AppLayout extends Component {
+ render() {
+ const title = brand.name + ' - Layout';
+ const description = brand.desc;
+ const docSrc = 'containers/Layouts/demos/';
+ return (
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Material-UI Grid:
+
+
+
+ xs=3
+
+
+ xs=3
+
+
+ xs=3
+
+
+ xs=3
+
+
+ xs=8
+
+
+ xs=4
+
+
+
+
+ CSS Grid Layout:
+
+
+
+ {/* Breakpoin up block */}
+
Breakpoint up
+
+ Using any breakpoint up property, the given children will be hidden at or above the breakpoint.
+
+
+
+ xsUp
+
+
+ smUp
+
+
+ mdUp
+
+
+ lgUp
+
+
+ xlUp
+
+
+
+Current width:
+ {props.width}
+
+
+ {/* Breakpoin down block */}
+
Breakpoint down
+
+ Using any breakpoint down property, the given children will be hidden at or below the breakpoint.
+
+
+
+ xsDown
+
+
+ smDown
+
+
+ mdDown
+
+
+ lgDown
+
+
+ xlDown
+
+
+
+Current width:
+ {props.width}
+
+
+ {/* Breakpoin only block */}
+
Breakpoint only
+
+ Using the breakpoint only property, the given children will be hidden at the specified breakpoint(s).
+
+
+
+ Hidden on lg
+
+
+ Hidden on sm
+
+
+ Hidden on sm and lg
+
+
+
+Current width:
+ {props.width}
+
+
+
+
+
+ xsUp
+
+
+ smUp
+
+
+ mdUp
+
+
+ lgUp
+
+
+ xlUp
+
+
+
+
+Current width:
+ {props.width}
+
+
+
+
+ xs=12
+
+
+ xs=6
+
+
+ xs=6
+
+
+ xs=3
+
+
+ xs=3
+
+
+ xs=3
+
+
+ xs=3
+
+
+
+
+
+
{mailFolderListItems}
+
+
{otherMailFolderListItems}
+
+
+
+
+
+
+
+ Clipped under the app bar
+
+
+
+
+
+ {drawer}
+
+
+
+
+ {drawer}
+
+
+
+
+ Your App Content
+
+
+
+
+ xs=12
+
+
+ xs=12 sm=6
+
+
+ xs=12 sm=6
+
+
+ xs=6 sm=3
+
+
+ xs=6 sm=3
+
+
+ xs=6 sm=3
+
+
+ xs=6 sm=3
+
+
+
+
+
+
+
+ W
+
+
+ {message}
+
+
+
+
+
+
+ W
+
+
+ {message}
+
+
+
+
+
+
+ W
+
+
+ {message}
+
+
+
+
+
+ down(sm): red
+ up(md): blue
+ up(lg): green
+
+ );
+}
+
+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 = (
+
+
+
+
{mailFolderListItems}
+
+
{otherMailFolderListItems}
+
+
+
+
+
+
+
+ App Layout with Sidebar
+
+
+
+
+
+ {drawer}
+
+
+
+
+ {drawer}
+
+
+
+
+ Your App Content
+
+
+
+
+
{mailFolderListItems}
+
+
{otherMailFolderListItems}
+
+
+
+
+ App Layout with Right Sidebar
+
+
+
+
+
+
+
+
+ Your App Content
+
+
+
+ {drawer}
+
+
+
+
+ {drawer}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+export const otherMailFolderListItems = (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
--
cgit v1.2.3