From b963f11e1ac22a3913a8c4c32b1d6694cfffa510 2014-02-04 23:53:27
From: Brian E. Granger <ellisonbg@gmail.com>
Date: 2014-02-04 23:53:27
Subject: [PATCH] Cleaning up the dashboard CSS and fixing small visual problems.
---
diff --git a/IPython/html/static/style/ipython.min.css b/IPython/html/static/style/ipython.min.css
index 04b518f..f715120 100644
--- a/IPython/html/static/style/ipython.min.css
+++ b/IPython/html/static/style/ipython.min.css
@@ -34,20 +34,20 @@ ul#tabs a{padding-top:4px;padding-bottom:4px}
.list_toolbar{padding:4px 0 4px 0}
.list_toolbar [class*="span"]{min-height:26px}
.list_header{font-weight:bold}
-.list_container{margin-top:4px;margin-bottom:16px;border:1px solid #ababab;border-radius:4px}
+.list_container{margin-top:4px;margin-bottom:20px;border:1px solid #ababab;border-radius:4px}
.list_container>div{border-bottom:1px solid #ababab}.list_container>div:hover .list-item{background-color:#f00}
.list_container>div:last-child{border:none}
.list_item:hover .list_item{background-color:#ddd}
.list_item a{text-decoration:none}
-.list_header>div,.list_item>div{padding-top:4px;padding-bottom:4px;padding-left:7px;padding-right:7px}
-.item_name{line-height:22px}
+.list_header>div,.list_item>div{padding-top:4px;padding-bottom:4px;padding-left:7px;padding-right:7px;height:22px;line-height:22px}
+.item_name{line-height:22px;height:26px}
.item_icon{font-size:14px;color:#5e5e5e;margin-right:7px}
.item_buttons{line-height:1em}
.toolbar_info{height:26px;line-height:26px}
-input.nbname_input{padding-top:3px;padding-bottom:3px;height:14px;line-height:14px;margin:0}
+input.nbname_input,input.engine_num_input{padding-top:3px;padding-bottom:3px;height:14px;line-height:14px;margin:0}
+input.engine_num_input{width:60px}
.highlight_text{color:#00f}
#project_name>.breadcrumb{padding:0;margin-bottom:0;background-color:transparent;font-weight:bold}
-input.engine_num_input{height:20px;margin-bottom:2px;padding-top:0;padding-bottom:0;width:60px}
.ansibold{font-weight:bold}
.ansiblack{color:#000}
.ansired{color:#8b0000}
diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css
index c17e62f..f55c0b4 100644
--- a/IPython/html/static/style/style.min.css
+++ b/IPython/html/static/style/style.min.css
@@ -1311,20 +1311,20 @@ ul#tabs a{padding-top:4px;padding-bottom:4px}
.list_toolbar{padding:4px 0 4px 0}
.list_toolbar [class*="span"]{min-height:26px}
.list_header{font-weight:bold}
-.list_container{margin-top:4px;margin-bottom:16px;border:1px solid #ababab;border-radius:4px}
+.list_container{margin-top:4px;margin-bottom:20px;border:1px solid #ababab;border-radius:4px}
.list_container>div{border-bottom:1px solid #ababab}.list_container>div:hover .list-item{background-color:#f00}
.list_container>div:last-child{border:none}
.list_item:hover .list_item{background-color:#ddd}
.list_item a{text-decoration:none}
-.list_header>div,.list_item>div{padding-top:4px;padding-bottom:4px;padding-left:7px;padding-right:7px}
-.item_name{line-height:22px}
+.list_header>div,.list_item>div{padding-top:4px;padding-bottom:4px;padding-left:7px;padding-right:7px;height:22px;line-height:22px}
+.item_name{line-height:22px;height:26px}
.item_icon{font-size:14px;color:#5e5e5e;margin-right:7px}
.item_buttons{line-height:1em}
.toolbar_info{height:26px;line-height:26px}
-input.nbname_input{padding-top:3px;padding-bottom:3px;height:14px;line-height:14px;margin:0}
+input.nbname_input,input.engine_num_input{padding-top:3px;padding-bottom:3px;height:14px;line-height:14px;margin:0}
+input.engine_num_input{width:60px}
.highlight_text{color:#00f}
#project_name>.breadcrumb{padding:0;margin-bottom:0;background-color:transparent;font-weight:bold}
-input.engine_num_input{height:20px;margin-bottom:2px;padding-top:0;padding-bottom:0;width:60px}
.ansibold{font-weight:bold}
.ansiblack{color:#000}
.ansired{color:#8b0000}
diff --git a/IPython/html/static/tree/js/notebooklist.js b/IPython/html/static/tree/js/notebooklist.js
index e208fe0..9ba4790 100644
--- a/IPython/html/static/tree/js/notebooklist.js
+++ b/IPython/html/static/tree/js/notebooklist.js
@@ -167,31 +167,31 @@ var IPython = (function (IPython) {
if (param !== undefined && param.msg) {
message = param.msg;
}
+ var item = null;
var len = data.length;
this.clear_list();
if (len === 0) {
- $(this.new_notebook_item(0))
- .append(
- $('<div style="margin:auto;text-align:center;color:grey"/>')
- .text(message)
- );
+ var item = this.new_notebook_item(0);
+ var span12 = item.children().first();
+ span12.empty();
+ span12.append($('<div style="margin:auto;text-align:center;color:grey"/>').text(message))
}
var path = this.notebookPath();
var offset = 0;
if (path !== '') {
- var item = this.new_notebook_item(0);
+ item = this.new_notebook_item(0);
this.add_dir(path, '..', item);
offset = 1;
}
for (var i=0; i<len; i++) {
if (data[i].type === 'directory') {
var name = data[i].name;
- var item = this.new_notebook_item(i+offset);
+ item = this.new_notebook_item(i+offset);
this.add_dir(path, name, item);
} else {
var name = data[i].name;
var nbname = utils.splitext(name)[0];
- var item = this.new_notebook_item(i+offset);
+ item = this.new_notebook_item(i+offset);
this.add_link(path, nbname, item);
name = utils.url_path_join(path, name);
if(this.sessions[name] === undefined){
diff --git a/IPython/html/static/tree/less/tree.less b/IPython/html/static/tree/less/tree.less
index 9a11037..074da65 100644
--- a/IPython/html/static/tree/less/tree.less
+++ b/IPython/html/static/tree/less/tree.less
@@ -7,7 +7,10 @@
@dashboard_tb_pad: 4px;
@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_mini_height: 22px;
ul#tabs {
margin-bottom: @dashboard_tb_pad;
@@ -23,7 +26,7 @@ ul#tabs a {
}
.list_toolbar [class*="span"] {
- min-height: 26px;
+ min-height: @btn_small_height;
}
.list_header {
@@ -32,7 +35,7 @@ ul#tabs a {
.list_container {
margin-top: @dashboard_tb_pad;
- margin-bottom: 16px;
+ margin-bottom: 5*@dashboard_tb_pad;
border: 1px solid @border_color;
border-radius: 4px;
}
@@ -60,10 +63,13 @@ ul#tabs a {
padding-bottom: @dashboard_tb_pad;
padding-left: @dashboard_lr_pad;
padding-right: @dashboard_lr_pad;
+ height: @btn_mini_height;
+ line-height: @btn_mini_height;
}
.item_name {
- line-height: 22px;
+ line-height: @btn_mini_height;
+ height: @btn_small_height;
}
.item_icon {
@@ -77,11 +83,12 @@ ul#tabs a {
}
.toolbar_info {
- height: 26px;
- line-height: 26px;
+ height: @btn_small_height;
+ line-height: @btn_small_height;
}
-input.nbname_input {
+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;
@@ -89,11 +96,14 @@ input.nbname_input {
margin: 0px;
}
+input.engine_num_input {
+ width: 60px;
+}
+
.highlight_text {
color: blue;
}
-
#project_name > .breadcrumb {
padding: 0px;
margin-bottom: 0px;
@@ -102,10 +112,4 @@ input.nbname_input {
}
-input.engine_num_input {
- height: 20px;
- margin-bottom:2px;
- padding-top:0;
- padding-bottom:0;
- width: 60px;
-}
+