From 19262ceffe889e3d3243498ec1ba3b3b69200673 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Mon, 7 Dec 2020 00:09:57 +0100
Subject: [PATCH] Change price display

---
 src/components/GridItem.vue | 7 ++++++-
 src/views/Fruit.vue         | 9 +++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/GridItem.vue b/src/components/GridItem.vue
index 1b7d1c1..834e90c 100644
--- a/src/components/GridItem.vue
+++ b/src/components/GridItem.vue
@@ -12,7 +12,7 @@
 
         <hr />
 
-        <p class="price">{{ "$" + item.price }}</p>
+        <p class="price">${{ item.price | noDecimal }}</p>
       </section>
     </router-link>
   </article>
@@ -22,6 +22,11 @@
 export default {
   props: {
     item: Object
+  },
+  filters: {
+    noDecimal(value) {
+      return parseInt(value).toFixed();
+    }
   }
 };
 </script>
diff --git a/src/views/Fruit.vue b/src/views/Fruit.vue
index 6a1371e..d8a9f20 100644
--- a/src/views/Fruit.vue
+++ b/src/views/Fruit.vue
@@ -14,7 +14,7 @@
 
         <hr />
 
-        <p class="price">{{ "$" + fruit.price }}</p>
+        <p class="price">${{ fruit.price | noDecimal }}</p>
         <div class="alert">
           {{ "This offer " + expirationState }} {{ fruit.expires | moment("from", "now") }}
         </div>
@@ -33,6 +33,11 @@ export default {
       modalOpen: true
     };
   },
+  filters: {
+    noDecimal(value) {
+      return parseInt(value).toFixed();
+    }
+  },
   computed: {
     ...mapState(["fruit"]),
     expirationState() {
@@ -64,7 +69,7 @@ article {
   }
 
   section {
-    padding: 1.5rem 1rem;
+    padding: 1.5rem 2rem;
     background-color: @color-2;
 
     h3 {