Fixed layout overflow

public/index.html

@@ -9,7 +9,7 @@
         <link rel="shortcut icon" sizes="196x196" href="res-min/img/nice-highres.png">
         <meta name="description" content="Full-featured, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites.">
         <meta name="author" content="Benoit Schweblin">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
         <meta name="mobile-web-app-capable" content="yes">
         <meta name="msvalidate.01" content="5E47EE6F67B069C17E3CDD418351A612"
         />

public/res/core.js

@@ -11,14 +11,13 @@ define([
     "settings",
     "eventMgr",
     "shortcutMgr",
-    "mousetrap",
     "text!html/bodyIndex.html",
     "text!html/bodyViewer.html",
     "text!html/settingsTemplateTooltip.html",
     "text!html/settingsUserCustomExtensionTooltip.html",
     "storage",
     'pagedown',
-], function($, _, crel, editor, layout, constants, utils, storage, settings, eventMgr, shortcutMgr, mousetrap, bodyIndexHTML, bodyViewerHTML, settingsTemplateTooltipHTML, settingsUserCustomExtensionTooltipHTML) {
+], function($, _, crel, editor, layout, constants, utils, storage, settings, eventMgr, shortcutMgr, bodyIndexHTML, bodyViewerHTML, settingsTemplateTooltipHTML, settingsUserCustomExtensionTooltipHTML) {
 
     var core = {};
 

public/res/layout.js

@@ -25,6 +25,10 @@ define([
     var documentPanelWidth = 320;
     var windowSize;
 
+    var wrapperL1, wrapperL2, wrapperL3;
+    var navbar, menuPanel, documentPanel, editor, previewPanel, previewContainer, navbarToggler, previewToggler, previewResizer;
+    var animate = false;
+
     function DomObject(selector) {
         this.selector = selector;
         this.elt = document.querySelector(selector);
@@ -33,12 +37,6 @@ define([
 
     var laterCssTimeoutId;
     var laterCssQueue = [];
-
-    var wrapperL1, wrapperL2, wrapperL3;
-    var navbar, menuPanel, documentPanel, editor, previewPanel, previewContainer, navbarToggler, previewToggler, previewResizer;
-
-    var animate = false;
-
     function applyCssLater() {
         if(laterCssQueue.length === 0) {
             wrapperL1.$elt.removeClass('layout-animate');
@@ -90,7 +88,7 @@ define([
         laterCssTimeoutId = setTimeout(applyCssLater, 350);
     };
 
-    DomObject.prototype.createToggler = function(backdrop) {
+    DomObject.prototype.createToggler = function(backdrop, onToggle) {
         var backdropElt;
         this.toggle = function(show) {
             if(show === this.isOpen) {
@@ -105,6 +103,7 @@ define([
                     }, this));
                     this.$elt.addClass('bring-to-front');
                 }
+                onToggle && onToggle(this.isOpen);
             }
             else {
                 backdropElt && backdropElt.removeBackdrop();
@@ -112,6 +111,7 @@ define([
                 laterCssQueue.push(_.bind(function() {
                     !this.isOpen && this.$elt.find('.in').collapse('hide');
                     this.$elt.toggleClass('panel-open', this.isOpen).toggleClass('bring-to-front', (!!backdrop && this.isOpen));
+                    onToggle && onToggle(this.isOpen);
                 }, this));
             }
             animate = true;
@@ -134,15 +134,25 @@ define([
     }
 
     var editorContentElt;
+    var previewContentElt;
     var editorMarginElt;
     function onResize() {
-        var padding = (editor.elt.offsetWidth - getMaxWidth()) / 2;
+
-        if(padding < constants.EDITOR_DEFAULT_PADDING) {
+        var editorPadding = (editor.elt.offsetWidth - getMaxWidth()) / 2;
-            padding = constants.EDITOR_DEFAULT_PADDING;
+        if(editorPadding < constants.EDITOR_DEFAULT_PADDING) {
+            editorPadding = constants.EDITOR_DEFAULT_PADDING;
         }
-        editorContentElt.style.paddingLeft = padding + 'px';
+        editorContentElt.style.paddingLeft = editorPadding + 'px';
-        editorContentElt.style.paddingRight = padding + 'px';
+        editorContentElt.style.paddingRight = editorPadding + 'px';
-        editorMarginElt.style.width = padding + 'px',
+        editorMarginElt.style.width = editorPadding + 'px';
+
+        var previewPadding = (previewContainer.elt.offsetWidth - getMaxWidth()) / 2;
+        if(previewPadding < constants.EDITOR_DEFAULT_PADDING) {
+            previewPadding = constants.EDITOR_DEFAULT_PADDING;
+        }
+        previewContentElt.style.paddingLeft = previewPadding + 'px';
+        previewContentElt.style.paddingRight = previewPadding + 'px';
+
 
         eventMgr.onLayoutResize();
     }
@@ -171,7 +181,7 @@ define([
         wrapperL3.height = wrapperL1.height - navbarHeight;
 
         if(isVertical) {
-            if(navbar.isOpen && wrapperL3.height < editorMinSize.height + (previewPanel.isOpen ? previewMinSize.height : 0)) {
+            if(navbar.isOpen && wrapperL3.height < editorMinSize.height + resizerSize) {
                 navbar.isOpen = false;
                 return resizeAll();
             }
@@ -183,7 +193,6 @@ define([
                     previewPanel.height = (wrapperL3.height + resizerSize) / 2;
                 }
                 if(previewPanel.height < previewMinSize.height) {
-                    previewPanel.halfSize = false;
                     previewPanel.height = previewMinSize.height;
                 }
                 previewPanel.y = wrapperL3.height - previewPanel.height;
@@ -191,13 +200,11 @@ define([
                     var previewPanelHeight = wrapperL3.height - editorMinSize.height;
                     if(previewPanelHeight < previewMinSize.height) {
                         previewPanel.isOpen = false;
-                    }
-                    else {
-                        previewPanel.halfSize = false;
-                        previewPanel.height = previewPanelHeight;
-                    }
                         return resizeAll();
                     }
+                    previewPanel.height = previewPanelHeight;
+                    previewPanel.y = wrapperL3.height - previewPanel.height;
+                }
             }
             previewPanel.width = wrapperL3.width;
             editor.height = previewPanel.y;
@@ -211,7 +218,7 @@ define([
             previewResizer.width = previewContainer.width;
         }
         else {
-            if(navbar.isOpen && wrapperL3.height < editorMinSize.height) {
+            if(navbar.isOpen && wrapperL3.height < editorMinSize.height + resizerSize) {
                 navbar.isOpen = false;
                 return resizeAll();
             }
@@ -223,7 +230,6 @@ define([
                     previewPanel.width = (wrapperL3.width + resizerSize) / 2;
                 }
                 if(previewPanel.width < previewMinSize.width) {
-                    previewPanel.halfSize = false;
                     previewPanel.width = previewMinSize.width;
                 }
                 previewPanel.x = wrapperL3.width - previewPanel.width;
@@ -231,13 +237,11 @@ define([
                     var previewPanelWidth = wrapperL3.width - editorMinSize.width;
                     if(previewPanelWidth < previewMinSize.width) {
                         previewPanel.isOpen = false;
-                    }
-                    else {
-                        previewPanel.halfSize = false;
-                        previewPanel.width = previewPanelWidth;
-                    }
                         return resizeAll();
                     }
+                    previewPanel.width = previewPanelWidth;
+                    previewPanel.x = wrapperL3.width - previewPanel.width;
+                }
             }
             previewPanel.height = wrapperL3.height;
             editor.width = previewPanel.x;
@@ -265,9 +269,6 @@ define([
         previewResizer.applyCss();
         navbarToggler.applyCss();
 
-
-
-
         onResize();
     }
     layout.resizeAll = resizeAll;
@@ -287,7 +288,9 @@ define([
         previewResizer = new DomObject('.layout-resizer-preview');
 
         editorContentElt = editor.elt.querySelector('.editor-content');
+        previewContentElt = document.getElementById('preview-contents');
         editorMarginElt = editor.elt.querySelector('.editor-margin');
+        var $previewButtonsElt = $('.extension-preview-buttons');
 
         wrapperL1.$elt.toggleClass('layout-vertical', isVertical);
 
@@ -296,7 +299,9 @@ define([
         navbarToggler.$elt.click(_.bind(navbar.toggle, navbar));
 
         previewPanel.isOpen = true;
-        previewPanel.createToggler();
+        previewPanel.createToggler(false, function(isOpen) {
+            $previewButtonsElt.toggleClass('hide', !isOpen);
+        });
         previewPanel.halfSize = true;
         previewToggler.$elt.click(_.bind(previewPanel.toggle, previewPanel));
 
@@ -379,11 +384,7 @@ define([
             return menuPanel.isOpen || documentPanel.isOpen || isModalShown || $(element).is("input, select, textarea:not(.ace_text-input)");
         };
 
-
         $(window).resize(resizeAll);
-        $(document.body).on('touchmove', function(evt) {
-            evt.preventDefault();
-        });
 
         var styleContent = '';
 
@@ -409,19 +410,6 @@ define([
         applyFont(17, 600);
         applyFont(18, 1200);
 
-        function applyMaxWidth(maxWidth, screenWidth) {
-            styleContent += [
-                '@media (min-width: ' + screenWidth + 'px) {',
-                '#preview-contents {',
-                '   max-width: ' + (maxWidth + 30) + 'px;',
-                '}',
-                '}',
-            ].join('\n');
-        }
-        _.each(maxWidthMap, function(entry) {
-            applyMaxWidth(entry.maxWidth, entry.screenWidth);
-        });
-
         // Apply dynamic stylesheet
         var style = crel('style', {
             type : 'text/css'

public/res/styles/main.less

@@ -137,11 +137,17 @@
 @state-danger-border: fade(spin(@logo-orange, -4), 20%);
 
 
-body {
+html, body {
-	tab-size: 4;
 	overflow: hidden;
 }
 
+body {
+	.layout-panel();
+	bottom: 0;
+	right: 0;
+	tab-size: 4;
+}
+
 * {
     outline: none !important;
 }
@@ -789,8 +795,8 @@ a {
 .extension-preview-buttons {
     position: absolute;
 	z-index: 1;
-    margin-top: 6px;
 	right: 35px;
+    margin-top: 6px;
     .ui-layout-resizer-south-closed & {
     	display: none !important;
     }
@@ -1357,8 +1363,7 @@ a {
 }
 
 #preview-contents {
-	padding: 35px;
+	margin: 0 0 200px;
-	margin: 0 auto 200px;
 	text-align: justify;
 }
 

public/viewer.html

@@ -8,7 +8,7 @@
         <link rel="shortcut icon" href="res-min/img/stackedit-32.ico" type="image/x-icon">
         <meta name="description" content="Full-featured, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites.">
         <meta name="author" content="Benoit Schweblin">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
         <meta name="msvalidate.01" content="5E47EE6F67B069C17E3CDD418351A612"
         />
         <script>