From f499104d753cc93bf8e89554adbf3f6c4e3e6861 Mon Sep 17 00:00:00 2001 From: Min RK Date: Fri, 23 Jan 2015 14:34:44 -0800 Subject: [PATCH 1/4] don't use flexbox to size `#site` The approach in #7517 didn't work on Safari (as in the entire page was invisible). This is the same mechanism used to size the CodeMirror div on the edit page, and should work more reliably. --- IPython/html/static/base/js/page.js | 25 ++++++++++++++++--------- IPython/html/static/base/less/page.less | 7 ------- IPython/html/static/edit/js/main.js | 2 +- IPython/html/static/style/style.min.css | 24 ------------------------ 4 files changed, 17 insertions(+), 41 deletions(-) diff --git a/IPython/html/static/base/js/page.js b/IPython/html/static/base/js/page.js index 355f71e61..ea35027b8 100644 --- a/IPython/html/static/base/js/page.js +++ b/IPython/html/static/base/js/page.js @@ -10,14 +10,20 @@ define([ var Page = function () { this.bind_events(); - - // When the page is ready, resize the header. - var that = this; - $(function() { that._resize_header(); }); }; Page.prototype.bind_events = function () { - events.on('resize-header.Page', $.proxy(this._resize_header, this)); + // resize site on: + // - window resize + // - header change + // - page load + var _handle_resize = $.proxy(this._resize_site, this); + + $(window).resize(_handle_resize); + + // On document ready, resize codemirror. + $(document).ready(_handle_resize); + events.on('resize-header.Page', _handle_resize); }; Page.prototype.show = function () { @@ -44,12 +50,13 @@ define([ * Main scripts should call this method after styling everything. * TODO: selector are hardcoded, pass as constructor argument */ - $('div#site').css('display','block'); + $('div#site').css('display', 'block'); + this._resize_site(); }; - Page.prototype._resize_header = function() { - // Update the header's size. - $('#header-spacer').height($('#header').height()); + Page.prototype._resize_site = function() { + // Update the site's size. + $('div#site').height(window.innerHeight - $('#header').height()); }; // Register self in the global namespace for convenience. diff --git a/IPython/html/static/base/less/page.less b/IPython/html/static/base/less/page.less index c58166187..ccb210d2f 100644 --- a/IPython/html/static/base/less/page.less +++ b/IPython/html/static/base/less/page.less @@ -14,9 +14,6 @@ body { right: 0px; top: 0px; bottom: 0px; - @media not print { - .vbox(); - } overflow: visible; } @@ -85,10 +82,6 @@ body { display: none; .border-box-sizing(); overflow: auto; - @media not print { - flex: 1; - height: 0px; // triggers overflow, but overridded by flex - } } /* Smaller buttons */ diff --git a/IPython/html/static/edit/js/main.js b/IPython/html/static/edit/js/main.js index 61822e3cd..4a2731082 100644 --- a/IPython/html/static/edit/js/main.js +++ b/IPython/html/static/edit/js/main.js @@ -90,7 +90,7 @@ require([ // height twice. Once for top padding and once for bottom padding. $('div.CodeMirror').height(window.innerHeight - header.height() - 2*header_margin_bottom); }; - window.onresize = _handle_resize; + $(window).resize(_handle_resize); // On document ready, resize codemirror. $(document).ready(_handle_resize); diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css index fa1ff284b..3674a93b2 100644 --- a/IPython/html/static/style/style.min.css +++ b/IPython/html/static/style/style.min.css @@ -8267,24 +8267,6 @@ body { bottom: 0px; overflow: visible; } -@media not print { - body { - /* Old browsers */ - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-box-align: stretch; - display: -moz-box; - -moz-box-orient: vertical; - -moz-box-align: stretch; - display: box; - box-orient: vertical; - box-align: stretch; - /* Modern browsers */ - display: flex; - flex-direction: column; - align-items: stretch; - } -} #header { /* Initially hidden to prevent FLOUC */ display: none; @@ -8349,12 +8331,6 @@ body { -webkit-box-sizing: border-box; overflow: auto; } -@media not print { - #site { - flex: 1; - height: 0px; - } -} /* Smaller buttons */ .ui-button .ui-button-text { padding: 0.2em 0.8em; From f971cad2233f815c0ed8c9eda21ad31d0f7ddaf9 Mon Sep 17 00:00:00 2001 From: Min RK Date: Fri, 23 Jan 2015 14:57:37 -0800 Subject: [PATCH 2/4] use translateZ(0) to avoid repaints of `#site` on scroll. --- IPython/html/static/base/less/page.less | 6 ++++++ IPython/html/static/style/style.min.css | 5 +++++ 2 files changed, 11 insertions(+) diff --git a/IPython/html/static/base/less/page.less b/IPython/html/static/base/less/page.less index ccb210d2f..6f249b2a5 100644 --- a/IPython/html/static/base/less/page.less +++ b/IPython/html/static/base/less/page.less @@ -78,6 +78,12 @@ body { } #site { + // avoid repaints on size with translateZ(0) + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -ms-transform: translateZ(0); + -o-transform: translateZ(0); + transform: translateZ(0); width: 100%; display: none; .border-box-sizing(); diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css index 3674a93b2..4388dbd19 100644 --- a/IPython/html/static/style/style.min.css +++ b/IPython/html/static/style/style.min.css @@ -8324,6 +8324,11 @@ body { height: 28px; } #site { + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -ms-transform: translateZ(0); + -o-transform: translateZ(0); + transform: translateZ(0); width: 100%; display: none; box-sizing: border-box; From 315fb1528e5e4764b8657162364d2e2ea22dd37b Mon Sep 17 00:00:00 2001 From: Min RK Date: Fri, 23 Jan 2015 14:58:15 -0800 Subject: [PATCH 3/4] remove inappropriate negative margin on menubar caused 1px mismatch between header background and menubar when toolbar is hidden. --- IPython/html/static/notebook/less/menubar.less | 2 +- IPython/html/static/style/style.min.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/IPython/html/static/notebook/less/menubar.less b/IPython/html/static/notebook/less/menubar.less index e9827d07d..7f776c035 100644 --- a/IPython/html/static/notebook/less/menubar.less +++ b/IPython/html/static/notebook/less/menubar.less @@ -5,7 +5,7 @@ .navbar { border-top: 1px; border-radius: 0px 0px @border-radius-base @border-radius-base; - margin-bottom: -1px; + margin-bottom: 0px; } .navbar-toggle { diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css index 4388dbd19..f79f1fc73 100644 --- a/IPython/html/static/style/style.min.css +++ b/IPython/html/static/style/style.min.css @@ -10320,7 +10320,7 @@ select[multiple].celltoolbar select { #menubar .navbar { border-top: 1px; border-radius: 0px 0px 2px 2px; - margin-bottom: -1px; + margin-bottom: 0px; } #menubar .navbar-toggle { float: left; From 525c16d721d77558533681940bd07b0f73658c4b Mon Sep 17 00:00:00 2001 From: Min RK Date: Sat, 24 Jan 2015 11:56:52 -0800 Subject: [PATCH 4/4] hook up ScrollManager to #site --- IPython/html/static/notebook/js/scrollmanager.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/IPython/html/static/notebook/js/scrollmanager.js b/IPython/html/static/notebook/js/scrollmanager.js index 788d2c543..552b326e8 100644 --- a/IPython/html/static/notebook/js/scrollmanager.js +++ b/IPython/html/static/notebook/js/scrollmanager.js @@ -8,7 +8,7 @@ define(['jquery'], function($){ * Public constructor. */ this.notebook = notebook; - this.element = $('body'); + this.element = $('#site'); options = options || {}; this.animation_speed = options.animation_speed || 250; //ms };