From f5e6e685dbb0ccace12794010ef1ac01651fbc7b Mon Sep 17 00:00:00 2001
From: Leon Chen <leon@md.ai>
Date: Wed, 5 Oct 2016 21:39:14 -0400
Subject: [PATCH] update mnist convnet demo

---
 demos/src/mnist-cnn.css | 15 +++++++++------
 demos/src/mnist-cnn.js  |  8 ++++----
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/demos/src/mnist-cnn.css b/demos/src/mnist-cnn.css
index a6d8ba7..e57d32b 100644
--- a/demos/src/mnist-cnn.css
+++ b/demos/src/mnist-cnn.css
@@ -11,8 +11,7 @@
     justify-content: flex-end;
 
     .input-container {
-      display: inline-flex;
-      flex-direction: column;
+      text-align: right;
       margin: 20px;
       position: relative;
 
@@ -33,8 +32,8 @@
 
       .canvas-container {
         display: inline-flex;
+        justify-content: flex-end;
         margin: 10px 0;
-        background: white;
         border: 15px solid rgba(27, 188, 155, 0.3);
         transition: border-color 0.2s ease-in;
 
@@ -42,8 +41,12 @@
           border-color: rgba(27, 188, 155, 0.6);
         }
 
-        canvas:hover {
-          cursor: crosshair;
+        canvas {
+          background: white;
+
+          &:hover {
+            cursor: crosshair;
+          }
         }
       }
 
@@ -118,7 +121,7 @@
       top: 0;
       left: 50%;
       background: white;
-      width: 20px;
+      width: 15px;
       height: 100%;
     }
 
diff --git a/demos/src/mnist-cnn.js b/demos/src/mnist-cnn.js
index 99c7110..f314fc5 100644
--- a/demos/src/mnist-cnn.js
+++ b/demos/src/mnist-cnn.js
@@ -194,6 +194,10 @@ export const MnistCnn = Vue.extend({
 
   methods: {
 
+    toggleGpu: function () {
+      this.model.gpu = !this.useGpu
+    },
+
     clear: function (e) {
       this.clearIntermediateResults()
       const ctx = document.getElementById('input-canvas').getContext('2d')
@@ -336,10 +340,6 @@ export const MnistCnn = Vue.extend({
           ctxScaled.restore()
         })
       })
-    },
-
-    toggleGpu: function () {
-      this.model.gpu = !this.useGpu
     }
   }
 })