Better formatting for menu buttons and editor.

Author: amirrajan

index.css

@@ -64,7 +64,7 @@ iframe {
     z-index: 0;
 }
 
-#editor {
+#editor-container {
     position: absolute;
     left: 0px;
     top: 0px;
@@ -75,6 +75,19 @@ iframe {
     z-index: 1;
 }
 
+.ace_scrollbar-v { display: none !important; }
+
+#editor {
+    margin: 0 0;
+    margin-top: 35px;
+    width: 480px;
+    height: 500px;
+    background-color: rgb(40, 44, 52);
+    border-right: solid 1px black;
+    z-index: 1;
+    overflow: hidden !important;
+}
+
 .ace_gutter {
     background: rgb(40, 44, 52) !important;
 }
@@ -139,9 +152,34 @@ a:visited { color: white; }
     z-index: 100;
 }
 
+#tutorial-save {
+    width: 90px;
+    height: 18px;
+    left: 360px;
+    display: inline;
+    text-align: center;
+    text-decoration: none;
+    top: 5px;
+    color: #FFFFFF;
+    z-index: 100;
+    position: absolute;
+    font-weight: 900;
+    font-size: 16px;
+    line-height: 0.9em;
+    z-index: 100;
+    border: solid 1px #ffffff;
+    background-color: #000000;
+    padding: 3px;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
 #tutorial-next {
-    left: 413px;
+    width: 90px;
+    height: 18px;
+    left: 240px;
     text-decoration: none;
+    text-align: center;
     top: 5px;
     color: #FFFFFF;
     z-index: 100;
@@ -158,8 +196,11 @@ a:visited { color: white; }
 }
 
 #tutorial-prev {
-    left: 345px;
+    width: 90px;
+    height: 18px;
+    left: 120px;
     text-decoration: none;
+    text-align: center;
     top: 5px;
     color: #FFFFFF;
     z-index: 100;
@@ -176,7 +217,7 @@ a:visited { color: white; }
 }
 
 #tutorial-link-pointer {
-    left: 610px;
+    left: 345px;
     top: 225px;
     color: #555555;
     z-index: 100;

index.html

@@ -41,9 +41,12 @@
 
         <a id="tutorial-menu" href="index.html">menu</a>
         <a id="tutorial-full" href="#" target="_blank">view full source</a>
-        <a id="tutorial-prev" href="#" style="display: none" onclick="tutorialLoadPreviousStep(); return false;">prev<br/>step</a>
-        <a id="tutorial-next" href="#" style="display: none" onclick="tutorialLoadNextStep(); return false;">next<br/>step</a>
-        <div id="editor"></div>
+        <a id="tutorial-save" href="#" onclick="save(); return false;"><div style="margin-top: 3px">run</div></a>
+        <a id="tutorial-prev" href="#" style="display: none" onclick="tutorialLoadPreviousStep(); return false;"><div style="margin-top: 3px">prev step</div></a>
+        <a id="tutorial-next" href="#" style="display: none" onclick="tutorialLoadNextStep(); return false;"><div style="margin-top: 3px">next step</div></a>
+        <div id="editor-container">
+          <div id="editor"></div>
+        </div>
 
         <div id="tutorial">
             <div>
@@ -124,8 +127,9 @@ <h1>Tutorials</h1>
          var editor = ace.edit("editor");
          editor.setTheme("ace/theme/monokai");
          editor.session.setMode("ace/mode/ruby");
+         editor.session.setUseWrapMode(true);
 
-         editor.setFontSize("14px");
+         editor.setFontSize("12px");
          editor.commands.addCommand({
            name: "save",
            exec: save,
@@ -164,11 +168,10 @@ <h1>Tutorials</h1>
          });
 
          var heightUpdateFunction = function() {
-           // http://stackoverflow.com/questions/11584061/
-           var newHeight = editor.getSession().getScreenLength() * editor.renderer.lineHeight + editor.renderer.scrollBar.getWidth();
-
-           $('#editor').height("540px");
-           $('#editor-section').height("540px");
+           $('#editor').height("500px");
+           $('#editor').width("480px");
+           $('#editor-section').height("500px");
+           $('#editor-section').width("480px");
 
            // This call is required for the editor to fix all of
            // its inner structure for adapting to a change in size
@@ -231,9 +234,10 @@ <h1>Tutorials</h1>
            }
            var tutorial_step = tutorial.steps[number.toString()];
            document.getElementById("tutorial").innerHTML = tutorial_step.text.outerHTML;
-           editor.setValue("# Exec Code: ctrl + s or cmd + s.\n# Next Step: ctrl + k or cmd + k.\n# Prev Step: ctrl + p or cmd + p.\n\n" + tutorial_step.code);
+           editor.setValue("" + tutorial_step.code);
            editor.gotoLine(0);
            editor.clearSelection();
+           $(".ace_scrollbar").attr("display: none !important");
            save();
          }