New editor style.

Disable MathJax in live preview. Parser isn't MathJax aware.
Performance of MathJax in live preview is not great.
Auto hide editor overflow.

lib/gollum/frontend/public/gollum/livepreview/css/custom.css

@@ -2,6 +2,10 @@ body {
   overflow: hidden;
 }
 
+#editor .ace_sb {
+  overflow-y: auto !important;
+}
+
 #darkness {
   visibility: hidden;
   position: absolute;
@@ -49,7 +53,7 @@ so editor doesn't display in the background. */
 #contentframe {
   margin: 0 auto;
   overflow: visible;
-  width: 80%;
+  width: 90%;
 }
 
 #previewframe {
@@ -63,14 +67,35 @@ so editor doesn't display in the background. */
   right: 0;
 }
 
+.editor_bg {
+  position: fixed;
+  top: 0;
+  margin: 0;
+  padding: 0;
+  background: black;
+  width: 50%;
+  height: 100%;
+  z-index: -2;
+}
+
+.toolpanel_bg {
+  position: fixed;
+  background: #666;
+  top: 0;
+  height: 30px;
+  width: 100%;
+  padding: 5px 0;
+  margin: 0;
+  z-index: -1;
+}
+
 /* -- Start from notepag.es -- */
 .toolpanel {
   position: fixed;
   background: #666;
   top: 0;
   height: 30px;
-  right: 20px;
-  width: 80px;
+  width: 50%;
   vertical-align: middle;
   padding: 5px 0;
   margin: 0;

lib/gollum/frontend/public/gollum/livepreview/index.html

@@ -16,6 +16,9 @@
   <a id='toggle' class='edit' href='javascript:void(0)' onclick='jsm.toggleLeftRight();'><img src='images/lr_24.png' alt='Toggle left to right' title='Toggle left to right'></a>
 </div>
 
+<div class='editor_bg'></div>
+<div class='toolpanel_bg'></div>
+
 <div id='commenttoolpanel' class='toolpanel edit' style='width: 500px; right: 0px; '>
   <a id='savecommentconfirm' class='edit'><img src='images/savecomment_24.png' alt='Confirm save with comment' title='Confirm save with comment'></a>
   <a id='commentcancel' class='edit'><img src='images/cancel_24.png' alt='Cancel save with comment' title='Cancel save with comment'></a>
@@ -36,11 +39,11 @@ var require = {
 <script src='js/sundown.js'></script>
 <script src='js/md_sundown.js'></script>
 <script src='js/livepreview.js'></script>
-<script>(function(d,j){
+<!--<script>(function(d,j){
 j = d.createElement('script');
 j.src = 'https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML';
 (d.head || d.getElementsByTagName('head')[0]).appendChild(j);
 }(document));
-</script>
+</script>-->
 </body>
 </html>

lib/gollum/frontend/public/gollum/livepreview/js/livepreview.js

@@ -397,7 +397,8 @@ var applyTimeout = function () {
     var heightHalf = height / 2;
 
     // height minus 50 so the end of document text doesn't flow off the page.
-    var editorContainerStyle = 'width:' + widthHalf + 'px;' +
+    // + 15 for scroll bar
+    var editorContainerStyle = 'width:' + (widthHalf + 15) + 'px;' +
       'height:' + (height - 50) + 'px;' +
       'left:' + (leftRight === false ? widthHalf + 'px;' : '0px;') +
       'top:' + '40px;'; // use 40px for tool menu
@@ -408,12 +409,12 @@ var applyTimeout = function () {
     var previewStyle = 'width:' + (widthHalf - 2 - 10) + 'px;' +
       'height:' + height + 'px;' +
       'left:' + (leftRight === false ? '10px;' : widthHalf + 'px;') +
-      'top:' + '0px;';
+       // preview panel top is equal to height of comment tool panel (40px) + 1
+      'top:41px;';
     cssSet( preview, previewStyle );
 
      // Resize tool panel
-    var toolPanelStyle = 'width:' + widthHalf + 'px;' +
-      'left:' + (leftRight === false ? widthHalf + 'px;' : '0px;');
+    var toolPanelStyle = 'width:50%;';
     cssSet( toolPanel, toolPanelStyle );
 
     // Resize comment related elements.
@@ -428,10 +429,12 @@ var applyTimeout = function () {
     cssSet( commentEditorContainer, commentEditorContainerStyle );
     commentEditor.resize();
 
+    var commentToolPanelHeight = height / 4 - 40;
+
     // In top subtract height (40px) of comment tool panel.
     var commentToolPanelStyle = 'width:' + widthHalf + 'px;' +
       'left:' + widthFourth + 'px;' +
-      'top:' + (height / 4 - 40) + 'px;' +
+      'top:' + commentToolPanelHeight + 'px;' +
       commentHidden;
     cssSet( commentToolPanel, commentToolPanelStyle );