Update web layout.

McLeopold · May 30, 2012 · 944f930 · 944f930
1 parent 25f8752
commit 944f930
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 13 deletions.
diff --git a/web/tortoise.css b/web/tortoise.css
@@ -10,13 +10,18 @@ body {
 #samples input[type="button"] {
 	border: solid 1px gray;
 	border-radius: 6px;
+	background: #d0e0c0;
 }
 #input {
 	width: 663px;
+	height: 400px;
 }
 #editor {
-	float: left;
-	width: 663px;
+	position: absolute;
+	top: 54px;
+	right: 0px;
+	left: 420px;
+	bottom: 0px;
 }
 #console {
 	background: #d0e0c0;
@@ -31,9 +36,22 @@ body {
 	font-family: monospace;
 }
 .CodeMirror {
+	position: absolute;
 	border: solid 1px black;
+	left: 0px;
+	right: 0px;
+	top: 30px;
+	bottom: 30px;
+}
+#samples {
+	position: absolute;
+	bottom: 0px;
+}
+#canvas {
+	padding-top: 420px;
+	float: left;
+	width: 400;
 }
-
 svg {
 	border: solid 1px #f8f8f2;
 	background-color: #fff;

diff --git a/web/tortoise.html b/web/tortoise.html
@@ -17,10 +17,11 @@
 <body>
   <h1>Live Tortoise Editor and Interpreter!</h1>
   <p>Tortoise <a href="tortoise_test.html">Tests</a> and <a href="tortoise.peg">PEG</a></p>
+  <div id="canvas">
+    <p>Console:</p>
+    <div id="console"></div>
+  </div>
   <div id="editor">
-    <div id="codemirror"></div>
-    <div id="samples">Samples:</div>
-    <textarea id="input" cols="80" rows="10"></textarea><br />
     <div id="controls">
       <input id="check" type="button" value="Check" />
       <input id="run" type="button" value="Run" />
@@ -29,11 +30,8 @@ <h1>Live Tortoise Editor and Interpreter!</h1>
       <input id="play" type="button" value="Play" />
       <span>Speed:</span><input id="speed" type="number" value="200" min="0" max="1000" step="50" />
     </div>
-    <br />
-    <p>Console:</p>
-    <div id="console"></div>
-  </div>
-  <div id="help">
+    <textarea id="input" cols="80" rows="40"></textarea><br />
+    <div id="samples">Samples:</div>
   </div>
 </body>
 </html>
diff --git a/web/tortoise.js b/web/tortoise.js
@@ -33,7 +33,8 @@ $(function() {
   var state;
   var myCodeMirror = CodeMirror.fromTextArea(document.getElementById('input'), {
     mode:  "javascript",
-    //theme: "neat"
+    theme: "neat",
+    lineNumbers: true
   });
   // load sample buttons
   var sample_div = $('#samples');
@@ -48,7 +49,7 @@ $(function() {
     }(sample_name));
   };
   myCodeMirror.setValue(Tortoise.samples['maze'][0]);
-  Tortoise.interpreter.init(680, 100, 400, 400);
+  Tortoise.interpreter.init(8, 84, 400, 400);
   $('#check').click(function() {
     myCodeMirror.save();
     var user_text = $('#input').val();
@@ -125,4 +126,9 @@ $(function() {
       }
     }, parseInt($('#speed').val(), 10));
   });
+  $(window).resize(function () {
+    $(myCodeMirror.getScrollerElement()).height($('.CodeMirror').height());
+    myCodeMirror.refresh();
+  })
+  $('.CodeMirror').resize();
 });