Merge pull request #3393 from minrk/bootstrap

[WIP] bootstrapify

IPython/frontend/html/notebook/static/auth/js/loginmain.js

@@ -13,8 +13,7 @@
 $(document).ready(function () {
 
     IPython.page = new IPython.Page();
-    $('input#login_submit').button();
-    $('#ipython-main-app').addClass('border-box-sizing ui-widget');
+    $('button#login_submit').addClass("btn");
     IPython.page.show();
     $('input#password_input').focus();
 

IPython/frontend/html/notebook/static/auth/js/loginwidget.js

@@ -23,8 +23,7 @@ var IPython = (function (IPython) {
     };
 
     LoginWidget.prototype.style = function () {
-        this.element.find('button#logout').button();
-        this.element.find('button#login').button();
+        this.element.find("button").addClass("btn btn-small");
     };
 
 

IPython/frontend/html/notebook/static/auth/js/logoutmain.js

@@ -13,7 +13,7 @@
 $(document).ready(function () {
 
     IPython.page = new IPython.Page();
-    $('#ipython-main-app').addClass('border-box-sizing ui-widget');
+    $('#ipython-main-app').addClass('border-box-sizing');
     IPython.page.show();
 
 });

IPython/frontend/html/notebook/static/auth/less/login.less

@@ -1 +1,6 @@
-// Custom styles for login.html
+// Custom styles for login.html
+.center-nav {
+  display: inline-block;
+  // pull the lower margin back
+  margin-bottom: -4px;
+}

IPython/frontend/html/notebook/static/base/js/dialog.js

@@ -0,0 +1,75 @@
+//----------------------------------------------------------------------------
+//  Copyright (C) 2013  The IPython Development Team
+//
+//  Distributed under the terms of the BSD License.  The full license is in
+//  the file COPYING, distributed as part of this software.
+//----------------------------------------------------------------------------
+
+//============================================================================
+// Utility for modal dialogs with bootstrap
+//============================================================================
+
+IPython.namespace('IPython.dialog');
+
+IPython.dialog = (function (IPython) {
+    
+    var modal = function (options) {
+        var dialog = $("<div/>").addClass("modal").attr("role", "dialog");
+        dialog.append(
+            $("<div/>")
+                .addClass("modal-header")
+                .append($("<button>")
+                    .addClass("close")
+                    .attr("data-dismiss", "modal")
+                    .html("&times;")
+                ).append(
+                    $("<h3/>").text(options.title || "")
+                )
+        ).append(
+            $("<div/>").addClass("modal-body").append(
+                options.body || $("<p/>")
+            )
+        );
+        
+        var footer = $("<div/>").addClass("modal-footer");
+        
+        for (var label in options.buttons) {
+            var btn_opts = options.buttons[label];
+            var button = $("<button/>")
+                .addClass("btn")
+                .attr("data-dismiss", "modal")
+                .text(label);
+            if (btn_opts.click) {
+                button.click($.proxy(btn_opts.click, dialog));
+            }
+            if (btn_opts.class) {
+                button.addClass(btn_opts.class);
+            }
+            footer.append(button);
+        }
+        dialog.append(footer);
+        // hook up on-open event
+        dialog.on("shown", function() {
+            setTimeout(function() {
+                footer.find("button").last().focus();
+                if (options.open) {
+                    $.proxy(options.open, dialog)();
+                }
+            }, 0);
+        });
+        
+        // destroy dialog on hide, unless explicitly asked not to
+        if (options.destroy == undefined || options.destroy) {
+            dialog.on("hidden", function () {
+                dialog.remove();
+            });
+        }
+        
+        return dialog.modal(options);
+    }
+    
+    return {
+        modal : modal,
+    };
+
+}(IPython));

IPython/frontend/html/notebook/static/base/js/page.js

@@ -17,12 +17,8 @@ var IPython = (function (IPython) {
     };
 
     Page.prototype.style = function () {
-        $('div#header').addClass('border-box-sizing').
-            addClass('ui-widget-content').
-            css('border-top-style','none').
-            css('border-left-style','none').
-            css('border-right-style','none');
-        $('div#site').addClass('border-box-sizing')
+        $('div#header').addClass('border-box-sizing');
+        $('div#site').addClass('border-box-sizing');
     };
 
 

IPython/frontend/html/notebook/static/base/less/page.less

@@ -17,27 +17,19 @@ body {
     overflow: visible;
 }
 
-
 div#header {
     /* Initially hidden to prevent FLOUC */
     display: none;
-    position: relative;
-    height: 40px;
-    padding: 5px;
-    margin: 0px;
-    width: 100%;
 }
 
-span#ipython_notebook {
-    position: absolute;
-    padding: 2px 2px 2px 5px;
+#ipython_notebook {
+    padding-left: 16px;
 }
 
-span#ipython_notebook img {
+#ipython_notebook img {
     font-family: Verdana, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
     height: 24px;
     text-decoration:none;
-    display: inline;
     color: black;
 }
 
@@ -46,15 +38,6 @@ span#ipython_notebook img {
     display: none;
 }
 
-/* We set the fonts by hand here to override the values in the theme */
-.ui-widget {
-    font-family: "Lucinda Grande", "Lucinda Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
-}
-
-.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
-    font-family: "Lucinda Grande", "Lucinda Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
-}
-
 /* Smaller buttons */
 .ui-button .ui-button-text {
     padding: 0.2em 0.8em;
@@ -64,7 +47,27 @@ span#ipython_notebook img {
 input.ui-button {
     padding: 0.3em 0.9em;
 }
+.navbar span {
+  margin-top: 3px;
+}
 
 span#login_widget {
     float: right;
 }
+
+.nav-header {
+    text-transform: none;
+}
+
+.navbar-nobg {
+    background-color: transparent;
+    background-image: none;
+}
+
+#header > span {
+  margin-top: 10px;
+}
+
+.modal-body {
+  max-height: 500px;
+}

IPython/frontend/html/notebook/static/base/less/style.less

@@ -2,3 +2,5 @@
 @import "../base/less/mixins.less";
 @import "../base/less/flexbox.less";
 @import "../base/less/page.less";
+@import "../components/font-awesome/build/assets/font-awesome/less/font-awesome.less";
+@FontAwesomePath:    "../components/font-awesome/build/assets/font-awesome/font";

IPython/frontend/html/notebook/static/base/less/variables.less

@@ -2,9 +2,10 @@
 
 @textColor:             @black;
 @baseFontSize:          13px;
-@baseLineHeight:        1.231;
-@monoFontFamily:		monospace;  // to allow user to customize their fonts
+@monoFontFamily:        monospace;  // to allow user to customize their fonts
+@navbarHeight:          36px;
 
 // Our own global variables for all pages go here
 
-@corner_radius:					4px;
+@corner_radius:         4px;
+@code_line_height:      1.231em;

IPython/frontend/html/notebook/static/notebook/css/override.css

@@ -3,7 +3,6 @@ This is only required when different pages style the same element differently. T
 a hack to deal with our current css styles and no new styling should be added in this file.*/
 
 #ipython-main-app {
-    width: 100%;
     position: relative;
     font-size: 110%;
 }

IPython/frontend/html/notebook/static/notebook/js/celltoolbarpresets/default.js

@@ -47,40 +47,36 @@
             lineNumbers: true,
             matchBrackets: true,
         });
-        $(dialogform).dialog({
-                autoOpen: true,
-                height: 300,
-                width: 650,
-                modal: true,
+        IPython.dialog.modal({
+            title: "Edit Cell Metadata",
+            body: dialogform,
                 buttons: {
-                    "Ok": function() {
+                    "OK": { class : "btn-primary",
+                        click: function() {
                         //validate json and set it
                         try {
                            var json = JSON.parse(editor.getValue());
                            cell.metadata = json;
-                           $( this ).dialog( "close" );
-                        }
-                        catch(e)
-                        {
+                        } catch(e) {
                            error_div.text('Warning, invalid json, not saved');
+                           return false;
                         }
-                    },
-                    Cancel: function() {
-                        $( this ).dialog( "close" );
-                    }
-                },
-                close: function() {
-                    //cleanup on close
-                    $(this).remove();
+                    }},
+                    Cancel: {}
                 }
         });
         editor.refresh();
     }
 
     var add_raw_edit_button = function(div, cell) {
-        var button_container = div
-        var button = $('<div/>').button({label:'Raw Edit'})
-                .click(function(){raw_edit(cell); return false;})
+        var button_container = div;
+        var button = $('<button/>')
+            .addClass("btn btn-mini")
+            .text("Raw Edit")
+            .click( function () {
+                raw_edit(cell);
+                return false;
+            });
         button_container.append(button);
     }
 

IPython/frontend/html/notebook/static/notebook/js/codecell.js

@@ -67,6 +67,7 @@ var IPython = (function (IPython) {
         this.input_prompt_number = null;
         this.collapsed = false;
         this.default_mode = 'ipython';
+        this.cell_type = "code";
 
 
         var cm_overwrite_options  = {

IPython/frontend/html/notebook/static/notebook/js/main.js

@@ -46,8 +46,6 @@ function (marked) {
     IPython.read_only = $('body').data('readOnly') === 'True';
     $('#ipython-main-app').addClass('border-box-sizing');
     $('div#notebook_panel').addClass('border-box-sizing');
-    // The header's bottom border is provided by the menu bar so we remove it.
-    $('div#header').css('border-bottom-style','none');
 
     var baseProjectUrl = $('body').data('baseProjectUrl')
 
@@ -59,7 +57,7 @@ function (marked) {
     IPython.notebook = new IPython.Notebook('div#notebook',{baseProjectUrl:baseProjectUrl, read_only:IPython.read_only});
     IPython.save_widget = new IPython.SaveWidget('span#save_widget');
     IPython.menubar = new IPython.MenuBar('#menubar',{baseProjectUrl:baseProjectUrl})
-    IPython.toolbar = new IPython.MainToolBar('#maintoolbar')
+    IPython.toolbar = new IPython.MainToolBar('#maintoolbar-container')
     IPython.tooltip = new IPython.Tooltip()
     IPython.notification_area = new IPython.NotificationArea('#notification_area')
     IPython.notification_area.init_notification_widgets();

IPython/frontend/html/notebook/static/notebook/js/maintoolbar.js

@@ -26,7 +26,7 @@ var IPython = (function (IPython) {
                 {
                     id : 'save_b',
                     label : 'Save and Checkpoint',
-                    icon : 'ui-icon-disk',
+                    icon : 'icon-hdd',
                     callback : function () {
                         IPython.notebook.save_checkpoint();
                         }
@@ -36,7 +36,7 @@ var IPython = (function (IPython) {
                 {
                     id : 'cut_b',
                     label : 'Cut Cell',
-                    icon : 'ui-icon-scissors',
+                    icon : 'icon-cut',
                     callback : function () {
                         IPython.notebook.cut_cell();
                         }
@@ -44,7 +44,7 @@ var IPython = (function (IPython) {
                 {
                     id : 'copy_b',
                     label : 'Copy Cell',
-                    icon : 'ui-icon-copy',
+                    icon : 'icon-copy',
                     callback : function () {
                         IPython.notebook.copy_cell();
                         }
@@ -52,7 +52,7 @@ var IPython = (function (IPython) {
                 {
                     id : 'paste_b',
                     label : 'Paste Cell Below',
-                    icon : 'ui-icon-clipboard',
+                    icon : 'icon-paste',
                     callback : function () {
                         IPython.notebook.paste_cell_below();
                         }
@@ -63,7 +63,7 @@ var IPython = (function (IPython) {
                 {
                     id : 'move_up_b',
                     label : 'Move Cell Up',
-                    icon : 'ui-icon-arrowthick-1-n',
+                    icon : 'icon-arrow-up',
                     callback : function () {
                         IPython.notebook.move_cell_up();
                         }
@@ -71,7 +71,7 @@ var IPython = (function (IPython) {
                 {
                     id : 'move_down_b',
                     label : 'Move Cell Down',
-                    icon : 'ui-icon-arrowthick-1-s',
+                    icon : 'icon-arrow-down',
                     callback : function () {
                         IPython.notebook.move_cell_down();
                         }
@@ -82,7 +82,7 @@ var IPython = (function (IPython) {
                 {
                     id : 'insert_above_b',
                     label : 'Insert Cell Above',
-                    icon : 'ui-icon-arrowthickstop-1-n',
+                    icon : 'icon-circle-arrow-up',
                     callback : function () {
                         IPython.notebook.insert_cell_above('code');
                         }
@@ -90,7 +90,7 @@ var IPython = (function (IPython) {
                 {
                     id : 'insert_below_b',
                     label : 'Insert Cell Below',
-                    icon : 'ui-icon-arrowthickstop-1-s',
+                    icon : 'icon-circle-arrow-down',
                     callback : function () {
                         IPython.notebook.insert_cell_below('code');
                         }
@@ -101,7 +101,7 @@ var IPython = (function (IPython) {
                 {
                     id : 'run_b',
                     label : 'Run Cell',
-                    icon : 'ui-icon-play',
+                    icon : 'icon-play',
                     callback : function () {
                     IPython.notebook.execute_selected_cell();
                         }
@@ -109,7 +109,7 @@ var IPython = (function (IPython) {
                 {
                     id : 'interrupt_b',
                     label : 'Interrupt',
-                    icon : 'ui-icon-stop',
+                    icon : 'icon-stop',
                     callback : function () {
                         IPython.notebook.kernel.interrupt();
                         }
@@ -121,7 +121,7 @@ var IPython = (function (IPython) {
         this.element
             .append($('<select/>')
                 .attr('id','cell_type')
-                .addClass('ui-widget-content')
+                // .addClass('ui-widget-content')
                 .append($('<option/>').attr('value','code').text('Code'))
                 .append($('<option/>').attr('value','markdown').text('Markdown'))
                 .append($('<option/>').attr('value','raw').text('Raw Text'))
@@ -136,9 +136,9 @@ var IPython = (function (IPython) {
 
 
     MainToolBar.prototype.add_celltoolbar_list = function () {
-        var label = $('<label/>').text('Cell Toolbar:');
+        var label = $('<span/>').addClass("navbar-text").text('Cell Toolbar:');
         var select = $('<select/>')
-            .addClass('ui-widget-content')
+            // .addClass('ui-widget-content')
             .attr('id', 'ctb_select')
             .append($('<option/>').attr('value', '').text('None'));
         this.element.append(label).append(select);

IPython/frontend/html/notebook/static/notebook/js/mathjaxutils.js

@@ -31,9 +31,9 @@ IPython.mathjaxutils = (function (IPython) {
             MathJax.Hub.Configured();
         } else if (window.mathjax_url != "") {
             // Don't have MathJax, but should. Show dialog.
-            var dialog = $('<div></div>')
+            var message = $('<div/>')
                 .append(
-                    $("<p></p>").addClass('dialog').html(
+                    $("<p/></p>").addClass('dialog').html(
                         "Math/LaTeX rendering will be disabled."
                     )
                 ).append(
@@ -69,11 +69,14 @@ IPython.mathjaxutils = (function (IPython) {
                     $("<p></p>").addClass('dialog').html(
                         "which will prevent this dialog from appearing."
                     )
-                ).dialog({
-                    title: "Failed to retrieve MathJax from '" + window.mathjax_url + "'",
-                    width: "70%",
-                    modal: true,
-                })
+                )
+            IPython.dialog.modal({
+                title : "Failed to retrieve MathJax from '" + window.mathjax_url + "'",
+                body : message,
+                buttons : {
+                    OK : {class: "btn-danger"}
+                }
+            });
         } else {
             // No MathJax, but none expected. No dialog.
         };

IPython/frontend/html/notebook/static/notebook/js/menubar.js

@@ -52,15 +52,13 @@ var IPython = (function (IPython) {
 
     MenuBar.prototype.style = function () {
         this.element.addClass('border-box-sizing');
-        $('ul#menus').menubar({
-            select : function (event, ui) {
+        this.element.find("li").click(function (event, ui) {
                 // The selected cell loses focus when the menu is entered, so we
                 // re-select it upon selection.
                 var i = IPython.notebook.get_selected_index();
                 IPython.notebook.select(i);
             }
-        });
-        this.element.find("#restore_checkpoint").find("ul").find("li").hide();
+        );
     };
 
 
@@ -143,7 +141,8 @@ var IPython = (function (IPython) {
             IPython.layout_manager.do_resize();
         });
         this.element.find('#toggle_toolbar').click(function () {
-            IPython.toolbar.toggle();
+            $('div#maintoolbar').toggle();
+            IPython.layout_manager.do_resize();
         });
         // Insert
         this.element.find('#insert_cell_above').click(function () {

IPython/frontend/html/notebook/static/notebook/js/notebook.js

@@ -88,13 +88,15 @@ var IPython = (function (IPython) {
         // ii) to prevent the div from scrolling up when the last cell is being
         // edited, but is too low on the page, which browsers will do automatically.
         var that = this;
-        var end_space = $('<div/>').addClass('end_space').height("30%");
+        this.container = $("<div/>").addClass("container").attr("id", "notebook-container");
+        var end_space = $('<div/>').addClass('end_space');
         end_space.dblclick(function (e) {
             if (that.read_only) return;
             var ncells = that.ncells();
             that.insert_cell_below('code',ncells-1);
         });
-        this.element.append(end_space);
+        this.element.append(this.container);
+        this.container.append(end_space);
         $('div#notebook').addClass('border-box-sizing');
     };
 
@@ -414,7 +416,7 @@ var IPython = (function (IPython) {
      * @return {jQuery} A selector of all cell elements
      */
     Notebook.prototype.get_cell_elements = function () {
-        return this.element.children("div.cell");
+        return this.container.children("div.cell");
     };
 
     /**
@@ -1341,21 +1343,18 @@ var IPython = (function (IPython) {
      */
     Notebook.prototype.restart_kernel = function () {
         var that = this;
-        var dialog = $('<div/>');
-        dialog.html('Do you want to restart the current kernel?  You will lose all variables defined in it.');
-        $(document).append(dialog);
-        dialog.dialog({
-            resizable: false,
-            modal: true,
-            title: "Restart kernel or continue running?",
-            closeText: '',
+        IPython.dialog.modal({
+            title : "Restart kernel or continue running?",
+            body : $("<p/>").html(
+                'Do you want to restart the current kernel?  You will lose all variables defined in it.'
+            ),
             buttons : {
-                "Restart": function () {
-                    that.kernel.restart();
-                    $(this).dialog('close');
-                },
-                "Continue running": function () {
-                    $(this).dialog('close');
+                "Continue running" : {},
+                "Restart" : {
+                    "class" : "btn-danger",
+                    "click" : function() {
+                        that.kernel.restart();
+                    }
                 }
             }
         });
@@ -1526,24 +1525,16 @@ var IPython = (function (IPython) {
             };
         };
         if (data.worksheets.length > 1) {
-            var dialog = $('<div/>');
-            dialog.html("This notebook has " + data.worksheets.length + " worksheets, " +
-            "but this version of IPython can only handle the first.  " +
-            "If you save this notebook, worksheets after the first will be lost."
-            );
-            this.element.append(dialog);
-            dialog.dialog({
-                resizable: false,
-                modal: true,
-                title: "Multiple worksheets",
-                closeText: "",
-                close: function(event, ui) {$(this).dialog('destroy').remove();},
+            IPython.dialog.modal({
+                title : "Multiple worksheets",
+                body : "This notebook has " + data.worksheets.length + " worksheets, " +
+                    "but this version of IPython can only handle the first.  " +
+                    "If you save this notebook, worksheets after the first will be lost.",
                 buttons : {
-                    "OK": function () {
-                        $(this).dialog('close');
+                    OK : {
+                        class : "btn-danger"
                     }
-                },
-                width: 400
+                }
             });
         }
     };
@@ -1722,27 +1713,20 @@ var IPython = (function (IPython) {
         this.select(0);
         this.scroll_to_top();
         if (data.orig_nbformat !== undefined && data.nbformat !== data.orig_nbformat) {
-            msg = "This notebook has been converted from an older " +
+            var msg = "This notebook has been converted from an older " +
             "notebook format (v"+data.orig_nbformat+") to the current notebook " +
             "format (v"+data.nbformat+"). The next time you save this notebook, the " +
-            "newer notebook format will be used and older verions of IPython " +
+            "newer notebook format will be used and older versions of IPython " +
             "may not be able to read it. To keep the older version, close the " +
             "notebook without saving it.";
-            var dialog = $('<div/>');
-            dialog.html(msg);
-            this.element.append(dialog);
-            dialog.dialog({
-                resizable: false,
-                modal: true,
-                title: "Notebook converted",
-                closeText: "",
-                close: function(event, ui) {$(this).dialog('destroy').remove();},
+            IPython.dialog.modal({
+                title : "Notebook converted",
+                body : msg,
                 buttons : {
-                    "OK": function () {
-                        $(this).dialog('close');
+                    OK : {
+                        class : "btn-primary"
                     }
-                },
-                width: 400
+                }
             });
         } else if (data.orig_nbformat_minor !== undefined && data.nbformat_minor !== data.orig_nbformat_minor) {
             var that = this;
@@ -1752,21 +1736,14 @@ var IPython = (function (IPython) {
             this_vs + ".  You can still work with this notebook, but some features " +
             "introduced in later notebook versions may not be available."
 
-            var dialog = $('<div/>');
-            dialog.html(msg);
-            this.element.append(dialog);
-            dialog.dialog({
-                resizable: false,
-                modal: true,
-                title: "Newer Notebook",
-                closeText: "",
-                close: function(event, ui) {$(this).dialog('destroy').remove();},
+            IPython.dialog.modal({
+                title : "Newer Notebook",
+                body : msg,
                 buttons : {
-                    "OK": function () {
-                        $(this).dialog('close');
+                    OK : {
+                        class : "btn-danger"
                     }
-                },
-                width: 400
+                }
             });
 
         }
@@ -1795,21 +1772,13 @@ var IPython = (function (IPython) {
             "this notebook is in a newer format than is supported by this " +
             "version of IPython. This version can load notebook formats " +
             "v"+this.nbformat+" or earlier.";
-            var dialog = $('<div/>');
-            dialog.html(msg);
-            this.element.append(dialog);
-            dialog.dialog({
-                resizable: false,
-                modal: true,
+            
+            IPython.dialog.modal({
                 title: "Error loading notebook",
-                closeText: "",
-                close: function(event, ui) {$(this).dialog('destroy').remove();},
+                body : msg,
                 buttons : {
-                    "OK": function () {
-                        $(this).dialog('close');
-                    }
-                },
-                width: 400
+                    "OK": {}
+                }
             });
         }
     }
@@ -1917,7 +1886,7 @@ var IPython = (function (IPython) {
             console.log("restore dialog, but no checkpoint to restore to!");
             return;
         }
-        var dialog = $('<div/>').append(
+        var body = $('<div/>').append(
             $('<p/>').addClass("p-space").text(
                 "Are you sure you want to revert the notebook to " +
                 "the latest checkpoint?"
@@ -1934,23 +1903,18 @@ var IPython = (function (IPython) {
             ).css("text-align", "center")
         );
         
-        $(document).append(dialog);
-        
-        dialog.dialog({
-            resizable: false,
-            modal: true,
-            title: "Revert notebook to checkpoint",
-            closeText: '',
+        IPython.dialog.modal({
+            title : "Revert notebook to checkpoint",
+            body : body,
             buttons : {
-                "Revert": function () {
-                    that.restore_checkpoint(checkpoint.checkpoint_id);
-                    $(this).dialog('close');
+                Revert : {
+                    class : "btn-danger",
+                    click : function () {
+                        that.restore_checkpoint(checkpoint.checkpoint_id);
+                    }
                 },
-                "Cancel": function () {
-                    $(this).dialog('close');
+                Cancel : {}
                 }
-            },
-            width: 400
         });
     }
     

IPython/frontend/html/notebook/static/notebook/js/notificationarea.js

@@ -92,28 +92,24 @@ var IPython = (function (IPython) {
         });
 
         $([IPython.events]).on('status_dead.Kernel',function () {
-            var dialog = $('<div/>');
-            dialog.html('The kernel has died, and the automatic restart has failed.' +
+            var msg = 'The kernel has died, and the automatic restart has failed.' +
                 ' It is possible the kernel cannot be restarted.' +
                 ' If you are not able to restart the kernel, you will still be able to save' +
                 ' the notebook, but running code will no longer work until the notebook' +
-                ' is reopened.'
-            );
-            $(document).append(dialog);
-            dialog.dialog({
-                resizable: false,
-                modal: true,
+                ' is reopened.';
+
+            IPython.dialog.modal({
                 title: "Dead kernel",
-                close: function(event, ui) {$(this).dialog('destroy').remove();},
+                body : msg,
                 buttons : {
-                    "Manual Restart": function () {
-                        $([IPython.events]).trigger('status_restarting.Kernel');
-                        IPython.notebook.start_kernel();
-                        $(this).dialog('close');
+                    "Manual Restart": {
+                        class: "btn-danger",
+                        click: function () {
+                            $([IPython.events]).trigger('status_restarting.Kernel');
+                            IPython.notebook.start_kernel();
+                        }
                     },
-                    "Don't restart": function () {
-                        $(this).dialog('close');
-                    }
+                    "Don't restart": {}
                 }
             });
         });
@@ -134,25 +130,18 @@ var IPython = (function (IPython) {
             msg = "A WebSocket connection to could not be established." +
                 " You will NOT be able to run code. Check your" +
                 " network connection or notebook server configuration.";
-            var dialog = $('<div/>');
-            dialog.html(msg);
-            $(document).append(dialog);
-            dialog.dialog({
-                resizable: false,
-                modal: true,
+            IPython.dialog.modal({
                 title: "WebSocket connection failed",
-                closeText: "",
-                close: function(event, ui) {$(this).dialog('destroy').remove();},
+                body: msg,
                 buttons : {
-                    "OK": function () {
-                        $(this).dialog('close');
-                    },
-                    "Reconnect": function () {
-                        knw.set_message('Reconnecting WebSockets', 1000);
-                        setTimeout(function () {
-                            kernel.start_channels();
-                        }, 5000);
-                        $(this).dialog('close');
+                    "OK": {},
+                    "Reconnect": {
+                        click: function () {
+                            knw.set_message('Reconnecting WebSockets', 1000);
+                            setTimeout(function () {
+                                kernel.start_channels();
+                            }, 5000);
+                        }
                     }
                 }
             });

IPython/frontend/html/notebook/static/notebook/js/notificationwidget.js

@@ -30,7 +30,7 @@ var IPython = (function (IPython) {
 
 
     NotificationWidget.prototype.style = function () {
-        this.element.addClass('notification_widget ui-widget ui-widget-content ui-corner-all');
+        this.element.addClass('notification_widget pull-right');
         this.element.addClass('border-box-sizing');
     };
 

IPython/frontend/html/notebook/static/notebook/js/outputarea.js

@@ -59,8 +59,7 @@ var IPython = (function (IPython) {
         this.wrapper.addClass('output_wrapper');
         this.element.addClass('output vbox');
         
-        this.collapse_button.button();
-        this.collapse_button.addClass('output_collapsed vbox');
+        this.collapse_button.addClass("btn output_collapsed");
         this.collapse_button.attr('title', 'click to expand output');
         this.collapse_button.html('. . .');
         
@@ -112,11 +111,6 @@ var IPython = (function (IPython) {
         this.collapse_button.click(function () {
             that.expand();
         });
-        this.collapse_button.hover(function () {
-            $(this).addClass("ui-state-hover");
-        }, function () {
-            $(this).removeClass("ui-state-hover");
-        });
     };
 
 
@@ -552,7 +546,7 @@ var IPython = (function (IPython) {
                 $("<input/>")
                 .addClass("raw_input")
                 .attr('type', 'text')
-                .attr("size", 80)
+                .attr("size", 47)
                 .keydown(function (event, ui) {
                     // make sure we submit on enter,
                     // and don't re-execute the *cell* on shift-enter
@@ -564,13 +558,15 @@ var IPython = (function (IPython) {
             )
         );
         this.element.append(area);
-        area.find("input.raw_input").focus();
+        // weirdly need double-focus now,
+        // otherwise only the cell will be focused
+        area.find("input.raw_input").focus().focus();
     }
     OutputArea.prototype._submit_raw_input = function (evt) {
         var container = this.element.find("div.raw_input");
         var theprompt = container.find("span.input_prompt");
         var theinput = container.find("input.raw_input");
-        var value = theinput.attr("value");
+        var value = theinput.val();
         var content = {
             output_type : 'stream',
             name : 'stdout',

IPython/frontend/html/notebook/static/notebook/js/pager.js

@@ -25,7 +25,7 @@ var IPython = (function (IPython) {
                         helper: null ,
                         drag: function(event, ui) {
                             // recalculate the amount of space the pager should take
-                            var pheight = ($(body).height()-event.clientY-4);
+                            var pheight = ($(document.body).height()-event.clientY-4);
                             var downprct = pheight/IPython.layout_manager.app_height();
                                 downprct = Math.min(0.9, downprct);
                             if (downprct < 0.1) {
@@ -70,7 +70,8 @@ var IPython = (function (IPython) {
 
     Pager.prototype.style = function () {
         this.pager_splitter_element.addClass('border-box-sizing ui-widget ui-state-default');
-        this.pager_element.addClass('border-box-sizing ui-widget');
+        this.pager_element.addClass('border-box-sizing');
+        this.pager_element.find(".container").addClass('border-box-sizing');
         this.pager_splitter_element.attr('title', 'Click to Show/Hide pager area, drag to Resize');
     };
 
@@ -137,7 +138,7 @@ var IPython = (function (IPython) {
 
 
     Pager.prototype.clear = function (text) {
-        this.pager_element.empty();
+        this.pager_element.find(".container").empty();
     };
 
     Pager.prototype.detach = function(){
@@ -162,7 +163,7 @@ var IPython = (function (IPython) {
     }
 
     Pager.prototype.append_text = function (text) {
-        this.pager_element.append($('<pre/>').html(utils.fixCarriageReturn(utils.fixConsole(text))));
+        this.pager_element.find(".container").append($('<pre/>').html(utils.fixCarriageReturn(utils.fixConsole(text))));
     };
 
 

IPython/frontend/html/notebook/static/notebook/js/quickhelp.js

@@ -19,12 +19,10 @@ var IPython = (function (IPython) {
         var that = this;
         if ( this.shortcut_dialog ){
             // if dialog is already shown, close it
-            this.shortcut_dialog.dialog("close");
-            this.shortcut_dialog = null;
+            $(this.shortcut_dialog).modal("toggle");
             return;
         }
-        var dialog = $('<div/>');
-        this.shortcut_dialog = dialog;
+        var body = $('<div/>');
         var shortcuts = [
             {key: 'Shift-Enter', help: 'run cell'},
             {key: 'Ctrl-Enter', help: 'run cell in-place'},
@@ -53,16 +51,19 @@ var IPython = (function (IPython) {
             {key: 'Ctrl-m h', help: 'show keyboard shortcuts'}
         ];
         for (var i=0; i<shortcuts.length; i++) {
-            dialog.append($('<div>').
+            body.append($('<div>').
                 append($('<span/>').addClass('shortcut_key').html(shortcuts[i].key)).
                 append($('<span/>').addClass('shortcut_descr').html(' : ' + shortcuts[i].help))
             );
         };
-        dialog.bind('dialogclose', function(event) {
-            // dialog has been closed, allow it to be drawn again.
-            that.shortcut_dialog = null;
+        this.shortcut_dialog = IPython.dialog.modal({
+            title : "Keyboard shortcuts",
+            body : body,
+            destroy : false,
+            buttons : {
+                Close : {}
+            }
         });
-        dialog.dialog({title: 'Keyboard shortcuts', closeText: ''});
     };
 
     // Set module variables

IPython/frontend/html/notebook/static/notebook/js/savewidget.js

@@ -24,12 +24,6 @@ var IPython = (function (IPython) {
 
 
     SaveWidget.prototype.style = function () {
-        this.element.find('span#save_widget').addClass('ui-widget');
-        this.element.find('span#notebook_name').addClass('ui-widget');
-        this.element.find('span#autosave_status').addClass('ui-widget')
-            .css({border: 'none'});
-        this.element.find('span#checkpoint_status').addClass('ui-widget')
-            .css({border: 'none', 'margin-left': '20px'});
     };
 
 
@@ -69,28 +63,26 @@ var IPython = (function (IPython) {
 
     SaveWidget.prototype.rename_notebook = function () {
         var that = this;
-        var dialog = $('<div/>');
-        dialog.append(
-            $('<p/>').html('Enter a new notebook name:')
-            .css({'margin-bottom': '10px'})
-        );
-        dialog.append(
+        var dialog = $('<div/>').append(
+            $("<p/>").addClass("rename-message")
+                .html('Enter a new notebook name:')
+        ).append(
+            $("<br/>")
+        ).append(
             $('<input/>').attr('type','text').attr('size','25')
-            .addClass('ui-widget ui-widget-content')
-            .attr('value',IPython.notebook.get_notebook_name())
+            .val(IPython.notebook.get_notebook_name())
         );
-        // $(document).append(dialog);
-        dialog.dialog({
-            resizable: false,
-            modal: true,
+        IPython.dialog.modal({
             title: "Rename Notebook",
-            closeText: "",
-            close: function(event, ui) {$(this).dialog('destroy').remove();},
+            body: dialog,
             buttons : {
-                "OK": function () {
-                    var new_name = $(this).find('input').attr('value');
+                "Cancel": {},
+                "OK": {
+                    class: "btn-primary",
+                    click: function () {
+                    var new_name = $(this).find('input').val();
                     if (!IPython.notebook.test_notebook_name(new_name)) {
-                        $(this).find('h3').html(
+                        $(this).find('.rename-message').html(
                             "Invalid notebook name. Notebook names must "+
                             "have 1 or more characters and can contain any characters " +
                             "except :/\\. Please enter a new notebook name:"
@@ -98,21 +90,18 @@ var IPython = (function (IPython) {
                     } else {
                         IPython.notebook.set_notebook_name(new_name);
                         IPython.notebook.save_notebook();
-                        $(this).dialog('close');
                     }
+                }}
                 },
-                "Cancel": function () {
-                    $(this).dialog('close');
-                }
-            },
             open : function (event, ui) {
                 var that = $(this);
                 // Upon ENTER, click the OK button.
                 that.find('input[type="text"]').keydown(function (event, ui) {
                     if (event.which === utils.keycodes.ENTER) {
-                        that.parent().find('button').first().click();
+                        that.find('.btn-primary').first().click();
                     }
                 });
+                that.find('input[type="text"]').focus();
             }
         });
     }

IPython/frontend/html/notebook/static/notebook/js/toolbar.js

@@ -39,13 +39,13 @@ var IPython = (function (IPython) {
      *      IPython.toolbar.add_buttons_group([
      *          {
      *            label:'my button',
-     *            icon:'ui-icon-disk',
+     *            icon:'icon-hdd',
      *            callback:function(){alert('hoho')},
      *            id : 'my_button_id',    // this is optional
      *          },
      *          {
      *            label:'my second button',
-     *            icon:'ui-icon-scissors',
+     *            icon:'icon-play',
      *            callback:function(){alert('be carefull I cut')}
      *          }
      *        ],
@@ -56,40 +56,37 @@ var IPython = (function (IPython) {
      *  @param list {List}
      *      List of button of the group, with the following paramter for each :
      *      @param list.label {string} text to show on button hover
-     *      @param list.icon {string} icon to choose from [jQuery ThemeRoller](http://jqueryui.com/themeroller/)
+     *      @param list.icon {string} icon to choose from [Font Awesome](http://fortawesome.github.io/Font-Awesome)
      *      @param list.callback {function} function to be called on button click
      *      @param [list.id] {String} id to give to the button
      *  @param [group_id] {String} optionnal id to give to the group
      *
      */
     ToolBar.prototype.add_buttons_group = function (list, group_id) {
-        var span_group = $('<span/>');
+        var btn_group = $('<div/>').addClass("btn-group");
         if( group_id != undefined ) {
-            span_group.attr('id',group_id);
+            btn_group.attr('id',group_id);
         }
         for(var el in list) {
-            var button  = $('<button/>').button({
-                icons : {primary : list[el].icon},
-                text  : false,
-                label : list[el].label
-                });
+            var button  = $('<button/>')
+                .addClass('btn')
+                .attr("title", list[el].label)
+                .append(
+                    $("<i/>").addClass(list[el].icon)
+                );
             var id = list[el].id;
             if( id != undefined )
                 button.attr('id',id);
             var fun = list[el].callback;
             button.click(fun);
-            span_group.append(button);
+            btn_group.append(button);
         }
-        span_group.buttonset();
-        $(this.selector).append(span_group);
+        $(this.selector).append(btn_group);
     };
 
     ToolBar.prototype.style = function () {
-        this.element.addClass('border-box-sizing').
-            addClass('toolbar').
-            css('border-top-style','none').
-            css('border-left-style','none').
-            css('border-right-style','none');
+        this.element.addClass('border-box-sizing')
+            .addClass('toolbar');
     };
 
     /**

IPython/frontend/html/notebook/static/notebook/less/cell.less

@@ -12,7 +12,7 @@ div.cell {
     width: 100%;
     padding: 5px 5px 5px 0px;
     /* This acts as a spacer between cells, that is outside the border */
-    margin: 2px 0px 2px 0px;
+    margin: 2px 0px 2px 7px;
     outline: none;
 }
 
@@ -25,5 +25,5 @@ div.prompt {
     font-family: @monoFontFamily;
     text-align: right;
     /* This has to match that of the the CodeMirror class line-height below */	
-    line-height: @baseLineHeight;
+    line-height: @code_line_height;
 }

IPython/frontend/html/notebook/static/notebook/less/celltoolbar.less

@@ -9,7 +9,7 @@
     border-top-left-radius: 3px;
     width:100%;
     -webkit-box-pack: end;
-    height:20px;
+    height:22px;
 }
 
 

IPython/frontend/html/notebook/static/notebook/less/codecell.less

@@ -25,11 +25,9 @@ div.input_prompt {
 div.output_wrapper {
     /* This is a spacer between the input and output of each cell */
     margin-top: 5px;
-    margin-left: 5px;
-    /* FF needs explicit width to stretch */
-    width: 100%;
     /* this position must be relative to enable descendents to be absolute within it */
     position: relative;
+    .vbox()
 }
 
 /* class for the output area when it should be height-limited */
@@ -46,12 +44,14 @@ div.output_scroll {
 
 /* output div while it is collapsed */
 div.output_collapsed {
-  margin-right: 5px;
+  margin: 0px;
+  padding: 0px;
+  .vbox();
 }
 
 div.out_prompt_overlay {
   height: 100%;
-  padding: 0px;
+  padding: 0px 0.4em;
   position: absolute;
   .corner-all;
 }
@@ -64,6 +64,4 @@ div.out_prompt_overlay:hover {
 
 div.output_prompt {
     color: darkred;
-    /* 5px right shift to account for margin in parent container */
-    margin: 0 5px 0 -5px;
 }

IPython/frontend/html/notebook/static/notebook/less/codemirror.less

@@ -10,7 +10,7 @@
  */
 
 .CodeMirror {
-    line-height: @baseLineHeight;  /* Changed from 1em to our global default */
+    line-height: @code_line_height;  /* Changed from 1em to our global default */
 	height: auto;     /* Changed to auto to autogrow */
 	background: none;  /* Changed from white to allow our bg to show through */
 }

IPython/frontend/html/notebook/static/notebook/less/menubar.less

@@ -1,25 +1,20 @@
-.ui-menubar-item .ui-button .ui-button-text {
-    padding: 0.4em 1.0em;
-    font-size: 100%;
+#menubar {
 }
 
-.ui-menu {
-	.box-shadow(0px 6px 10px -1px #adadad);
+#menubar .navbar-inner {
+  min-height: 28px;
+  border-top: 1px;
+  border-radius: 0px 0px @baseBorderRadius @baseBorderRadius;
 }
 
-.ui-menu .ui-menu-item a {
-    border: 1px solid transparent;
-    padding: 2px 1.6em;
+#menubar .navbar {
+  margin-bottom: 8px;
 }
 
-.ui-menu .ui-menu-item a.ui-state-focus {
-    margin: 0;
+.nav-wrapper {
+  border-bottom: 1px solid @navbarBorder;
 }
 
-.ui-menu hr {
-    margin: 0.3em 0;
-}
-
-#menubar_container {
-    position: relative;
-}
+#menubar li.dropdown {
+  line-height: 12px;
+}

IPython/frontend/html/notebook/static/notebook/less/notebook.less

@@ -18,8 +18,8 @@ span#notebook_name {
 div#notebook_panel {
     margin: 0px 0px 0px 0px;
     padding: 0px;
+    .box-shadow(0 -1px 10px rgba(0,0,0,.1));
 }
-
 div#notebook {
     overflow-y: scroll;
     overflow-x: auto;
@@ -27,6 +27,7 @@ div#notebook {
     /* This spaces the cell away from the edge of the notebook area */
     padding: 5px 5px 15px 5px;
     margin: 0px;
+    border-top: 1px solid @border_color;
 }
 
 div.ui-widget-content {
@@ -59,3 +60,6 @@ p {
 	margin-bottom:0;
 }
 
+.end_space {
+  height: 200px;
+}

IPython/frontend/html/notebook/static/notebook/less/notificationarea.less

@@ -1,9 +1,3 @@
 #notification_area {
-    position: absolute;
-    right: 0px;
-    top: 0px;
-    height: 25px;
-    padding: 3px 0px;
-    padding-right: 3px;
     z-index: 10;
 }

IPython/frontend/html/notebook/static/notebook/less/notificationwidget.less

@@ -1,8 +1,10 @@
 .notification_widget{
-    float : right;
-    right: 0px;
-    top: 1px;
-    height: 25px;
-    padding: 3px 6px;
+    color: @navbarLinkColor;
+    padding: 1px 12px;
+    margin: 2px 4px;
     z-index: 10;
+    border: 1px solid #ccc;
+    border-radius: @corner_radius;
+    background: rgba(240, 240, 240, 0.5);
+    
 }

IPython/frontend/html/notebook/static/notebook/less/outputarea.less

@@ -25,6 +25,7 @@ div.output_area pre {
    the prompt div. */
 div.output_subarea {
     padding: 0.44em 0.4em 0.4em 1px;
+    margin-left: 6px;
     .box-flex1();
 }
 
@@ -37,7 +38,7 @@ div.output_text {
     color: @textColor;
     font-family: @monoFontFamily;
     /* This has to match that of the the CodeMirror class line-height below */	
-    line-height: @baseLineHeight;
+    line-height: @code_line_height;
 }
 
 /* stdout/stderr are 'text' as well as 'stream', but pyout/pyerr are *not* streams */

IPython/frontend/html/notebook/static/notebook/less/pager.less

@@ -2,20 +2,20 @@ div#pager_splitter {
     height: 8px;
 }
 
-#pager_container {
-    position : relative;
+#pager-container {
+    position: relative;
+    padding: 15px 0px;
 }
 
 div#pager {
-    padding: 15px;
     overflow: auto;
     display: none;
-	
-	pre {
-		font-size:			@baseFontSize;
-		line-height: 		@baseLineHeight;
-		color: 				@textColor;
-		background-color: 	@cell_background;
-		padding:			0.4em;
-	}
+
+    pre {
+      font-size: @baseFontSize;
+      line-height: @code_line_height;
+      color: @textColor;
+      background-color: @cell_background;
+      padding: 0.4em;
+    }
 }

IPython/frontend/html/notebook/static/notebook/less/savewidget.less

@@ -1,9 +1,34 @@
 span#save_widget {
-    padding: 5px;
-    margin: 0px 0px 0px 300px;
-    display:inline-block;
+    padding: 0px 5px;
+    margin-top: 12px;
 }
 
-span#checkpoint_status span#autosave_status {
+span#checkpoint_status, span#autosave_status {
     font-size: small;
 }
+
+@media (max-width: 767px) {
+    span#save_widget {
+        font-size: small;
+    }
+    span#checkpoint_status, span#autosave_status {
+        font-size: x-small;
+    }
+}
+
+@media (max-width: 767px) {
+    span#checkpoint_status, span#autosave_status {
+        display: none;
+    }
+}
+
+@media (min-width: 768px) and (max-width: 979px) {
+    span#checkpoint_status {
+        display: none;
+    }
+    span#autosave_status {
+        font-size: x-small;
+    }
+}
+
+  

IPython/frontend/html/notebook/static/notebook/less/toolbar.less

@@ -1,26 +1,34 @@
 .toolbar {
-    padding: 3px 15px;
-    border-bottom: @border_width @border_color solid;
-
-    button {
-        margin-top:2px;
-        margin-bottom:2px;
-    }
-
+    padding: 0px 10px;
+    margin-top: -5px;
 
     select, label {
-        height : 19px;
+        width: auto;
+        height: @baseLineHeight + 6px;
         vertical-align:middle;
         margin-right:2px;
-        margin-bottom:0;
+        margin-bottom:0px;
         display: inline;
         font-size: 92%;
         margin-left:0.3em;
         margin-right:0.3em;
         padding: 0px;
+        padding-top: 3px;
+    }
+    .btn {
+        padding: 2px 8px;
     }
 }
 
-.toolbar select{
-    width:auto;
+.toolbar .btn-group {
+  margin-top: 0px;
 }
+
+.toolbar-inner {
+  border: none !important;
+  .box-shadow(none) !important;
+}
+
+#maintoolbar {
+  margin-bottom: 0px;
+}

IPython/frontend/html/notebook/static/style/style.less

@@ -1,5 +1,6 @@
 // Bootstrap
 @import "../components/bootstrap/less/bootstrap.less";
+@import "../components/bootstrap/less/responsive.less";
 
 // base
 @import "../base/less/style.less";

IPython/frontend/html/notebook/static/tree/css/override.css

@@ -3,6 +3,5 @@ This is only required when different pages style the same element differently. T
 a hack to deal with our current css styles and no new styling should be added in this file.*/
 
 #ipython-main-app {
-    width: 920px;
     margin: 30px auto 0px auto;
 }

IPython/frontend/html/notebook/static/tree/js/clusterlist.js

@@ -25,18 +25,10 @@ var IPython = (function (IPython) {
     };
 
     ClusterList.prototype.style = function () {
+        $('#cluster_list').addClass('list_container');
         $('#cluster_toolbar').addClass('list_toolbar');
         $('#cluster_list_info').addClass('toolbar_info');
         $('#cluster_buttons').addClass('toolbar_buttons');
-        $('div#cluster_header').addClass('list_header ui-widget ui-widget-header ui-helper-clearfix');
-        $('div#cluster_header').children().eq(0).addClass('profile_col');
-        $('div#cluster_header').children().eq(1).addClass('action_col');
-        $('div#cluster_header').children().eq(2).addClass('engines_col');
-        $('div#cluster_header').children().eq(3).addClass('status_col');
-        $('#refresh_cluster_list').button({
-            icons : {primary: 'ui-icon-arrowrefresh-1-s'},
-            text : false
-        });
     };
 
 
@@ -69,11 +61,11 @@ var IPython = (function (IPython) {
         this.clear_list();
         var len = data.length;
         for (var i=0; i<len; i++) {
-            var item_div = $('<div/>');
-            var item = new ClusterItem(item_div);
+            var element = $('<div/>');
+            var item = new ClusterItem(element);
             item.update_state(data[i]);
-            item_div.data('item', item);
-            this.element.append(item_div);
+            element.data('item', item);
+            this.element.append(element);
         };
     };
 
@@ -91,8 +83,7 @@ var IPython = (function (IPython) {
 
 
     ClusterItem.prototype.style = function () {
-        this.element.addClass('list_item ui-widget ui-widget-content ui-helper-clearfix');
-        this.element.css('border-top-style','none');
+        this.element.addClass('list_item').addClass("row-fluid");
     }
 
     ClusterItem.prototype.update_state = function (data) {
@@ -108,22 +99,25 @@ var IPython = (function (IPython) {
 
     ClusterItem.prototype.state_stopped = function () {
         var that = this;
-        this.element.empty();
-        var profile_col = $('<span/>').addClass('profile_col').text(this.data.profile);
-        var status_col = $('<span/>').addClass('status_col').html('stopped');
-        var engines_col = $('<span/>').addClass('engines_col');
+        var profile_col = $('<span/>').addClass('profile_col span4').text(this.data.profile);
+        var status_col = $('<span/>').addClass('status_col span3').html('stopped');
+        var engines_col = $('<span/>').addClass('engine_col span3');
         var input = $('<input/>').attr('type','number')
                 .attr('min',1)
                 .attr('size',3)
                 .addClass('engine_num_input');
         engines_col.append(input);
-        var action_col = $('<span/>').addClass('action_col');
-        var start_button = $('<button>Start</button>').button();
-        action_col.append(start_button);
-        this.element.append(profile_col).
-            append(action_col).
-            append(engines_col).
-            append(status_col);
+        var start_button = $('<button/>').addClass("btn btn-mini").text("Start");
+        var action_col = $('<span/>').addClass('action_col span2').append(
+            $("<span/>").addClass("item_buttons btn-group").append(
+                start_button
+            )
+        );
+        this.element.empty()
+            .append(profile_col)
+            .append(status_col)
+            .append(engines_col)
+            .append(action_col);
         start_button.click(function (e) {
             var n = that.element.find('.engine_num_input').val();
             if (!/^\d+$/.test(n) && n.length>0) {
@@ -150,18 +144,21 @@ var IPython = (function (IPython) {
 
 
     ClusterItem.prototype.state_running = function () {
-        this.element.empty();
         var that = this;
-        var profile_col = $('<span/>').addClass('profile_col').text(this.data.profile);
-        var status_col = $('<span/>').addClass('status_col').html('running');
-        var engines_col = $('<span/>').addClass('engines_col').html(this.data.n);
-        var action_col = $('<span/>').addClass('action_col');
-        var stop_button = $('<button>Stop</button>').button();
-        action_col.append(stop_button);
-        this.element.append(profile_col).
-            append(action_col).
-            append(engines_col).
-            append(status_col);
+        var profile_col = $('<span/>').addClass('profile_col span4').text(this.data.profile);
+        var status_col = $('<span/>').addClass('status_col span3').html('running');
+        var engines_col = $('<span/>').addClass('engines_col span3').html(this.data.n);
+        var stop_button = $('<button/>').addClass("btn btn-mini").text("Stop");
+        var action_col = $('<span/>').addClass('action_col span2').append(
+            $("<span/>").addClass("item_buttons btn-group").append(
+                stop_button
+            )
+        );
+        this.element.empty()
+            .append(profile_col)
+            .append(status_col)
+            .append(engines_col)
+            .append(action_col);
         stop_button.click(function (e) {
             var settings = {
                 cache : false,

IPython/frontend/html/notebook/static/tree/js/main.js

@@ -13,22 +13,14 @@
 $(document).ready(function () {
 
     IPython.page = new IPython.Page();
-
-    $('div#tabs').tabs();
-    $('div#tabs').on('tabsselect', function (event, ui) {
-        var new_url = $('body').data('baseProjectUrl') + '#' + ui.panel.id;
-        window.history.replaceState({}, '', new_url);
-    });
-    $('#ipython-main-app').addClass('border-box-sizing ui-widget');
-    $('div#notebooks_toolbar').addClass('ui-widget ui-helper-clearfix');    
-    $('#new_notebook').button().click(function (e) {
+    $('#new_notebook').click(function (e) {
         window.open($('body').data('baseProjectUrl')+'new');
     });
-
+    
     IPython.read_only = $('body').data('readOnly') === 'True';
-    IPython.notebook_list = new IPython.NotebookList('div#notebook_list');
-    IPython.cluster_list = new IPython.ClusterList('div#cluster_list');
-    IPython.login_widget = new IPython.LoginWidget('span#login_widget');
+    IPython.notebook_list = new IPython.NotebookList('#notebook_list');
+    IPython.cluster_list = new IPython.ClusterList('#cluster_list');
+    IPython.login_widget = new IPython.LoginWidget('#login_widget');
 
     var interval_id=0;
     // auto refresh every xx secondes, no need to be fast,
@@ -77,6 +69,17 @@ $(document).ready(function () {
     $("#alternate_upload").change(function (event){
         IPython.notebook_list.handelFilesUpload(event,'form');
     });
+    
+    // set hash on tab click
+    $("#tabs").find("a").click(function() {
+        window.location.hash = $(this).attr("href");
+    })
+    
+    // load tab if url hash
+    if (window.location.hash) {
+        $("#tabs").find("a[href=" + window.location.hash + "]").click();
+    }
+
 
 });
 

IPython/frontend/html/notebook/static/tree/js/notebooklist.js

@@ -28,11 +28,8 @@ var IPython = (function (IPython) {
         $('#notebook_toolbar').addClass('list_toolbar');
         $('#drag_info').addClass('toolbar_info');
         $('#notebook_buttons').addClass('toolbar_buttons');
-        $('div#project_name').addClass('list_header ui-widget ui-widget-header');
-        $('#refresh_notebook_list').button({
-            icons : {primary: 'ui-icon-arrowrefresh-1-s'},
-            text : false
-        });
+        $('#notebook_list_header').addClass('list_header');
+        this.element.addClass("list_container");
     };
 
 
@@ -145,12 +142,17 @@ var IPython = (function (IPython) {
 
 
     NotebookList.prototype.new_notebook_item = function (index) {
-        var item = $('<div/>');
-        item.addClass('list_item ui-widget ui-widget-content ui-helper-clearfix');
-        item.css('border-top-style','none');
-        var item_name = $('<span/>').addClass('item_name');
-
-        item.append(item_name);
+        var item = $('<div/>').addClass("list_item").addClass("row-fluid");
+        // item.addClass('list_item ui-widget ui-widget-content ui-helper-clearfix');
+        // item.css('border-top-style','none');
+        item.append($("<div/>").addClass("span12").append(
+            $("<a/>").addClass("item_link").append(
+                $("<span/>").addClass("item_name")
+            )
+        ).append(
+            $('<div/>').addClass("item_buttons btn-group pull-right")
+        ));
+        
         if (index === -1) {
             this.element.append(item);
         } else {
@@ -163,37 +165,22 @@ var IPython = (function (IPython) {
     NotebookList.prototype.add_link = function (notebook_id, nbname, item) {
         item.data('nbname', nbname);
         item.data('notebook_id', notebook_id);
-        var new_item_name = $('<span/>').addClass('item_name');
-        new_item_name.append(
-            $('<a/>').
-            attr('href', this.baseProjectUrl()+notebook_id).
-            attr('target','_blank').
-            text(nbname)
-        );
-        var e = item.find('.item_name');
-        if (e.length === 0) {
-            item.append(new_item_name);
-        } else {
-            e.replaceWith(new_item_name);
-        };
+        item.find(".item_name").text(nbname);
+        item.find("a.item_link")
+            .attr('href', this.baseProjectUrl()+notebook_id)
+            .attr('target','_blank');
     };
 
 
     NotebookList.prototype.add_name_input = function (nbname, item) {
         item.data('nbname', nbname);
-        var new_item_name = $('<span/>').addClass('item_name');
-        new_item_name.append(
-            $('<input/>').addClass('ui-widget ui-widget-content').
-            attr('value', nbname).
-            attr('size', '30').
-            attr('type', 'text')
+        item.find(".item_name").empty().append(
+            $('<input/>')
+            .addClass("nbname_input")
+            .attr('value', nbname)
+            .attr('size', '30')
+            .attr('type', 'text')
         );
-        var e = item.find('.item_name');
-        if (e.length === 0) {
-            item.append(new_item_name);
-        } else {
-            e.replaceWith(new_item_name);
-        };
     };
 
 
@@ -202,10 +189,9 @@ var IPython = (function (IPython) {
     };
 
 
-    NotebookList.prototype.add_shutdown_button = function (item,kernel) {
-        var new_buttons = $('<span/>').addClass('item_buttons');
+    NotebookList.prototype.add_shutdown_button = function (item, kernel) {
         var that = this;
-        var shutdown_button = $('<button>Shutdown</button>').button().
+        var shutdown_button = $("<button/>").text("Shutdown").addClass("btn btn-mini").
             click(function (e) {
                 var settings = {
                     processData : false,
@@ -218,20 +204,16 @@ var IPython = (function (IPython) {
                 };
                 var url = that.baseProjectUrl() + 'kernels/'+kernel;
                 $.ajax(url, settings);
+                return false;
             });
-        new_buttons.append(shutdown_button);
-        var e = item.find('.item_buttons');
-        if (e.length === 0) {
-            item.append(new_buttons);
-        } else {
-            e.replaceWith(new_buttons);
-        };
+        // var new_buttons = item.find('a'); // shutdown_button;
+        item.find(".item_buttons").html("").append(shutdown_button);
     };
 
     NotebookList.prototype.add_delete_button = function (item) {
-        var new_buttons = $('<span/>').addClass('item_buttons');
+        var new_buttons = $('<span/>').addClass("btn-group pull-right");
         var notebooklist = this;
-        var delete_button = $('<button>Delete</button>').button().
+        var delete_button = $("<button/>").text("Delete").addClass("btn btn-mini").
             click(function (e) {
                 // $(this) is the button that was clicked.
                 var that = $(this);
@@ -240,50 +222,41 @@ var IPython = (function (IPython) {
                 var parent_item = that.parents('div.list_item');
                 var nbname = parent_item.data('nbname');
                 var notebook_id = parent_item.data('notebook_id');
-                var dialog = $('<div/>');
-                dialog.html('Are you sure you want to permanently delete the notebook: ' + nbname + '?');
-                parent_item.append(dialog);
-                dialog.dialog({
-                    resizable: false,
-                    modal: true,
-                    title: "Delete notebook",
+                var message = 'Are you sure you want to permanently delete the notebook: ' + nbname + '?';
+                IPython.dialog.modal({
+                    title : "Delete notebook",
+                    body : message,
                     buttons : {
-                        "Delete": function () {
-                            var settings = {
-                                processData : false,
-                                cache : false,
-                                type : "DELETE",
-                                dataType : "json",
-                                success : function (data, status, xhr) {
-                                    parent_item.remove();
-                                }
-                            };
-                            var url = notebooklist.baseProjectUrl() + 'notebooks/' + notebook_id;
-                            $.ajax(url, settings);
-                            $(this).dialog('close');
+                        Delete : {
+                            class: "btn-danger",
+                            click: function() {
+                                var settings = {
+                                    processData : false,
+                                    cache : false,
+                                    type : "DELETE",
+                                    dataType : "json",
+                                    success : function (data, status, xhr) {
+                                        parent_item.remove();
+                                    }
+                                };
+                                var url = notebooklist.baseProjectUrl() + 'notebooks/' + notebook_id;
+                                $.ajax(url, settings);
+                            }
                         },
-                        "Cancel": function () {
-                            $(this).dialog('close');
-                        }
+                        Cancel : {}
                     }
                 });
+                return false;
             });
-        new_buttons.append(delete_button);
-        var e = item.find('.item_buttons');
-        if (e.length === 0) {
-            item.append(new_buttons);
-        } else {
-            e.replaceWith(new_buttons);
-        };
+        item.find(".item_buttons").html("").append(delete_button);
     };
 
 
     NotebookList.prototype.add_upload_button = function (item) {
         var that = this;
-        var new_buttons = $('<span/>').addClass('item_buttons');
-        var upload_button = $('<button>Upload</button>').button().
-            addClass('upload-button').
-            click(function (e) {
+        var upload_button = $('<button/>').text("Upload")
+            .addClass('btn btn-primary btn-mini upload_button')
+            .click(function (e) {
                 var nbname = item.find('.item_name > input').attr('value');
                 var nbformat = item.data('nbformat');
                 var nbdata = item.data('nbdata');
@@ -309,19 +282,18 @@ var IPython = (function (IPython) {
                 var qs = $.param({name:nbname, format:nbformat});
                 var url = that.baseProjectUrl() + 'notebooks?' + qs;
                 $.ajax(url, settings);
+                return false;
             });
-        var cancel_button = $('<button>Cancel</button>').button().
-            click(function (e) {
+        var cancel_button = $('<button/>').text("Cancel")
+            .addClass("btn btn-mini")
+            .click(function (e) {
+                console.log('cancel click');
                 item.remove();
+                return false;
             });
-        upload_button.addClass('upload_button');
-        new_buttons.append(upload_button).append(cancel_button);
-        var e = item.find('.item_buttons');
-        if (e.length === 0) {
-            item.append(new_buttons);
-        } else {
-            e.replaceWith(new_buttons);
-        };
+        item.find(".item_buttons").empty()
+            .append(upload_button)
+            .append(cancel_button);
     };
 
 

IPython/frontend/html/notebook/static/tree/less/tree.less

@@ -6,11 +6,6 @@
  */
 
 #tabs {
-    border-style: none;
-}
-
-#tab1, #tab2 {
-    padding: 1em 0em;
 }
 
 .list_toolbar {
@@ -28,20 +23,39 @@
 }
 
 .list_header {
-    height: 25px;
-    line-height: 25px;
-    padding: 3px 5px;
+    font-weight: bold;
+}
+
+.list_container {
+  margin-top: 16px;
+  margin-bottom: 16px;
+  border: 1px solid @border_color;
+  border-radius: 4px;
 }
 
+.list_container > div {
+  border-bottom: 1px solid @border_color;
+  &:hover .list-item{
+    background-color: red;
+  };
+}
 
+.list_container > div:last-child {
+  border: none;
+}
 
 .list_item {
-    height: 25px;
-    line-height: 25px;
-    padding: 3px 5px;
+  &:hover .list_item {
+    background-color: #ddd;
+  };
 }
 
-.notebook_item a {
+.list_container > div > span, .list_container > div > div {
+  padding: 8px;
+}
+
+
+.list_item a {
     text-decoration: none;
 }
 
@@ -49,38 +63,29 @@
 }
 
 .status_col {
-    float: right;
-    width: 325px;
 }
 
 .engines_col {
-    float: right;
-    width: 325px;
 }
 
 .action_col {
-    float: right;
 }
 
-.item_buttons {
-    float: right;
-}
-
-.item_buttons .upload_button {
-    color: darkred;
+input.nbname_input {
+    height: 15px;
 }
 
 .highlight_text {
     color: blue;
 }
 
-.ui-tabs .ui-tabs-nav li a {
-    padding: .3em .5em;
-}
 
 #project_name > .breadcrumb {
- padding : 0;
- background-color: transparent;
+    padding: 0px;
+    margin-bottom: 0px;
+    background-color: transparent;
+    font-weight: bold;
+   
 }
 
 input.engine_num_input {
@@ -88,5 +93,5 @@ input.engine_num_input {
     margin-bottom:2px;
     padding-top:0;
     padding-bottom:0;
-    width: 90px;
+    width: 60px;
 }

IPython/frontend/html/notebook/templates/login.html

@@ -11,21 +11,33 @@
 
 {% block site %}
 
-<div id="ipython-main-app">
+<div id="ipython-main-app" class="container">
 
     {% if login_available %}
-    <form action="{{base_project_url}}login?next={{next}}" method="post">
-        Password: <input type="password" class='ui-widget ui-widget-content' name="password" id="password_input">
-        <input type="submit" value="Log in" id="login_submit">
-    </form>
+    <div class="row">
+    <div class="navbar span8 offset2">
+      <div class="navbar-inner">
+        <div class="container">
+          <div class="center-nav">
+            <p class="navbar-text nav">Password:</p>
+            <form action="{{base_project_url}}login?next={{next}}" method="post" class="navbar-form pull-left">
+              <input type="password" name="password" id="password_input">
+              <button type="submit" id="login_submit">Log in</button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+    </div>
     {% endif %}
-
     {% if message %}
+      <div class="row">
       {% for key in message %}
         <div class="message {{key}}">
            {{message[key]}}
         </div>
       {% endfor %}
+      </div>
     {% endif %}
 
 <div/>

IPython/frontend/html/notebook/templates/logout.html

@@ -10,7 +10,7 @@
 
 {% block site %}
 
-<div id="ipython-main-app">
+<div id="ipython-main-app" class="container">
 
     {% if message %}
       {% for key in message %}

IPython/frontend/html/notebook/templates/notebook.html

@@ -33,7 +33,7 @@ class="notebook_app"
 
 {% block header %}
 
-<span id="save_widget">
+<span id="save_widget" class="nav pull-left">
     <span id="notebook_name"></span>
     <span id="checkpoint_status"></span>
     <span id="autosave_status"></span>
@@ -44,20 +44,25 @@ class="notebook_app"
 
 {% block site %}
 
-<div id="menubar_container">
+<div id="menubar-container" class="container">
 <div id="menubar">
-    <ul id="menus">
-        <li><a href="#">File</a>
-            <ul>
+<div class="navbar">
+  <div class="navbar-inner">
+    <div class="container">
+    <ul id="menus" class="nav">
+        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">File</a>
+            <ul class="dropdown-menu">
                 <li id="new_notebook"><a href="#">New</a></li>
                 <li id="open_notebook"><a href="#">Open...</a></li>
-                <hr/>
+                <!-- <hr/> -->
+                <li class="divider"></li>
                 <li id="copy_notebook"><a href="#">Make a Copy...</a></li>
                 <li id="rename_notebook"><a href="#">Rename...</a></li>
                 <li id="save_checkpoint"><a href="#">Save and Checkpoint</a></li>
-                <hr/>
-                <li id="restore_checkpoint"><a href="#">Revert to Checkpoint</a>
-                  <ul>
+                <!-- <hr/> -->
+                <li class="divider"></li>
+                <li id="restore_checkpoint" class="dropdown-submenu"><a href="#">Revert to Checkpoint</a>
+                  <ul class="dropdown-menu">
                     <li><a href="#"></a></li>
                     <li><a href="#"></a></li>
                     <li><a href="#"></a></li>
@@ -65,21 +70,20 @@ class="notebook_app"
                     <li><a href="#"></a></li>
                   </ul>
                 </li>
-                <hr/>
-                <li><a href="#">Download as</a>
-                    <ul>
+                <li class="divider"></li>
+                <li class="dropdown-submenu"><a href="#">Download as</a>
+                    <ul class="dropdown-menu">
                         <li id="download_ipynb"><a href="#">IPython (.ipynb)</a></li>
                         <li id="download_py"><a href="#">Python (.py)</a></li>
                     </ul>
                 </li>
-                <!--<hr/>
-                <li id="print_notebook"><a href="/{{notebook_id}}/print" target="_blank">Print View</a></li>-->
-                <hr/>
+                <li class="divider"></li>
+                
                 <li id="kill_and_exit"><a href="#" >Close and halt</a></li>
             </ul>
         </li>
-        <li><a href="#">Edit</a>
-            <ul>
+        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Edit</a>
+            <ul class="dropdown-menu">
                 <li id="cut_cell"><a href="#">Cut Cell</a></li>
                 <li id="copy_cell"><a href="#">Copy Cell</a></li>
                 <li id="paste_cell_above" class="ui-state-disabled"><a href="#">Paste Cell Above</a></li>
@@ -87,51 +91,55 @@ class="notebook_app"
                 <li id="paste_cell_replace" class="ui-state-disabled"><a href="#">Paste Cell &amp; Replace</a></li>
                 <li id="delete_cell"><a href="#">Delete Cell</a></li>
                 <li id="undelete_cell" class="ui-state-disabled"><a href="#">Undo Delete Cell</a></li>
-                <hr/>
+                <li class="divider"></li>
                 <li id="split_cell"><a href="#">Split Cell</a></li>
                 <li id="merge_cell_above"><a href="#">Merge Cell Above</a></li>
                 <li id="merge_cell_below"><a href="#">Merge Cell Below</a></li>
-                <hr/>
+                <li class="divider"></li>
                 <li id="move_cell_up"><a href="#">Move Cell Up</a></li>
                 <li id="move_cell_down"><a href="#">Move Cell Down</a></li>
-                <hr/>
+                <li class="divider"></li>
                 <li id="select_previous"><a href="#">Select Previous Cell</a></li>
                 <li id="select_next"><a href="#">Select Next Cell</a></li>
             </ul>
         </li>
-        <li><a href="#">View</a>
-            <ul>
+        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">View</a>
+            <ul class="dropdown-menu">
                 <li id="toggle_header"><a href="#">Toggle Header</a></li>
                 <li id="toggle_toolbar"><a href="#">Toggle Toolbar</a></li>
             </ul>
         </li>
-        <li><a href="#">Insert</a>
-            <ul>
+        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Insert</a>
+            <ul class="dropdown-menu">
                 <li id="insert_cell_above"><a href="#">Insert Cell Above</a></li>
                 <li id="insert_cell_below"><a href="#">Insert Cell Below</a></li>
             </ul>
         </li>
-        <li><a href="#">Cell</a>
-            <ul>
+        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Cell</a>
+            <ul class="dropdown-menu">
                 <li id="run_cell"><a href="#">Run</a></li>
                 <li id="run_cell_in_place"><a href="#">Run in Place</a></li>
                 <li id="run_all_cells"><a href="#">Run All</a></li>
                 <li id="run_all_cells_above"><a href="#">Run All Above</a></li>
                 <li id="run_all_cells_below"><a href="#">Run All Below</a></li>
-                <hr/>
-                <li id="to_code"><a href="#">Code</a></li>
-                <li id="to_markdown"><a href="#">Markdown </a></li>
-                <li id="to_raw"><a href="#">Raw Text</a></li>
-                <li id="to_heading1"><a href="#">Heading 1</a></li>
-                <li id="to_heading2"><a href="#">Heading 2</a></li>
-                <li id="to_heading3"><a href="#">Heading 3</a></li>
-                <li id="to_heading4"><a href="#">Heading 4</a></li>
-                <li id="to_heading5"><a href="#">Heading 5</a></li>
-                <li id="to_heading6"><a href="#">Heading 6</a></li>
-                <hr/>
+                <li class="divider"></li>
+                <li id="change_cell_type" class="dropdown-submenu"><a href="#">Cell Type</a>
+                    <ul class="dropdown-menu">
+                      <li id="to_code"><a href="#">Code</a></li>
+                      <li id="to_markdown"><a href="#">Markdown </a></li>
+                      <li id="to_raw"><a href="#">Raw Text</a></li>
+                      <li id="to_heading1"><a href="#">Heading 1</a></li>
+                      <li id="to_heading2"><a href="#">Heading 2</a></li>
+                      <li id="to_heading3"><a href="#">Heading 3</a></li>
+                      <li id="to_heading4"><a href="#">Heading 4</a></li>
+                      <li id="to_heading5"><a href="#">Heading 5</a></li>
+                      <li id="to_heading6"><a href="#">Heading 6</a></li>
+                    </ul>
+                </li>
+                <li class="divider"></li>
                 <li id="toggle_output"><a href="#">Toggle Current Output</a></li>
-                <li id="all_outputs"><a href="#">All Output</a>
-                    <ul>
+                <li id="all_outputs" class="dropdown-submenu"><a href="#">All Output</a>
+                    <ul class="dropdown-menu">
                         <li id="expand_all_output"><a href="#">Expand</a></li>
                         <li id="scroll_all_output"><a href="#">Scroll Long</a></li>
                         <li id="collapse_all_output"><a href="#">Collapse</a></li>
@@ -140,18 +148,18 @@ class="notebook_app"
                 </li>
             </ul>
         </li>
-        <li><a href="#">Kernel</a>
-            <ul>
+        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Kernel</a>
+            <ul class="dropdown-menu">
                 <li id="int_kernel"><a href="#">Interrupt</a></li>
                 <li id="restart_kernel"><a href="#">Restart</a></li>
             </ul>
         </li>
-        <li><a href="#">Help</a>
-            <ul>
+        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Help</a>
+            <ul class="dropdown-menu">
                 <li><a href="http://ipython.org/documentation.html" target="_blank">IPython Help</a></li>
                 <li><a href="http://ipython.org/ipython-doc/stable/interactive/htmlnotebook.html" target="_blank">Notebook Help</a></li>
                 <li id="keyboard_shortcuts"><a href="#">Keyboard Shortcuts</a></li>
-                <hr/>
+                <li class="divider"></li>
                 <li><a href="http://docs.python.org" target="_blank">Python</a></li>
                 <li><a href="http://docs.scipy.org/doc/numpy/reference/" target="_blank">NumPy</a></li>
                 <li><a href="http://docs.scipy.org/doc/scipy/reference/" target="_blank">SciPy</a></li>
@@ -160,24 +168,27 @@ class="notebook_app"
             </ul>
         </li>
     </ul>
-
-</div>
-    <div id="notification_area">
+    <div id="notification_area"></div>
     </div>
+  </div>
+</div>
+</div>
+<div id="maintoolbar" class="navbar">
+  <div class="toolbar-inner navbar-inner navbar-nobg">
+    <div id="maintoolbar-container" class="container"></div>
+  </div>
+</div>
 </div>
-
-
-<div id="maintoolbar"></div>
 
 <div id="ipython-main-app">
 
     <div id="notebook_panel">
         <div id="notebook"></div>
         <div id="pager_splitter"></div>
-        <div id="pager_container">
+        <div id="pager">
             <div id='pager_button_area'>
             </div>
-            <div id="pager"></div>
+            <div id="pager-container" class="container"></div>
         </div>
     </div>
 
@@ -212,6 +223,7 @@ class="notebook_app"
 
 <script src="{{ static_url("base/js/events.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("base/js/utils.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("base/js/dialog.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("notebook/js/layoutmanager.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("notebook/js/mathjaxutils.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("notebook/js/outputarea.js") }}" type="text/javascript" charset="utf-8"></script>

IPython/frontend/html/notebook/templates/page.html

@@ -10,9 +10,11 @@
     <meta charset="utf-8">
 
     <title>{% block title %}IPython Notebook{% endblock %}</title>
-	<link rel="shortcut icon" type="image/x-icon" href="{{static_url("base/images/favicon.ico") }}">
+    <link rel="shortcut icon" type="image/x-icon" href="{{static_url("base/images/favicon.ico") }}">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
-    <link rel="stylesheet" href="{{static_url("jquery/css/themes/base/jquery-ui.min.css") }}" type="text/css" />
+    <link rel="stylesheet" href="{{static_url("components/jquery-ui/themes/smoothness/jquery-ui.min.css") }}" type="text/css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
     <link rel="stylesheet" href="{{static_url("base/css/boilerplate.css") }}" type="text/css" />
     {% block stylesheet %}
     {% block lesscss %}
@@ -38,8 +40,10 @@
 
 <body {% block params %}{% endblock %}>
 
-<div id="header">
-    <span id="ipython_notebook"><div><a href="{{base_project_url}}" alt='dashboard'><img src='{{static_url("base/images/ipynblogo.png") }}' alt='IPython Notebook'/></a></div></span>
+<div id="header" class="navbar navbar-static-top">
+  <div class="navbar-inner navbar-nobg">
+    <div class="container">
+    <div id="ipython_notebook" class="nav brand pull-left"><a href="{{base_project_url}}" alt='dashboard'><img src='{{static_url("base/images/ipynblogo.png") }}' alt='IPython Notebook'/></a></div>
 
     {% block login_widget %}
 
@@ -55,6 +59,8 @@
 
     {% block header %}
     {% endblock %}
+    </div>
+  </div>
 </div>
 
 <div id="site">
@@ -62,8 +68,9 @@
 {% endblock %}
 </div>
 
-<script src="{{static_url("jquery/js/jquery-1.7.1.min.js") }}" type="text/javascript" charset="utf-8"></script>
-<script src="{{static_url("jquery/js/jquery-ui.min.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{static_url("components/jquery/jquery.min.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{static_url("components/jquery-ui/ui/minified/jquery-ui.min.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{static_url("components/bootstrap/bootstrap/js/bootstrap.min.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{static_url("base/js/namespace.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{static_url("base/js/page.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{static_url("auth/js/loginwidget.js") }}" type="text/javascript" charset="utf-8"></script>

IPython/frontend/html/notebook/templates/tree.html

@@ -20,15 +20,16 @@ data-read-only={{read_only}}
 
 {% block site %}
 
-<div id="ipython-main-app">
+<div id="ipython-main-app" class="container">
 
-<div id="tabs">
-    <ul>
-        <li><a href="#tab1">Notebooks</a></li>
-        <li><a href="#tab2">Clusters</a></li>
+<div id="tabs" class="tabbable">
+    <ul class="nav nav-tabs" id="tabs">
+        <li class="active"><a href="#notebooks" data-toggle="tab">Notebooks</a></li>
+        <li><a href="#clusters" data-toggle="tab">Clusters</a></li>
     </ul>
 
-    <div id="tab1">
+    <div class="tab-content">
+    <div id="notebooks" class="tab-pane active">
         {% if logged_in or not read_only %}
         <div id="notebook_toolbar">
             <form id='alternate_upload'  class='alternate_upload' >
@@ -38,41 +39,43 @@ data-read-only={{read_only}}
                 <input type="file" name="datafile" class="fileinput" multiple='multiple'>
             </form>
             <span id="notebook_buttons">
-                <button id="refresh_notebook_list" title="Refresh notebook list">Refresh</button>
-                <button id="new_notebook" title="Create new notebook">New Notebook</button>
+                <button id="refresh_notebook_list" title="Refresh notebook list" class="btn btn-small">Refresh</button>
+                <button id="new_notebook" title="Create new notebook" class="btn btn-small">New Notebook</button>
             </span>
         </div>
         {% endif %}
 
         <div id="notebook_list">
-            <div id="project_name">
+          <div id="notebook_list_header" class="row-fluid list_header">
+              <div id="project_name">
                 <ul class="breadcrumb">
                     {% for component in project_component %}
                         <li>{{component}} <span>/</span></li>
                     {% endfor %}
                 </ul>
-            </div>
+              </div>
+          </div>
         </div>
     </div>
-    <div id="tab2">
+    
+    <div id="clusters" class="tab-pane">
 
         <div id="cluster_toolbar">
             <span id="cluster_list_info">IPython parallel computing clusters</span>
 
             <span id="cluster_buttons">
-                <button id="refresh_cluster_list" title="Refresh cluster list">Refresh</button>
+                <button id="refresh_cluster_list" title="Refresh cluster list" class="btn btn-small">Refresh</button>
             </span>
         </div>
 
         <div id="cluster_list">
-            <div id="cluster_header">
-                <span>profile</span>
-                <span>action</span>
-                <span title="Enter the number of engines to start or empty for default"># of engines</span>
-                <span>status</span>
+            <div id="cluster_list_header" class="row-fluid list_header">
+                <span class="profile_col span4">profile</span>
+                <span class="status_col span3">status</span>
+                <span class="engines_col span3" title="Enter the number of engines to start or empty for default"># of engines</span>
+                <span class="action_col span2">action</span>
             </div>
         </div>
-
     </div>
 </div>
 
@@ -82,6 +85,7 @@ data-read-only={{read_only}}
 
 {% block script %}
     {{super()}}
+    <script src="{{static_url("base/js/dialog.js") }}" type="text/javascript" charset="utf-8"></script>
     <script src="{{static_url("tree/js/notebooklist.js") }}" type="text/javascript" charset="utf-8"></script>
     <script src="{{static_url("tree/js/clusterlist.js") }}" type="text/javascript" charset="utf-8"></script>
     <script src="{{static_url("tree/js/main.js") }}" type="text/javascript" charset="utf-8"></script>