[FIX] layout redesigned, simplify components

src/App.vue

@@ -1,22 +1,30 @@
 <template lang="pug">
     .pos
         .products-container
-            <products-searcher />
-            <products-grid />
+            products-searcher
+            products-grid
         .cart-container
-            <cart />
+            cart-total
+            cart-items
+            cart-options
 </template>
 
 <script>
     import ProductsSearcher from '@/components/ProductsSearcher'
     import ProductsGrid from '@/components/ProductsGrid'
-    import Cart from '@/components/Cart'
+    import CartTotal from '@/components/CartTotal'
+    import CartItems from '@/components/CartItems'
+    import CartItem from '@/components/CartItem'
+    import CartOptions from '@/components/CartOptions'
 
     export default {
         components: {
             'products-searcher': ProductsSearcher,
             'products-grid': ProductsGrid,
-            'cart': Cart
+            'cart-total': CartTotal,
+            'cart-items': CartItems,
+            'cart-item': CartItem,
+            'cart-options': CartOptions
         }
     }
 </script>
@@ -33,11 +41,14 @@
             width: calc(100% - 300px)
             height: 100%
             padding-right: 5px
+            display: flex
+            flex-direction: column
 
-             
         .cart-container
             width: 300px
             height: 100%
             border-left: 1px solid #d3d3d3
             padding-left: 10px
+            display: flex
+            flex-direction: column
 </style>

src/components/Cart.vue

@@ -1,31 +0,0 @@
-<template lang="pug">
-    .cart
-        cart-total
-        cart-list(data: "items")
-        cart-options
-</template>
-
-<script>
-    import CartTotal from '@/components/CartTotal'
-    import CartList from '@/components/CartList'
-    import CartOptions from '@/components/CartOptions'
-    import { mapGetters } from 'vuex'
-
-    export default {
-        components: {
-            'cart-total': CartTotal,
-            'cart-list': CartList,
-            'cart-options': CartOptions
-        },
-        computed: mapGetters({
-            items: 'getCartItems'
-        })
-    }
-</script>
-
-<style lang="sass">
-    .cart
-        width: 100%
-        height: 100%
-</style>
-

src/components/CartItem.vue

@@ -27,8 +27,8 @@
 
 <style lang="sass">
     .cart-item
-        width: 98%
-        height: 85px
+        width: 100%
+        height: 84px
         border-bottom: 1px solid #d3d3d3
 
         .item-name

src/components/CartList.vue → src/components/CartItems.vue

@@ -1,7 +1,6 @@
 <template lang="pug">
-    transition-group(name="list" tag="div")
-        div(v-for="item in items" v-bind:key="item" class="list-item")
-                cart-item(:item="item")
+    transition-group(name="list" tag="div" class="cart-list")
+        cart-item(v-for="item in items" v-bind:key="item" :item="item")
 </template>
 
 <script>
@@ -28,9 +27,9 @@
 <style lang="sass">
     .cart-list
         width: 100%
-        height: calc(100% - 100px)
-        padding: 10px 0
+        height: 100%
         overflow-y: auto
+        overflow-x: hidden
 
     .list-item
         display: inline-block

src/components/ProductsGrid.vue

@@ -28,7 +28,7 @@
 <style lang="sass">
     .products-grid
         width: 100%
-        height: 100%
+        // height: 100%
         padding-top: 15px
         overflow-y: auto
 </style>