From ea22bf21a98abaf8b79d6b2e4a9ec867e3a39a14 Mon Sep 17 00:00:00 2001
From: John Cardinal <support@ayanova.com>
Date: Tue, 27 Apr 2021 23:15:37 +0000
Subject: [PATCH]

---
 ayanova/src/components/work-order-state.vue | 41 +++++++++++++++++----
 1 file changed, 34 insertions(+), 7 deletions(-)

diff --git a/ayanova/src/components/work-order-state.vue b/ayanova/src/components/work-order-state.vue
index 7033dd50..a4cf9e66 100644
--- a/ayanova/src/components/work-order-state.vue
+++ b/ayanova/src/components/work-order-state.vue
@@ -28,21 +28,48 @@
             <span class="headline">{{ $ay.t("WorkOrderStatus") }}</span>
           </v-card-title>
           <v-card-text>
-            <template v-for="item in stateDisplayList">
-              <div :key="item.id">
-                <span class="text-h6">{{ item.name }}</span>
-                <v-icon :color="item.color" class="ml-4">$ayiFlag</v-icon>
-                <v-icon color="primary" v-if="item.locked" class="ml-4"
+            <template v-if="$vuetify.breakpoint.smAndUp">
+              <!-- WIDE VIEW -->
+              <div v-for="item in stateDisplayList" :key="item.id">
+                <span>{{ item.timeStamp }}</span>
+                <span class="ml-4">{{ item.user }}</span>
+
+                <span class="font-weight-bold ml-4">{{ item.name }}</span>
+                <v-icon small :color="item.color" class="ml-4">$ayiFlag</v-icon>
+                <v-icon small color="primary" v-if="item.locked" class="ml-4"
                   >$ayiLock</v-icon
                 >
-                <v-icon color="primary" v-if="item.completed" class="ml-4"
+                <v-icon small color="primary" v-if="item.completed" class="ml-4"
                   >$ayiCheckCircle</v-icon
                 >
               </div>
             </template>
+            <template v-else>
+              <!-- NARROW VIEW -->
+              <div v-for="item in stateDisplayList" :key="item.id">
+                <span>{{ item.timeStamp }}&nbsp;</span>
+                <span>{{ item.user }}</span>
+                <div class="mb-2">
+                  <span class="font-weight-bold">{{ item.name }}</span>
+                  <v-icon small :color="item.color" class="ml-4"
+                    >$ayiFlag</v-icon
+                  >
+                  <v-icon small color="primary" v-if="item.locked" class="ml-4"
+                    >$ayiLock</v-icon
+                  >
+                  <v-icon
+                    small
+                    color="primary"
+                    v-if="item.completed"
+                    class="ml-4"
+                    >$ayiCheckCircle</v-icon
+                  >
+                </div>
+              </div>
+            </template>
 
             <template v-if="canAdd">
-              <div>
+              <div class="mt-4">
                 <v-autocomplete
                   v-model="selectedStatus"
                   :items="pvm.selectLists.allowedwostatus"