added bulma css buttons

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,45 +1,151 @@
 <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 p-4 is-medium is-right">
+      <!-- Title -->
+      <h1 class="is-hidden-mobile p-2 is-size-3 has-text-weight-bold">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 'buefy'
+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;
 }
+html{
+  background-color: #f7f6f2;
+}
 
-nav {
-  padding: 30px;
+h1{
+  color: #5c7061;
 }
 
-nav a {
-  font-weight: bold;
-  color: #2c3e50;
+.tabs{
+  background-color:#d8d4cc;
+}
+/*------- 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;
 }
 
-nav a.router-link-exact-active {
-  color: #42b983;
+.icon-leaf:before {
+  content: "\e9a4";
 }
 
-.onglet{
-  border: 1px solid black;
-  padding: 1%;
-  margin: 1%;
+.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";
+}
+
+.icon-zoom-in:before {
+  content: "\e987";
+}
+
 </style>

src/components/Article.vue

@@ -1,74 +1,106 @@
 <template>
-    <div class="wrapper">
-        <h2> {{ articleInfo.title }} </h2>
+    <div class="wrapper p-3">
+        <router-link :to="`/article/${articleInfo.id}`">
+            <h2 class="title is-size-4-tablet is-size-5 m-4"> {{ articleInfo.title }} </h2>
+        </router-link>
+
         <router-link :to="`/article/${articleInfo.id}`">
            <img :src="articleInfo.image" alt="" srcset="">
         </router-link>
-        <h2> {{ articleInfo.price }}€ </h2>
+        <h2 class="has-text-weight-bold is-size-4 m-4"> {{ articleInfo.price }}€ </h2>
 
         <button 
-              @click="addArticleToCart(articleInfo.id), incrementCount()" 
-              :class="articleInfo.id">
-              Ajouter
+              @click="addArticleToCart(articleInfo.id), incrementCount(), displayNotification()" 
+              :class="articleInfo.id"
+              class="button m-2 has-text-weight-bold is-medium btn-buy is-hidden-mobile has-text-white">
+              Add to cart
         </button>
+
         <router-link :to="`/article/${articleInfo.id}`">
-           <button>Voir</button>
+           <button class="button m-2 has-text-weight-bold 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 m-2 is-medium has-text-weight-bold btn-buy mobile is-hidden-tablet  has-text-white"> 
+                  <span class="icon-basket"></span> 
+            </button>
+            <!-- Check indentation with Julien -->
+            <router-link :to="`/article/${articleInfo.id}`">
+                <button class="button m-2 has-text-weight-bold 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:hover{
+    color: #6D8B74;
 }
 
 img{
-    max-width: 30%;
+    width:9vw;
+    max-width: 9vw;
+    height: 22vh;
+    max-height: 22vh;
+}
+
+.btn-buy{
+    background-color: #6D8B74;
 }
+/*-- MEDIA QUERIES ---------- */
+@media(max-width: 1024px){
+    .wrapper{
+       width: 40vw;
+    }
 
-button{
-    font-weight: bold;
-    padding: 1%;
-    width: 5vw;
-    margin: 2%;
+    img{
+        width: fit-content;
+        max-width: 20vw;
+    }
 }
+
+@media(max-width: 425px){
+    .wrapper{
+       width: 80vw;
+    }
+
+    img{
+        max-width: 55vw;
+    }
+}
+
 </style>

src/components/CartArticle.vue

@@ -0,0 +1,39 @@
+<template>
+    <div class="wrapper p-3 my-2-tablet my-4 mx-auto is-flex is-justify-content-space-between">
+        <h1 class="is-size-4-tablet is-size-5 has-text-weight-bold">{{ articleInfo.title }} <span class="has-text-black">- {{ articleInfo.price }}€</span> </h1>
+        <button 
+               class="button is-danger has-text-weight-bold"
+               @click="deleteArticle(articleInfo.id)"
+        > Remove </button>
+    </div>
+</template>
+
+<script>
+import { mixinArticles } from '@/mixins/mixins'
+export default{
+    name:'CartArticle',
+    mixins : [mixinArticles],
+    props : {
+        articleInfo : {
+            type : Object,
+            default : Object
+        }
+    },
+}
+</script>
+
+<style scoped>
+.wrapper{
+    border: 1px solid #D0C9C0;
+    width: 98%;
+    height: fit-content !important;
+}
+
+/* MEDIA QUERIES */
+@media(max-width:470px){
+    button{
+        margin-top: 1rem;
+        margin-left: 4%;
+    }
+}
+</style>