From dd126fce6db481e74a4540d16cbffd16a8a36cf1 Mon Sep 17 00:00:00 2001
From: "Brian E. Granger" <ellisonbg@gmail.com>
Date: Sun, 2 Feb 2014 22:50:08 -0800
Subject: [PATCH] Tighten spacing of dashboard.

---
 IPython/html/static/style/ipython.min.css     | 22 ++++---
 IPython/html/static/style/style.min.css       | 22 ++++---
 IPython/html/static/tree/js/clusterlist.js    | 16 ++---
 .../html/static/tree/less/altuploadform.less  |  1 +
 IPython/html/static/tree/less/tree.less       | 61 ++++++++++---------
 IPython/html/templates/tree.html              | 53 +++++++++-------
 6 files changed, 96 insertions(+), 79 deletions(-)

diff --git a/IPython/html/static/style/ipython.min.css b/IPython/html/static/style/ipython.min.css
index db3c53e81..04b518f44 100644
--- a/IPython/html/static/style/ipython.min.css
+++ b/IPython/html/static/style/ipython.min.css
@@ -28,21 +28,23 @@ div.traceback-wrapper{text-align:left;max-width:800px;margin:auto}
 .center-nav{display:inline-block;margin-bottom:-4px}
 .alternate_upload{background-color:none;display:inline}
 .alternate_upload.form{padding:0;margin:0}
-.alternate_upload input.fileinput{background-color:#f00;position:relative;opacity:0;z-index:2;width:295px;margin-left:163px;cursor:pointer}
-.list_toolbar{padding:5px;height:25px;line-height:25px}
-.toolbar_info{float:left}
-.toolbar_buttons{float:right}
+.alternate_upload input.fileinput{background-color:#f00;position:relative;opacity:0;z-index:2;width:295px;margin-left:163px;cursor:pointer;height:26px}
+ul#tabs{margin-bottom:4px}
+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:16px;margin-bottom:16px;border:1px solid #ababab;border-radius:4px}
+.list_container{margin-top:4px;margin-bottom:16px;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_item .span12{padding:3px}
-.item_name{line-height:24px}
-.item_icon{font-size:14px;color:#5e5e5e;margin-left:5px;margin-right:8px}
-.list_container>div>span,.list_container>div>div{padding:8px}
-input.nbname_input{height:15px;margin:0}
+.list_header>div,.list_item>div{padding-top:4px;padding-bottom:4px;padding-left:7px;padding-right:7px}
+.item_name{line-height:22px}
+.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}
 .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}
diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css
index 407ac7ed4..c17e62feb 100644
--- a/IPython/html/static/style/style.min.css
+++ b/IPython/html/static/style/style.min.css
@@ -1305,21 +1305,23 @@ span#login_widget{float:right}
 .center-nav{display:inline-block;margin-bottom:-4px}
 .alternate_upload{background-color:none;display:inline}
 .alternate_upload.form{padding:0;margin:0}
-.alternate_upload input.fileinput{background-color:#f00;position:relative;opacity:0;z-index:2;width:295px;margin-left:163px;cursor:pointer}
-.list_toolbar{padding:5px;height:25px;line-height:25px}
-.toolbar_info{float:left}
-.toolbar_buttons{float:right}
+.alternate_upload input.fileinput{background-color:#f00;position:relative;opacity:0;z-index:2;width:295px;margin-left:163px;cursor:pointer;height:26px}
+ul#tabs{margin-bottom:4px}
+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:16px;margin-bottom:16px;border:1px solid #ababab;border-radius:4px}
+.list_container{margin-top:4px;margin-bottom:16px;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_item .span12{padding:3px}
-.item_name{line-height:24px}
-.item_icon{font-size:14px;color:#5e5e5e;margin-left:5px;margin-right:8px}
-.list_container>div>span,.list_container>div>div{padding:8px}
-input.nbname_input{height:15px;margin:0}
+.list_header>div,.list_item>div{padding-top:4px;padding-bottom:4px;padding-left:7px;padding-right:7px}
+.item_name{line-height:22px}
+.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}
 .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}
diff --git a/IPython/html/static/tree/js/clusterlist.js b/IPython/html/static/tree/js/clusterlist.js
index 2ece25d8e..9d607d50b 100644
--- a/IPython/html/static/tree/js/clusterlist.js
+++ b/IPython/html/static/tree/js/clusterlist.js
@@ -100,16 +100,16 @@ var IPython = (function (IPython) {
 
     ClusterItem.prototype.state_stopped = function () {
         var that = this;
-        var profile_col = $('<span/>').addClass('profile_col span4').text(this.data.profile);
-        var status_col = $('<span/>').addClass('status_col span3').text('stopped');
-        var engines_col = $('<span/>').addClass('engine_col span3');
+        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 input = $('<input/>').attr('type','number')
                 .attr('min',1)
                 .attr('size',3)
                 .addClass('engine_num_input');
         engines_col.append(input);
         var start_button = $('<button/>').addClass("btn btn-mini").text("Start");
-        var action_col = $('<span/>').addClass('action_col span2').append(
+        var action_col = $('<div/>').addClass('action_col span2').append(
             $("<span/>").addClass("item_buttons btn-group").append(
                 start_button
             )
@@ -151,11 +151,11 @@ var IPython = (function (IPython) {
 
     ClusterItem.prototype.state_running = function () {
         var that = this;
-        var profile_col = $('<span/>').addClass('profile_col span4').text(this.data.profile);
-        var status_col = $('<span/>').addClass('status_col span3').text('running');
-        var engines_col = $('<span/>').addClass('engines_col span3').text(this.data.n);
+        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 = $('<span/>').addClass('action_col span2').append(
+        var action_col = $('<div/>').addClass('action_col span2').append(
             $("<span/>").addClass("item_buttons btn-group").append(
                 stop_button
             )
diff --git a/IPython/html/static/tree/less/altuploadform.less b/IPython/html/static/tree/less/altuploadform.less
index 247dc7ed0..70e865d57 100644
--- a/IPython/html/static/tree/less/altuploadform.less
+++ b/IPython/html/static/tree/less/altuploadform.less
@@ -22,4 +22,5 @@
     width: 295px;
     margin-left:163px;
     cursor: pointer;
+    height: 26px;
 }
diff --git a/IPython/html/static/tree/less/tree.less b/IPython/html/static/tree/less/tree.less
index 29b89937d..9a110379d 100644
--- a/IPython/html/static/tree/less/tree.less
+++ b/IPython/html/static/tree/less/tree.less
@@ -5,21 +5,25 @@
  * Author: IPython Development Team
  */
 
-#tabs {
+@dashboard_tb_pad: 4px;
+@dashboard_lr_pad: 7px;
+
+
+ul#tabs {
+    margin-bottom: @dashboard_tb_pad;
 }
 
-.list_toolbar {
-    padding: 5px;
-    height: 25px;
-    line-height: 25px;
+ul#tabs a {
+    padding-top: @dashboard_tb_pad;
+    padding-bottom: @dashboard_tb_pad;
 }
 
-.toolbar_info {
-    float: left;
+.list_toolbar {
+    padding: @dashboard_tb_pad 0 @dashboard_tb_pad 0;
 }
 
-.toolbar_buttons {
-    float: right;
+.list_toolbar [class*="span"] {
+    min-height: 26px;
 }
 
 .list_header {
@@ -27,7 +31,7 @@
 }
 
 .list_container {
-  margin-top: 16px;
+  margin-top: @dashboard_tb_pad;
   margin-bottom: 16px;
   border: 1px solid @border_color;
   border-radius: 4px;
@@ -49,38 +53,39 @@
     background-color: #ddd;
   };
   a {text-decoration: none;}
-  .span12 {padding: 3px;}
+}
+
+.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;
 }
 
 .item_name {
-    line-height: 24px;
+    line-height: 22px;
 }
 
 .item_icon {
-    font-size: 14px;
+    font-size: 14px; 
     color: darken(@border_color, 30%);
-    margin-left: 5px;
-    margin-right: 8px;
+    margin-right: @dashboard_lr_pad;
 }
 
-.list_container > div > span, .list_container > div > div {
-  padding: 8px;
+.item_buttons {
+    line-height: 1em;
 }
 
-.profile_col {
-}
-
-.status_col {
-}
-
-.engines_col {
-}
-
-.action_col {
+.toolbar_info {
+    height: 26px;
+    line-height: 26px;
 }
 
 input.nbname_input {
-    height: 15px;
+    padding-top: 3px;
+    padding-bottom: 3px;
+    height: 14px;
+    line-height: 14px;
     margin: 0px;
 }
 
diff --git a/IPython/html/templates/tree.html b/IPython/html/templates/tree.html
index 37d8cea38..652ed13c3 100644
--- a/IPython/html/templates/tree.html
+++ b/IPython/html/templates/tree.html
@@ -22,25 +22,29 @@ data-base-kernel-url="{{base_kernel_url}}"
 
 <div id="ipython-main-app" class="container">
 
-<div id="tabs" class="tabbable">
-    <ul class="nav nav-tabs" id="tabs">
+<div id="tab_content" class="tabbable">
+    <ul id="tabs" class="nav nav-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 class="tab-content">
     <div id="notebooks" class="tab-pane active">
-        <div id="notebook_toolbar">
-            <form id='alternate_upload'  class='alternate_upload' >
-                <span id="drag_info" style="position:absolute" >
-                    To import a notebook, drag the file onto the listing below or <strong>click here</strong>.
-                    </span>
-                <input type="file" name="datafile" class="fileinput" multiple='multiple'>
-            </form>
-            <span id="notebook_buttons">
-                <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 id="notebook_toolbar" class="row-fluid">
+            <div class="span8">
+                <form id='alternate_upload'  class='alternate_upload' >
+                    <span id="drag_info" style="position:absolute" >
+                        To import a notebook, drag the file onto the listing below or <strong>click here</strong>.
+                        </span>
+                    <input type="file" name="datafile" class="fileinput" multiple='multiple'>
+                </form>
+            </div>
+            <div class="span4 clearfix">
+                <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>
+                </span>
+            </div>
         </div>
 
         <div id="notebook_list">
@@ -59,20 +63,23 @@ data-base-kernel-url="{{base_kernel_url}}"
     
     <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" class="btn btn-small">Refresh</button>
-            </span>
+        <div id="cluster_toolbar" class="row-fluid">
+            <div class="span8">
+                <span id="cluster_list_info">IPython parallel computing clusters</span>
+            </div>
+            <div class="span4" class="clearfix">
+                <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>
+                </span>
+            </div>
         </div>
 
         <div id="cluster_list">
             <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 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>
         </div>
     </div>