From 6e96bdb9b235e6d50b481f041b2b03828c2291a2 Mon Sep 17 00:00:00 2001
From: Azkya Khan <azkya.khan@hotwax.co>
Date: Wed, 5 Jan 2022 18:11:31 +0530
Subject: [PATCH 1/5] Improved card styling for desktop view of orders page
 (#1xx2g9h)

---
 src/views/Orders.vue | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/views/Orders.vue b/src/views/Orders.vue
index ed4b835c0..5a1c886fd 100644
--- a/src/views/Orders.vue
+++ b/src/views/Orders.vue
@@ -17,7 +17,7 @@
     </ion-header>
 
     <ion-content>
-      <div v-if="segmentSelected === 'open'">
+      <div class="order-card" v-if="segmentSelected === 'open'">
         <div v-for="order in orders" :key="order.orderId">
           <OrderItemCard v-for="(shipGroup, index) in getShipGroups(order.items)" :key="index" :order="order" :shipGroup="shipGroup" @click.prevent="viewOrder(order)">
             <template #packedTime>
@@ -31,7 +31,7 @@
           </OrderItemCard>
         </div>
       </div>      
-      <div v-if="segmentSelected === 'packed'">
+      <div class="order-card" v-if="segmentSelected === 'packed'">
         <div v-for="order in packedOrders" :key="order.orderId">
           <OrderItemCard v-for="(shipGroup, index) in getShipGroups(order.items)" :key="index" :order="order" :shipGroup="shipGroup">
             <template #cardActionButton>
@@ -210,4 +210,11 @@ export default defineComponent({
     };
   },
 });
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.order-card{ 
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(343px, 1fr));
+}
+</style>
\ No newline at end of file

From 0b6353d54f62cfe7ae30e982ad2dddc7f379c9a0 Mon Sep 17 00:00:00 2001
From: Azkya Khan <azkya.khan@hotwax.co>
Date: Wed, 5 Jan 2022 18:13:24 +0530
Subject: [PATCH 2/5] Added: Changelog (#1xx2g9h)

---
 changelogs/unreleased/-1xx2g9h.yml | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 changelogs/unreleased/-1xx2g9h.yml

diff --git a/changelogs/unreleased/-1xx2g9h.yml b/changelogs/unreleased/-1xx2g9h.yml
new file mode 100644
index 000000000..00604ea30
--- /dev/null
+++ b/changelogs/unreleased/-1xx2g9h.yml
@@ -0,0 +1,6 @@
+---
+title: Improved card styling for desktop view of orders page
+ticket_id: "#1xx2g9h"
+merge_request: 38
+author: Azkya Khan
+type: changed

From 2d0df5b4cc6e9cf2b5a0d0f045f5bf6a5ae6eb98 Mon Sep 17 00:00:00 2001
From: Azkya Khan <azkya.khan@hotwax.co>
Date: Wed, 5 Jan 2022 19:02:06 +0530
Subject: [PATCH 3/5] Improved styling

---
 src/views/Orders.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/views/Orders.vue b/src/views/Orders.vue
index 5a1c886fd..860c8f8c0 100644
--- a/src/views/Orders.vue
+++ b/src/views/Orders.vue
@@ -17,7 +17,7 @@
     </ion-header>
 
     <ion-content>
-      <div class="order-card" v-if="segmentSelected === 'open'">
+      <div class="orders" v-if="segmentSelected === 'open'">
         <div v-for="order in orders" :key="order.orderId">
           <OrderItemCard v-for="(shipGroup, index) in getShipGroups(order.items)" :key="index" :order="order" :shipGroup="shipGroup" @click.prevent="viewOrder(order)">
             <template #packedTime>
@@ -31,7 +31,7 @@
           </OrderItemCard>
         </div>
       </div>      
-      <div class="order-card" v-if="segmentSelected === 'packed'">
+      <div class="orders" v-if="segmentSelected === 'packed'">
         <div v-for="order in packedOrders" :key="order.orderId">
           <OrderItemCard v-for="(shipGroup, index) in getShipGroups(order.items)" :key="index" :order="order" :shipGroup="shipGroup">
             <template #cardActionButton>
@@ -213,8 +213,16 @@ export default defineComponent({
 </script>
 
 <style scoped>
-.order-card{ 
+.orders{ 
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(343px, 1fr));
+  gap: 10px;
+  align-items: start;
+}
+
+@media (max-width: 343px) {
+  .orders {
+    grid-template-columns: auto
+  }
 }
 </style>
\ No newline at end of file

From 3c1bafb3d724e75d4d5c5d694f5e05fc583c83fa Mon Sep 17 00:00:00 2001
From: Azkya Khan <azkya.khan@hotwax.co>
Date: Wed, 5 Jan 2022 19:14:18 +0530
Subject: [PATCH 4/5] Improved styling (#1xx2g9h)

---
 src/views/Orders.vue | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/views/Orders.vue b/src/views/Orders.vue
index 860c8f8c0..ffa26f1d4 100644
--- a/src/views/Orders.vue
+++ b/src/views/Orders.vue
@@ -17,7 +17,7 @@
     </ion-header>
 
     <ion-content>
-      <div class="orders" v-if="segmentSelected === 'open'">
+      <div v-if="segmentSelected === 'open'">
         <div v-for="order in orders" :key="order.orderId">
           <OrderItemCard v-for="(shipGroup, index) in getShipGroups(order.items)" :key="index" :order="order" :shipGroup="shipGroup" @click.prevent="viewOrder(order)">
             <template #packedTime>
@@ -31,7 +31,7 @@
           </OrderItemCard>
         </div>
       </div>      
-      <div class="orders" v-if="segmentSelected === 'packed'">
+      <div v-if="segmentSelected === 'packed'">
         <div v-for="order in packedOrders" :key="order.orderId">
           <OrderItemCard v-for="(shipGroup, index) in getShipGroups(order.items)" :key="index" :order="order" :shipGroup="shipGroup">
             <template #cardActionButton>
@@ -213,16 +213,11 @@ export default defineComponent({
 </script>
 
 <style scoped>
-.orders{ 
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(343px, 1fr));
-  gap: 10px;
-  align-items: start;
-}
 
-@media (max-width: 343px) {
-  .orders {
-    grid-template-columns: auto
+@media (min-width: 991px) {
+  ion-content > div {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(343px, 1fr));
   }
 }
 </style>
\ No newline at end of file

From fbfb5371b4b8e96c1feecd3be0f21168c6a8f95d Mon Sep 17 00:00:00 2001
From: Azkya Khan <azkya.khan@hotwax.co>
Date: Wed, 5 Jan 2022 19:21:50 +0530
Subject: [PATCH 5/5] Improved styling (#1xx2g9h)

---
 src/views/Orders.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Orders.vue b/src/views/Orders.vue
index ffa26f1d4..13e496d14 100644
--- a/src/views/Orders.vue
+++ b/src/views/Orders.vue
@@ -214,7 +214,7 @@ export default defineComponent({
 
 <style scoped>
 
-@media (min-width: 991px) {
+@media (min-width: 343px) {
   ion-content > div {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(343px, 1fr));