From 2ce06580a80682225204d8898195914616d88a76 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Sun, 19 Jul 2020 16:12:48 +0200
Subject: [PATCH] Cleaned up cart page, now with tables.

---
 frontend/components/Cart.vue | 284 ++++++++++++++++-------------------
 1 file changed, 133 insertions(+), 151 deletions(-)

diff --git a/frontend/components/Cart.vue b/frontend/components/Cart.vue
index 65f930a..3ff848b 100644
--- a/frontend/components/Cart.vue
+++ b/frontend/components/Cart.vue
@@ -7,45 +7,54 @@
       </div>
 
 
-      <div class="row header">
-        <h2>Product</h2>
-        <h2>Pris</h2>
-        <h2>Quantity</h2>
-        <h2>Delsum</h2>
-      </div>
-
-       <div class="row">
-        <div class="product">
-          <img src="https://planetposen.no/no/Kjp_na_files/Media/IMG_1244/IMG_1244.jpg" />
-          
-          <div class="flex-direction-column">
-            <h3>Christmas joy</h3>
-          </div>
-        </div>
-        <span class="price">30.99 $</span>
-        <div class="info">
-          <Picker></Picker>
-        </div>
-        <span class="price">61.98 $</span>
-      </div>
-      <div class="row">
-        <div class="product">
-          <img src="https://planetposen.no/no/Kjp_na_files/Media/IMG_1244/IMG_1244.jpg" />
-          
-          <div class="flex-direction-column">
-            <h3>Christmas joy</h3>
-          </div>
-        </div>
-        <span class="price">30.99 $</span>
-        <div class="info">
-          <Picker></Picker>
-        </div>
-        <span class="price">30.99 $</span>
-      </div>
+      <table cellspaceing="0" class="cart-inventory">
+        <thead>
+          <tr>
+            <th>Product</th>
+            <th>Price</th>
+            <th>Quantity</th>
+            <th>Delsum</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="product in cartInventory">
+            <td class="name-and-image">
+              <img :src="product.image" />
+              <span>{{ product.name }}</span>
+            </td>
+            <td>38.99 NOK</td>
+            <td>2</td>
+            <td>77.99 NOK</td>
+          </tr>
+        </tbody>
+      </table>
 
       <section class="checkout">
         <h2>Totalt i handlekurven</h2>
         <div class="checkout-summary">
+          <table cellspacing="0">
+            <tbody>
+              <tr>
+                <th>Delsum</th>
+                <td data-title="Delsum">
+                  <span>388 kr</span>
+                </td>
+              </tr>
+              <tr class="frakt">
+                <th>Frakt</th>
+                <td data-title="Frakt">
+                  <span>49 kr</span>
+                  <p>Fraktalternativer vil bli oppdatert på betalingssiden.</p>
+                </td>
+              </tr>
+              <tr>
+                <th>Total</th>
+                <td data-title="Total">
+                  <span>437 kr</span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
 
           <Button color="blue" :scaleRotate="true">Gå til kassen</Button>
         </div>
@@ -56,6 +65,7 @@
 
 
 <script>
+import store from '@/store';
 import Picker from '@/components/ui/Picker'
 import Button from '@/components/ui/Button'
 
@@ -64,6 +74,16 @@ export default {
   components: {
     Picker,
     Button
+  },
+  computed: {
+    cartInventory() {
+      return store.getters['cartModule/inventory'];
+    }
+  },
+  methods: {
+    removeFromCart(product) {
+      store.dispatch('cartModule/removeItemFromCart', product)
+    }
   }
 }
 </script>
@@ -74,21 +94,94 @@ export default {
 
 .checkout {
   @include desktop {
-    float: right;
     width: 55%;
   }
 
+  margin: 2rem 0;
+
   h2 {
     margin: 1rem 0;
   }
 
   &-summary {
-    height: 10px;
-    background-color: red;
     width: 100%;
   }
 }
 
+table.cart-inventory {
+  table-layout: fixed;
+
+  @include desktop {
+    table-layout: auto;
+
+    th:first-of-type {
+      width: 55%;
+    }
+    th:not(:first-of-type) {
+      width: 15%;
+    }
+  }
+
+  .name-and-image {
+    display: flex;
+    align-items: center;
+
+    img {
+      margin-right: 1rem;
+      width: auto;
+      height: 40px;
+      border-radius: 4px;
+    }
+  }
+
+  thead tr th {
+    border-bottom: 2px solid rgba(255,255,255,.1);
+
+    &:not(:last-of-type) {
+      border-right: 2px solid rgba(255,255,255,.1);
+    }
+  }
+
+  tbody tr:last-of-type td {
+    border-bottom: 0px solid;
+  }
+}
+
+.checkout-summary table {
+  tr:last-of-type {
+    th, td {
+      border-bottom: 0px solid;
+    }
+  }
+
+  .frakt p {
+    font-size: 0.9em;
+  }
+}
+
+table {
+  width: 100%;
+  border: 1px solid rgba(255,255,255,.1);
+  border-radius: 6px;
+  margin-bottom: 1.5rem;
+
+  font-size: 1.2em;
+
+  tr th, tr td {
+    border-bottom: 2px solid rgba(255,255,255,.1);
+  }
+
+  th, td {
+    padding: 0.75rem 1rem;
+  }
+
+  th {
+    width: 35%;
+    text-align: left;
+    vertical-align: top;
+  }
+}
+
 .page-header {
   margin-bottom: 3rem;
 
@@ -107,118 +200,7 @@ export default {
     font-weight: 400;
   }
 }
-
-.row {
-  display: flex;
-  flex-direction: row;
-  height: 100%;
-  margin-bottom: 1rem;
-  padding: 1rem;
-  border: 1px solid white;
-
-
-  &:first-of-type {
-    height: min-content;
-  }
-
-  > *:first-child {
-    width: calc(70% - 1rem);
-    // background-color: violet;
-    margin-right: 1rem;
-
-    display: flex;
-    flex-direction: row;
-
-    img {
-      height: 80px;
-      margin-right: 1rem;
-    }
-
-    h3 {
-      letter-spacing: 1.2px;
-      font-weight: normal;
-      margin: 0;
-      margin-top: 0.3rem;
-    }
-
-    p {
-      font-weight: 300;
-    }
-  }
-
-  > *:nth-child(3) {
-    width: calc(15% - 1rem);
-    margin-right: 1rem;
-    display: flex;
-    align-items: center;
-    // background-color: navy;
-  }
-
-  > *:nth-child(2) {
-    width: calc(15%);
-    // background-color: #F28500;
-    font-size: 1.5rem;
-    margin: auto;
-  }
-
-  > *:nth-child(4) {
-    width: calc(15%);
-    // background-color: #F28500;
-    font-size: 1.5rem;
-    margin: auto;
-  }
-
-  &:last-child {
-    // background-color: green;
-  }
-
-  img {
-    height: 100%;
-    width: auto;
-    height: 150px;
-    border-radius: 4px;
-  }
-
-  // &.header {
-  //   height: min-content;
-
-  //   h2 {
-  //     font-weight: 300;
-  //   }
-  // }
-
-  // .product {
-  //   width: 60%;
-  //   height: 100%;
-  //   display: inherit;
-  //   flex-direction: inherit;
-  //   align-items: center;
-
-  //   img {
-  //     height: 100%;
-  //     width: auto;
-  //     margin-right: 2rem;
-  //   }
-
-  //   h3, p {
-  //     margin: 0;
-  //   }
-
-  //   h3 {
-  //     font-weight: 500;
-  //     font-size: 1.5rem;
-  //     margin-bottom: 0.5rem;
-  //   }
-  // }
-
-  // .info {
-  //   width: 40%;
-  //   display: inherit;
-  //   flex-direction: inherit;
-
-  //   h2 {
-  //     width: 50%;
-  //   }
-  // }
+img {
 }
+
 </style>