Added 1em of whitespace between the preview area and edit area in the…

… vertical split mode
mojomojo · Apr 22, 2009 · e943525 · e943525
1 parent 6315921
commit e943525
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 31 deletions.
diff --git a/root/base/page/edit.tt b/root/base/page/edit.tt
@@ -26,7 +26,7 @@
 <div id="edithelp">[% PROCESS edithelp.tt %]</div>
 
 <div id="preview_and_edit_container">
-    <div class="preview" id="content_preview">
+    <div id="content_preview">
     [% IF page.content.formatted(c) %]
         [% page.content.formatted(c) %]
     [% ELSE %]

diff --git a/root/static/js/edit.js b/root/static/js/edit.js
@@ -11,7 +11,7 @@ $(document).ready(function() {
     $split_edit_button
         .attr('href', 'action://' + 'split_edit')
         .click(function() {
-            split_layout_vertical();
+            toggle_split_mode();
             $edit_help.width($content_preview.innerWidth());
             $edit_help.height($content_preview.innerHeight());
             return false;
@@ -36,45 +36,51 @@ $(document).ready(function() {
     }
 });
 
-split_layout_vertical = function() {
+// toggles between horizontal and vertical splitting of the preview and edit areas
+toggle_split_mode = function() {
     var max_container_width       = $(window).width();
     var preview_area_height       = '100%';
     var edit_area_height          = '40em';
     var preview_area_max_width    = max_container_width/2;
+    var $content_preview          = $("#content_preview");
 
     if ($("div#edit_form").css('float')=='left'){
-        $("div#edit_form").css('float',split_layout_vertical.deff);
-        $("div#content_preview").css('float',split_layout_vertical.dcpf);
-        $("div#content_preview").css('width',split_layout_vertical.dcpw);
-        $("div#content_preview").css('height', '100%');
-        $("div#edit_form").css('width',split_layout_vertical.defw);
-        $("div#container").css("max-width",split_layout_vertical.dcmw);
-        $("div#header").css("background-repeat",split_layout_vertical.dhbr);
-        $("div#preview").css("height",split_layout_vertical.dph);
-        $("textarea#body").css("height",split_layout_vertical.tbh);
-        //$("div.preview").css("max-width",split_layout_vertical.dpmw);
-        $("div.preview").css("max-width",'100%');
-		$.cookies.set('split_edit',0);
+        // switch to horizontal split: preview area above edit area
+        $("div#edit_form").css('float',toggle_split_mode.deff);
+        $content_preview.css('float',toggle_split_mode.dcpf);
+        $content_preview.css('width',toggle_split_mode.dcpw);
+        $content_preview.css('height', '100%');
+        $("div#edit_form").css('width',toggle_split_mode.defw);
+        $("div#container").css("max-width",toggle_split_mode.dcmw);
+        $("div#header").css("background-repeat",toggle_split_mode.dhbr);
+        $content_preview.css("height",toggle_split_mode.dph);
+        $("textarea#body").css("height",toggle_split_mode.tbh);
+        //$("div.preview").css("max-width",toggle_split_mode.dpmw);
+        $content_preview.css("max-width",'100%');
+        $content_preview.css("max-width",'100%');
+        $.cookies.set('split_edit',0);
     } else {
-        split_layout_vertical.deff=$('div#edit_form').css('float');
-        split_layout_vertical.dcpf=$('div#content_preview').css('float');
-        split_layout_vertical.dcpw=$('div#content_preview').css('width');
-        split_layout_vertical.defw=$('div#edit_form').css('width');
-        split_layout_vertical.dcmw=$('div#container').css('max-width');
-        split_layout_vertical.dhbr=$('div#header').css('background-repeat');
-        split_layout_vertical.dph=$('div.preview').css('height');
-        split_layout_vertical.tbh=$('textarea#body').css('height');
-        //split_layout_vertical.dpmw=$('div.preview').css('max-width');
+        // switch to vertical split: preview area to the left of edit area
+        toggle_split_mode.deff=$('div#edit_form').css('float');
+        toggle_split_mode.dcpf=$content_preview.css('float');
+        toggle_split_mode.dcpw=$content_preview.css('width');
+        toggle_split_mode.defw=$('div#edit_form').css('width');
+        toggle_split_mode.dcmw=$('div#container').css('max-width');
+        toggle_split_mode.dhbr=$('div#header').css('background-repeat');
+        toggle_split_mode.dph=$content_preview.css('height');
+        toggle_split_mode.tbh=$('textarea#body').css('height');
+        //toggle_split_mode.dpmw=$('div.preview').css('max-width');
         $("div#edit_form").css('float','left');
         $("div#edit_form").css('width','49%');
-        $("div#content_preview").css('float','left');
-        $("div#content_preview").css('width','49%');
-        $("div#content_preview").css('height', edit_area_height);
+        $content_preview.css('float','left');
+        $content_preview.css('width','49%');
+        $content_preview.css('height', edit_area_height);
         $("div#container").css("max-width", max_container_width);
         $("div#header").css('background-repeat', 'no-repeat');
         $("textarea#body").css('height', edit_area_height);
-        $("div.preview").css('max-width', preview_area_max_width);
-		$.cookies.set('split_edit',1);
+        $content_preview.css('max-width', preview_area_max_width);
+        $content_preview.css('margin-right','1em');
+        $.cookies.set('split_edit',1);
     }
 };
 

diff --git a/root/static/mojomojo.css b/root/static/mojomojo.css
@@ -160,14 +160,14 @@ p#message {
   clear:left;
 }
 
-div.preview {
+div#content_preview {
   clear:left;
   /* max-width: 920px; */
   border:1px solid #ddd;
   padding:5px;
   overflow: auto;
   height: 250px;
-  margin:0 0 1em 0;
+  margin: 0 0 1em 0;
 }
 
 textarea#body {