fix(default-theme): order details styling (#1011)

vuestorefront · Aug 11, 2020 · cdde791 · cdde791 · vercel · Aug 11, 2020
1 parent e401f0d
commit cdde791
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 3 deletions.
diff --git a/packages/default-theme/components/SwOrderDetails.vue b/packages/default-theme/components/SwOrderDetails.vue
@@ -16,6 +16,7 @@
               table__description: tableHeader === 'Item',
               table__quantity: tableHeader === 'Quantity',
               table__amount: tableHeader === 'Amount',
+              table__price: tableHeader === 'Price',
             }"
           >
             {{ tableHeader }}
@@ -278,19 +279,37 @@ export default {
 }
 
 .table {
+  &__row {
+    flex-wrap: nowrap;
+
+    & > th {
+      order: unset;
+    }
+  }
+
   &__data {
+    flex: 1;
+    order: unset;
     text-align: center;
     &:last-of-type {
       text-align: right;
     }
   }
   &__description {
-    flex: 3;
+    flex: 2;
   }
   &__quantity {
     text-align: center;
+    flex: 1;
   }
+
+  &__price {
+    flex: 1;
+    order: unset;
+  }
+
   &__amount {
+    flex: 1;
     text-align: right;
   }
 }

diff --git a/packages/default-theme/components/SwOrderDetailsItem.vue b/packages/default-theme/components/SwOrderDetailsItem.vue
@@ -4,7 +4,7 @@
       <div class="product-title">{{ getName }}</div>
       <div class="product-sku">{{ product.productNumber }}</div>
     </SfTableData>
-    <SfTableData class="table__data">
+    <SfTableData class="table__data table__price">
       <SfPrice :regular="getUnitPrice | price" class="product-price" />
     </SfTableData>
     <SfTableData class="table__data table__quantity">
@@ -58,16 +58,27 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+@import "~@storefront-ui/vue/styles";
+
 .product-price {
   white-space: nowrap;
 }
 
 .table {
+  & > td {
+    flex: 1;
+    order: unset;
+  }
+
   &__data {
+    order: unset;
+    flex: 1;
     --price-regular-font-weight: var(--font-normal);
   }
   &__description {
-    flex: 3;
+    padding-right: var(--spacer-sm);
+    order: unset;
+    flex: 2;
   }
 
   &__row:hover {