Fixed react drawer for better mobile experience

TWhidden · Oct 24, 2020 · 2c33e0d · 2c33e0d
1 parent cbe2349
commit 2c33e0d
Show file tree

Hide file tree

Showing 9 changed files with 1,798 additions and 2,631 deletions.
diff --git a/HolidayShowWeb/ClientApp/package-lock.json b/HolidayShowWeb/ClientApp/package-lock.json
diff --git a/HolidayShowWeb/ClientApp/src/components/EffectsEditor.js b/HolidayShowWeb/ClientApp/src/components/EffectsEditor.js
@@ -29,7 +29,7 @@ const styles = theme => ({
         minWidth: 120,
     },
     selectEmpty: {
-        marginTop: theme.spacing.unit * 2,
+        marginTop: 2,
     },
 });
 
@@ -229,7 +229,9 @@ class EffectsEditor extends Component {
                 effectName: "New Effect",
                 effectInstructionId: effectAvailable.value,
                 instructionMetaData: "DEVPINS=;DUR=500",
-                duration: 5000
+                duration: 5000,
+                timeOn: "",
+                timeOff: ""
             };
 
             effect = await this.props.appStore.effectCreate(effect);

diff --git a/HolidayShowWeb/ClientApp/src/components/Home.js b/HolidayShowWeb/ClientApp/src/components/Home.js
@@ -5,9 +5,7 @@ import Typography from '@material-ui/core/Typography';
 import {inject, observer} from 'mobx-react';
 
 const styles = theme => ({
-  button: {
-    margin: theme.spacing.unit,
-  },
+
   input: {
     display: 'none',
   },

diff --git a/HolidayShowWeb/ClientApp/src/components/Layout.js b/HolidayShowWeb/ClientApp/src/components/Layout.js
@@ -1,7 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
+import {  makeStyles, useTheme } from '@material-ui/core/styles';
 import Drawer from '@material-ui/core/Drawer';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
@@ -11,16 +9,14 @@ import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
-import {NavMenu} from './NavMenu'
+import { NavMenu } from './NavMenu'
+import clsx from 'clsx';
+import CssBaseline from '@material-ui/core/CssBaseline';
 
 const drawerWidth = 240;
 
-const styles = theme => ({
+const useStyles = makeStyles((theme) => ({
   root: {
-    flexGrow: 1,
-    zIndex: 1,
-    overflow: 'auto',
-    position: 'relative',
     display: 'flex',
   },
   appBar: {
@@ -39,110 +35,115 @@ const styles = theme => ({
     }),
   },
   menuButton: {
-    marginLeft: 12,
     marginRight: 36,
   },
   hide: {
     display: 'none',
   },
-  drawerPaper: {
-    position: 'relative',
+  drawer: {
+    width: drawerWidth,
+    flexShrink: 0,
     whiteSpace: 'nowrap',
+  },
+  drawerOpen: {
     width: drawerWidth,
     transition: theme.transitions.create('width', {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.enteringScreen,
     }),
   },
-  drawerPaperClose: {
-    overflowX: 'hidden',
+  drawerClose: {
     transition: theme.transitions.create('width', {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.leavingScreen,
     }),
-    width: theme.spacing.unit * 7,
+    overflowX: 'hidden',
+    width: theme.spacing(7) + 1,
     [theme.breakpoints.up('sm')]: {
-      width: theme.spacing.unit * 9,
+      width: theme.spacing(9) + 1,
     },
   },
   toolbar: {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-end',
-    padding: '0 8px',
+    padding: theme.spacing(0, 1),
+    // necessary for content to be below app bar
     ...theme.mixins.toolbar,
   },
   content: {
     flexGrow: 1,
-    backgroundColor: theme.palette.background.default,
-    padding: theme.spacing.unit,
-    overflow: 'auto'
+    padding: theme.spacing(3),
   },
-});
+}));
 
-class MiniDrawer extends React.Component {
-  state = {
-    open: false,
-  };
+export default function MiniDrawer(props) {
+  const classes = useStyles();
+  const theme = useTheme();
+  const [open, setOpen] = React.useState(false);
 
-  handleDrawerOpen = () => {
-    this.setState({ open: true });
+  const handleDrawerOpen = () => {
+    setOpen(true);
   };
 
-  handleDrawerClose = () => {
-    this.setState({ open: false });
+  const handleDrawerClose = () => {
+    setOpen(false);
   };
 
-  render() {
-    const { classes, theme } = this.props;
 
-    return (
-      <div className={classes.root}>
-        <AppBar
-          position="absolute"
-          className={classNames(classes.appBar, this.state.open && classes.appBarShift)}
-        >
-          <Toolbar disableGutters={!this.state.open}>
-            <IconButton
-              color="inherit"
-              aria-label="Open drawer"
-              onClick={this.handleDrawerOpen}
-              className={classNames(classes.menuButton, this.state.open && classes.hide)}
-            >
-              <MenuIcon />
-            </IconButton>
-            <Typography variant="title" color="secondary" noWrap>
-              Holiday Show Editor
-            </Typography>
-          </Toolbar>
-        </AppBar>
-        <Drawer
-          variant="permanent"
-          classes={{
-            paper: classNames(classes.drawerPaper, !this.state.open && classes.drawerPaperClose),
-          }}
-          open={this.state.open}
-        >
-          <div className={classes.toolbar}>
-            <IconButton onClick={this.handleDrawerClose}>
-              {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
-            </IconButton>
-          </div>
-          <Divider />
-          <NavMenu/>
-        </Drawer>
-        <main className={classes.content}>
-          <div className={classes.toolbar} />
-          {this.props.children}
-        </main>
-      </div>
-    );
-  }
-}
+  return (
+    <div className={classes.root}>
+      <CssBaseline />
+      <AppBar
+        position="fixed"
+        className={clsx(classes.appBar, {
+          [classes.appBarShift]: open,
+        })}
+      >
+        <Toolbar>
+          <IconButton
+            color="inherit"
+            aria-label="open drawer"
+            onClick={handleDrawerOpen}
+            edge="start"
+            className={clsx(classes.menuButton, {
+              [classes.hide]: open,
+            })}
+          >
+            <MenuIcon />
+          </IconButton>
+          <Typography variant="h6" noWrap>
+            Holiday Show Editor
+          </Typography>
+        </Toolbar>
+      </AppBar>
+      <Drawer
+        variant="permanent"
+        className={clsx(classes.drawer, {
+          [classes.drawerOpen]: open,
+          [classes.drawerClose]: !open,
+        })}
+        classes={{
+          paper: clsx({
+            [classes.drawerOpen]: open,
+            [classes.drawerClose]: !open,
+          }),
+        }}
+      >
+        <div className={classes.toolbar}>
+          <IconButton onClick={handleDrawerClose}>
+            {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
+          </IconButton>
+        </div>
+        <Divider />
+        <NavMenu />
+      </Drawer>
+      <main className={classes.content}>
+        <div className={classes.toolbar} />
+        {props.children}
+      </main>
+    </div>
+  );
 
-MiniDrawer.propTypes = {
-  classes: PropTypes.object.isRequired,
-  theme: PropTypes.object.isRequired,
-};
+}
 
-export default withStyles(styles, { withTheme: true })(MiniDrawer);
diff --git a/HolidayShowWeb/ClientApp/src/components/NavMenu.js b/HolidayShowWeb/ClientApp/src/components/NavMenu.js
@@ -24,7 +24,7 @@ export class NavMenu extends Component {
   render() {
     return (
 
-      <List disablePadding style={{ width: "224px" }}>
+      <List disablePadding >
           <ListItem button component={Link} to={`/`} >
           <ListItemIcon>
             <HomeIcon />

diff --git a/HolidayShowWeb/ClientApp/src/components/SetsEditor.js b/HolidayShowWeb/ClientApp/src/components/SetsEditor.js
@@ -32,7 +32,7 @@ const styles = theme => ({
         minWidth: 120,
     },
     selectEmpty: {
-        marginTop: theme.spacing.unit * 2,
+        marginTop: 2,
     },
 });
 
@@ -204,15 +204,15 @@ class SetsEditor extends Component {
             this.props.appStore.isBusySet(true);
 
             let set = {
-                setName: "New Set",
+                setName: "New Set"
             };
 
             set = await SetServices.createSet(set);
 
             runInAction(()=>{
                 this.sets.push(set);
                 this.setSelected = set;
-                this.setIdSelected = set.SetId;
+                this.setIdSelected = set.setId;
                 this.setSequences = [];
             });
 

diff --git a/HolidayShowWeb/ClientApp/src/components/controls/ErrorContent.js b/HolidayShowWeb/ClientApp/src/components/controls/ErrorContent.js
@@ -24,10 +24,9 @@ function getModalStyle() {
 const styles = theme => ({
     paper: {
         position: 'absolute',
-        width: theme.spacing.unit * 50,
         backgroundColor: theme.palette.background.paper,
         boxShadow: theme.shadows[5],
-        padding: theme.spacing.unit * 4,
+        padding: 4,
     },
 });
 

diff --git a/HolidayShowWeb/Program.cs b/HolidayShowWeb/Program.cs
@@ -1,29 +1,31 @@
-using Microsoft.AspNetCore;
+using System.Net;
 using Microsoft.AspNetCore.Hosting;
+using Microsoft.Extensions.Hosting;
 
 namespace HolidayShowWeb
 {
     public class Program
     {
         public static void Main(string[] args)
         {
-            // .UseUrls($"http://{Options.WebHost}:{Options.WebPort}")
-            CreateWebHostBuilder(args).Build().Run();
+            CreateHostBuilder(args).Build().Run();
         }
 
-        public static IWebHostBuilder CreateWebHostBuilder(string[] args)
-        {
-            // get the environment var
-            var portStr = System.Environment.GetEnvironmentVariable("PORT");
-            if (!int.TryParse(portStr, out var port))
-            {
-                port = 8000;
-            }
 
-            return WebHost.CreateDefaultBuilder(args)
-                .UseStartup<Startup>()
-                .UseUrls($"http://*:{port}");
-        }
+        public static IHostBuilder CreateHostBuilder(string[] args) =>
+
+            Host.CreateDefaultBuilder(args)
+
+                .ConfigureWebHostDefaults(webBuilder =>
+                {
+                    webBuilder
+                        .ConfigureKestrel(serverOptions =>
+                        {
+                            serverOptions.Listen(IPAddress.Any, 8000);
+                        })
+                        .UseStartup<Startup>();
+                });
+
 
 
     }

diff --git a/scripts/docker/core-web/package.json b/scripts/docker/core-web/package.json
@@ -4,13 +4,13 @@
   "description": "Holiday Show - netcore",
   "author": "Travis Whidden",
   "scripts": {
-    "build-x64": "../build.sh -a x64  -s 1",
-    "build-x64-beta": "./build.sh -a x64 -l beta -s 1",
+    "build-x64": "../build.sh -d core-web  -a x64  -s 1",
+    "build-x64-beta": "./build.sh -d core-web  -a x64 -l beta -s 1",
     "build-x64-beta-skip-react": "../build.sh -d core-web -a x64 -l beta",
-    "push-x64": "../push.sh -a x64",
-    "push-x64-beta": "../push.sh -a x64 -l beta",
+    "push-x64": "../push.sh -d core-web  -a x64",
+    "push-x64-beta": "../push.sh -d core-web  -a x64 -l beta",
     "docker-run": "../run.sh",
-    "docker-run-shell": "../run.sh -c bash",
+    "docker-run-shell": "../run.sh -d core-web  -c bash",
     "docker-run-beta": "../run.sh -d core-web -l beta"
   },
   "repository": {