From 949cf57fec60f1bc20db63c236b61454170ef754 2014-12-05 18:31:24
From: Matthias Bussonnier <bussonniermatthias@gmail.com>
Date: 2014-12-05 18:31:24
Subject: [PATCH] Merge pull request #7011 from jdfreder/killthelayout

Kill the layout manager
---

diff --git a/IPython/html/static/base/js/page.js b/IPython/html/static/base/js/page.js
index 7c25285..52e89b7 100644
--- a/IPython/html/static/base/js/page.js
+++ b/IPython/html/static/base/js/page.js
@@ -4,14 +4,17 @@
 define([
     'base/js/namespace',
     'jquery',
-], function(IPython, $){
+    'base/js/events',
+], function(IPython, $, events){
     "use strict";
 
     var Page = function () {
         this.bind_events();
+        this._resize_header();
     };
 
     Page.prototype.bind_events = function () {
+        events.on('resize-header.Page', $.proxy(this._resize_header, this));
     };
 
     Page.prototype.show = function () {
@@ -41,6 +44,11 @@ define([
         $('div#site').css('display','block');
     };
 
+    Page.prototype._resize_header = function() {
+        // Update the header's size.
+        $('#header-spacer').height($('#header').height());
+    };
+
     // Register self in the global namespace for convenience.
     IPython.Page = Page;
     return {'Page': Page};
diff --git a/IPython/html/static/base/less/page.less b/IPython/html/static/base/less/page.less
index 772a4bb..baa93a1 100644
--- a/IPython/html/static/base/less/page.less
+++ b/IPython/html/static/base/less/page.less
@@ -20,11 +20,33 @@ body {
 div#header {
     /* Initially hidden to prevent FLOUC */
     display: none;
-    margin-bottom: 0px;
-    padding-left: 30px;
-    padding-bottom: 5px;
-    border-bottom: 1px solid @navbar-default-border;
-    .border-box-sizing();
+    margin-bottom: -6px;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    background-color: @body-bg;
+    min-height: 31px;
+
+    /* Display over codemirror */
+    z-index: 100;
+
+    #header-container {
+        margin-bottom: 0px;
+        padding-left: 30px;
+        padding-bottom: 5px;
+        .border-box-sizing();
+    }
+
+    .header-bar {
+        width: 100%;
+        height: 0px;
+        border-bottom: 1px solid @navbar-default-border;
+    }
+}
+
+#header-spacer {
+    width: 100%;
+    visibility: hidden;
 }
 
 #ipython_notebook {
diff --git a/IPython/html/static/notebook/js/layoutmanager.js b/IPython/html/static/notebook/js/layoutmanager.js
deleted file mode 100644
index e5e48d6..0000000
--- a/IPython/html/static/notebook/js/layoutmanager.js
+++ /dev/null
@@ -1,58 +0,0 @@
-// Copyright (c) IPython Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-define([
-    'base/js/namespace',
-    'jquery',
-], function(IPython, $) {
-    "use strict";
-
-    var LayoutManager = function () {
-        this.bind_events();
-        this.pager = undefined;
-    };
-
-    LayoutManager.prototype.bind_events = function () {
-        $(window).resize($.proxy(this.do_resize,this));
-    };
-
-    LayoutManager.prototype.app_height = function() {
-        var win = $(window);
-        var w = win.width();
-        var h = win.height();
-        var header_height;
-        if ($('div#header').css('display') === 'none') {
-            header_height = 0;
-        } else {
-            header_height = $('div#header').outerHeight(true);
-        }
-        var menubar_height;
-        if ($('div#menubar-container').css('display') === 'none') {
-            menubar_height = 0;
-        } else {
-            menubar_height = $('div#menubar-container').outerHeight(true);
-        }
-        return h-header_height-menubar_height; // content height
-    };
-
-    LayoutManager.prototype.do_resize = function () {
-        var app_height = this.app_height();  // content height
-
-        $('#ipython-main-app').height(app_height);  // content+padding+border height
-        if (this.pager) {
-            var pager_height = this.pager.percentage_height*app_height;
-            var pager_splitter_height = $('div#pager_splitter').outerHeight(true);
-            $('div#pager').outerHeight(pager_height);
-            if (this.pager.expanded) {
-                $('div#notebook').outerHeight(app_height-pager_height-pager_splitter_height);
-            } else {
-                $('div#notebook').outerHeight(app_height-pager_splitter_height);
-            }    
-        }
-    };
-
-    // Backwards compatability.
-    IPython.LayoutManager = LayoutManager;
-
-    return {'LayoutManager': LayoutManager};
-});
diff --git a/IPython/html/static/notebook/js/main.js b/IPython/html/static/notebook/js/main.js
index fb325bc..a6c8264 100644
--- a/IPython/html/static/notebook/js/main.js
+++ b/IPython/html/static/notebook/js/main.js
@@ -9,7 +9,6 @@ require([
     'services/config',
     'base/js/utils',
     'base/js/page',
-    'notebook/js/layoutmanager',
     'base/js/events',
     'auth/js/loginwidget',
     'notebook/js/maintoolbar',
@@ -34,7 +33,6 @@ require([
     configmod,
     utils, 
     page, 
-    layoutmanager, 
     events,
     loginwidget, 
     maintoolbar, 
@@ -66,9 +64,7 @@ require([
 
     var user_config = $.extend({}, config.default_config);
     var page = new page.Page();
-    var layout_manager = new layoutmanager.LayoutManager();
-    var pager = new pager.Pager('div#pager', 'div#pager_splitter', {
-        layout_manager: layout_manager, 
+    var pager = new pager.Pager('div#pager', {
         events: events});
     var acts = new actions.init();
     var keyboard_manager = new keyboardmanager.KeyboardManager({
@@ -104,7 +100,6 @@ require([
     var menubar = new menubar.MenuBar('#menubar', $.extend({
         notebook: notebook, 
         contents: contents,
-        layout_manager: layout_manager, 
         events: events, 
         save_widget: save_widget, 
         quick_help: quick_help}, 
@@ -132,9 +127,7 @@ require([
 
     page.show();
 
-    layout_manager.do_resize();
     var first_load = function () {
-        layout_manager.do_resize();
         var hash = document.location.hash;
         if (hash) {
             document.location.hash = '';
@@ -147,7 +140,6 @@ require([
     events.on('notebook_loaded.Notebook', first_load);
     
     IPython.page = page;
-    IPython.layout_manager = layout_manager;
     IPython.notebook = notebook;
     IPython.contents = contents;
     IPython.pager = pager;
diff --git a/IPython/html/static/notebook/js/menubar.js b/IPython/html/static/notebook/js/menubar.js
index a0bf0e0..59b199e 100644
--- a/IPython/html/static/notebook/js/menubar.js
+++ b/IPython/html/static/notebook/js/menubar.js
@@ -24,7 +24,6 @@ define([
          *      Dictionary of keyword arguments.
          *          notebook: Notebook instance
          *          contents: ContentManager instance
-         *          layout_manager: LayoutManager instance
          *          events: $(Events) instance
          *          save_widget: SaveWidget instance
          *          quick_help: QuickHelp instance
@@ -37,7 +36,6 @@ define([
         this.selector = selector;
         this.notebook = options.notebook;
         this.contents = options.contents;
-        this.layout_manager = options.layout_manager;
         this.events = options.events;
         this.save_widget = options.save_widget;
         this.quick_help = options.quick_help;
@@ -88,6 +86,13 @@ define([
         }
     };
 
+    MenuBar.prototype._size_header = function() {
+        /** 
+         * Update header spacer size.
+         */
+        this.events.trigger('resize-header.Page');
+    };
+
     MenuBar.prototype.bind_events = function () {
         /**
          *  File
@@ -218,12 +223,12 @@ define([
         
         // View
         this.element.find('#toggle_header').click(function () {
-            $('div#header').toggle();
-            that.layout_manager.do_resize();
+            $('div#header-container').toggle();
+            that._size_header();
         });
         this.element.find('#toggle_toolbar').click(function () {
             $('div#maintoolbar').toggle();
-            that.layout_manager.do_resize();
+            that._size_header();
         });
         // Insert
         this.element.find('#insert_cell_above').click(function () {
diff --git a/IPython/html/static/notebook/js/pager.js b/IPython/html/static/notebook/js/pager.js
index 9656fd4..aa372d7 100644
--- a/IPython/html/static/notebook/js/pager.js
+++ b/IPython/html/static/notebook/js/pager.js
@@ -8,48 +8,22 @@ define([
 ], function(IPython, $, utils) {
     "use strict";
 
-    var Pager = function (pager_selector, pager_splitter_selector, options) {
+    var Pager = function (pager_selector, options) {
         /**
          * Constructor
          *
          * Parameters:
          *  pager_selector: string
-         *  pager_splitter_selector: string
          *  options: dictionary
          *      Dictionary of keyword arguments.
          *          events: $(Events) instance
-         *          layout_manager: LayoutManager instance
          */
         this.events = options.events;
         this.pager_element = $(pager_selector);
-        this.pager_button_area = $('#pager_button_area');
-        var that = this;
-        this.percentage_height = 0.40;
-        options.layout_manager.pager = this;
-        this.pager_splitter_element = $(pager_splitter_selector)
-            .draggable({
-                        containment: 'window',
-                        axis:'y',
-                        helper: null ,
-                        drag: function(event, ui) {
-                            /**
-                             * recalculate the amount of space the pager should take
-                             */
-                            var pheight = ($(document.body).height()-event.clientY-4);
-                            var downprct = pheight/options.layout_manager.app_height();
-                                downprct = Math.min(0.9, downprct);
-                            if (downprct < 0.1) {
-                                that.percentage_height = 0.1;
-                                that.collapse({'duration':0});
-                            } else if (downprct > 0.2) {
-                                that.percentage_height = downprct;
-                                that.expand({'duration':0});
-                            }
-                            options.layout_manager.do_resize();
-                       }
-            });
+        this.pager_button_area = $('#pager-button-area');
+        this._default_end_space = 200;
+        this.pager_element.resizable({handles: 'n', resize: $.proxy(this._resize, this)});
         this.expanded = false;
-        this.style();
         this.create_button_area();
         this.bind_events();
     };
@@ -61,7 +35,6 @@ define([
                     .attr('title',"Open the pager in an external window")
                     .addClass('ui-button')
                     .click(function(){that.detach();})
-                    .attr('style','position: absolute; right: 20px;')
                     .append(
                         $('<span>').addClass("ui-icon ui-icon-extlink")
                     )
@@ -71,49 +44,37 @@ define([
                     .attr('title',"Close the pager")
                     .addClass('ui-button')
                     .click(function(){that.collapse();})
-                    .attr('style','position: absolute; right: 5px;')
                     .append(
                         $('<span>').addClass("ui-icon ui-icon-close")
                     )
         );
     };
 
-    Pager.prototype.style = function () {
-        this.pager_splitter_element.addClass('ui-widget ui-state-default');
-        this.pager_splitter_element.attr('title', 'Click to Show/Hide pager area, drag to Resize');
-    };
-
 
     Pager.prototype.bind_events = function () {
         var that = this;
 
         this.pager_element.bind('collapse_pager', function (event, extrap) {
-            var time = 'fast';
-            if (extrap && extrap.duration) {
-                time = extrap.duration;
-            }
-            that.pager_element.hide(time);
+            // Animate hiding of the pager.
+            var time = (extrap && extrap.duration) ? extrap.duration : 'fast';
+            that.pager_element.hide(time, function() {
+                $('.end_space').css('height', that._default_end_space);
+            });
         });
 
         this.pager_element.bind('expand_pager', function (event, extrap) {
-            var time = 'fast';
-            if (extrap && extrap.duration) {
-                time = extrap.duration;
-            }
-            that.pager_element.show(time);
-        });
-
-        this.pager_splitter_element.hover(
-            function () {
-                that.pager_splitter_element.addClass('ui-state-hover');
-            },
-            function () {
-                that.pager_splitter_element.removeClass('ui-state-hover');
-            }
-        );
-
-        this.pager_splitter_element.click(function () {
-            that.toggle();
+            // Clear the pager's height attr if it's set.  This allows the
+            // pager to size itself according to its contents.
+            that.pager_element.height('initial');
+
+            // Animate the showing of the pager
+            var time = (extrap && extrap.duration) ? extrap.duration : 'fast';
+            that.pager_element.show(time, function() {
+                // Explicitly set pager height once the pager has shown itself.
+                // This allows the pager-contents div to use percentage sizing.
+                that.pager_element.height(that.pager_element.height());
+                that._resize();
+            });
         });
 
         this.events.on('open_with_text.Pager', function (event, payload) {
@@ -130,7 +91,7 @@ define([
     Pager.prototype.collapse = function (extrap) {
         if (this.expanded === true) {
             this.expanded = false;
-            this.pager_element.add($('div#notebook')).trigger('collapse_pager', extrap);
+            this.pager_element.trigger('collapse_pager', extrap);
         }
     };
 
@@ -138,7 +99,7 @@ define([
     Pager.prototype.expand = function (extrap) {
         if (this.expanded !== true) {
             this.expanded = true;
-            this.pager_element.add($('div#notebook')).trigger('expand_pager', extrap);
+            this.pager_element.trigger('expand_pager', extrap);
         }
     };
 
@@ -184,6 +145,18 @@ define([
         this.pager_element.find(".container").append($('<pre/>').html(utils.fixCarriageReturn(utils.fixConsole(text))));
     };
 
+
+    Pager.prototype._resize = function() {
+        /**
+         * Update document based on pager size.
+         */
+        
+        // Make sure the padding at the end of the notebook is large
+        // enough that the user can scroll to the bottom of the 
+        // notebook.
+        $('.end_space').css('height', Math.max(this.pager_element.height(), this._default_end_space));
+    };
+
     // Backwards compatability.
     IPython.Pager = Pager;
 
diff --git a/IPython/html/static/notebook/less/menubar.less b/IPython/html/static/notebook/less/menubar.less
index 63e784a..f7df468 100644
--- a/IPython/html/static/notebook/less/menubar.less
+++ b/IPython/html/static/notebook/less/menubar.less
@@ -1,12 +1,13 @@
 #menubar {
   margin-top: 0px;
-  margin-bottom: -19px;
+  margin-bottom: -24px;
   position: relative;
   .border-box-sizing();
 
   .navbar {
     border-top: 1px;
     border-radius: 0px 0px @border-radius-base @border-radius-base;
+    margin-bottom: 23px;
   }
   
   .navbar-toggle {
diff --git a/IPython/html/static/notebook/less/notebook.less b/IPython/html/static/notebook/less/notebook.less
index 87f1503..58ac2df 100644
--- a/IPython/html/static/notebook/less/notebook.less
+++ b/IPython/html/static/notebook/less/notebook.less
@@ -3,10 +3,6 @@ body {
     background-color:   @body-bg;
 }
 
-body.notebook_app {
-    overflow: hidden;
-}
-
 @media (max-width: 767px) {
     // remove bootstrap-responsive's body padding on small screens
     body.notebook_app {
@@ -36,19 +32,17 @@ span#notebook_name {
 div#notebook_panel {
     margin: 0px 0px 0px 0px;
     padding: 0px;
-    .box-shadow(@notebook-shadow);
     .border-box-sizing();
 }
 div#notebook {
     font-size: @notebook_font_size;
     line-height: @notebook_line_height;
-    overflow-y: scroll;
+    overflow-y: hidden;
     overflow-x: auto;
     width: 100%;
     /* This spaces the cell away from the edge of the notebook area */
-    padding: 1em 0 1em 0;
+    padding: 2em 0 2em 0;
     margin: 0px;
-    border-top: 1px solid @navbar-default-border;
     outline: none;
     .border-box-sizing();
 }
@@ -86,3 +80,14 @@ p {
 .end_space {
     height: 200px;
 }
+
+.lower-header-bar {
+    width: 100%;
+    height: 0px;
+    border-bottom: 1px solid @navbar-default-border;
+    margin-bottom: -1px;
+}
+
+.notebook_app #header {
+    .box-shadow(@notebook-shadow);
+}
diff --git a/IPython/html/static/notebook/less/pager.less b/IPython/html/static/notebook/less/pager.less
index 41ca682..6fe021b 100644
--- a/IPython/html/static/notebook/less/pager.less
+++ b/IPython/html/static/notebook/less/pager.less
@@ -1,25 +1,51 @@
-div#pager_splitter {
-    height: 8px;
-    .border-box-sizing();
-}
-
-#pager-container {
-    position: relative;
-    padding: 15px 0px;
-    .border-box-sizing();
-}
-
 div#pager {
+    background-color:   @body-bg;
     font-size: @notebook_font_size;
     line-height: @notebook_line_height;
-    overflow: auto;
+    overflow: hidden;
     display: none;
+    position: fixed;
+    bottom: 0px;
+    width: 100%;
+    max-height: 50%;
+    padding-top: 7px;
+
+    /* Display over codemirror */
+    z-index: 100;
+
+    /* Hack which prevents jquery ui resizable from changing top. */
+    top: inherit !important; 
 
     pre {
-      line-height: @code_line_height;
-      color: @text-color;
-      background-color: @cell_background;
-      padding: @code_padding;
+        line-height: @code_line_height;
+        color: @text-color;
+        background-color: @cell_background;
+        padding: @code_padding;
+    }
+
+    #pager-button-area {
+        position: absolute;
+        top: 7px;
+        right: 20px; 
+    }
+
+    #pager-contents {
+        position: relative;
+        overflow: auto;
+        width: 100%;
+        height: 100%;
+
+        #pager-container {
+            position: relative;
+            padding: 15px 0px;
+            .border-box-sizing();
+        }
+    }
+
+    .ui-resizable-handle {
+        top: 0px;
+        height: 7px;
+        background: @light_border_color;
+        border-bottom: 1px solid @border_color;
     }
-    .border-box-sizing();
 }
diff --git a/IPython/html/static/notebook/less/toolbar.less b/IPython/html/static/notebook/less/toolbar.less
index 26f7cf6..0599021 100644
--- a/IPython/html/static/notebook/less/toolbar.less
+++ b/IPython/html/static/notebook/less/toolbar.less
@@ -2,6 +2,7 @@
     padding: 0px;
     margin-left: -5px;
     margin-top: -5px;
+    margin-bottom: 5px;
 
     select, label {
         width: auto;
@@ -33,8 +34,8 @@
   border: 0px;
   min-height: 27px;
   margin-left: 32px;
-  padding-top: 6px;
-  padding-bottom: 8px;
+  padding-top: 11px;
+  padding-bottom: 3px;
 
   .navbar-text {
     float: none;
@@ -44,10 +45,6 @@
     margin-right: 0px;
     margin-top: 0px;
   }
-
-  .toolbar {
-    margin-top: 0px;
-  }
 }
 
 .select-xs {
diff --git a/IPython/html/static/notebook/less/variables.less b/IPython/html/static/notebook/less/variables.less
index c11250e..466cb09 100644
--- a/IPython/html/static/notebook/less/variables.less
+++ b/IPython/html/static/notebook/less/variables.less
@@ -10,7 +10,7 @@
 @notebook_line_height:          20px;
 @code_line_height:              1.21429em;  // changed from 1.231 to get 17px even
 @code_padding:                  0.4em;  // 5.6 px
-@notebook-shadow:               inset 1px 4px 9px -6px rgba(0,0,0,.25);
+@notebook-shadow:               1px 4px 9px -6px rgba(0,0,0,.25);
 @rendered_html_border_color:    black;
 @input_prompt_color:            navy;
 @output_prompt_color:           darkred;
diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css
index 8c276b3..d8a6ef6 100644
--- a/IPython/html/static/style/style.min.css
+++ b/IPython/html/static/style/style.min.css
@@ -7751,14 +7751,32 @@ body {
 div#header {
   /* Initially hidden to prevent FLOUC */
   display: none;
+  margin-bottom: -6px;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  background-color: #ffffff;
+  min-height: 31px;
+  /* Display over codemirror */
+  z-index: 100;
+}
+div#header #header-container {
   margin-bottom: 0px;
   padding-left: 30px;
   padding-bottom: 5px;
-  border-bottom: 1px solid #e7e7e7;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
 }
+div#header .header-bar {
+  width: 100%;
+  height: 0px;
+  border-bottom: 1px solid #e7e7e7;
+}
+#header-spacer {
+  width: 100%;
+  visibility: hidden;
+}
 #ipython_notebook {
   padding-left: 0px;
 }
@@ -9461,9 +9479,6 @@ h6:hover .anchor-link {
 body {
   background-color: #ffffff;
 }
-body.notebook_app {
-  overflow: hidden;
-}
 @media (max-width: 767px) {
   body.notebook_app {
     padding-left: 0px;
@@ -9489,8 +9504,6 @@ span#notebook_name:hover {
 div#notebook_panel {
   margin: 0px 0px 0px 0px;
   padding: 0px;
-  -webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.25);
-  box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.25);
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -9498,13 +9511,12 @@ div#notebook_panel {
 div#notebook {
   font-size: 14px;
   line-height: 20px;
-  overflow-y: scroll;
+  overflow-y: hidden;
   overflow-x: auto;
   width: 100%;
   /* This spaces the cell away from the edge of the notebook area */
-  padding: 1em 0 1em 0;
+  padding: 2em 0 2em 0;
   margin: 0px;
-  border-top: 1px solid #e7e7e7;
   outline: none;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -9542,6 +9554,16 @@ p {
 .end_space {
   height: 200px;
 }
+.lower-header-bar {
+  width: 100%;
+  height: 0px;
+  border-bottom: 1px solid #e7e7e7;
+  margin-bottom: -1px;
+}
+.notebook_app #header {
+  -webkit-box-shadow: 1px 4px 9px -6px rgba(0, 0, 0, 0.25);
+  box-shadow: 1px 4px 9px -6px rgba(0, 0, 0, 0.25);
+}
 /* CSS for the cell toolbar */
 .celltoolbar {
   border: thin solid #CFCFCF;
@@ -9779,7 +9801,7 @@ fieldset[disabled] #kernel_selector_widget > button.active {
 }
 #menubar {
   margin-top: 0px;
-  margin-bottom: -19px;
+  margin-bottom: -24px;
   position: relative;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -9788,6 +9810,7 @@ fieldset[disabled] #kernel_selector_widget > button.active {
 #menubar .navbar {
   border-top: 1px;
   border-radius: 0px 0px 4px 4px;
+  margin-bottom: 23px;
 }
 #menubar .navbar-toggle {
   float: left;
@@ -10256,27 +10279,21 @@ fieldset[disabled] .notification_widget.danger.active {
   color: #d9534f;
   background-color: #ffffff;
 }
-div#pager_splitter {
-  height: 8px;
-  box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-}
-#pager-container {
-  position: relative;
-  padding: 15px 0px;
-  box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-}
 div#pager {
+  background-color: #ffffff;
   font-size: 14px;
   line-height: 20px;
-  overflow: auto;
+  overflow: hidden;
   display: none;
-  box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
+  position: fixed;
+  bottom: 0px;
+  width: 100%;
+  max-height: 50%;
+  padding-top: 7px;
+  /* Display over codemirror */
+  z-index: 100;
+  /* Hack which prevents jquery ui resizable from changing top. */
+  top: inherit !important;
 }
 div#pager pre {
   line-height: 1.21429em;
@@ -10284,6 +10301,30 @@ div#pager pre {
   background-color: #f7f7f7;
   padding: 0.4em;
 }
+div#pager #pager-button-area {
+  position: absolute;
+  top: 7px;
+  right: 20px;
+}
+div#pager #pager-contents {
+  position: relative;
+  overflow: auto;
+  width: 100%;
+  height: 100%;
+}
+div#pager #pager-contents #pager-container {
+  position: relative;
+  padding: 15px 0px;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+div#pager .ui-resizable-handle {
+  top: 0px;
+  height: 7px;
+  background: #cfcfcf;
+  border-bottom: 1px solid #ababab;
+}
 .quickhelp {
   /* Old browsers */
   display: -webkit-box;
@@ -10350,6 +10391,7 @@ span#autosave_status {
   padding: 0px;
   margin-left: -5px;
   margin-top: -5px;
+  margin-bottom: 5px;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -10380,8 +10422,8 @@ span#autosave_status {
   border: 0px;
   min-height: 27px;
   margin-left: 32px;
-  padding-top: 6px;
-  padding-bottom: 8px;
+  padding-top: 11px;
+  padding-bottom: 3px;
 }
 #maintoolbar .navbar-text {
   float: none;
@@ -10391,9 +10433,6 @@ span#autosave_status {
   margin-right: 0px;
   margin-top: 0px;
 }
-#maintoolbar .toolbar {
-  margin-top: 0px;
-}
 .select-xs {
   height: 24px;
 }
diff --git a/IPython/html/templates/notebook.html b/IPython/html/templates/notebook.html
index 1f8b554..ab5af59 100644
--- a/IPython/html/templates/notebook.html
+++ b/IPython/html/templates/notebook.html
@@ -32,7 +32,7 @@ class="notebook_app"
 {% endblock %}
 
 
-{% block header %}
+{% block headercontainer %}
 
 
 <span id="save_widget" class="nav pull-left">
@@ -50,11 +50,9 @@ class="notebook_app"
     </ul>
 </span>
 
-{% endblock %}
-
-
-{% block site %}
+{% endblock headercontainer %}
 
+{% block header %}
 <div id="menubar-container" class="container">
 <div id="menubar">
     <div id="menus" class="navbar navbar-default" role="navigation">
@@ -289,6 +287,7 @@ class="notebook_app"
         </div>
     </div>
 </div>
+
 <div id="maintoolbar" class="navbar">
   <div class="toolbar-inner navbar-inner navbar-nobg">
     <div id="maintoolbar-container" class="container"></div>
@@ -296,19 +295,25 @@ class="notebook_app"
 </div>
 </div>
 
-<div id="ipython-main-app">
+<div class="lower-header-bar"></div>
+{% endblock header %}
 
+{% block site %}
+
+
+<div id="ipython-main-app">
     <div id="notebook_panel">
         <div id="notebook"></div>
-        <div id="pager_splitter"></div>
-        <div id="pager">
-            <div id='pager_button_area'>
-            </div>
-            <div id="pager-container" class="container"></div>
-        </div>
     </div>
+</div>
 
+<div id="pager">
+    <div id="pager-contents">
+        <div id="pager-container" class="container"></div>
+    </div>
+    <div id='pager-button-area'></div>
 </div>
+
 <div id='tooltip' class='ipython_tooltip' style='display:none'></div>
 
 
diff --git a/IPython/html/templates/page.html b/IPython/html/templates/page.html
index df49518..122f390 100644
--- a/IPython/html/templates/page.html
+++ b/IPython/html/templates/page.html
@@ -81,7 +81,7 @@
 </noscript>
 
 <div id="header" class="navbar navbar-static-top">
-  <div class="container">
+  <div id="header-container" class="container">
   <div id="ipython_notebook" class="nav navbar-brand pull-left"><a href="{{base_url}}tree" alt='dashboard'>{% block logo %}<img src='{{static_url("base/images/logo.png") }}' alt='Jupyter Notebook'/>{% endblock %}</a></div>
 
   {% block login_widget %}
@@ -96,10 +96,15 @@
 
   {% endblock %}
 
-  {% block header %}
+  {% block headercontainer %}
   {% endblock %}
   </div>
+  <div class="header-bar"></div>
+
+  {% block header %}
+  {% endblock %}
 </div>
+<div id="header-spacer"></div>
 
 <div id="site">
 {% block site %}