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..0787a12 100644 --- a/IPython/html/static/notebook/js/pager.js +++ b/IPython/html/static/notebook/js/pager.js @@ -8,48 +8,21 @@ 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_element.resizable({handles: 'n'}); this.expanded = false; - this.style(); this.create_button_area(); this.bind_events(); }; @@ -78,11 +51,6 @@ define([ ); }; - 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; @@ -103,19 +71,6 @@ define([ 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(); - }); - this.events.on('open_with_text.Pager', function (event, payload) { // FIXME: support other mime types if (payload.data['text/plain'] && payload.data['text/plain'] !== "") { 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..d9e040e 100644 --- a/IPython/html/static/notebook/less/pager.less +++ b/IPython/html/static/notebook/less/pager.less @@ -1,25 +1,31 @@ -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; display: none; + position: fixed; + bottom: 0px; + width: 100%; + border-top: 1px solid @navbar-default-border; + + /* 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-container { + position: relative; + padding: 15px 0px; + .border-box-sizing(); } - .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..906c25c 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,20 @@ 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; display: none; - box-sizing: border-box; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; + position: fixed; + bottom: 0px; + width: 100%; + border-top: 1px solid #e7e7e7; + /* 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 +10300,13 @@ div#pager pre { background-color: #f7f7f7; padding: 0.4em; } +div#pager #pager-container { + position: relative; + padding: 15px 0px; + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; +} .quickhelp { /* Old browsers */ display: -webkit-box; @@ -10350,6 +10373,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 +10404,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 +10415,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..efd71e2 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 %} @@ -50,11 +50,9 @@ class="notebook_app" -{% endblock %} - - -{% block site %} +{% endblock headercontainer %} +{% block header %} + -
+
+{% endblock header %} +{% block site %} + + +
-
-
-
-
-
-
+
+
+
+
+
+ diff --git a/IPython/html/templates/page.html b/IPython/html/templates/page.html index ea7274c..a5f70f3 100644 --- a/IPython/html/templates/page.html +++ b/IPython/html/templates/page.html @@ -81,7 +81,7 @@