Merge pull request #5617 from jdfreder/bootstrap3

Migrate from Bootstrap 2 to Bootstrap 3
Brian E. Granger 12 years ago
commit eab07229ef

@ -13,7 +13,7 @@
$(document).ready(function () {
IPython.page = new IPython.Page();
$('button#login_submit').addClass("btn");
$('button#login_submit').addClass("btn btn-default");
IPython.page.show();
$('input#password_input').focus();

@ -24,7 +24,7 @@ var IPython = (function (IPython) {
};
LoginWidget.prototype.style = function () {
this.element.find("button").addClass("btn btn-small");
this.element.find("button").addClass("btn btn-default btn-sm");
};

@ -15,16 +15,29 @@ IPython.dialog = (function (IPython) {
"use strict";
var modal = function (options) {
var dialog = $("<div/>").addClass("modal").attr("role", "dialog");
dialog.append(
var modal = $("<div/>")
.addClass("modal")
.addClass("fade")
.attr("role", "dialog");
var dialog = $("<div/>")
.addClass("modal-dialog")
.appendTo(modal);
var dialog_content = $("<div/>")
.addClass("modal-content")
.appendTo(dialog);
dialog_content.append(
$("<div/>")
.addClass("modal-header")
.append($("<button>")
.attr("type", "button")
.addClass("close")
.attr("data-dismiss", "modal")
.attr("aria-hidden", "true")
.html("&times;")
).append(
$("<h3/>").text(options.title || "")
$("<h4/>")
.addClass('modal-title')
.text(options.title || "")
)
).append(
$("<div/>").addClass("modal-body").append(
@ -37,35 +50,35 @@ IPython.dialog = (function (IPython) {
for (var label in options.buttons) {
var btn_opts = options.buttons[label];
var button = $("<button/>")
.addClass("btn")
.addClass("btn btn-default btn-sm")
.attr("data-dismiss", "modal")
.text(label);
if (btn_opts.click) {
button.click($.proxy(btn_opts.click, dialog));
button.click($.proxy(btn_opts.click, dialog_content));
}
if (btn_opts.class) {
button.addClass(btn_opts.class);
}
footer.append(button);
}
dialog.append(footer);
dialog_content.append(footer);
// hook up on-open event
dialog.on("shown", function() {
modal.on("shown.bs.modal", function() {
setTimeout(function() {
footer.find("button").last().focus();
if (options.open) {
$.proxy(options.open, dialog)();
$.proxy(options.open, modal)();
}
}, 0);
});
// destroy dialog on hide, unless explicitly asked not to
// destroy modal on hide, unless explicitly asked not to
if (options.destroy === undefined || options.destroy) {
dialog.on("hidden", function () {
dialog.remove();
modal.on("hidden.bs.modal", function () {
modal.remove();
});
}
dialog.on("hidden", function () {
modal.on("hidden.bs.modal", function () {
if (IPython.notebook) {
var cell = IPython.notebook.get_selected_cell();
if (cell) cell.select();
@ -78,7 +91,7 @@ IPython.dialog = (function (IPython) {
IPython.keyboard_manager.disable();
}
return dialog.modal(options);
return modal.modal(options);
};
var edit_metadata = function (md, callback, name) {
@ -115,7 +128,7 @@ IPython.dialog = (function (IPython) {
autoIndent: true,
mode: 'application/json',
});
IPython.dialog.modal({
var modal = IPython.dialog.modal({
title: "Edit " + name + " Metadata",
body: dialogform,
buttons: {
@ -136,7 +149,8 @@ IPython.dialog = (function (IPython) {
Cancel: {}
}
});
editor.refresh();
modal.on('shown.bs.modal', function(){ editor.refresh(); });
};
return {

@ -7,5 +7,13 @@
}
.corner-all {
border-radius: @baseBorderRadius;
border-radius: @border-radius-base;
}
.border-radius(@radius) {
border-radius: @radius;
}
.no-padding {
padding: 0px;
}

@ -20,10 +20,14 @@ body {
div#header {
/* Initially hidden to prevent FLOUC */
display: none;
margin-bottom: 0px;
padding-left: 30px;
padding-bottom: 5px;
border-bottom: 1px solid @navbar-default-border;
}
#ipython_notebook {
padding-left: 16px;
padding-left: 0px;
}
#noscript {
@ -69,19 +73,14 @@ span#login_widget {
text-transform: none;
}
.navbar-nobg {
background-color: transparent;
background-image: none;
}
#header > span {
margin-top: 10px;
}
// class for stretching dialogs to fill the screen
.modal_stretch {
.modal_stretch .modal-dialog {
.vbox();
height: 80%;
min-height: 80%;
.modal-body {
max-height: none;
flex: 1;
@ -89,9 +88,8 @@ span#login_widget {
}
@media (min-width: 768px) {
.modal {
.modal .modal-dialog {
width: 700px;
margin-left: -350px;
}
}

@ -1,14 +1,27 @@
// Our customizations to bootstrap go here.
@textColor: @black;
@baseFontSize: 13px;
@monoFontFamily: monospace; // to allow user to customize their fonts
@navbarHeight: 36px;
@black: #000;
@text-color: @black;
@font-size-base: 13px;
@font-family-monospace: monospace; // to allow user to customize their fonts
@navbar-height: 36px;
@breadcrumb-color: darken(@border_color, 30%);
@blockquote-font-size: inherit;
@modal-inner-padding: 15px;
// Disable modal slide-in from top animation.
.modal {
&.fade .modal-dialog {
.translate(0, 0);
}
}
// Set the default code color.
code {
color: @black; // default code color in bootstrap is #d14 (crimson / amaranth)
}
// Override bootstrap pre element styling.
pre {
// bootstrap has pre defaults that we don't want to inherit.
// start pre tag defaults based on the surrounding context instead.
@ -16,5 +29,10 @@ pre {
line-height: inherit;
}
// Disable bold labels in BS3
label {
font-weight: normal;
}
// Our own global variables for all pages go here

@ -27,7 +27,7 @@
var add_raw_edit_button = function(div, cell) {
var button_container = div;
var button = $('<button/>')
.addClass("btn btn-mini")
.addClass("btn btn-default btn-xs")
.text("Edit Metadata")
.click( function () {
raw_edit(cell);

@ -92,7 +92,7 @@ var IPython = (function (IPython) {
}
}
],'move_up_down');
this.add_buttons_group([
{
@ -122,11 +122,12 @@ var IPython = (function (IPython) {
}
],'run_int');
};
MainToolBar.prototype.add_celltype_list = function () {
this.element
.append($('<select/>')
.attr('id','cell_type')
.addClass('form-control select-xs')
// .addClass('ui-widget-content')
.append($('<option/>').attr('value','code').text('Code'))
.append($('<option/>').attr('value','markdown').text('Markdown'))
@ -146,6 +147,7 @@ var IPython = (function (IPython) {
var select = $('<select/>')
// .addClass('ui-widget-content')
.attr('id', 'ctb_select')
.addClass('form-control select-xs')
.append($('<option/>').attr('value', '').text('None'));
this.element.append(label).append(select);
select.change(function() {
@ -180,7 +182,7 @@ var IPython = (function (IPython) {
MainToolBar.prototype.bind_events = function () {
var that = this;
this.element.find('#cell_type').change(function () {
var cell_type = $(this).val();
if (cell_type === 'code') {

@ -61,7 +61,7 @@ var IPython = (function (IPython) {
this.wrapper.addClass('output_wrapper');
this.element.addClass('output');
this.collapse_button.addClass("btn output_collapsed");
this.collapse_button.addClass("btn btn-default output_collapsed");
this.collapse_button.attr('title', 'click to expand output');
this.collapse_button.text('. . .');

@ -77,7 +77,7 @@ var IPython = (function (IPython) {
var element = $('<div/>');
// The documentation
var doc = $('<div/>').addClass('alert');
var doc = $('<div/>').addClass('alert alert-warning');
doc.append(
$('<button/>').addClass('close').attr('data-dismiss','alert').html('&times;')
).append(

@ -75,7 +75,7 @@ var IPython = (function (IPython) {
).append(
$("<br/>")
).append(
$('<input/>').attr('type','text').attr('size','25')
$('<input/>').attr('type','text').attr('size','25').addClass('form-control')
.val(IPython.notebook.get_notebook_name())
);
IPython.dialog.modal({

@ -72,7 +72,7 @@ var IPython = (function (IPython) {
for(var i=0; i < list.length; i++) {
el = list[i];
var button = $('<button/>')
.addClass('btn')
.addClass('btn btn-default')
.attr("title", el.label)
.append(
$("<i/>").addClass(el.icon)

@ -11,21 +11,15 @@
var tour_steps = [
{
element: $("#ipython_notebook"),
title: "Welcome to the Notebook Tour",
placement: 'bottom',
orphan: true,
content: "This tour will take 2 minutes.",
backdrop: true,
}, {
element: "#notebook_name",
title: "Filename",
placement: 'bottom',
content: "Click here to change the filename for this notebook."
}, {
element: "#checkpoint_status",
title: "Checkpoint Status",
placement: 'bottom',
content: "Information about the last time this notebook was saved."
}, {
element: $("#menus").parent(),
placement: 'bottom',
@ -68,13 +62,13 @@ var tour_steps = [
title: "Back to Command Mode",
placement: 'bottom',
onShow: function(tour) { IPython.notebook.command_mode(); },
onHide: function(tour) { $('#help_menu').parent().children('a').click(); },
content: "Pressing <code>Esc</code> or clicking outside of the input text area takes you back to Command Mode."
}, {
element: '#keyboard_shortcuts',
title: "Keyboard Shortcuts",
placement: 'bottom',
onShow: function(tour) { $('#help_menu').parent().addClass('open'); },
onHide: function(tour) { $('#help_menu').parent().removeClass('open'); },
onHide: function(tour) { $('#help_menu').parent().children('a').click(); },
content: "You can click here to get a list of all of the keyboard shortcuts."
}, {
element: "#kernel_indicator",
@ -101,18 +95,17 @@ var tour_steps = [
title: "Notification Area",
content: "Messages in response to user actions (Save, Interrupt, etc) appear here."
}, {
element: "#ipython_notebook",
title: "Fin.",
placement: 'bottom',
backdrop: true,
orphan: true,
content: "This concludes the IPython Notebook User Interface Tour. Happy hacking!",
}
];
var tour_style = "<div class='popover tour' style='position:relative'>\
var tour_style = "<div class='popover tour'>\
<div class='arrow'></div>\
<div style='position:absolute; top:7px; right:7px'>\
<button class='btn btn-sm icon-remove' data-role='end'></button></div>\
<button class='btn btn-default btn-sm icon-remove' data-role='end'></button></div>\
<h3 class='popover-title'></h3>\
<div class='popover-content'></div>\
<div class='popover-navigation'>\
@ -153,7 +146,8 @@ IPython = (function (IPython) {
onPause: toggle_pause_play,
onResume: toggle_pause_play,
steps: this.tour_steps,
template: tour_style
template: tour_style,
orphan: true
});
};

@ -23,11 +23,11 @@ div.cell {
div.prompt {
/* This needs to be wide enough for 3 digit prompt numbers: In[100]: */
min-width: 11ex;
min-width: 15ex;
/* This padding is tuned to match the padding on the CodeMirror editor. */
padding: @code_padding;
margin: 0px;
font-family: @monoFontFamily;
font-family: @font-family-monospace;
text-align: right;
/* This has to match that of the the CodeMirror class line-height below */
line-height: @code_line_height;

@ -1,4 +1,5 @@
/* CSS for the cell toolbar */
@celltoolbar-height: 29px;
.celltoolbar {
border: thin solid #CFCFCF;
@ -7,7 +8,8 @@
border-radius : 3px 3px 0px 0px;
width:100%;
-webkit-box-pack: end;
height:22px;
height: @celltoolbar-height;
padding-right: 4px;
.hbox();
.reverse();
}
@ -15,14 +17,8 @@
.ctb_hideshow {
display:none;
vertical-align:bottom;
padding-right: 2px;
}
.celltoolbar > div {
padding-top: 0px;
}
/* ctb_show is added to the ctb_hideshow div to show the cell toolbar.
Cell toolbars are only shown when the ctb_global_show class is also set.
*/
@ -37,40 +33,17 @@
border-top-left-radius: 0px;
}
.celltoolbar .button_container select {
margin: 10px;
margin-top: 1px;
margin-bottom: 0px;
padding:0;
.celltoolbar {
font-size: 87%;
width:auto;
display:inline-block;
height:18px;
line-height:18px;
vertical-align:top;
}
.celltoolbar label{
display:inline-block;
height:15px;
line-height:15px;
vertical-align:top;
}
.celltoolbar label span {
font-size: 85%;
padding-top: 3px;
}
.celltoolbar input[type=checkbox] {
margin: 0px;
margin-left: 4px;
margin-right: 4px;
.celltoolbar select {
font-size: 87%;
height: 22px;
}
.celltoolbar .ui-button {
border: none;
vertical-align:top;
height:20px;
min-width:30px;
.celltoolbar label {
margin-left: 5px;
margin-right: 5px;
}

@ -37,8 +37,8 @@
.CodeMirror-gutters {
// This is needed because our cell has rounded corners, otherwise the gutter area square
// corner cuts into the rounded cell border.
border-bottom-left-radius: @baseBorderRadius;
border-top-left-radius: @baseBorderRadius;
border-bottom-left-radius: @border-radius-base;
border-top-left-radius: @border-radius-base;
}
.CodeMirror pre {

@ -14,12 +14,12 @@
padding: 0px;
margin: 0px;
overflow: auto;
font-family: @monoFontFamily;
font-family: @font-family-monospace;
font-size: 110%;
color: @textColor;
color: @text-color;
width: auto;
}
.completions select option.context {
color: @blueDark;
color: darken(@brand-primary, 10%);
}

@ -1,22 +1,30 @@
#menubar {
}
margin-top: 0px;
margin-bottom: -19px;
position: relative;
#menubar .navbar-inner {
min-height: 28px;
border-top: 1px;
border-radius: 0px 0px @baseBorderRadius @baseBorderRadius;
}
.navbar {
border-top: 1px;
border-radius: 0px 0px @border-radius-base @border-radius-base;
}
#menubar .navbar {
margin-bottom: 8px;
}
.nav-wrapper {
border-bottom: 1px solid @navbarBorder;
li.dropdown {
line-height: 12px;
a {
padding-top: 6px;
padding-bottom: 5px;
}
}
ul.navbar-right {
padding-top: 2px;
}
}
#menubar li.dropdown {
line-height: 12px;
.nav-wrapper {
border-bottom: 1px solid @navbar-default-border;
}
i.menu-icon {
@ -30,4 +38,17 @@ ul#help_menu li a{
i {
margin-right: -1.2em;
}
}
}
#menus {
min-height: 30px;
}
// Make sub menus work in BS3.
// Credit: http://www.bootply.com/86684
.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu:hover>.dropdown-menu{display:block;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}

@ -1,6 +1,6 @@
body {
background-color: @bodyBackground;
background-color: @body-bg;
}
body.notebook_app {
@ -26,7 +26,7 @@ span#notebook_name {
div#notebook_panel {
margin: 0px 0px 0px 0px;
padding: 0px;
.box-shadow(0 -1px 10px rgba(0,0,0,.1));
.box-shadow(@notebook-shadow);
}
div#notebook {
font-size: @notebook_font_size;
@ -37,7 +37,7 @@ div#notebook {
/* This spaces the cell away from the edge of the notebook area */
padding: 1em 0 1em 0;
margin: 0px;
border-top: 1px solid @border_color;
border-top: 1px solid @navbar-default-border;
outline: none;
.border-box-sizing();
}
@ -65,7 +65,7 @@ p.dialog {
pre, code, kbd, samp { white-space: pre-wrap; }
#fonttest {
font-family: @monoFontFamily;
font-family: @font-family-monospace;
}
p {

@ -1,9 +1,11 @@
#notification_area {
.pull-right();
z-index: 10;
}
.indicator_area {
color: @navbarLinkColor;
color: @navbar-default-link-color;
padding: 4px 3px;
margin: 0px;
width: 11px;
@ -12,8 +14,17 @@
}
#kernel_indicator {
// Pull it to the right, outside the container boundary
margin-right: -16px;
.pull-right();
.indicator_area();
margin-right: 12px;
}
#modal_indicator {
.pull-right();
.indicator_area();
margin-right: 5px;
}
.edit_mode_icon:before {

@ -1,10 +1,10 @@
.notification_widget {
color: @navbarLinkColor;
color: @navbar-default-link-color;
padding: 1px 12px;
margin: 2px 4px;
z-index: 10;
border: 1px solid #ccc;
border-radius: @baseBorderRadius;
border-radius: @border-radius-base;
background: rgba(240, 240, 240, 0.5);
&.span {

@ -102,7 +102,7 @@ div.output_subarea {
/* all text output has this class: */
div.output_text {
text-align: left;
color: @textColor;
color: @text-color;
/* This has to match that of the the CodeMirror class line-height below */
line-height: @code_line_height;
}
@ -143,7 +143,7 @@ div.output_javascript:empty {
/* raw_input styles */
div.raw_input_container {
font-family: @monoFontFamily;
font-family: @font-family-monospace;
// for some reason, em padding doesn't compute the same for raw_input
// that is not the first input, but px does
padding-top: 5px;

@ -15,7 +15,7 @@ div#pager {
pre {
line-height: @code_line_height;
color: @textColor;
color: @text-color;
background-color: @cell_background;
padding: @code_padding;
}

@ -5,7 +5,7 @@
display: inline-block;
width: 20ex;
text-align: right;
font-family: @monoFontFamily;
font-family: @font-family-monospace;
}
.shortcut_descr {

@ -1,6 +1,6 @@
.rendered_html {
color: @textColor;
color: @text-color;
em {font-style: italic;}
strong {font-weight: bold;}
u {text-decoration: underline;}
@ -25,10 +25,10 @@
h5:first-child {margin-top: 1em;}
h6:first-child {margin-top: 1em;}
ul {list-style:disc; margin: 0em 2em;}
ul {list-style:disc; margin: 0em 2em; padding-left: 0px;}
ul ul {list-style:square; margin: 0em 2em;}
ul ul ul {list-style:circle; margin: 0em 2em;}
ol {list-style:decimal; margin: 0em 2em;}
ol {list-style:decimal; margin: 0em 2em; padding-left: 0px;}
ol ol {list-style:upper-alpha; margin: 0em 2em;}
ol ol ol {list-style:lower-alpha; margin: 0em 2em;}
ol ol ol ol {list-style:lower-roman; margin: 0em 2em;}
@ -46,8 +46,8 @@
pre, code {
border: 0;
background-color: @bodyBackground;
color: @textColor;
background-color: @body-bg;
color: @text-color;
font-size: 100%;
padding: 0px;
}

@ -16,7 +16,7 @@ div.text_cell_render {
width: inherit;
border-style: none;
padding: 0.5em 0.5em 0.5em @code_padding;
color: @textColor;
color: @text-color;
}
a.anchor-link:link {

@ -1,10 +1,10 @@
.toolbar {
padding: 0px 10px;
padding: 0px;
margin-left: -5px;
margin-top: -5px;
select, label {
width: auto;
height: @baseLineHeight + 6px;
vertical-align:middle;
margin-right:2px;
margin-bottom:0px;
@ -22,13 +22,32 @@
.toolbar .btn-group {
margin-top: 0px;
margin-left: 5px;
}
.toolbar-inner {
border: none !important;
.box-shadow(none) !important;
#maintoolbar {
margin-bottom: -3px;
margin-top: -8px;
border: 0px;
min-height: 27px;
margin-left: 32px;
padding-top: 6px;
padding-bottom: 8px;
.navbar-text {
float: none;
vertical-align: middle;
text-align: right;
margin-left: 5px;
margin-right: 0px;
margin-top: 0px
}
.toolbar {
margin-top: 0px;
}
}
#maintoolbar {
margin-bottom: 0px;
}
.select-xs {
height: @btn_small_height;
}

@ -106,7 +106,7 @@
padding: 3px;
margin: 0px;
padding-left:7px;
font-family: @monoFontFamily;
font-family: @font-family-monospace;
min-height:50px;
.dropshadow;

@ -1,8 +1,8 @@
// Our own variables for this page
@cell_selected_background: darken(@bodyBackground, 2%);
@cell_background: darken(@bodyBackground, 3.2%);
@cell_selected_background: darken(@body-bg, 2%);
@cell_background: darken(@body-bg, 3.2%);
@border_color: darken(@cell_selected_background, 31%);
@light_border_color: darken(@cell_selected_background, 17%);
@border_width: 1px;
@ -10,4 +10,5 @@
@notebook_line_height: 20px;
@code_line_height: 1.21429em; // changed from 1.231 to get 17px even
@code_padding: 0.4em; // 5.6 px
@notebook-shadow: inset 1px 4px 9px -6px rgba(0,0,0,.25);

@ -1,11 +1,11 @@
.clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0}
.clearfix:after{clear:both}
.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}
.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.modal.fade .modal-dialog{-webkit-transform:translate(0, 0);-ms-transform:translate(0, 0);transform:translate(0, 0)}
code{color:#000}
pre{font-size:inherit;line-height:inherit}
label{font-weight:normal}
.border-box-sizing{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
.corner-all{border-radius:4px}
.no-padding{padding:0}
.hbox{display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;display:flex;flex-direction:row;align-items:stretch}
.hbox>*{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;flex:none}
.vbox{display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;display:flex;flex-direction:column;align-items:stretch}
@ -47,7 +47,7 @@ div.traceback-wrapper{text-align:left;max-width:800px;margin:auto}
div.cell{border:1px solid transparent;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;display:flex;flex-direction:column;align-items:stretch}div.cell.selected{border-radius:4px;border:thin #ababab solid}
div.cell.edit_mode{border-radius:4px;border:thin #008000 solid}
div.cell{width:100%;padding:5px 5px 5px 0;margin:0;outline:none}
div.prompt{min-width:11ex;padding:.4em;margin:0;font-family:monospace;text-align:right;line-height:1.21429em}
div.prompt{min-width:15ex;padding:.4em;margin:0;font-family:monospace;text-align:right;line-height:1.21429em}
@media (max-width:480px){div.prompt{text-align:left}}div.inner_cell{display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;display:flex;flex-direction:column;align-items:stretch;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;flex:1}
div.input_area{border:1px solid #cfcfcf;border-radius:4px;background:#f7f7f7;line-height:1.21429em}
div.prompt:empty{padding-top:0;padding-bottom:0}
@ -60,7 +60,7 @@ div.input_area>div.highlight>pre{margin:0;border:none;padding:0;background-color
.CodeMirror-lines{padding:.4em}
.CodeMirror-linenumber{padding:0 8px 0 4px}
.CodeMirror-gutters{border-bottom-left-radius:4px;border-top-left-radius:4px}
.CodeMirror pre{padding:0;border:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}
.CodeMirror pre{padding:0;border:0;border-radius:0}
.CodeMirror-vscrollbar,.CodeMirror-hscrollbar{display:none !important}
pre code{display:block;padding:.5em}
.highlight-base,pre code,pre .subst,pre .tag .title,pre .lisp .title,pre .clojure .built_in,pre .nginx .title{color:#000}
@ -84,16 +84,16 @@ pre .coffeescript .javascript,pre .javascript .xml,pre .tex .formula,pre .xml .j
.cm-s-ipython span.cm-meta{color:#a2f}
.cm-s-ipython span.cm-tab{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=);background-position:right;background-repeat:no-repeat}
div.output_wrapper{position:relative;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;display:flex;flex-direction:column;align-items:stretch}
div.output_scroll{height:24em;width:100%;overflow:auto;border-radius:4px;-webkit-box-shadow:inset 0 2px 8px rgba(0,0,0,0.8);-moz-box-shadow:inset 0 2px 8px rgba(0,0,0,0.8);box-shadow:inset 0 2px 8px rgba(0,0,0,0.8);display:block}
div.output_scroll{height:24em;width:100%;overflow:auto;border-radius:4px;-webkit-box-shadow:inset 0 2px 8px rgba(0,0,0,0.8);box-shadow:inset 0 2px 8px rgba(0,0,0,0.8);display:block}
div.output_collapsed{margin:0;padding:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;display:flex;flex-direction:column;align-items:stretch}
div.out_prompt_overlay{height:100%;padding:0 .4em;position:absolute;border-radius:4px}
div.out_prompt_overlay:hover{-webkit-box-shadow:inset 0 0 1px #000;-moz-box-shadow:inset 0 0 1px #000;box-shadow:inset 0 0 1px #000;background:rgba(240,240,240,0.5)}
div.out_prompt_overlay:hover{-webkit-box-shadow:inset 0 0 1px #000;box-shadow:inset 0 0 1px #000;background:rgba(240,240,240,0.5)}
div.output_prompt{color:#8b0000}
div.output_area{padding:0;page-break-inside:avoid;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;display:flex;flex-direction:row;align-items:stretch}div.output_area .MathJax_Display{text-align:left !important}
div.output_area .rendered_html table{margin-left:0;margin-right:0}
div.output_area .rendered_html img{margin-left:0;margin-right:0}
.output{display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;display:flex;flex-direction:column;align-items:stretch}
@media (max-width:480px){div.output_area{display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;display:flex;flex-direction:column;align-items:stretch}}div.output_area pre{margin:0;padding:0;border:0;vertical-align:baseline;color:#000;background-color:transparent;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}
@media (max-width:480px){div.output_area{display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;display:flex;flex-direction:column;align-items:stretch}}div.output_area pre{margin:0;padding:0;border:0;vertical-align:baseline;color:#000;background-color:transparent;border-radius:0}
div.output_subarea{padding:.4em .4em 0 .4em;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;flex:1}
div.output_text{text-align:left;color:#000;line-height:1.21429em}
div.output_stderr{background:#fdd;}
@ -122,10 +122,10 @@ p.p-space{margin-bottom:10px}
.rendered_html h4:first-child{margin-top:1em}
.rendered_html h5:first-child{margin-top:1em}
.rendered_html h6:first-child{margin-top:1em}
.rendered_html ul{list-style:disc;margin:0 2em}
.rendered_html ul{list-style:disc;margin:0 2em;padding-left:0}
.rendered_html ul ul{list-style:square;margin:0 2em}
.rendered_html ul ul ul{list-style:circle;margin:0 2em}
.rendered_html ol{list-style:decimal;margin:0 2em}
.rendered_html ol{list-style:decimal;margin:0 2em;padding-left:0}
.rendered_html ol ol{list-style:upper-alpha;margin:0 2em}
.rendered_html ol ol ol{list-style:lower-alpha;margin:0 2em}
.rendered_html ol ol ol ol{list-style:lower-roman;margin:0 2em}
@ -151,25 +151,25 @@ a.anchor-link:link{text-decoration:none;padding:0 20px;visibility:hidden}
h1:hover .anchor-link,h2:hover .anchor-link,h3:hover .anchor-link,h4:hover .anchor-link,h5:hover .anchor-link,h6:hover .anchor-link{visibility:visible}
div.cell.text_cell.rendered{padding:0}
.widget-area{page-break-inside:avoid;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;display:flex;flex-direction:row;align-items:stretch}.widget-area .widget-subarea{padding:.44em .4em .4em 1px;margin-left:6px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;display:flex;flex-direction:column;align-items:stretch;-webkit-box-flex:2;-moz-box-flex:2;box-flex:2;flex:2;-webkit-box-align:start;-moz-box-align:start;box-align:start;align-items:flex-start}
.widget-hlabel{min-width:10ex;padding-right:8px;padding-top:3px;text-align:right;vertical-align:text-top}
.widget-hlabel{min-width:10ex;padding-right:8px;padding-top:5px;text-align:right;vertical-align:text-top}
.widget-vlabel{padding-bottom:5px;text-align:center;vertical-align:text-bottom}
.widget-hreadout{padding-left:8px;padding-top:3px;text-align:left;vertical-align:text-top}
.widget-hreadout{padding-left:8px;padding-top:5px;text-align:left;vertical-align:text-top}
.widget-vreadout{padding-top:5px;text-align:center;vertical-align:text-top}
.slide-track{border:1px solid #ccc;background:#fff;border-radius:4px;}
.widget-hslider{padding-left:8px;padding-right:5px;overflow:visible;width:348px;height:5px;max-height:5px;margin-top:11px;margin-bottom:10px;border:1px solid #ccc;background:#fff;border-radius:4px;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;display:flex;flex-direction:row;align-items:stretch}.widget-hslider .ui-slider{border:0 !important;background:none !important;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;display:flex;flex-direction:row;align-items:stretch;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;flex:1}.widget-hslider .ui-slider .ui-slider-handle{width:14px !important;height:28px !important;margin-top:-8px !important}
.widget-hslider{padding-left:8px;padding-right:5px;overflow:visible;width:350px;height:5px;max-height:5px;margin-top:13px;margin-bottom:10px;border:1px solid #ccc;background:#fff;border-radius:4px;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;display:flex;flex-direction:row;align-items:stretch}.widget-hslider .ui-slider{border:0 !important;background:none !important;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;display:flex;flex-direction:row;align-items:stretch;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;flex:1}.widget-hslider .ui-slider .ui-slider-handle{width:14px !important;height:28px !important;margin-top:-8px !important}
.widget-vslider{padding-bottom:8px;overflow:visible;width:5px;max-width:5px;height:250px;margin-left:12px;border:1px solid #ccc;background:#fff;border-radius:4px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;display:flex;flex-direction:column;align-items:stretch}.widget-vslider .ui-slider{border:0 !important;background:none !important;margin-left:-4px;margin-top:5px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;display:flex;flex-direction:column;align-items:stretch;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;flex:1}.widget-vslider .ui-slider .ui-slider-handle{width:28px !important;height:14px !important;margin-left:-9px}
.widget-text{width:350px;margin:0 !important}
.widget-listbox{width:364px;margin-bottom:0}
.widget-listbox{width:350px;margin-bottom:0}
.widget-numeric-text{width:150px;margin:0 !important}
.widget-progress{width:363px}.widget-progress .bar{-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none}
.widget-combo-btn{min-width:138px;}
.widget-progress{margin-top:6px;width:350px}.widget-progress .progress-bar{-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none}
.widget-combo-btn{min-width:125px}
.widget-box{margin:5px;-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;justify-content:flex-start;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-webkit-box-align:start;-moz-box-align:start;box-align:start;align-items:flex-start}
.widget-hbox{margin:5px;-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;justify-content:flex-start;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-webkit-box-align:start;-moz-box-align:start;box-align:start;align-items:flex-start;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;display:flex;flex-direction:row;align-items:stretch}
.widget-hbox-single{margin:5px;-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;justify-content:flex-start;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-webkit-box-align:start;-moz-box-align:start;box-align:start;align-items:flex-start;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;display:flex;flex-direction:row;align-items:stretch;height:30px}
.widget-hbox-single{margin:5px;-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;justify-content:flex-start;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-webkit-box-align:start;-moz-box-align:start;box-align:start;align-items:flex-start;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;display:flex;flex-direction:row;align-items:stretch;height:30px}.widget-hbox-single input[type="checkbox"]{margin-top:9px}
.widget-vbox{margin:5px;-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;justify-content:flex-start;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-webkit-box-align:start;-moz-box-align:start;box-align:start;align-items:flex-start;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;display:flex;flex-direction:column;align-items:stretch}
.widget-vbox-single{margin:5px;-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;justify-content:flex-start;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-webkit-box-align:start;-moz-box-align:start;box-align:start;align-items:flex-start;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;display:flex;flex-direction:column;align-items:stretch;width:30px}
.widget-modal{overflow:hidden;position:absolute !important;top:0;left:0;margin-left:0 !important}
.widget-modal-body{max-height:none !important}
.widget-container{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-webkit-box-align:start;-moz-box-align:start;box-align:start;align-items:flex-start}
.widget-radio-box{display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;display:flex;flex-direction:column;align-items:stretch;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding-top:4px}
.widget-radio-box{display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;display:flex;flex-direction:column;align-items:stretch;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding-top:4px}.widget-radio-box label{margin-top:0}
.docked-widget-modal{overflow:hidden;position:relative !important;top:0 !important;left:0 !important;margin-left:0 !important}

@ -1,6 +1,6 @@
// Bootstrap
@import "../components/bootstrap/less/bootstrap.less";
@import "../components/bootstrap/less/responsive.less";
@import "../components/bootstrap/less/responsive-utilities.less";
// Font-Awesome
@import "../components/font-awesome/less/font-awesome.less";

File diff suppressed because one or more lines are too long

@ -3,5 +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 {
margin: 30px auto 0px auto;
margin: 28px auto 0px auto;
}

@ -83,7 +83,7 @@ var IPython = (function (IPython) {
};
ClusterItem.prototype.style = function () {
this.element.addClass('list_item').addClass("row-fluid");
this.element.addClass('list_item').addClass("row");
};
ClusterItem.prototype.update_state = function (data) {
@ -98,16 +98,16 @@ var IPython = (function (IPython) {
ClusterItem.prototype.state_stopped = function () {
var that = this;
var profile_col = $('<div/>').addClass('profile_col span4').text(this.data.profile);
var status_col = $('<div/>').addClass('status_col span3').text('stopped');
var engines_col = $('<div/>').addClass('engine_col span3');
var profile_col = $('<div/>').addClass('profile_col col-md-4').text(this.data.profile);
var status_col = $('<div/>').addClass('status_col col-md-3').text('stopped');
var engines_col = $('<div/>').addClass('engine_col col-md-3');
var input = $('<input/>').attr('type','number')
.attr('min',1)
.attr('size',3)
.addClass('engine_num_input');
.addClass('engine_num_input form-control');
engines_col.append(input);
var start_button = $('<button/>').addClass("btn btn-mini").text("Start");
var action_col = $('<div/>').addClass('action_col span2').append(
var start_button = $('<button/>').addClass("btn btn-default btn-xs").text("Start");
var action_col = $('<div/>').addClass('action_col col-md-2').append(
$("<span/>").addClass("item_buttons btn-group").append(
start_button
)
@ -150,11 +150,11 @@ var IPython = (function (IPython) {
ClusterItem.prototype.state_running = function () {
var that = this;
var profile_col = $('<div/>').addClass('profile_col span4').text(this.data.profile);
var status_col = $('<div/>').addClass('status_col span3').text('running');
var engines_col = $('<div/>').addClass('engines_col span3').text(this.data.n);
var stop_button = $('<button/>').addClass("btn btn-mini").text("Stop");
var action_col = $('<div/>').addClass('action_col span2').append(
var profile_col = $('<div/>').addClass('profile_col col-md-4').text(this.data.profile);
var status_col = $('<div/>').addClass('status_col col-md-3').text('running');
var engines_col = $('<div/>').addClass('engines_col col-md-3').text(this.data.n);
var stop_button = $('<button/>').addClass("btn btn-default btn-xs").text("Stop");
var action_col = $('<div/>').addClass('action_col col-md-2').append(
$("<span/>").addClass("item_buttons btn-group").append(
stop_button
)

@ -189,10 +189,10 @@ var IPython = (function (IPython) {
NotebookList.prototype.new_notebook_item = function (index) {
var item = $('<div/>').addClass("list_item").addClass("row-fluid");
var item = $('<div/>').addClass("list_item").addClass("row");
// item.addClass('list_item ui-widget ui-widget-content ui-helper-clearfix');
// item.css('border-top-style','none');
item.append($("<div/>").addClass("span12").append(
item.append($("<div/>").addClass("col-md-12").append(
$('<i/>').addClass('item_icon')
).append(
$("<a/>").addClass("item_link").append(
@ -265,7 +265,7 @@ var IPython = (function (IPython) {
NotebookList.prototype.add_shutdown_button = function (item, session) {
var that = this;
var shutdown_button = $("<button/>").text("Shutdown").addClass("btn btn-mini btn-danger").
var shutdown_button = $("<button/>").text("Shutdown").addClass("btn btn-xs btn-danger").
click(function (e) {
var settings = {
processData : false,
@ -292,7 +292,7 @@ var IPython = (function (IPython) {
NotebookList.prototype.add_delete_button = function (item) {
var new_buttons = $('<span/>').addClass("btn-group pull-right");
var notebooklist = this;
var delete_button = $("<button/>").text("Delete").addClass("btn btn-mini").
var delete_button = $("<button/>").text("Delete").addClass("btn btn-default btn-xs").
click(function (e) {
// $(this) is the button that was clicked.
var that = $(this);
@ -339,7 +339,7 @@ var IPython = (function (IPython) {
NotebookList.prototype.add_upload_button = function (item) {
var that = this;
var upload_button = $('<button/>').text("Upload")
.addClass('btn btn-primary btn-mini upload_button')
.addClass('btn btn-primary btn-xs upload_button')
.click(function (e) {
var nbname = item.find('.item_name > input').val();
if (nbname.slice(nbname.length-6, nbname.length) != ".ipynb") {
@ -375,7 +375,7 @@ var IPython = (function (IPython) {
return false;
});
var cancel_button = $('<button/>').text("Cancel")
.addClass("btn btn-mini")
.addClass("btn btn-default btn-xs")
.click(function (e) {
console.log('cancel click');
item.remove();

@ -9,16 +9,16 @@
@dashboard_lr_pad: 7px;
// These are the total heights of the Bootstrap small and mini buttons. These values
// are not less variables so we have to track them statically.
@btn_small_height: 26px;
@btn_small_height: 24px;
@btn_mini_height: 22px;
@dark_dashboard_color: darken(@border_color, 30%);
@dark_dashboard_color: @breadcrumb-color;
ul#tabs {
margin-bottom: @dashboard_tb_pad;
}
ul#tabs a {
padding-top: @dashboard_tb_pad;
padding-top: @dashboard_tb_pad + 2px;
padding-bottom: @dashboard_tb_pad;
}
@ -38,6 +38,11 @@ ul.breadcrumb {
.list_toolbar {
padding: @dashboard_tb_pad 0 @dashboard_tb_pad 0;
vertical-align: middle;
.tree-buttons {
padding-top: 2px;
}
}
.list_toolbar [class*="span"] {
@ -73,12 +78,15 @@ ul.breadcrumb {
a {text-decoration: none;}
}
.action_col {
text-align: right;
}
.list_header>div, .list_item>div {
padding-top: @dashboard_tb_pad;
padding-bottom: @dashboard_tb_pad;
padding-left: @dashboard_lr_pad;
padding-right: @dashboard_lr_pad;
height: @btn_mini_height;
line-height: @btn_mini_height;
}
@ -106,7 +114,7 @@ input.nbname_input, input.engine_num_input {
// These settings give these inputs a height that matches @btn_mini_height = 22
padding-top: 3px;
padding-bottom: 3px;
height: 14px;
height: @btn_mini_height;
line-height: 14px;
margin: 0px;
}
@ -127,6 +135,11 @@ input.engine_num_input {
}
.tab-content .row {
margin-left: 0px;
margin-right: 0px;
}
.folder_icon:before {
.icon(@folder-close-alt)
}

@ -76,7 +76,7 @@ define(["widgets/js/widget"], function(WidgetManager){
// Called when view is rendered.
var that = this;
this.setElement($('<button />')
.addClass('btn')
.addClass('btn btn-default')
.attr('type', 'button')
.on('click', function (e) {
e.preventDefault();

@ -20,7 +20,7 @@ define(["widgets/js/widget"], function(WidgetManager){
render : function(){
// Called when view is rendered.
this.setElement($("<button />")
.addClass('btn'));
.addClass('btn btn-default'));
this.update(); // Set defaults.
},

@ -84,11 +84,17 @@ define(["widgets/js/widget"], function(WidgetManager) {
this.children={};
this.$el.on("remove", function(){
that.$window.remove();
that.$backdrop.remove();
});
this.$window = $('<div />')
.addClass('modal widget-modal')
this.$backdrop = $('<div />')
.appendTo($('#notebook-container'))
.addClass('modal-dialog')
.css('position', 'absolute')
.css('left', '0px')
.css('top', '0px');
this.$window = $('<div />')
.appendTo(this.$backdrop)
.addClass('modal-content widget-modal')
.mousedown(function(){
that.bring_to_front();
});
@ -127,7 +133,7 @@ define(["widgets/js/widget"], function(WidgetManager) {
that.$window
.draggable('destroy')
.resizable('destroy')
.removeClass('widget-modal modal')
.removeClass('widget-modal modal-content')
.addClass('docked-widget-modal')
.detach()
.insertBefore(that.$show_button);
@ -140,9 +146,9 @@ define(["widgets/js/widget"], function(WidgetManager) {
that.$window
.removeClass('docked-widget-modal')
.addClass('widget-modal modal')
.addClass('widget-modal modal-content')
.detach()
.appendTo($('#notebook-container'))
.appendTo(that.$backdrop)
.draggable({handle: '.popover-title', snap: '#notebook, .modal', snapMode: 'both'})
.resizable()
.children('.ui-resizable-handle').show();
@ -223,12 +229,15 @@ define(["widgets/js/widget"], function(WidgetManager) {
var $widget_modals = $(".widget-modal");
var max_zindex = 0;
$widget_modals.each(function (index, el){
max_zindex = Math.max(max_zindex, parseInt($(el).css('z-index')));
var zindex = parseInt($(el).css('z-index'));
if (!isNaN(zindex)) {
max_zindex = Math.max(max_zindex, zindex);
}
});
// Start z-index of widget modals at 2000
max_zindex = Math.max(max_zindex, 2000);
$widget_modals.each(function (index, el){
$el = $(el);
if (max_zindex == parseInt($el.css('z-index'))) {

@ -164,7 +164,7 @@ define(["widgets/js/widget"], function(WidgetManager){
.addClass('widget-hlabel')
.hide();
this.$textbox = $('<input type="text" />')
.addClass('input')
.addClass('form-control')
.addClass('widget-numeric-text')
.appendTo(this.$el);
this.$el_to_style = this.$textbox; // Set default element to style
@ -274,7 +274,7 @@ define(["widgets/js/widget"], function(WidgetManager){
.appendTo(this.$el);
this.$el_to_style = this.$progress; // Set default element to style
this.$bar = $('<div />')
.addClass('bar')
.addClass('progress-bar')
.css('width', '50%')
.appendTo(this.$progress);
this.update(); // Set defaults.

@ -31,12 +31,12 @@ define(["widgets/js/widget"], function(WidgetManager){
.appendTo(this.$el);
this.$el_to_style = this.$buttongroup; // Set default element to style
this.$droplabel = $('<button />')
.addClass('btn')
.addClass('btn btn-default')
.addClass('widget-combo-btn')
.html("&nbsp;")
.appendTo(this.$buttongroup);
this.$dropbutton = $('<button />')
.addClass('btn')
.addClass('btn btn-default')
.addClass('dropdown-toggle')
.addClass('widget-combo-carrot-btn')
.attr('data-toggle', 'dropdown')
@ -246,7 +246,7 @@ define(["widgets/js/widget"], function(WidgetManager){
if (!$item_element.length) {
$item_element = $('<button/>')
.attr('type', 'button')
.addClass('btn')
.addClass('btn btn-default')
.html(item_html)
.appendTo(that.$buttongroup)
.attr('data-value', item)
@ -310,7 +310,7 @@ define(["widgets/js/widget"], function(WidgetManager){
.addClass('widget-hlabel')
.hide();
this.$listbox = $('<select />')
.addClass('widget-listbox')
.addClass('widget-listbox form-control')
.attr('size', 6)
.appendTo(this.$el);
this.$el_to_style = this.$listbox; // Set default element to style

@ -19,10 +19,10 @@ define(["widgets/js/widget"], function(WidgetManager){
var AccordionView = IPython.DOMWidgetView.extend({
render: function(){
// Called when view is rendered.
var guid = 'accordion' + IPython.utils.uuid();
var guid = 'panel-group' + IPython.utils.uuid();
this.$el
.attr('id', guid)
.addClass('accordion');
.addClass('panel-group');
this.containers = [];
this.model_containers = {};
this.update_children([], this.model.get('_children'));
@ -60,7 +60,7 @@ define(["widgets/js/widget"], function(WidgetManager){
var accordian = that.containers[page_index];
if (accordian !== undefined) {
accordian
.find('.accordion-heading')
.find('.panel-heading')
.find('.accordion-toggle')
.text(title);
}
@ -71,9 +71,9 @@ define(["widgets/js/widget"], function(WidgetManager){
// Only update the selection if the selection wasn't triggered
// by the front-end. It must be triggered by the back-end.
if (options === undefined || options.updated_view != this) {
this.containers[old_index].find('.accordion-body').collapse('hide');
this.containers[old_index].find('.panel-collapse').collapse('hide');
if (0 <= new_index && new_index < this.containers.length) {
this.containers[new_index].find('.accordion-body').collapse('show');
this.containers[new_index].find('.panel-collapse').collapse('show');
}
}
},
@ -101,10 +101,10 @@ define(["widgets/js/widget"], function(WidgetManager){
var index = this.containers.length;
var uuid = IPython.utils.uuid();
var accordion_group = $('<div />')
.addClass('accordion-group')
.addClass('panel panel-default')
.appendTo(this.$el);
var accordion_heading = $('<div />')
.addClass('accordion-heading')
.addClass('panel-heading')
.appendTo(accordion_group);
var that = this;
var accordion_toggle = $('<a />')
@ -122,10 +122,10 @@ define(["widgets/js/widget"], function(WidgetManager){
.text('Page ' + index)
.appendTo(accordion_heading);
var accordion_body = $('<div />', {id: uuid})
.addClass('accordion-body collapse')
.addClass('panel-collapse collapse')
.appendTo(accordion_group);
var accordion_inner = $('<div />')
.addClass('accordion-inner')
.addClass('panel-body')
.appendTo(accordion_body);
var container_index = this.containers.push(accordion_group) - 1;
accordion_group.container_index = container_index;

@ -65,7 +65,7 @@ define(["widgets/js/widget"], function(WidgetManager){
.hide();
this.$textbox = $('<textarea />')
.attr('rows', 5)
.addClass('widget-text')
.addClass('widget-text form-control')
.appendTo(this.$el);
this.$el_to_style = this.$textbox; // Set default element to style
this.update(); // Set defaults.
@ -150,7 +150,7 @@ define(["widgets/js/widget"], function(WidgetManager){
.hide();
this.$textbox = $('<input type="text" />')
.addClass('input')
.addClass('widget-text')
.addClass('widget-text form-control')
.appendTo(this.$el);
this.$el_to_style = this.$textbox; // Set default element to style
this.update(); // Set defaults.

@ -35,7 +35,7 @@
/* Horizontal Label */
min-width : 10ex;
padding-right : 8px;
padding-top : 3px;
padding-top : 5px;
text-align : right;
vertical-align : text-top;
}
@ -49,7 +49,7 @@
.widget-hreadout {
padding-left : 8px;
padding-top : 3px;
padding-top : 5px;
text-align : left;
vertical-align : text-top;
}
@ -97,10 +97,10 @@
overflow : visible;
/* Default size of the slider */
width : 348px;
width : 350px;
height : 5px;
max-height : 5px;
margin-top : 11px;
margin-top : 13px;
margin-bottom: 10px;
/* Style the slider track */
@ -171,7 +171,7 @@
.widget-listbox {
/* Listbox */
width : 364px;
width : 350px;
margin-bottom : 0px;
}
@ -183,9 +183,10 @@
.widget-progress {
/* Progress Bar */
width : 363px;
margin-top: 6px;
width : 350px;
.bar {
.progress-bar {
/* Disable progress bar animation */
-webkit-transition : none;
-moz-transition : none;
@ -197,7 +198,7 @@
.widget-combo-btn {
/* ComboBox Main Button */
min-width : 138px; /* + 26px drop arrow btn = 164px */
min-width : 125px;
}
.widget-box {
@ -228,6 +229,10 @@
/* Single line horizontal widgets */
.widget-hbox();
height : 30px;
input[type="checkbox"] {
margin-top: 9px;
}
}
.widget-vbox {
@ -268,6 +273,10 @@
.border-box-sizing();
padding-top: 4px;
label {
margin-top: 0px;
}
}
.docked-widget-modal {

@ -15,7 +15,7 @@
{% if login_available %}
<div class="row">
<div class="navbar span8 offset2">
<div class="navbar col-md-8 col-md-offset2">
<div class="navbar-inner">
<div class="container">
<div class="center-nav">

@ -46,225 +46,225 @@ class="notebook_app"
<div id="menubar-container" class="container">
<div id="menubar">
<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 id="file_menu" class="dropdown-menu">
<li id="new_notebook"
title="Make a new notebook (Opens a new window)">
<a href="#">New</a></li>
<li id="open_notebook"
title="Opens a new window with the Dashboard view">
<a href="#">Open...</a></li>
<!-- <hr/> -->
<li class="divider"></li>
<li id="copy_notebook"
title="Open a copy of this notebook's contents and start a new kernel">
<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 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>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
<div id="menus" class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">File</a>
<ul id="file_menu" class="dropdown-menu">
<li id="new_notebook"
title="Make a new notebook (Opens a new window)">
<a href="#">New</a></li>
<li id="open_notebook"
title="Opens a new window with the Dashboard view">
<a href="#">Open...</a></li>
<!-- <hr/> -->
<li class="divider"></li>
<li id="copy_notebook"
title="Open a copy of this notebook's contents and start a new kernel">
<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 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>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</li>
<li class="divider"></li>
<li id="print_preview"><a href="#">Print Preview</a></li>
<li class="dropdown-submenu"><a href="#">Download as</a>
<ul class="dropdown-menu">
<li id="download_ipynb"><a href="#">IPython Notebook (.ipynb)</a></li>
<li id="download_py"><a href="#">Python (.py)</a></li>
<li id="download_html"><a href="#">HTML (.html)</a></li>
<li id="download_rst"><a href="#">reST (.rst)</a></li>
<li id="download_pdf"><a href="#">PDF (.pdf)</a></li>
</ul>
</li>
<li class="divider"></li>
<li id="trust_notebook"
title="Trust the output of this notebook">
<a href="#" >Trust Notebook</a></li>
<li class="divider"></li>
<li id="kill_and_exit"
title="Shutdown this notebook's kernel, and close this window">
<a href="#" >Close and halt</a></li>
</ul>
</li>
<li class="divider"></li>
<li id="print_preview"><a href="#">Print Preview</a></li>
<li class="dropdown-submenu"><a href="#">Download as</a>
<ul class="dropdown-menu">
<li id="download_ipynb"><a href="#">IPython Notebook (.ipynb)</a></li>
<li id="download_py"><a href="#">Python (.py)</a></li>
<li id="download_html"><a href="#">HTML (.html)</a></li>
<li id="download_rst"><a href="#">reST (.rst)</a></li>
<li id="download_pdf"><a href="#">PDF (.pdf)</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Edit</a>
<ul id="edit_menu" 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="disabled"><a href="#">Paste Cell Above</a></li>
<li id="paste_cell_below" class="disabled"><a href="#">Paste Cell Below</a></li>
<li id="paste_cell_replace" class="disabled"><a href="#">Paste Cell &amp; Replace</a></li>
<li id="delete_cell"><a href="#">Delete Cell</a></li>
<li id="undelete_cell" class="disabled"><a href="#">Undo Delete Cell</a></li>
<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>
<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>
<li class="divider"></li>
<li id="edit_nb_metadata"><a href="#">Edit Notebook Metadata</a></li>
</ul>
</li>
<li class="divider"></li>
<li id="trust_notebook"
title="Trust the output of this notebook">
<a href="#" >Trust Notebook</a></li>
<li class="divider"></li>
<li id="kill_and_exit"
title="Shutdown this notebook's kernel, and close this window">
<a href="#" >Close and halt</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Edit</a>
<ul id="edit_menu" 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="disabled"><a href="#">Paste Cell Above</a></li>
<li id="paste_cell_below" class="disabled"><a href="#">Paste Cell Below</a></li>
<li id="paste_cell_replace" class="disabled"><a href="#">Paste Cell &amp; Replace</a></li>
<li id="delete_cell"><a href="#">Delete Cell</a></li>
<li id="undelete_cell" class="disabled"><a href="#">Undo Delete Cell</a></li>
<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>
<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>
<li class="divider"></li>
<li id="edit_nb_metadata"><a href="#">Edit Notebook Metadata</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">View</a>
<ul id="view_menu" class="dropdown-menu">
<li id="toggle_header"
title="Show/Hide the IPython Notebook logo and notebook title (above menu bar)">
<a href="#">Toggle Header</a></li>
<li id="toggle_toolbar"
title="Show/Hide the action icons (below menu bar)">
<a href="#">Toggle Toolbar</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Insert</a>
<ul id="insert_menu" class="dropdown-menu">
<li id="insert_cell_above"
title="Insert an empty Code cell above the currently active cell">
<a href="#">Insert Cell Above</a></li>
<li id="insert_cell_below"
title="Insert an empty Code cell below the currently active cell">
<a href="#">Insert Cell Below</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Cell</a>
<ul id="cell_menu" class="dropdown-menu">
<li id="run_cell" title="Run this cell, and move cursor to the next one">
<a href="#">Run</a></li>
<li id="run_cell_select_below" title="Run this cell, select below">
<a href="#">Run and Select Below</a></li>
<li id="run_cell_insert_below" title="Run this cell, insert below">
<a href="#">Run and Insert Below</a></li>
<li id="run_all_cells" title="Run all cells in the notebook">
<a href="#">Run All</a></li>
<li id="run_all_cells_above" title="Run all cells above (but not including) this cell">
<a href="#">Run All Above</a></li>
<li id="run_all_cells_below" title="Run this cell and all cells below it">
<a href="#">Run All Below</a></li>
<li class="divider"></li>
<li id="change_cell_type" class="dropdown-submenu"
title="All cells in the notebook have a cell type. By default, new cells are created as 'Code' cells">
<a href="#">Cell Type</a>
<ul class="dropdown-menu">
<li id="to_code"
title="Contents will be sent to the kernel for execution, and output will display in the footer of cell">
<a href="#">Code</a></li>
<li id="to_markdown"
title="Contents will be rendered as HTML and serve as explanatory text">
<a href="#">Markdown</a></li>
<li id="to_raw"
title="Contents will pass through nbconvert unmodified">
<a href="#">Raw NBConvert</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>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">View</a>
<ul id="view_menu" class="dropdown-menu">
<li id="toggle_header"
title="Show/Hide the IPython Notebook logo and notebook title (above menu bar)">
<a href="#">Toggle Header</a></li>
<li id="toggle_toolbar"
title="Show/Hide the action icons (below menu bar)">
<a href="#">Toggle Toolbar</a></li>
</ul>
</li>
<li class="divider"></li>
<li id="current_outputs" class="dropdown-submenu"><a href="#">Current Output</a>
<ul class="dropdown-menu">
<li id="toggle_current_output"
title="Hide/Show the output of the current cell">
<a href="#">Toggle</a>
</li>
<li id="toggle_current_output_scroll"
title="Scroll the output of the current cell">
<a href="#">Toggle Scrolling</a>
</li>
<li id="clear_current_output"
title="Clear the output of the current cell">
<a href="#">Clear</a>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Insert</a>
<ul id="insert_menu" class="dropdown-menu">
<li id="insert_cell_above"
title="Insert an empty Code cell above the currently active cell">
<a href="#">Insert Cell Above</a></li>
<li id="insert_cell_below"
title="Insert an empty Code cell below the currently active cell">
<a href="#">Insert Cell Below</a></li>
</ul>
</li>
<li id="all_outputs" class="dropdown-submenu"><a href="#">All Output</a>
<ul class="dropdown-menu">
<li id="toggle_all_output"
title="Hide/Show the output of all cells">
<a href="#">Toggle</a>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Cell</a>
<ul id="cell_menu" class="dropdown-menu">
<li id="run_cell" title="Run this cell, and move cursor to the next one">
<a href="#">Run</a></li>
<li id="run_cell_select_below" title="Run this cell, select below">
<a href="#">Run and Select Below</a></li>
<li id="run_cell_insert_below" title="Run this cell, insert below">
<a href="#">Run and Insert Below</a></li>
<li id="run_all_cells" title="Run all cells in the notebook">
<a href="#">Run All</a></li>
<li id="run_all_cells_above" title="Run all cells above (but not including) this cell">
<a href="#">Run All Above</a></li>
<li id="run_all_cells_below" title="Run this cell and all cells below it">
<a href="#">Run All Below</a></li>
<li class="divider"></li>
<li id="change_cell_type" class="dropdown-submenu"
title="All cells in the notebook have a cell type. By default, new cells are created as 'Code' cells">
<a href="#">Cell Type</a>
<ul class="dropdown-menu">
<li id="to_code"
title="Contents will be sent to the kernel for execution, and output will display in the footer of cell">
<a href="#">Code</a></li>
<li id="to_markdown"
title="Contents will be rendered as HTML and serve as explanatory text">
<a href="#">Markdown</a></li>
<li id="to_raw"
title="Contents will pass through nbconvert unmodified">
<a href="#">Raw NBConvert</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 id="toggle_all_output_scroll"
title="Scroll the output of all cells">
<a href="#">Toggle Scrolling</a>
<li class="divider"></li>
<li id="current_outputs" class="dropdown-submenu"><a href="#">Current Output</a>
<ul class="dropdown-menu">
<li id="toggle_current_output"
title="Hide/Show the output of the current cell">
<a href="#">Toggle</a>
</li>
<li id="toggle_current_output_scroll"
title="Scroll the output of the current cell">
<a href="#">Toggle Scrolling</a>
</li>
<li id="clear_current_output"
title="Clear the output of the current cell">
<a href="#">Clear</a>
</li>
</ul>
</li>
<li id="clear_all_output"
title="Clear the output of all cells">
<a href="#">Clear</a>
<li id="all_outputs" class="dropdown-submenu"><a href="#">All Output</a>
<ul class="dropdown-menu">
<li id="toggle_all_output"
title="Hide/Show the output of all cells">
<a href="#">Toggle</a>
</li>
<li id="toggle_all_output_scroll"
title="Scroll the output of all cells">
<a href="#">Toggle Scrolling</a>
</li>
<li id="clear_all_output"
title="Clear the output of all cells">
<a href="#">Clear</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Kernel</a>
<ul id="kernel_menu" class="dropdown-menu">
<li id="int_kernel"
title="Send KeyboardInterrupt (CTRL-C) to the Kernel">
<a href="#">Interrupt</a></li>
<li id="restart_kernel"
title="Restart the Kernel">
<a href="#">Restart</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Help</a>
<ul id="help_menu" class="dropdown-menu">
<li id="notebook_tour" title="A quick tour of the notebook user interface"><a href="#">User Interface Tour</a></li>
<li id="keyboard_shortcuts" title="Opens a tooltip with all keyboard shortcuts"><a href="#">Keyboard Shortcuts</a></li>
<li class="divider"></li>
{% set
sections = (
(
("http://ipython.org/documentation.html","IPython Help",True),
("http://nbviewer.ipython.org/github/ipython/ipython/tree/2.x/examples/Index.ipynb", "Notebook Help", True),
),(
("http://docs.python.org","Python",True),
("http://help.github.com/articles/github-flavored-markdown","Markdown",True),
("http://docs.scipy.org/doc/numpy/reference/","NumPy",True),
("http://docs.scipy.org/doc/scipy/reference/","SciPy",True),
("http://matplotlib.org/contents.html","Matplotlib",True),
("http://docs.sympy.org/latest/index.html","SymPy",True),
("http://pandas.pydata.org/pandas-docs/stable/","pandas", True)
)
)
%}
{% for helplinks in sections %}
{% for link in helplinks %}
<li><a href="{{link[0]}}" {{'target="_blank" title="Opens in a new window"' if link[2]}}>
{{'<i class="icon-external-link menu-icon pull-right"></i>' if link[2]}}
{{link[1]}}
</a></li>
{% endfor %}
{% if not loop.last %}
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Kernel</a>
<ul id="kernel_menu" class="dropdown-menu">
<li id="int_kernel"
title="Send KeyboardInterrupt (CTRL-C) to the Kernel">
<a href="#">Interrupt</a></li>
<li id="restart_kernel"
title="Restart the Kernel">
<a href="#">Restart</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Help</a>
<ul id="help_menu" class="dropdown-menu">
<li id="notebook_tour" title="A quick tour of the notebook user interface"><a href="#">User Interface Tour</a></li>
<li id="keyboard_shortcuts" title="Opens a tooltip with all keyboard shortcuts"><a href="#">Keyboard Shortcuts</a></li>
<li class="divider"></li>
{% endif %}
{% endfor %}
{% set
sections = (
(
("http://ipython.org/documentation.html","IPython Help",True),
("http://nbviewer.ipython.org/github/ipython/ipython/tree/2.x/examples/Index.ipynb", "Notebook Help", True),
),(
("http://docs.python.org","Python",True),
("http://help.github.com/articles/github-flavored-markdown","Markdown",True),
("http://docs.scipy.org/doc/numpy/reference/","NumPy",True),
("http://docs.scipy.org/doc/scipy/reference/","SciPy",True),
("http://matplotlib.org/contents.html","Matplotlib",True),
("http://docs.sympy.org/latest/index.html","SymPy",True),
("http://pandas.pydata.org/pandas-docs/stable/","pandas", True)
)
)
%}
{% for helplinks in sections %}
{% for link in helplinks %}
<li><a href="{{link[0]}}" {{'target="_blank" title="Opens in a new window"' if link[2]}}>
{{'<i class="icon-external-link menu-icon pull-right"></i>' if link[2]}}
{{link[1]}}
</a></li>
{% endfor %}
{% if not loop.last %}
<li class="divider"></li>
{% endif %}
{% endfor %}
</li>
</ul>
</li>
</ul>
</li>
</ul>
<div id="kernel_indicator" class="indicator_area pull-right">
<i id="kernel_indicator_icon"></i>
</div>
<div id="modal_indicator" class="indicator_area pull-right">
<i id="modal_indicator_icon"></i>
</div>
<div id="notification_area"></div>
<ul class="nav navbar-nav navbar-right">
<div id="kernel_indicator">
<i id="kernel_indicator_icon"></i>
</div>
<div id="modal_indicator">
<i id="modal_indicator_icon"></i>
</div>
<div id="notification_area"></div>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="maintoolbar" class="navbar">
<div class="toolbar-inner navbar-inner navbar-nobg">

@ -50,25 +50,23 @@
</noscript>
<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_url}}tree/{{notebook_path}}" alt='dashboard'><img src='{{static_url("base/images/ipynblogo.png") }}' alt='IPython Notebook'/></a></div>
<div class="container">
<div id="ipython_notebook" class="nav navbar-brand pull-left"><a href="{{base_url}}tree/{{notebook_path}}" alt='dashboard'><img src='{{static_url("base/images/ipynblogo.png") }}' alt='IPython Notebook'/></a></div>
{% block login_widget %}
{% block login_widget %}
<span id="login_widget">
{% if logged_in %}
<button id="logout">Logout</button>
{% elif login_available and not logged_in %}
<button id="login">Login</button>
{% endif %}
</span>
<span id="login_widget">
{% if logged_in %}
<button id="logout">Logout</button>
{% elif login_available and not logged_in %}
<button id="login">Login</button>
{% endif %}
</span>
{% endblock %}
{% endblock %}
{% block header %}
{% endblock %}
</div>
{% block header %}
{% endblock %}
</div>
</div>
@ -79,7 +77,7 @@
<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("components/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>

@ -30,8 +30,8 @@ data-notebook-path="{{notebook_path}}"
<div class="tab-content">
<div id="notebooks" class="tab-pane active">
<div id="notebook_toolbar" class="row-fluid">
<div class="span8">
<div id="notebook_toolbar" class="row">
<div class="col-md-8 no-padding">
<form id='alternate_upload' class='alternate_upload' >
<span id="notebook_list_info" style="position:absolute" >
To import a notebook, drag the file onto the listing below or <strong>click here</strong>.
@ -39,21 +39,21 @@ data-notebook-path="{{notebook_path}}"
<input type="file" name="datafile" class="fileinput" multiple='multiple'>
</form>
</div>
<div class="span4 clearfix">
<div class="col-md-4 no-padding tree-buttons">
<span id="notebook_buttons" class="pull-right">
<button id="new_notebook" title="Create new notebook" class="btn btn-small">New Notebook</button>
<button id="refresh_notebook_list" title="Refresh notebook list" class="btn btn-small"><i class="icon-refresh"></i></button>
<button id="new_notebook" title="Create new notebook" class="btn btn-default btn-xs">New Notebook</button>
<button id="refresh_notebook_list" title="Refresh notebook list" class="btn btn-default btn-xs"><i class="icon-refresh"></i></button>
</span>
</div>
</div>
<div id="notebook_list">
<div id="notebook_list_header" class="row-fluid list_header">
<div id="notebook_list_header" class="row list_header">
<div id="project_name">
<ul class="breadcrumb">
<li><a href="{{breadcrumbs[0][0]}}"><i class="icon-home"></i></a><span>/</span></li>
<li><a href="{{breadcrumbs[0][0]}}"><i class="icon-home"></i></a></li>
{% for crumb in breadcrumbs[1:] %}
<li><a href="{{crumb[0]}}">{{crumb[1]}}</a> <span>/</span></li>
<li><a href="{{crumb[0]}}">{{crumb[1]}}</a></li>
{% endfor %}
</ul>
</div>
@ -63,19 +63,19 @@ data-notebook-path="{{notebook_path}}"
<div id="running" class="tab-pane">
<div id="running_toolbar" class="row-fluid">
<div class="span8">
<div id="running_toolbar" class="row">
<div class="col-md-8 no-padding">
<span id="running_list_info">Currently running IPython notebooks</span>
</div>
<div class="span4" class="clearfix">
<div class="col-md-4 no-padding tree-buttons">
<span id="running_buttons" class="pull-right">
<button id="refresh_running_list" title="Refresh running list" class="btn btn-small"><i class="icon-refresh"></i></button>
<button id="refresh_running_list" title="Refresh running list" class="btn btn-default btn-xs"><i class="icon-refresh"></i></button>
</span>
</div>
</div>
<div id="running_list">
<div id="running_list_header" class="row-fluid list_header">
<div id="running_list_header" class="row list_header">
<div> There are no notebooks running. </div>
</div>
</div>
@ -83,23 +83,23 @@ data-notebook-path="{{notebook_path}}"
<div id="clusters" class="tab-pane">
<div id="cluster_toolbar" class="row-fluid">
<div class="span8">
<div id="cluster_toolbar" class="row">
<div class="col-md-8 no-padding">
<span id="cluster_list_info">IPython parallel computing clusters</span>
</div>
<div class="span4" class="clearfix">
<div class="col-md-4 no-padding tree-buttons">
<span id="cluster_buttons" class="pull-right">
<button id="refresh_cluster_list" title="Refresh cluster list" class="btn btn-small"><i class="icon-refresh"></i></button>
<button id="refresh_cluster_list" title="Refresh cluster list" class="btn btn-default btn-xs"><i class="icon-refresh"></i></button>
</span>
</div>
</div>
<div id="cluster_list">
<div id="cluster_list_header" class="row-fluid list_header">
<div class="profile_col span4">profile</div>
<div class="status_col span3">status</div>
<div class="engines_col span3" title="Enter the number of engines to start or empty for default"># of engines</div>
<div class="action_col span2">action</div>
<div id="cluster_list_header" class="row list_header">
<div class="profile_col col-md-4">profile</div>
<div class="status_col col-md-3">status</div>
<div class="engines_col col-md-3" title="Enter the number of engines to start or empty for default"># of engines</div>
<div class="action_col col-md-2">action</div>
</div>
</div>
</div>

@ -62,7 +62,7 @@ casper.notebook_test(function () {
});
// Test accordion view
var multicontainer2_query = '.widget-area .widget-subarea .accordion';
var multicontainer2_query = '.widget-area .widget-subarea .panel-group';
var multicontainer2_index = this.append_cell(
'multicontainer = widgets.AccordionWidget()\n' +
'page1 = widgets.TextWidget()\n' +
@ -86,16 +86,16 @@ casper.notebook_test(function () {
'Widget accordion exists.');
this.test.assert(this.cell_element_exists(index, multicontainer2_query +
' .accordion-group:nth-child(1) .accordion-body'),
' .panel:nth-child(1) .panel-collapse'),
'First accordion page exists.');
// JQuery selector is 1 based
this.test.assert(this.cell_element_function(index, multicontainer2_query +
' .accordion-group:nth-child(3) .accordion-heading .accordion-toggle',
' .panel.panel-default:nth-child(3) .panel-heading .accordion-toggle',
'html')=='good', 'Accordion page title set (before display).');
// JQuery selector is 1 based
this.click(multicontainer2_query + ' .accordion-group:nth-child(2) .accordion-heading .accordion-toggle');
this.click(multicontainer2_query + ' .panel:nth-child(2) .panel-heading .accordion-toggle');
});
this.wait_for_idle();
@ -106,7 +106,7 @@ casper.notebook_test(function () {
'selected_index property updated with tab change.');
var is_collapsed = this.evaluate(function(s){
return $(s + ' div.accordion-group:nth-child(2) a').hasClass('collapsed'); // 1 based
return $(s + ' div.panel:nth-child(2) a').hasClass('collapsed'); // 1 based
}, {s: multicontainer2_query});
this.test.assertEquals(is_collapsed, false, 'Was tab actually opened?');
});

Loading…
Cancel
Save