Improve styling of the deployment form

Change-Id: I59d0a6e60054dbd2d8c3981bec62f1e8b7179a47

tuskar_ui/infrastructure/overview/templates/overview/_deployment_status.html

@@ -71,15 +71,15 @@
       {% trans "Undeploy" %}
     </a>
 {% else %}
-  <h4>
-      <span class="text-success" style="font-size: x-large; vertical-align:middle">
-          <i class="glyphicon glyphicon-ok-circle"></i>
-      </span>
-      {% trans "Ready to get deployed" %}
-  </h4>
-  <a href="{% url 'horizon:infrastructure:overview:deploy_confirmation' %}"
-   class="btn btn-danger ajax-modal">
-    <i class="glyphicon glyphicon-cloud-upload"></i>
-    {% trans "Deploy" %}
-  </a>
+  <div class="text-success deployment-icon">
+      <i class="glyphicon glyphicon-ok-circle"></i>
+  </div>
+  <div class="deployment-box">
+    <h4>{% trans "Ready to get deployed" %}</h4>
+    <a href="{% url 'horizon:infrastructure:overview:deploy_confirmation' %}"
+     class="btn btn-danger ajax-modal btn-default">
+      <i class="glyphicon glyphicon-cloud-upload"></i>
+      {% trans "Deploy" %}
+    </a>
+  </div>
 {% endif %}

tuskar_ui/infrastructure/overview/templates/overview/_role_nodes.html

@@ -6,23 +6,20 @@
 <form method="POST" action="." class="deployment-roles-form">
 {% csrf_token %}
 {% include 'horizon/common/_form_errors.html' with form=form %}
-{% for field in form.visible_fields %}
+{% for role in roles %}
     <div class="form-group well well-sm clearfix{% if field.errors %} error{% endif %} {{ field.css_classes }}">
       <div class="col-sm-2">
-        {{ field|add_bootstrap_class }}
+        {{ role.field|add_bootstrap_class }}
       </div>
       <div class="col-sm-10">
-        <label class="control-label" for="{{ field.id_for_label }}">
-          {{ field.label }}
-        </label>
-        {% for error in field.errors %}
+        <a
+          href="{% url "horizon:infrastructure:roles:detail" role_id=role.id %}"
+          class="deployment-roles-label"
+        >{{ role.name }}</a>
+        {% for error in role.field.errors %}
         <span class="help-block"><span class="text-danger">
           {{ error }}
         </span></span>
-        {% empty %}
-          {% if field.help_text %}
-            <span class="help-block">{{ field.help_text }}</span>
-          {% endif %}
         {% endfor %}
       </div>
     </div>

tuskar_ui/infrastructure/overview/views.py

@@ -25,17 +25,19 @@ from tuskar_ui.infrastructure.overview import forms
 INDEX_URL = 'horizon:infrastructure:overview:index'
 
 
-def _get_role_data(plan, stack, role):
+def _get_role_data(plan, stack, role, field):
     """Gathers data about a single deployment role from the related Overcloud
     and OvercloudRole objects, and presents it in the form convenient for use
     from the template.
 
     """
     data = {
+        'id': role.id,
         'role': role,
         'name': role.name,
         'planned_node_count': plan.parameter_value(
-            role.node_count_parameter_name, 0)
+            role.node_count_parameter_name, 0),
+        'field': field,
     }
 
     if stack:
@@ -101,8 +103,9 @@ class IndexView(django.views.generic.FormView, StackMixin):
         context['plan'] = plan
         context['stack'] = stack
 
-        roles = [_get_role_data(plan, stack, role)
-                 for role in plan.role_list]
+        roles = [_get_role_data(plan, stack, role, field)
+                 for role, field in zip(plan.role_list,
+                                        context['form'].visible_fields())]
         context['roles'] = roles
 
         if stack:

tuskar_ui/infrastructure/roles/templates/roles/index.html

@@ -7,8 +7,8 @@
 {% endblock page_header %}
 
 {% block main %}
-<div class="row-fluid">
-  <div class="span12">
+<div class="row">
+  <div class="col-xs-12">
     <div class="no-table-title"> {% comment %}This will likely move to the tables Meta in the future{% endcomment %}
       {{ table.render }}
     </div>

tuskar_ui/infrastructure/static/infrastructure/scss/_individual_pages.scss

@@ -136,3 +136,24 @@ $link-color: #428bca;
     }
   }
 }
+
+// Plan overview
+
+.deployment-icon {
+    font-size: 32px;
+    vertical-align: top;
+    float: left;
+    margin: 0 4px 0 0;
+    background: #fff;
+}
+
+.deployment-box {
+    border-left: 4px solid #eee;
+    margin-left: 12px;
+}
+
+.deployment-roles-label {
+    font-weight: bold;
+    display: block;
+    margin: 14px 0 0 0;
+}