Small fixes for the plan edit

* Update the role names for Swift and Cinder
* Fix the column width of the index page
* Use bootstrap's dropdown menu

Change-Id: I55aee6aba5faabd30e70422f31003abd4ab2e132

tuskar_boxes/templates/tuskar_boxes/overview/index.html

@@ -10,7 +10,7 @@
 
 {% block main %}
 <div class="row">
-  <div class="col-xs-3">
+  <div class="col-xs-4">
     {% if stack %}
       {% if stack.is_deleting or stack.is_deploying %}
         {% include "infrastructure/overview/deployment_progress.html" %}
@@ -25,7 +25,7 @@
       {% include "infrastructure/overview/deployment_plan.html" %}
     {% endif %}
   </div>
-  <div class="col-xs-6">
+  <div class="col-xs-8">
     {% if stack %}
       {% include "infrastructure/overview/role_nodes_status.html" %}
     {% else %}

tuskar_boxes/templates/tuskar_boxes/overview/role_nodes_edit.html

@@ -38,16 +38,19 @@
                 </div>
             {% endspaceless %}{% endfor %}
             </div>
-            <div class="boxes-drop">
-                <div><i class="fa fa-plus"></i><br>
-                  {% trans "enroll a deployment role" %}</div>
-                <div class="boxes-roles-menu btn-group-vertical">
-                  {% for role in roles %}
-                  <div class="btn" data-role="{{ role.name }}">
-                    {{ role.name|title }}
-                  </div>
-                  {% endfor %}
-                </div>
+            <div class="btn-group boxes-drop-group">
+              <div class="boxes-drop" data-toggle="dropdown">
+                  <div><i class="fa fa-plus"></i><br>
+                    {% trans "enroll a deployment role" %}</div>
+              </div>
+              <ul class="boxes-roles-menu dropdown-menu" role="menu">
+                {% for role in roles %}
+                <li>
+                  <a href="#" data-role="{{ role.name }}"
+                    >{{ role.name|title }}</a>
+                </li>
+                {% endfor %}
+              </ul>
             </div>
         </div>
         <div class="col-xs-7 boxes-nodes">
@@ -89,7 +92,7 @@
         var role = 0;
         $flavor.find('div.boxes-nodes div.boxes-node').each(function () {
           var $this = $(this);
-          $this.removeClass('boxes-role-controller boxes-role-compute boxes-role-block-storage boxes-role-object-storage');
+          $this.removeClass('boxes-role-controller boxes-role-compute boxes-role-cinder-storage boxes-role-swift-storage');
           while (count >= roles[role_names[role]]) {
             role += 1;
             count = 0;
@@ -116,7 +119,7 @@
       hoverClass: 'boxes-drop-hover',
       tolerance: 'touch',
       drop: function (ev, ui) {
-        ui.draggable.appendTo($(this).prev('.boxes-drop-roles'));
+        ui.draggable.appendTo($(this).parent().prev('.boxes-drop-roles'));
         var $count = ui.draggable.find('input.number-picker');
         if (+$count.val() < 1) { $count.val(1); }
         ui.draggable.find('input.boxes-flavor'
@@ -141,12 +144,9 @@
   update_boxes();
   $('input.number-picker').change(update_boxes);
 
-  $('.boxes-roles-menu').hide().parent().click(function () {
-      $(this).find('.boxes-roles-menu').toggle('fold', 100);
-  });
-  $('.boxes-roles-menu .btn').click(function () {
+  $('.boxes-roles-menu li a').click(function () {
       var name = $(this).data('role');
-      var $drop = $(this).closest('.boxes-drop').prev('.boxes-drop-roles');
+      var $drop = $(this).closest('.boxes-drop-group').prev('.boxes-drop-roles');
       var $role = $('.boxes-role[data-name="' + name + '"]');
       var $count = $role.find('input.number-picker');
       var $flavor = $role.find('input.boxes-flavor');
@@ -181,7 +181,6 @@
 }
 .boxes-available-roles {
     border-radius: 4px;
-    background: #eee;
     border: 1px dashed #666;
     min-height: 42px;
     min-width: 120px;
@@ -189,6 +188,7 @@
     padding: 4px 0 0 4px;
 }
 .boxes-role {
+    opacity: 0.75;
     padding: 6px;
     border: 1px solid;
     cursor: move;
@@ -203,6 +203,9 @@
     text-align: center;
     width: 120px;
     margin: 0 4px 4px 0;
+    border: 1px solid #999;
+    background: #eee;
+    color: #666;
 }
 .boxes-available-roles .boxes-role .form-control {
     display: none;
@@ -217,28 +220,38 @@
     border-color: #73d216;
     color: #4e9a06;
 }
-.boxes-role-object-storage {
+.boxes-role-swift-storage {
     background-color: #729fcf;
     border-color: #3465a4;
     color: #204a87;
 }
-.boxes-role-block-storage {
+.boxes-role-cinder-storage {
     background-color: #ad7fa8;
     border-color: #75507b;
     color: #5c3566;
 }
+.boxes-role .number_picker {
+  border-color: inherit;
+}
+.boxes-role .number_picker,
+.boxes-role .number_picker a {
+  color: inherit;
+}
+.boxes-drop-group {
+  width: 100%;
+}
 .boxes-drop {
     position: relative;
     padding: 6px;
     border: 1px dashed;
     text-align: center;
     border-radius: 4px;
-    background-color: #eee;
     border-color: #666;
     color: #444;
+    cursor: pointer;
 }
 .boxes-drop-active {
-    background-color: #ccc;
+    background-color: #eee;
     border-style: solid;
 }
 .boxes-drop-hover {