animate preview mode sidebar

www/code/code.css

@@ -18,6 +18,7 @@ body {
   display: inline-block;
   height: 100%;
   width: 50%;
+  transition: width 500ms, min-width 500ms, max-width 500ms;
   min-width: 20%;
   max-width: 80%;
   resize: horizontal;

www/code/code.less

@@ -16,10 +16,13 @@ body {
     max-height: 100%;
     min-height: auto;
 }
+
+@slideTime: 500ms;
 .CodeMirror {
     display: inline-block;
     height: 100%;
     width: 50%;
+    transition: width @slideTime, min-width @slideTime, max-width @slideTime;
     min-width: 20%;
     max-width: 80%;
     resize: horizontal;

www/code/main.js

@@ -53,6 +53,7 @@ define([
 
         var andThen = function (CMeditor) {
             var CodeMirror = Cryptpad.createCodemirror(CMeditor, ifrw, Cryptpad);
+            $iframe.find('.CodeMirror').addClass('fullPage');
             editor = CodeMirror.editor;
 
             var $bar = $('#pad-iframe')[0].contentWindow.$('#cme_toolbox');
@@ -145,8 +146,13 @@ define([
                 var $codeMirror = $iframe.find('.CodeMirror');
                 if (mode === "markdown") {
                     APP.$previewButton.show();
-                    $previewContainer.show();
-                    $codeMirror.removeClass('fullPage');
+                    Cryptpad.getPadAttribute('previewMode', function (e, data) {
+                        if (e) { return void console.error(e); }
+                        if (data !== false) {
+                            $previewContainer.show();
+                            $codeMirror.removeClass('fullPage');
+                        }
+                    });
                     return;
                 }
                 APP.$previewButton.hide();