Fixed drawer; added manifest file

example/sandbox/index.html

@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 
     <title>index</title>
+    <link rel="manifest" href="manifest.json">
     <meta name="description" content="" />
     <meta name="author" content="Christoph Oberhofer" />
 

example/sandbox/manifest.json

@@ -0,0 +1,14 @@
+{
+  "short_name": "Quagga Sandbox",
+  "name": "Sandbox for Barcode-Scanning with Quagga",
+  "icons": [
+    {
+      "src": "static/icon.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "index.html",
+  "display": "standalone",
+  "orientation": "portrait"
+}

example/sandbox/src/components/App.js

@@ -25,9 +25,9 @@ export default class App extends React.Component {
         }]
     };
 
+    _handleToggle = () => this.setState({drawerOpen: !this.state.drawerOpen});
     _handleClose = () => this.setState({drawerOpen: false});
-    _handleOpen = () => this.setState({drawerOpen: true});
-    _handleOpenChange = () => (drawerOpen) => this.setState({drawerOpen});
+    _onRequestChange = drawerOpen => this.setState({drawerOpen});
 
     _startScanning = (e) => {
         e.preventDefault();
@@ -54,7 +54,7 @@ export default class App extends React.Component {
                     docked={false}
                     width={200}
                     open={this.state.drawerOpen}
-                    onRequestChange={this._handleOpenChange}
+                    onRequestChange={this._onRequestChange}
                 >
                     <MenuItem onTouchTap={this._handleClose}>Menu Item</MenuItem>
                     <MenuItem onTouchTap={this._handleClose}>Menu Item 2</MenuItem>
@@ -63,7 +63,7 @@ export default class App extends React.Component {
                     style={{position: 'fixed', top: '0px'}}
                     title="QuaggaJS"
                     iconClassNameRight="muidocs-icon-navigation-expand-more"
-                    onLeftIconButtonTouchTap={this._handleOpen}
+                    onLeftIconButtonTouchTap={this._handleToggle}
                     />
                 <FloatingActionButton
                     secondary={true}

example/sandbox/src/components/Scanner.js

@@ -27,9 +27,7 @@ export default class Scanner extends React.Component {
     }
     render() {
         return (
-            <div className="overlay__content">
-                <div className="overlay__close" onClick={this._onCancel}>X</div>
-            </div>
+            <div className="overlay__content" />
         );
     }
     componentDidMount() {

example/sandbox/static/style.css

@@ -1,3 +1,16 @@
-video {
+.overlay__content {
+    position: relative;
+}
+
+.overlay__content video, .overlay__content canvas {
+    max-width: 100%;
+}
+
+.overlay__content canvas {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
     max-width: 100%;
 }