diff --git a/IPython/frontend/html/notebook/static/css/notebook.css b/IPython/frontend/html/notebook/static/css/notebook.css index dabd75528..88f9259d4 100644 --- a/IPython/frontend/html/notebook/static/css/notebook.css +++ b/IPython/frontend/html/notebook/static/css/notebook.css @@ -6,14 +6,6 @@ body { - background-color: white; - /* This makes sure that the body covers the entire window and needs to - be in a different element than the display: box in wrapper below */ - position: absolute; - left: 0px; - right: 0px; - top: 0px; - bottom: 0px; overflow: hidden; } @@ -31,11 +23,6 @@ span#notebook_name { font-size: 146.5%; } -#menubar { - /* Initially hidden to prevent FLOUC */ - display: none; -} - .ui-menubar-item .ui-button .ui-button-text { padding: 0.4em 1.0em; font-size: 100%; @@ -69,8 +56,6 @@ span#notebook_name { } #toolbar { - /* Initially hidden to prevent FLOUC */ - display: none; padding: 3px 15px; } @@ -80,8 +65,6 @@ span#notebook_name { div#main_app { - /* Initially hidden to prevent FLOUC */ - display: none; width: 100%; position: relative; } diff --git a/IPython/frontend/html/notebook/static/css/page.css b/IPython/frontend/html/notebook/static/css/page.css index e6e7e778c..ff2b16cc3 100644 --- a/IPython/frontend/html/notebook/static/css/page.css +++ b/IPython/frontend/html/notebook/static/css/page.css @@ -42,7 +42,7 @@ span#ipython_notebook h1 img { } #site { - width: 100% + width: 100%; display: none; } diff --git a/IPython/frontend/html/notebook/static/js/menubar.js b/IPython/frontend/html/notebook/static/js/menubar.js index eef2e448d..a3d3ec035 100644 --- a/IPython/frontend/html/notebook/static/js/menubar.js +++ b/IPython/frontend/html/notebook/static/js/menubar.js @@ -22,6 +22,7 @@ var IPython = (function (IPython) { MenuBar.prototype.style = function () { + this.element.addClass('border-box-sizing'); $('ul#menus').menubar({ select : function (event, ui) { // The selected cell loses focus when the menu is entered, so we diff --git a/IPython/frontend/html/notebook/static/js/notebooklist.js b/IPython/frontend/html/notebook/static/js/notebooklist.js index 1a79e045a..21f9bba91 100644 --- a/IPython/frontend/html/notebook/static/js/notebooklist.js +++ b/IPython/frontend/html/notebook/static/js/notebooklist.js @@ -93,6 +93,7 @@ var IPython = (function (IPython) { NotebookList.prototype.new_notebook_item = function (index) { var item = $('
'); item.addClass('notebook_item ui-widget ui-widget-content ui-helper-clearfix'); + item.css('border-top-style','none'); var item_name = $('').addClass('item_name'); item.append(item_name); diff --git a/IPython/frontend/html/notebook/static/js/notebookmain.js b/IPython/frontend/html/notebook/static/js/notebookmain.js index f048e938b..6a613efdf 100644 --- a/IPython/frontend/html/notebook/static/js/notebookmain.js +++ b/IPython/frontend/html/notebook/static/js/notebookmain.js @@ -11,75 +11,17 @@ $(document).ready(function () { - if (window.MathJax){ - // MathJax loaded - MathJax.Hub.Config({ - tex2jax: { - inlineMath: [ ['$','$'], ["\\(","\\)"] ], - displayMath: [ ['$$','$$'], ["\\[","\\]"] ] - }, - displayAlign: 'left', // Change this to 'center' to center equations. - "HTML-CSS": { - styles: {'.MathJax_Display': {"margin": 0}} - } - }); - }else if (window.mathjax_url != ""){ - // Don't have MathJax, but should. Show dialog. - var dialog = $('
') - .append( - $("

").addClass('dialog').html( - "Math/LaTeX rendering will be disabled." - ) - ).append( - $("

").addClass('dialog').html( - "If you have administrative access to the notebook server and" + - " a working internet connection, you can install a local copy" + - " of MathJax for offline use with the following command on the server" + - " at a Python or IPython prompt:" - ) - ).append( - $("
").addClass('dialog').html(
-                    ">>> from IPython.external import mathjax; mathjax.install_mathjax()"
-                )
-            ).append(
-                $("
").addClass('dialog').html(
-                    "This will try to install MathJax into the IPython source directory."
-                )
-            ).append(
-                $("
").addClass('dialog').html(
-                    "If IPython is installed to a location that requires" +
-                    " administrative privileges to write, you will need to make this call as" +
-                    " an administrator, via 'sudo'."
-                )
-            ).append(
-                $("
").addClass('dialog').html(
-                    "When you start the notebook server, you can instruct it to disable MathJax support altogether:"
-                )
-            ).append(
-                $("
").addClass('dialog').html(
-                    "$ ipython notebook --no-mathjax"
-                )
-            ).append(
-                $("
").addClass('dialog').html(
-                    "which will prevent this dialog from appearing."
-                )
-            ).dialog({
-                title: "Failed to retrieve MathJax from '" + window.mathjax_url + "'",
-                width: "70%",
-                modal: true,
-            })
-    }else{
-        // No MathJax, but none expected. No dialog.
-    }
 
+    IPython.init_mathjax();
 
-    IPython.markdown_converter = new Markdown.Converter();
-    IPython.read_only = $('meta[name=read_only]').attr("content") == 'True';
-
-    $('div#header').addClass('border-box-sizing');
-    $('div#main_app').addClass('border-box-sizing ui-widget ui-widget-content');
+    IPython.read_only = $('body').data('readOnly') === 'True';
+    $('div#main_app').addClass('border-box-sizing ui-widget');
     $('div#notebook_panel').addClass('border-box-sizing ui-widget');
+    // The header's bottom border is provided by the menu bar so we remove it.
+    $('div#header').css('border-bottom-style','none');
 
+    IPython.page = new IPython.Page();
+    IPython.markdown_converter = new Markdown.Converter();
     IPython.layout_manager = new IPython.LayoutManager();
     IPython.pager = new IPython.Pager('div#pager', 'div#pager_splitter');
     IPython.quick_help = new IPython.QuickHelp('span#quick_help_area');
@@ -92,9 +34,6 @@ $(document).ready(function () {
 
     IPython.layout_manager.do_resize();
 
-    // These have display: none in the css file and are made visible here to prevent FLOUC.
-    $('div#header').css('display','block');
-
     if(IPython.read_only){
         // hide various elements from read-only view
         $('div#pager').remove();
@@ -104,9 +43,7 @@ $(document).ready(function () {
         $('#notebook_name').attr('disabled','disabled')
     }
 
-    $('div#menubar').css('display','block');
-    $('div#toolbar').css('display','block');
-    $('div#main_app').css('display','block');
+    IPython.page.show();
 
     IPython.layout_manager.do_resize();
     $([IPython.events]).on('notebook_loaded.Notebook', function () {
diff --git a/IPython/frontend/html/notebook/static/js/page.js b/IPython/frontend/html/notebook/static/js/page.js
index 7eaca8372..6a58a7182 100644
--- a/IPython/frontend/html/notebook/static/js/page.js
+++ b/IPython/frontend/html/notebook/static/js/page.js
@@ -31,12 +31,27 @@ var IPython = (function (IPython) {
 
 
     Page.prototype.show = function () {
+        // The header and site divs start out hidden to prevent FLOUC.
+        // Main scripts should call this method after styling everything.
+        this.show_header();
+        this.show_site();
+    };
+
+
+    Page.prototype.show_header = function () {
         // The header and site divs start out hidden to prevent FLOUC.
         // Main scripts should call this method after styling everything.
         $('div#header').css('display','block');
+    };
+
+
+    Page.prototype.show_site = function () {
+        // The header and site divs start out hidden to prevent FLOUC.
+        // Main scripts should call this method after styling everything.
         $('div#site').css('display','block');
     };
 
+
     IPython.Page = Page;
 
     return IPython;
diff --git a/IPython/frontend/html/notebook/static/js/toolbar.js b/IPython/frontend/html/notebook/static/js/toolbar.js
index 78820c37d..564ed0a57 100644
--- a/IPython/frontend/html/notebook/static/js/toolbar.js
+++ b/IPython/frontend/html/notebook/static/js/toolbar.js
@@ -22,7 +22,11 @@ var IPython = (function (IPython) {
 
 
     ToolBar.prototype.style = function () {
-        this.element.addClass('border-box-sizing');
+        this.element.addClass('border-box-sizing').
+            addClass('ui-widget ui-widget-content').
+            css('border-top-style','none').
+            css('border-left-style','none').
+            css('border-right-style','none');
         this.element.find('#cell_type').addClass('ui-widget ui-widget-content');
         this.element.find('#save_b').button({
             icons : {primary: 'ui-icon-disk'},
diff --git a/IPython/frontend/html/notebook/templates/notebook.html b/IPython/frontend/html/notebook/templates/notebook.html
index 7b0b08764..97f384d4e 100644
--- a/IPython/frontend/html/notebook/templates/notebook.html
+++ b/IPython/frontend/html/notebook/templates/notebook.html
@@ -1,60 +1,49 @@
-
-
+{% extends page.html %}
 
-
-    
+{% block stylesheet %}
 
-    IPython Notebook
+{% if mathjax_url %}
+
+{% end %}
+
 
-    {% if mathjax_url %}
-    
-    {% end %}
-    
+
+
 
-    
-    
-    
+
 
-    
+
+
 
-    
-    
-    
-    
-    
+{% end %}
 
-    {% comment  In the notebook, the read-only flag is used to determine %}
-    {% comment  whether to hide the side panels and switch off input %}
-    
 
-
+{% block params %}
 
-
+data-project={{project}}
+data-base-project-url={{base_project_url}}
+data-base-kernel-url={{base_kernel_url}}
+data-read-only={{read_only and not logged_in}}
+data-notebook-id={{notebook_id}}
 
-
+
+{% block header %}
+
+
+    
+    
+
+
+{% end %}
+
+
+{% block site %}