use row-fluid for cluster list

IPython/frontend/html/notebook/static/style/style.min.css

@@ -1405,22 +1405,19 @@ ul.icons-ul{list-style-type:none;text-indent:-0.7142857142857143em;margin-left:2
 .list_toolbar{padding:5px;height:25px;line-height:25px;}
 .toolbar_info{float:left;}
 .toolbar_buttons{float:right;}
-.list_header>a{font-size:100%;}
-.tree_list{margin-top:16px;margin-bottom:16px;border:1px solid #eeeeee;border-radius:4px;}
-.tree_list>div{border-bottom:1px solid #eeeeee;}.tree_list>div:hover .list-item{background-color:red;}
-.tree_list>div:last-child{border:none;}
+.list_header{font-weight:bold;}
+.list_container{margin-top:16px;margin-bottom:16px;border:1px solid #eeeeee;border-radius:4px;}
+.list_container>div{border-bottom:1px solid #eeeeee;}.list_container>div:hover .list-item{background-color:red;}
+.list_container>div:last-child{border:none;}
 .list_item:hover .list_item{background-color:#ddd;}
-.tree_list>div>span,.tree_list>div>div{padding:8px;}
-.cluster_list_item>a{color:#000000 !important;}
+.list_container>div>span,.list_container>div>div{padding:8px;}
+.cluster_list_item>a{}
 .notebook_item a{text-decoration:none;}
-.status_col{float:right;width:325px;}
-.engines_col{float:right;width:325px;}
-.action_col{float:right;width:64px;text-align:right;}
-.item_buttons{}
+.action_col{}
 input.nbname_input{height:15px;}
 .highlight_text{color:blue;}
 #project_name>.breadcrumb{padding:0px;margin-bottom:0px;background-color:transparent;font-weight:bold;}
-input.engine_num_input{height:20px;margin-bottom:2px;padding-top:0;padding-bottom:0;width:90px;}
+input.engine_num_input{height:20px;margin-bottom:2px;padding-top:0;padding-bottom:0;width:60px;}
 .ansiblack{color:black;}
 .ansired{color:darkred;}
 .ansigreen{color:darkgreen;}

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

@@ -25,6 +25,7 @@ var IPython = (function (IPython) {
     };
 
     ClusterList.prototype.style = function () {
+        $('#cluster_list').addClass('list_container');
         $('#cluster_toolbar').addClass('list_toolbar');
         $('#cluster_list_info').addClass('toolbar_info');
         $('#cluster_buttons').addClass('toolbar_buttons');
@@ -53,14 +54,14 @@ var IPython = (function (IPython) {
 
 
     ClusterList.prototype.clear_list = function () {
-        this.element.children('.cluster_list_item').remove();
+        this.element.children('.list_item').remove();
     }
 
     ClusterList.prototype.load_list_success = function (data, status, xhr) {
         this.clear_list();
         var len = data.length;
         for (var i=0; i<len; i++) {
-            var element = $('<li/>');
+            var element = $('<div/>');
             var item = new ClusterItem(element);
             item.update_state(data[i]);
             element.data('item', item);
@@ -82,8 +83,7 @@ var IPython = (function (IPython) {
 
 
     ClusterItem.prototype.style = function () {
-        this.element.addClass('cluster_list_item').addClass("disabled");
-        this.element.append($("<a/>"));
+        this.element.addClass('list_item').addClass("row-fluid");
     }
 
     ClusterItem.prototype.update_state = function (data) {
@@ -99,26 +99,25 @@ var IPython = (function (IPython) {
 
     ClusterItem.prototype.state_stopped = function () {
         var that = this;
-        var a = this.element.find("a");
-        var profile_col = $('<span/>').addClass('profile_col').text(this.data.profile);
-        var status_col = $('<span/>').addClass('status_col').html('stopped');
-        var engines_col = $('<span/>').addClass('engines_col');
+        var profile_col = $('<span/>').addClass('profile_col span4').text(this.data.profile);
+        var status_col = $('<span/>').addClass('status_col span3').html('stopped');
+        var engines_col = $('<span/>').addClass('engine_col span3');
         var input = $('<input/>').attr('type','number')
                 .attr('min',1)
                 .attr('size',3)
                 .addClass('engine_num_input');
         engines_col.append(input);
         var start_button = $('<button/>').addClass("btn btn-mini").text("Start");
-        var action_col = $('<span/>').addClass('action_col').append(
-            $("<span/>").addClass("item_buttons btn-group pull-right").append(
+        var action_col = $('<span/>').addClass('action_col span2').append(
+            $("<span/>").addClass("item_buttons btn-group").append(
                 start_button
             )
         );
-        a.empty()
+        this.element.empty()
             .append(profile_col)
-            .append(action_col)
+            .append(status_col)
             .append(engines_col)
-            .append(status_col);
+            .append(action_col);
         start_button.click(function (e) {
             var n = that.element.find('.engine_num_input').val();
             if (!/^\d+$/.test(n) && n.length>0) {
@@ -146,21 +145,20 @@ var IPython = (function (IPython) {
 
     ClusterItem.prototype.state_running = function () {
         var that = this;
-        var a = this.element.find("a");
-        var profile_col = $('<span/>').addClass('profile_col').text(this.data.profile);
-        var status_col = $('<span/>').addClass('status_col').html('running');
-        var engines_col = $('<span/>').addClass('engines_col').html(this.data.n);
+        var profile_col = $('<span/>').addClass('profile_col span4').text(this.data.profile);
+        var status_col = $('<span/>').addClass('status_col span3').html('running');
+        var engines_col = $('<span/>').addClass('engines_col span3').html(this.data.n);
         var stop_button = $('<button/>').addClass("btn btn-mini").text("Stop");
-        var action_col = $('<span/>').addClass('action_col').append(
-            $("<span/>").addClass("item_buttons btn-group pull-right").append(
+        var action_col = $('<span/>').addClass('action_col span2').append(
+            $("<span/>").addClass("item_buttons btn-group").append(
                 stop_button
             )
         );
-        a.empty()
+        this.element.empty()
             .append(profile_col)
-            .append(action_col)
+            .append(status_col)
             .append(engines_col)
-            .append(status_col);
+            .append(action_col);
         stop_button.click(function (e) {
             var settings = {
                 cache : false,

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

@@ -29,7 +29,7 @@ var IPython = (function (IPython) {
         $('#drag_info').addClass('toolbar_info');
         $('#notebook_buttons').addClass('toolbar_buttons');
         $('#notebook_list_header').addClass('list_header');
-        this.element.addClass("tree_list");
+        this.element.addClass("list_container");
     };
 
 

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

@@ -26,25 +26,25 @@
     float: right;
 }
 
-.list_header > a {
-  font-size: 100%;
+.list_header {
+    font-weight: bold;
 }
 
-.tree_list {
+.list_container {
   margin-top: 16px;
   margin-bottom: 16px;
   border: 1px solid @borderColor;
   border-radius: 4px;
 }
 
-.tree_list > div {
+.list_container > div {
   border-bottom: 1px solid @borderColor;
   &:hover .list-item{
     background-color: red;
   };
 }
 
-.tree_list > div:last-child {
+.list_container > div:last-child {
   border: none;
 }
 
@@ -55,13 +55,13 @@
   };
 }
 
-.tree_list > div > span, .tree_list > div > div {
+.list_container > div > span, .list_container > div > div {
   padding: 8px;
 }
 
 
 .cluster_list_item > a {
-    color: @textColor !important;
+/*    color: @textColor !important;*/
 }
 
 .notebook_item a {
@@ -72,23 +72,13 @@
 }
 
 .status_col {
-    float: right;
-    width: 325px;
 }
 
 .engines_col {
-    float: right;
-    width: 325px;
 }
 
 .action_col {
-    float: right;
-    width: 64px;
-    text-align: right;
-}
-
-.item_buttons {
-/*    float: right;*/
+/*    text-align: right;*/
 }
 
 input.nbname_input {
@@ -113,5 +103,5 @@ input.engine_num_input {
     margin-bottom:2px;
     padding-top:0;
     padding-bottom:0;
-    width: 90px;
+    width: 60px;
 }

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

@@ -46,7 +46,7 @@ data-read-only={{read_only}}
         {% endif %}
 
         <div id="notebook_list">
-          <div id="notebook_list_header" class="row-fluid">
+          <div id="notebook_list_header" class="row-fluid list_header">
               <div id="project_name">
                 <ul class="breadcrumb">
                     {% for component in project_component %}
@@ -68,17 +68,14 @@ data-read-only={{read_only}}
             </span>
         </div>
 
-        <ul id="cluster_list" class="nav nav-tabs nav-stacked">
-            <li id="cluster_header" class="disabled list_header">
-              <a class="nav-header">
-              <!-- <div class="nav-header"> -->
-                <span class="profile_col">profile</span>
-                <span class="action_col">action</span>
-                <span class="engines_col" title="Enter the number of engines to start or empty for default"># of engines</span>
-                <span class="status_col">status</span>
-              </a>
-            </li>
-        </ul>
+        <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>
+        </div>
     </div>
 </div>