Improve UX for demo

coolreader18 · coolreader18 · commit 9ddd9809cae7 · 2018-12-22T23:28:15.000-06:00
diff --git a/wasm/demo/src/index.html b/wasm/demo/src/index.html
@@ -8,11 +8,9 @@
         <h1>RustPython Demo</h1>
         <p>
             RustPython is a Python interpreter writter in Rust. This demo is
-            compiled from Rust to WebAssembly so it runs in the browser.
-        </p>
-        <p>
+            compiled from Rust to WebAssembly so it runs in the browser. <br />
             Please input your python code below and click <kbd>Run</kbd>, or you
-            can up your browser's devtools and play with
+            can open up your browser's devtools and play with
             <code>rp.pyEval('print("a")')</code>
         </p>
         <textarea id="code">
@@ -27,7 +25,6 @@ <h1>RustPython Demo</h1>
     print(n1)
     n1, n2 = n2, n1 + n2
     count += 1
-
 </textarea
         >
         <button id="run-btn">Run &#9655;</button>
diff --git a/wasm/demo/src/main.js b/wasm/demo/src/main.js
@@ -33,7 +33,9 @@ function runCodeFromTextarea() {
         const result = rp.pyEval(code, {
             stdout: '#console'
         });
-        consoleElement.value += `\n${result}\n`;
+        if (result !== null) {
+            consoleElement.value += `\n${result}\n`;
+        }
     } catch (e) {
         errorElement.textContent = e;
         console.error(e);
diff --git a/wasm/demo/src/style.css b/wasm/demo/src/style.css
@@ -4,17 +4,17 @@ textarea {
 }
 
 #code {
-    height: 35vh;
+    height: 30vh;
     width: calc(100% - 3px);
 }
 
 .CodeMirror {
     border: 1px solid #ddd;
-    height: 35vh !important;
+    height: 30vh !important;
 }
 
 #console {
-    height: 35vh;
+    height: 30vh;
     width: calc(100% - 3px);
 }
 

Original file line number	Diff line number	Diff line change
`@@ -4,17 +4,17 @@ textarea {`
`4`	`4`	`}`
`5`	`5`
`6`	`6`	`#code {`
`7`		`- height: 35vh;`
	`7`	`+ height: 30vh;`
`8`	`8`	`width: calc(100% - 3px);`
`9`	`9`	`}`
`10`	`10`
`11`	`11`	`.CodeMirror {`
`12`	`12`	`border: 1px solid #ddd;`
`13`		`- height: 35vh !important;`
	`13`	`+ height: 30vh !important;`
`14`	`14`	`}`
`15`	`15`
`16`	`16`	`#console {`
`17`		`- height: 35vh;`
	`17`	`+ height: 30vh;`
`18`	`18`	`width: calc(100% - 3px);`
`19`	`19`	`}`
`20`	`20`