Lysiane store

package.json

@@ -8,7 +8,10 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "buefy": "^0.9.21",
+    "bulma": "^0.9.4",
     "core-js": "^3.8.3",
+    "sass-loader": "^13.0.0",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"
@@ -24,7 +27,9 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^9.0.0",
+    "node-sass": "^7.0.1",
     "prettier": "^2.4.1",
+    "sass-loader": "^13.0.0",
     "vue-template-compiler": "^2.6.14"
   }
 }

src/App.vue

@@ -1,31 +1,95 @@
 <template>
   <div id="app">
-        <h1>Your shopping Website</h1>
-    <nav>
-      <router-link 
-                  to="/" class="onglet">
-                  Inventory
-      </router-link> 
-      <router-link 
-                 to="/cart" class="onglet">
-                 Cart : {{ $store.state.addedArticlesCount }} article(s)
-      </router-link>
-    </nav>
+
+    <div class="tabs is-medium is-right">
+      <!-- Title -->
+      <h1 class="is-hidden-mobile p-2">Green Shopping</h1>
+      <!-- Logo -->
+      <span class="icon icon-leaf is-large p-4"></span>
+      <!-- Navbar -->
+      <ul class="is-flex-desktop">
+        <li 
+           :class="tab1 === true ? 'is-active' : '' "
+           @click="activateTab1"
+           >
+           <router-link 
+                    to="/"
+                    >
+                    <span class="icon icon-apparel"></span> 
+                    <div class="is-hidden-mobile">Collections</div>           
+        </router-link> 
+        </li>
+        <li 
+           :class="tab2 ? 'is-active' : '' "
+           @click="activateTab2"
+            >
+           <router-link 
+                   to="/cart">
+                   <span class="icon icon-cart"></span>
+                   <div class="mobile is-hidden-tablet">{{ $store.state.addedArticlesCount }}</div>
+                   <div class="is-hidden-mobile">{{ $store.state.addedArticlesCount }} {{singOrPlur}}</div>
+        </router-link>
+        </li>
+      </ul>
+
+    </div>
     <router-view />
   </div>
 </template>
 
+<script>
+import 'bulma'
+import { mapGetters } from 'vuex'
+export default{
+    name: 'App',
+    data(){
+        return{
+            tab1 : true,
+            tab2: false
+        }
+    },
+    methods : {
+        activateTab1 : function(){
+            this.tab1 = true
+            this.tab2 = false
+        },
+        activateTab2 : function(){
+            this.tab2 = true
+            this.tab1 = false
+        },
+    },
+    computed: {
+        ...mapGetters({
+            singOrPlur: 'singularOrPlurial',
+        })
+    },
+}
+</script>
+
 <style>
+
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
+   background-color: #f7f6f2;
 }
+html{
+  background-color: #f7f6f2;
 
-nav {
-  padding: 30px;
+}
+
+h1{
+  font-weight: bold !important;
+  font-size: 1.5rem !important;
+  color: #5c7061;
+}
+
+.tabs{
+  background-color:#d8d4cc;
+  padding: 2%;
 }
 
 nav a {
@@ -37,9 +101,63 @@ nav a.router-link-exact-active {
   color: #42b983;
 }
 
-.onglet{
-  border: 1px solid black;
-  padding: 1%;
-  margin: 1%;
+/*------- ICONMOON CSS ----- */
+@font-face {
+  font-family: 'icomoon';
+  src:  url('@/fonts/icomoon.eot?2q5z0o');
+  src:  url('@/fonts/icomoon.eot?2q5z0o#iefix') format('embedded-opentype'),
+    url('@/fonts/icomoon.ttf?2q5z0o') format('truetype'),
+    url('@/fonts/icomoon.woff?2q5z0o') format('woff'),
+    url('@/fonts/icomoon.svg?2q5z0o#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-leaf:before {
+  content: "\e9a4";
+}
+
+.icon-basket:before {
+  content: "\e901";
+}
+.icon-shopping:before {
+  content: "\e901";
+}
+.icon-cart:before {
+  content: "\e901";
+}
+.icon-ecommerce:before {
+  content: "\e901";
 }
+.icon-cart1:before {
+  content: "\e93a";
+}
+.icon-apparel:before {
+  content: "\e903";
+}
+.icon-shopping-cart:before {
+  content: "\e900";
+}
+.icon-view-show:before {
+  content: "\e902";
+}
+
+/*------- END OF ICONMOON CSS ----- */
+
 </style>

src/components/Article.vue

@@ -1,74 +1,139 @@
 <template>
     <div class="wrapper">
-        <h2> {{ articleInfo.title }} </h2>
+        <router-link :to="`/article/${articleInfo.id}`">
+            <h2 class="title"> {{ articleInfo.title }} </h2>
+        </router-link>
+
         <router-link :to="`/article/${articleInfo.id}`">
            <img :src="articleInfo.image" alt="" srcset="">
         </router-link>
         <h2> {{ articleInfo.price }}€ </h2>
 
         <button 
-              @click="addArticleToCart(articleInfo.id), incrementCount()" 
-              :class="articleInfo.id">
-              Ajouter
+              @click="addArticleToCart(articleInfo.id), incrementCount(), displayNotification()" 
+              :class="articleInfo.id"
+              class="button is-medium btn-buy is-hidden-mobile">
+              Add to cart
         </button>
+
         <router-link :to="`/article/${articleInfo.id}`">
-           <button>Voir</button>
+           <button class="button is-outlined is-medium is-hidden-mobile">
+               See details
+            </button>
         </router-link>
+        <!-- MOBILE VERSION -->
+        <div class="mobile-btns">
+            <button
+                  @click="addArticleToCart(articleInfo.id), incrementCount(), displayNotification()" 
+                  :class="articleInfo.id"
+                  class="button is-medium btn-buy mobile is-hidden-tablet"> 
+                  <span class="icon-basket"></span> 
+            </button>
+
 
+     <router-link :to="`/article/${articleInfo.id}`">
+        <button class="button is-outlined is-medium mobile is-hidden-tablet">
+            <span class="icon-view-show"></span> 
+         </button>
+     </router-link>
+
+        </div>
     </div>
 </template>
 
 <script>
-import { mapActions } from 'vuex'
+import {mixinArticles} from '@/mixins/mixins'
 export default{
     name: 'ArticleItem',
+    mixins : [mixinArticles],
     props : {
         articleInfo : {
             type : Object,
             default : Object
         }
     },
-    data(){
-        return{
-
-        }
-    },
-    methods : mapActions([
-        'incrementCount',
-        'decrementCount',
-        'addArticleToCart'
-    ]),
-
-    // async mounted(){
-    //     const data = await fetch('https://fakestoreapi.com/products')
-    //     const response = await data.json()
-    //     console.log(response)    
-    // }
 }
 </script>
 
 <style scoped>
 .wrapper{
-    border: 1px solid black;
     width: 30vw;
-    margin: auto;
+    min-width: 30vw;
     box-sizing: border-box;
     padding: 2%;
-    margin-bottom: 2%;
-    height:60vh;
+    height:58.5vh;
     overflow-y: scroll;
-    border: 1px solid grey;
-    margin: 3% 15%;
+    border: 1px solid #D0C9C0;
+}
+
+.wrapper:hover{
+    border-color: #6D8B74;;
+}
+.title{
+    font-size: 1.2rem;
+}
+
+.title:hover{
+    color: #6D8B74;
+}
+
+h2{
+    font-size: 1.4rem;
+    font-weight:bold;
+    margin: 4%;
 }
 
 img{
-    max-width: 30%;
+    max-width: 9vw;
+    width:9vw;
+    max-height: 22vh;
+    height: 22vh;
 }
 
 button{
     font-weight: bold;
-    padding: 1%;
-    width: 5vw;
     margin: 2%;
 }
+.btn-buy{
+    background-color: #6D8B74;
+    color: white; 
+}
+/*-- MEDIA QUERIES ---------- */
+@media(max-width: 1024px){
+    .wrapper{
+       width: 40vw;
+    }
+
+    img{
+        width: fit-content;
+        max-width: 20vw;
+    }
+}
+
+@media(max-width: 425px){
+    .wrapper{
+       width: 80vw;
+    }
+
+    img{
+        width: fit-content;
+        max-width: 55vw;
+    }
+}
+/*------- ICONMOON CSS ----- */
+.icon-basket:before {
+  content: "\e901";
+}
+
+.icon-ecommerce:before {
+  content: "\e901";
+}
+
+.icon-shopping-cart:before {
+  content: "\e900";
+}
+.icon-view-show:before {
+  content: "\e902";
+}
+/*------- END OF ICONMOON CSS ----- */
 </style>