add localStorage

README.md

@@ -1,20 +1,11 @@
 # front-test
 
-## Build Setup
-
-```bash
-# install dependencies
-$ yarn install
-
-# serve with hot reload at localhost:3000
-$ yarn dev
-
-# build for production and launch server
-$ yarn build
-$ yarn start
-
-# generate static project
-$ yarn generate
-```
-
-For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).
+## Download app
+* `git clone https://github.com/yongDataScince/front-test`
+* `cd front-test`
+* `yarn install` or `npm install` - for install dependences
+
+## Run app 
+* `yarn dev` - for develepment
+* `yarn build` and `yarn start` - for build app
+* `yarn generate` - for generate static project

assets/css/main.scss

@@ -14,6 +14,9 @@
   border-radius: 8px;
   border: none;
   margin-bottom: 16px;
+  font-size: 16px;
+  line-height: 21px;
+  color: $dark-text;
 
   &::placeholder {
     font-size: 16px;

components/Body.vue

@@ -42,7 +42,7 @@
       <div class="categories">
         <ul class="list">
           <li
-              @click="choiseCategory(c.id)"
+              @click="toggleCategory(c.id)"
               :class="{ choised: c.id==category }"
               class="list-item"
               v-for="c in categories"
@@ -80,11 +80,15 @@ export default {
   mounted () {
     this.setCategories()
     this.toggleCategory(1)
+    this.SET_STORAGE()
   },
 
   methods: {
     ...mapActions(['setCategories', 'choiseCategory']),
-    ...mapMutations(['FILTER_PRODUCTS']),
+    ...mapMutations({
+        FILTER_PRODUCTS: 'FILTER_PRODUCTS', 
+        SET_STORAGE: 'cart/SET_STORAGE'
+      }),
 
     setSort (id) {
       this.openDropdown = false
@@ -221,18 +225,36 @@ export default {
             line-height: 21px;
             height: 21px;
             color: $disable-test;
+            position: relative;
+
+            &::before {
+              position: absolute;
+              content: '';
+              width: 0;
+              height: 1px;
+              background: $disable-test;
+              bottom: 2px;
+              left: 0;
+              transition: .2s;
+            }
 
             &:nth-child(2) {
               margin: 16px 0;
             }
 
             &:hover {
               color: $hover-text;
+              &::before {
+                width: 50%;
+              }
             }
 
             &.choised {
               color: $dark-text;
               text-decoration:underline;
+              &::before {
+                display: none;
+              }
             }
           }
         }

components/Card.vue

@@ -27,7 +27,8 @@ export default {
   },
 
   data: () => ({
-    inCart: false
+    inCart: false,
+    show: false
   }),
 
   computed: {
@@ -43,7 +44,7 @@ export default {
 
     add () {
       if (this.data.inCart) {
-        console.log('IN Cart!!!!')
+        console.log("ERR", this.data.inCart)
       } else {
         this.addProduct(this.data)
       }
@@ -59,6 +60,8 @@ export default {
     box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.05);
     border-radius: 8px;
     padding: 16px;
+    transition: .2s;
+    perspective: 100px;
 
     &--content {
       width: 100%;
@@ -101,5 +104,9 @@ export default {
         line-height: 18px;
       }
     }
+
+    &:hover {
+      transform: scale(1.02) translateZ(1px);
+    }
   }
 </style>

components/Cart.vue

@@ -6,7 +6,7 @@
         <i class="icon icon-close" @click="close"/>
       </div>
 
-      <div class="no-products" v-if="count == 0">
+      <div class="no-products" v-if="products.length == 0">
         <div class="text">
           Пока что вы ничего не добавили <br>
           в корзину.
@@ -39,7 +39,7 @@
           <form @submit.prevent="submit" class="cart__form">
             <div class="cart__form-title">Оформить заказ</div>
             <input type="text" placeholder="Ваше имя" v-model="name">
-            <input type="text" placeholder="Телефон" v-model="phone" v-mask="'+7###-###-##-##'">
+            <input type="text" placeholder="Телефон" v-model="phone" v-mask="'+7(###)-###-##-##'">
             <input type="text" placeholder="Адрес" v-model="addr">
 
             <button class="submit" :disabled="disable">
@@ -49,7 +49,7 @@
       </div>
 
       <div class="cart__success" :class="{ done }">
-        <div class="ok">👌🏻</div>
+        <div class="ok" :class="{ done }">👌🏻</div>
         <div class="cart__success-title">
           Заявка успешно отправлена
         </div>
@@ -74,13 +74,12 @@ export default {
   computed: {
     ...mapState({
       open: state => state.cart.open,
-      count: state => state.cart.count,
       products: state => state.cart.products,
       done: state => state.cart.done
     }),
 
     disable () {
-      const conditional = this.name !== '' && this.phone !== '' && this.addr !== '' && this.phone.length === 15 // validation all fields
+      const conditional = this.name !== '' && this.phone !== '' && this.addr !== '' && this.phone.length === 17 // validation all fields
       return !conditional
     }
   },
@@ -157,6 +156,11 @@ export default {
 
         .icon {
           margin-left: auto;
+          transition: .2s;
+
+          &:hover {
+            transform: scale(1.2);
+          }
         }
       }
 
@@ -165,7 +169,6 @@ export default {
 
         .list-container {
           min-height: 120px;
-          max-height: 480px;
           width: 100%;
         }
 
@@ -311,11 +314,16 @@ export default {
         line-height: 21px;
         font-size: 16px;
         line-height: 21px;
+        color: $hover-text;
       }
 
       .ok {
         font-size: 80px;
         margin-bottom: 24px;
+
+        &.done {
+          animation: done 1s ease-in;
+        }
       }
     }
   }
@@ -336,4 +344,18 @@ export default {
       @include button
     }
   }
+
+  @keyframes done {
+    0% {
+      transform: scale(.2) rotate(40deg);
+    }
+
+    50% {
+      transform: scale(1.2) rotate(-20deg);
+    }
+
+    100% {
+      transform: scale(1) rotate(0deg);
+    }
+  }
 </style>

components/Header.vue

@@ -18,7 +18,7 @@ import { mapState, mapMutations } from 'vuex'
 export default {
   computed: {
     ...mapState({
-      count: state => state.cart.count
+      count: state => state.cart.products.length
     })
   },
 

components/ProductsList.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="main__products">
-    <h1 v-if="loading" class="placeholder">
+    <h1 class="placeholder" :class="{ loading }">
       <div v-for="i in 12" :key="i" class="placeholder-card"></div>
     </h1>
-    <div class="cards" v-else>
+    <div class="cards" v-if="!loading">
       <Card
         v-for="p in products"
         :key="p.id"
@@ -48,6 +48,7 @@ export default {
     grid-auto-rows: 272px;
     grid-template-rows: 272px;
     grid-gap: 16px;
+    perspective: 1000px;
   }
 }
 
@@ -57,12 +58,28 @@ export default {
   grid-auto-rows: 272px;
   grid-template-rows: 272px;
   grid-gap: 16px;
+  opacity: 0;
+  visibility: hidden;
+  transition: .3s;
+  position: absolute;
 
   &-card {
     background: $placeholder;
     border-radius: 8px;
     background-size: 500% 500%;
-    animation: gradient 3s ease infinite;
+    animation: gradient 2s ease infinite;
+  }
+
+  &.loading {
+    position: absolute;
+    opacity: .7;
+    visibility: visible;
+  }
+}
+
+@for $i from 1 to 12 {
+  .placeholder-card:nth-child(#{$i}) {
+    animation-delay: $i * .1s; 
   }
 }
 

nuxt.config.js

@@ -36,9 +36,15 @@ export default {
     // https://go.nuxtjs.dev/axios
     '@nuxtjs/axios',
     // https://go.nuxtjs.dev/pwa
-    '@nuxtjs/pwa'
+    '@nuxtjs/pwa',
+    '@nuxtjs/auth-next'
   ],
 
+
+  auth: {
+    // Options
+  },
+
   // Axios module configuration: https://go.nuxtjs.dev/config-axios
   axios: {
     baseURL: "https://frontend-test.idaproject.com/",
@@ -55,5 +61,11 @@ export default {
 
   // Build Configuration: https://go.nuxtjs.dev/config-build
   build: {
-  }
+  },
+
+  compilerOptions: {
+    "types": [
+      "@nuxtjs/auth-next",
+    ]
+  },
 }