From 95d6e41c813347a5cd89674980f2535a959dca4c Mon Sep 17 00:00:00 2001
From: Lance Edgar <lance@edbob.org>
Date: Thu, 19 Oct 2023 14:39:01 -0500
Subject: [PATCH] Use columns instead of table, for row receiving quantities

---
 src/components/receiving/ByjoveReceiving.vue | 106 +++++++++----------
 1 file changed, 50 insertions(+), 56 deletions(-)

diff --git a/src/components/receiving/ByjoveReceiving.vue b/src/components/receiving/ByjoveReceiving.vue
index c77fea4..1a9d040 100644
--- a/src/components/receiving/ByjoveReceiving.vue
+++ b/src/components/receiving/ByjoveReceiving.vue
@@ -30,62 +30,6 @@
           1 CS = {{ row.case_quantity || 1 }} {{ row.unit_uom }}
         </p>
 
-        <table class="receiving-quantities">
-          <tr v-if="row.order_quantities_known">
-            <td>ordered</td>
-            <td>
-              <span v-if="allowCases">
-                {{ row.cases_ordered || 0}} /
-              </span>
-              {{ row.units_ordered || 0}}
-            </td>
-          </tr>
-          <tr v-if="row.order_quantities_known">
-            <td>shipped</td>
-            <td>
-              <span v-if="allowCases">
-                {{ row.cases_shipped || 0}} /
-              </span>
-              {{ row.units_shipped || 0}}
-            </td>
-          </tr>
-          <tr>
-            <td>received</td>
-            <td>
-              <span v-if="allowCases">
-                {{ row.cases_received || 0}} /
-              </span>
-              {{ row.units_received || 0}}
-            </td>
-          </tr>
-          <tr>
-            <td>damaged</td>
-            <td>
-              <span v-if="allowCases">
-                {{ row.cases_damaged || 0}} /
-              </span>
-              {{ row.units_damaged || 0}}
-            </td>
-          </tr>
-          <tr v-if="allowExpired">
-            <td>expired</td>
-            <td>
-              <span v-if="allowCases">
-                {{ row.cases_expired || 0}} /
-              </span>
-              {{ row.units_expired || 0}}
-            </td>
-          </tr>
-          <tr>
-            <td>missing</td>
-            <td>
-              <span v-if="allowCases">
-                {{ row.cases_missing || 0}} /
-              </span>
-              {{ row.units_missing || 0}}
-            </td>
-          </tr>
-        </table>
       </div>
 
       <div>
@@ -93,6 +37,56 @@
       </div>
     </div>
 
+    <div class="columns is-mobile">
+
+      <div class="column">
+
+        <div v-if="row.order_quantities_known"
+             style="display: flex;">
+          <span style="flex-grow: 1;">ordered</span>
+          <span v-if="allowCases">{{ row.cases_ordered || 0 }} /</span>
+          <span>{{ row.units_ordered || 0}}</span>
+        </div>
+
+        <div v-if="row.order_quantities_known"
+             style="display: flex;">
+          <span style="flex-grow: 1;">shipped</span>
+          <span v-if="allowCases">{{ row.cases_shipped || 0 }} /</span>
+          <span>{{ row.units_shipped || 0}}</span>
+        </div>
+
+        <div style="display: flex;">
+          <span style="flex-grow: 1;">received</span>
+          <span v-if="allowCases">{{ row.cases_received || 0 }} /</span>
+          <span>{{ row.units_received || 0}}</span>
+        </div>
+      </div>
+
+      <div class="column">
+
+        <div style="display: flex;">
+          <span style="flex-grow: 1;">damaged</span>
+          <span v-if="allowCases">{{ row.cases_damaged || 0 }} /</span>
+          <span>{{ row.units_damaged || 0}}</span>
+        </div>
+
+        <div v-if="allowExpired"
+             style="display: flex;">
+          <span style="flex-grow: 1;">expired</span>
+          <span v-if="allowCases">{{ row.cases_expired || 0 }} /</span>
+          <span>{{ row.units_expired || 0}}</span>
+        </div>
+
+        <div style="display: flex;">
+          <span style="flex-grow: 1;">missing</span>
+          <span v-if="allowCases">{{ row.cases_missing || 0 }} /</span>
+          <span>{{ row.units_missing || 0}}</span>
+        </div>
+
+      </div>
+
+    </div>
+
     <div v-if="row.received_alert"
          class="has-text-danger">
       <br />