Merge branch 'feature/css-ui-categories' into 'dev'

Feature/css ui categories

See merge request !26

components/DetailModal.vue

@@ -22,9 +22,14 @@
           </v-carousel>
         </v-col>
         <v-col>
+          <v-row class="flex-row align-center justify-space-between mt-2">
           <v-card-title v-model="item.name" class="modal-title" style="margin-left:-30px">
             {{ name }}
           </v-card-title>
+          <v-btn icon @click="$emit('close')" style="background-color:red">
+              <v-icon color="white">mdi-close</v-icon>
+            </v-btn>
+          </v-row>
           <v-row class="flex-row align-center">
             <h3 class="mr-4">
               Price:
@@ -183,6 +188,9 @@ export default {
     }
   },
   methods: {
+    close () {
+      this.$props.status = false
+    },
     closeDialog () {
       this.$props.status = false
     },
@@ -235,7 +243,7 @@ export default {
 .modal-title {
   font-size: 30px;
   font-weight: bold;
-  margin-left:-30px;
+  margin-left:-22px;
   margin-top:10px;
 }
 .hex-variant {

components/user/Header.vue

@@ -130,21 +130,21 @@
               </v-icon>
             </v-badge>
             <v-menu activator="#menu-activator" style="width: 300px">
-              <v-list dense three-line>
+              <v-list class="list-item no-scroll" dense three-line>
                 <v-list-item
                   v-for="item in products"
                   :key="item.id"
                   link
                 >
-                  <v-list-item-avatar>
+                  <v-list-item-avatar class="item-avatar" tile align-center min-height="80px" cover>
                     <v-img :src="item.product.images[0]" />
                   </v-list-item-avatar>
-                  <v-list-item-content>
-                    <v-list-item-title>{{ item.product.name }}</v-list-item-title>
-                    <v-list-item-subtitle>{{ item.quantity +"x"+ item.product.price }}</v-list-item-subtitle>
+                  <v-list-item-content class="list-item-card">
+                    <v-list-item-title class="font-weight-bold">{{ item.product.name }}</v-list-item-title>
+                    <v-list-item-subtitle>{{ item.quantity +"x"+ item.product.price + "$" }}</v-list-item-subtitle>
                   </v-list-item-content>
 
-                  <v-list-item-action>
+                  <v-list-item-action class="align-self-center">
                     <v-btn icon @click="removeCart(item,index)">
                       <v-icon color="grey lighten-1">
                         mdi-close-circle-outline
@@ -201,15 +201,15 @@
 
       <v-list dense three-line>
         <v-list-item v-for="item in wishlist" :key="item.name" link>
-          <v-list-item-avatar>
-            <v-img :src="item.product.images[0]" />
+          <v-list-item-avatar tile class="align-center item-avatar">
+            <v-img tile :src="item.product.images[0]" />
           </v-list-item-avatar>
-          <v-list-item-content>
-            <v-list-item-title>{{ item.product.name }}</v-list-item-title>
-            <v-list-item-subtitle>{{ item.product.price }}</v-list-item-subtitle>
+          <v-list-item-content class="list-item-card">
+            <v-list-item-title class="font-weight-bold">{{ item.product.name }}</v-list-item-title>
+            <v-list-item-subtitle>{{ item.product.price + '$' }}</v-list-item-subtitle>
           </v-list-item-content>
 
-          <v-list-item-action>
+          <v-list-item-action class="align-self-center">
             <v-btn icon @click="removeWishlist(item, index)">
               <v-icon color="grey lighten-1">
                 mdi-close-circle-outline
@@ -529,4 +529,19 @@ b {
   padding: 25px;
   background-color: #ffffff;
 }
+.list-item-card {
+  align-self: center !important;
+}
+.list-item {
+  overflow-y: auto;
+  height: 450px;
+}
+.list-item::-webkit-scrollbar {
+  display: none;
+}
+.item-avatar {
+  height: 70px !important;
+  width: 70px !important;
+  min-width: 70px;
+}
 </style>

pages/home-page/categories/_id.vue

@@ -6,12 +6,20 @@
     <BreadCrumb :items="breadcrumbItems" />
     <v-container class="pa-0">
       <v-row class="d-flex align-center pl-2 mt-2">
-        <v-col>
+        <v-col class="d-flex align-center">
           <v-hover v-slot="{ hover }">
             <v-btn outlined :style="{ 'background-color': hover ? '#1976d2' : '#f5f5f5','color':hover ? '#f5f5f5' : 'black' }">
-              FILTER
+              SHOW
             </v-btn>
           </v-hover>
+          <v-col md="1">
+            <v-select
+              v-model="itemsPerPage"
+              :items="numberPage"
+              item-text="name"
+              item-value="id"
+            />
+          </v-col>
         </v-col>
       </v-row>
       <v-row class="pt-5 pb-5">
@@ -166,7 +174,21 @@ export default {
       },
       itemsPerPage: 8,
       currentPage: 1,
-      wishlish: []
+      wishlish: [],
+      numberPage: [
+        {
+          name: '4',
+          id: 4
+        },
+        {
+          name: '8',
+          id: 8
+        },
+        {
+          name: '12',
+          id: 12
+        }
+      ]
     }
   },
   computed: {