Merge pull request #62 from schalkneethling/issue#51-new-run-button-d…

…esign

Fix issue #51, new run button design

css/editable-js.css

@@ -8,20 +8,6 @@ body {
     margin: 0;
 }
 
-#buttons {
-    margin: .5em;
-}
-
-.output-container {
-    background-color: #fff;
-    padding: .8em 1em 1em;
-    width: 100%;
-    height: 40px;
-    font-family: courier;
-    box-shadow: 0 2px 5px -2px rgba(0, 0, 0, .1);
-    line-height: 1;
-}
-
 #editor,
 #output {
     font-size: 14px;
@@ -50,8 +36,30 @@ body {
     display: none;
 }
 
-#output {
+.output {
+    display: inline-block;
+    background: #fff url('../media/output-arrow.png') -5px -6px no-repeat;
     margin: 0;
+    padding: .8em 1em 1em 50px;
+    border: 1px solid #e0e0e0;
+    border-left: 0;
+    width: 92%;
+    height: 40px;
+    font-family: courier;
+    line-height: 1;
+    vertical-align: bottom;
+}
+
+.run {
+    display: inline-block;
+    background-color: #fff;
+    margin: 0;
+    padding: .8em 1em 1em;
+    border: 1px solid #e0e0e0;
+    font-size: .9em;
+    width: 7%;
+    height: 40px;
+    cursor: pointer;
 }
 
 .fade-in {

package.json

@@ -16,7 +16,9 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "node index.js",
-    "start": "http-server ./docs"
+    "start-server": "http-server ./docs",
+    "start-watch": "chokidar '?(**/*.js|**/*.css|**/*.html)' '!(docs|node_modules)' -c 'npm run build' --initial",
+    "start": "npm-run-all --parallel start-watch start-server"
   },
   "keywords": [
     "javascript",
@@ -27,10 +29,12 @@
     "mozilla"
   ],
   "devDependencies": {
+    "chokidar-cli": "^1.2.0",
     "concat": "^1.0.3",
     "fs-extra": "^3.0.1",
     "http-server": "^0.10.0",
     "node-dir": "^0.1.16",
+    "npm-run-all": "^4.0.2",
     "uglify-es": "^3.0.3"
   }
 }

tmpl/live-js-tmpl.html

@@ -11,11 +11,8 @@
       <input id="reset" type="button" value="Reset" />
     </div>
 
-    <div id="buttons">
-      <input id="execute" type="button" value="Run" />
-    </div>
-
     <div class="output-container">
+        <button id="execute" class="run" type="button">Run</button>
         <div id="output" class="output"></div>
     </div>