Merge pull request #164 from pbondoer/staging

UI improvements

www/code/code.less

@@ -59,8 +59,14 @@ body {
     box-sizing: border-box;
     font-family: Calibri,Ubuntu,sans-serif;
     word-wrap: break-word;
-    media-tag * {
-        max-width:100%;
+    position: relative;
+    media-tag {
+        * {
+            max-width:100%;
+        }
+        iframe[type="application/pdf"] {
+            max-height:50vh;
+        }
     }
 }
 
@@ -72,6 +78,17 @@ body {
     .markdown_gfm-table(black);
 }
 
+.cp-splitter {
+    position: absolute;
+    height: 100%;
+    width: 8px;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+
+    cursor: col-resize;
+}
+
 @media (max-width: @media-medium-screen) {
     .CodeMirror {
         flex: 1;

www/code/inner.js

@@ -4,6 +4,7 @@ define([
     'cm/lib/codemirror',
 
     'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
+    'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
     'less!/code/code.less',
     'less!/customize/src/less/toolbar.less',
     'less!/customize/src/less/cryptpad.less',

www/code/main.js

@@ -387,6 +387,26 @@ define([
                     }
                 });
 
+                // add the splitter
+                var splitter = $('<div>', {
+                    'class': 'cp-splitter'
+                }).appendTo($iframe.find('#previewContainer'));
+
+                var $target = $iframe.find('.CodeMirror');
+                splitter.on('mousedown', function (e) {
+                    e.preventDefault();
+                    var x = e.pageX;
+                    var w = $target.width();
+
+                    $iframe.on('mouseup mousemove', function handler(evt) {
+                        if (evt.type === 'mouseup') {
+                            $iframe.off('mouseup mousemove', handler);
+                            return;
+                        }
+                        $target.css('width', (w - x + evt.pageX) + 'px');
+                    });
+                });
+
                 Cryptpad.removeLoadingScreen();
                 setEditable(true);
                 initializing = false;

www/common/diffMarked.js

@@ -60,6 +60,10 @@ define([
         return out;
     };
 
+    renderer.paragraph = function (p) {
+        return /<media\-tag[\s\S]*>/i.test(p)? p + '\n': '<p>' + p + '</p>\n';
+    };
+
     var MutationObserver = window.MutationObserver;
     var forbiddenTags = [
         'SCRIPT',

www/slide/slide.less

@@ -336,6 +336,15 @@ div#modal #content, #print {
             padding-left: 0.3em;
         }
 
+        // fixes image overflowing
+        media-tag {
+            height: 100%;
+
+            & + * {
+                margin-top: 1rem;
+            }
+        }
+
         img {
             position: relative;
             min-width: 1%;
@@ -383,19 +392,6 @@ p {
     //flex: 1;
 }
 
-media-tag {
-    min-height: 0;
-    flex: 1;
-    display: flex;
-    flex-flow: column;
-    text-align: center;
-}
+@import "../customize/src/less2/include/mediatag.less";
 
-media-tag img {
-    flex: 1;
-    max-height: 100% !important;
-}
-
-media-tag iframe {
-  min-height: 100%;
-}
+.mediatag_base();