From d351d9eb7b88ff0acc59482d9ce531620ba1364c Mon Sep 17 00:00:00 2001
From: FreneticScribbler <aj@aronajones.com>
Date: Mon, 6 Apr 2020 02:00:14 +0100
Subject: [PATCH] Item table fixes

---
 RIGS/templates/item_modal.html | 38 ++++++++----------------------
 RIGS/templates/item_row.html   | 29 ++++++++++++-----------
 RIGS/templates/item_table.html | 43 +++++++++-------------------------
 3 files changed, 36 insertions(+), 74 deletions(-)

diff --git a/RIGS/templates/item_modal.html b/RIGS/templates/item_modal.html
index d4b89368..0b7fb6a2 100644
--- a/RIGS/templates/item_modal.html
+++ b/RIGS/templates/item_modal.html
@@ -2,55 +2,41 @@
     <div class="modal-dialog modal-lg">
         <div class="modal-content">
             <div class="modal-header">
-                <div class="row">
-                    <div class="col-sm-8">
-                        <h4>{{ object.name|default:"New Event" }}</h4>
-                    </div>
-                    <div class="col-sm-4 text-right">
-                        <button type="button" class="close" data-dismiss="modal"><span
-                                aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
-                    </div>
-                </div>
+                 <h4>{{ object.name|default:"New Event" }}</h4>
             </div>
-            <form class="form-horizontal" id="item-form">
+            <form id="item-form">
                 <div class="modal-body">
-                    <div class="form-group">
+                    <div class="form-group form-row">
                         <label for="item_name" class="col-sm-2 control-label">Item Name</label>
-
                         <div class="col-sm-10">
                             <input type="text" placeholder="Item Name" class="form-control" required maxlength="255"
                                    id="item_name"/>
                         </div>
                     </div>
-
-                    <div class="form-group">
+                    <div class="form-group form-row">
                         <label for="item_description" class="col-sm-2 control-label">Description</label>
-
                         <div class="col-sm-10">
                             <textarea type="text" placeholder="Description" class="form-control"
                                       id="item_description" rows="8"></textarea>
                         </div>
                     </div>
-
-                    <div class="row">
+                    <div class="form-row">
                         <div class="col-sm-6">
-                            <div class="form-group">
+                            <div class="form-group form-row">
                                 <label for="item_quantity" class="col-sm-4 control-label">Quantity</label>
-
                                 <div class="col-sm-8">
                                     <input type="number" placeholder="Quantity" class="form-control" required
                                            min="1" id="item_quantity"/>
                                 </div>
                             </div>
                         </div>
-
                         <div class="col-sm-6">
-                            <div class="form-group">
+                            <div class="form-group form-row">
                                 <label for="item_cost" class="col-sm-4 control-label">Cost</label>
 
                                 <div class="col-sm-8">
                                     <div class="input-group">
-                                        <div class="input-group-addon">£</div>
+                                        <div class="input-group-prepend"><span class="input-group-text">£</span></div>
                                         <input type="number" placeholder="Cost" class="form-control" required
                                                min="-99999999.99" max="99999999.99" step="0.01"
                                                id="item_cost"/>
@@ -60,12 +46,8 @@
                         </div>
                     </div>
                 </div>
-                <div class="modal-barter">
-                    <div class="col-sm-12">
-                        <div class="pull-right">
-                            <input type="submit" class="btn btn-primary">
-                        </div>
-                    </div>
+                <div class="modal-footer">
+                    <input type="submit" class="btn btn-primary">
                 </div>
             </form>
         </div>
diff --git a/RIGS/templates/item_row.html b/RIGS/templates/item_row.html
index a20eb5f3..2a88ed1e 100644
--- a/RIGS/templates/item_row.html
+++ b/RIGS/templates/item_row.html
@@ -1,11 +1,10 @@
-
 <tr id="item-{{item.pk}}" data-pk="{{item.pk}}" class="item_row">
-	<td>
+	<th scope="row">
 		<span class="name">{{ item.name }}</span>
         <div class="item-description">
             <em class="description">{{item.description|linebreaksbr}}</em>
         </div>
-	</td>
+	</th>
     {% if perms.RIGS.view_event %}
 	<td>£&nbsp;<span class="cost">{{item.cost|floatformat:2}}</span></td>
     {% endif %}
@@ -14,16 +13,18 @@
 	<td>£&nbsp;<span class="sub-total" data-subtotal="{{item.total_cost}}">{{item.total_cost|floatformat:2}}</span></td>
     {% endif %}
 	{% if edit %}
-	<td class="vert-align text-right">
-		<button type="button" class="item-edit btn btn-xs btn-default"
-				data-pk="{{item.pk}}"
-				data-toggle="modal" data-target="#itemModal">
-			<span class="fas fa-edit"></span>
-		</button>
-		<button type="button" class="item-delete btn btn-xs btn-danger"
-				data-pk="{{item.pk}}">
-			<span class="fas fa-remove"></span>
-		</button>
-	</td>
+    <td class="vert-align text-right">
+        <div class="btn-group" role="group" aria-label="Action buttons">
+	        <button type="button" class="item-edit btn btn-xs btn-warning"
+			        data-pk="{{item.pk}}"
+			        data-toggle="modal" data-target="#itemModal">
+		        <span class="fas fa-edit"></span>
+	        </button>
+	        <button type="button" class="item-delete btn btn-xs btn-danger"
+			        data-pk="{{item.pk}}">
+		        <span class="fas fa-times-circle"></span>
+	        </button>
+        </div>
+    </td>
 	{% endif %}
 </tr>
diff --git a/RIGS/templates/item_table.html b/RIGS/templates/item_table.html
index b6c12bc9..4b8eef53 100644
--- a/RIGS/templates/item_table.html
+++ b/RIGS/templates/item_table.html
@@ -2,22 +2,22 @@
 	<table class="table table-hover" id="item-table" {% if edit %}data-orderurl="{#% url 'item_order' %#}"{% endif %}>
 		<thead>
 			<tr>
-				<td>Item</td>
+				<th scope="col">Item</th>
                 {% if perms.RIGS.view_event %}
-				<td>Price</td>
+				<th scope="col">Price</th>
                 {% endif %}
-				<td>Quantity</td>
+				<th scope="col">Quantity</th>
                 {% if perms.RIGS.view_event %}
-				<td>Sub-total</td>
+				<th scope="col">Sub-total</th>
                 {% endif %}
 				{% if edit %}
-				<td class="text-right">
-					<button type="button" class="btn btn-default btn-xs item-add"
+				<th scope="col" class="text-right align-self-start">
+					<button type="button" class="btn btn-success btn-xs item-add"
 						data-toggle="modal"
 						data-target="#itemModal">
-						<span class="fas fa-plus"></span>
+						<i class="fas fa-plus"></i> Add Item
 					</button>
-				</td>
+				</th>
 				{% endif %}
 			</tr>
 		</thead>
@@ -27,7 +27,7 @@
 			{% endfor %}
 		</tbody>
         {% if perms.RIGS.view_event %}
-		<tbart>
+		<tfoot>
 			<tr>
 				<td rowspan="3" colspan="2"></td>
 				<td>Total (ex. VAT)</td>
@@ -47,31 +47,10 @@
 				<td>Total</td>
 				<td colspan="2">£ <span id="total">{{object.total|default:0|floatformat:2}}</span></td>
 			</tr>
-		</tbart>
+		</tfoot>
         {% endif %}
 	</table>
 </div>
 <table class="hidden invisible">
-    <tr id="new-item-row" class="item_row">
-        <td>
-            <span class="name"></span>
-                <div class="item-description">
-                    <em class="description"></em>
-                </div>
-        </td>
-        <td>£&nbsp;<span class="cost"></span></td>
-        <td class="quantity"></td>
-        <td>£&nbsp;<span class="sub-total"></span></td>
-        {% if edit %}
-        <td class="vert-align text-right">
-            <button type="button" class="item-edit btn btn-xs btn-default"
-                    data-toggle="modal" data-target="#itemModal">
-				<i class="fas fa-edit"></i>
-            </button>
-            <button type="button" class="item-delete btn btn-xs btn-danger">
-                <i class="fas fa-times-circle"></i>
-            </button>
-        </td>
-        {% endif %}
-    </tr>
+    {% include 'item_row.html' %}
 </table>