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..6f249b2a5 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; } @@ -81,14 +78,16 @@ 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(); 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/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 }; 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 8b1e36427..6d548c516 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; @@ -8342,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; @@ -8349,12 +8336,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; @@ -10340,7 +10321,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;