Improve display of allocation page

InvenTree/build/templates/build/allocate.html

@@ -24,6 +24,21 @@ InvenTree | Allocate Parts
 </div>
 <hr>
 
+<div class='row'>
+    <div class='col-sm-6'>
+        <h4>Part</h4>
+    </div>
+    <div class='col-sm-2'>
+        <h4>Available</h4>
+    </div>
+    <div class='col-sm-2'>
+        <h4>Required</h4>
+    </div>
+    <div class='col-sm-2'>
+        <h4>Allocated</h4>
+    </div>
+</div>
+
 {% for bom_item in bom_items.all %}
 {% include "build/allocation_item.html" with item=bom_item build=build collapse_id=bom_item.id %}
 {% endfor %}

InvenTree/build/templates/build/allocation_item.html

@@ -3,6 +3,8 @@
 {% load static %}
 {% load inventree_extras %}
 
+{% block collapse_panel_setup %}class='panel part-allocation' id='allocation-panel-{{ item.sub_part.id }}'{% endblock %}
+
 {% block collapse_title %}
     <div class='hover-icon media-left' style='float: left;'>
         <img class='hover-img-thumb' src="{% if item.sub_part.image %}{{ item.sub_part.image.url }}{% endif %}">
@@ -15,21 +17,16 @@
 {% endblock %}
 
 {% block collapse_heading %}
-<div class='col-sm-1' align='right'>
+    <div class='col-sm-2'>
-        Required:
+        <b>{{ item.sub_part.available_stock }}</b>
-    </div>
-    <div class='col-sm-1'>   
-        <b>{% multiply build.quantity item.quantity %}</b>
-    </div>
-    <div class='col-sm-1' align='right'>
-        Allocated:
-    </div>
-    <div class='col-sm-1' id='allocation-panel-{{ item.sub_part.id }}'>
-        <b><span id='allocation-total-{{ item.sub_part.id }}'>{% part_allocation_count build item.sub_part %}</span></b>
     </div>
     <div class='col-sm-2'>
+        <b>{% multiply build.quantity item.quantity %}</b>
+    </div>
+    <div class='col-sm-2'>
+        <b><span id='allocation-total-{{ item.sub_part.id }}'>{% part_allocation_count build item.sub_part %}</span></b>
         <div class='btn-group' style='float: right;'>
-            <button class='btn btn-success btn-sm' id='new-item-{{ item.sub_part.id }}' url="{% url 'build-item-create' %}?part={{ item.sub_part.id }}&build={{ build.id }}">Allocate Parts</button>
+            <button class='btn btn-success btn-sm' title='Allocate stock for {{ item.sub_part}}' id='new-item-{{ item.sub_part.id }}' url="{% url 'build-item-create' %}?part={{ item.sub_part.id }}&build={{ build.id }}">Allocate</button>
         </div>
 </div>
 {% endblock %}

InvenTree/static/css/inventree.css

@@ -14,7 +14,6 @@
     color: #ffcc00;
 }
 
-
 /* CSS overrides for treeview */
 .expand-icon {
     font-size: 11px;
@@ -277,11 +276,12 @@
 }
 
 .panel-group .panel {
-    border-radius: 8px;
+    border-radius: 2px;
 }
 
 .panel-heading {
     padding: 5px 10px;
+    background-color: #fafafa;
 }
 
 .float-right {
@@ -299,16 +299,22 @@
     transform: translate(-50%, -50%);
 }
 
+.part-allocation {
+    padding: 3px 10px;
+    border: 1px solid #ccc;
+    border-radius: 2px;
+}
+
 .part-allocation-pass {
-    background: #dbf0db;
+    background-color: #dbf0db;
 }
 
 .part-allocation-underallocated {
-    background: #f0dbdb;
+    background-color: #f0dbdb;
 }
 
 .part-allocation-overallocated {
-    background: #ccf5ff;
+    background-color: #ccf5ff;
 }
 
 .glyphicon-refresh-animate {

InvenTree/templates/collapse.html

@@ -2,7 +2,7 @@
 {% endblock %}
 <div class='panel-group'>
     <div class='panel panel-default'>
-        <div class='panel panel-heading'>
+        <div {% block collapse_panel_setup %}class='panel panel-heading'{% endblock %}>
             <div class='row'>
                 <div class='col-sm-6'>
                     <div class='panel-title'>