Display food information in the new meal page 🚀

Display the information about a food
GroupeNRM · May 16, 2020 · 6c8bba4 · 6c8bba4
2 parents 8f518b6 + 5b1f71b
commit 6c8bba4
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 28 deletions.
diff --git a/assets/fonts/Gilroy-Light.woff b/assets/fonts/Gilroy-Light.woff
diff --git a/assets/scss/newMeal.scss b/assets/scss/newMeal.scss
@@ -1,5 +1,10 @@
 @import "variables";
 
+@font-face {
+  font-family: Gilroy-Light;
+  src: url("../fonts/Gilroy-Light.woff");
+}
+
 .food-card {
   .img-thumb {
     position: relative;
@@ -139,12 +144,23 @@
 }
 
 .modal-container {
-  width: 300px;
+  position: relative;
+  width: 500px;
   margin: 0 auto;
   padding: 20px 30px;
   background-color: #fff;
   border-radius: 2px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
   transition: all 0.3s ease;
-  font-family: Helvetica, Arial, sans-serif;
+
+  .modal-close {
+    position: absolute;
+    right: -20px;
+    top: -20px;
+    font-size: 30px;
+  }
+}
+
+.modal-main {
+  font-family: Gilroy-Light, serif;
 }
diff --git a/assets/vue/views/newMeal/Food.vue b/assets/vue/views/newMeal/Food.vue
@@ -1,12 +1,14 @@
 <template>
-    <div class="col-md-3 food-card">
-        <div class="img-thumb">
-            <img class="img-fluid" v-bind:src="path + data.picture" v-bind:alt="data.title" :class="{'selected': this.$parent.activeChoice === data.id}" @click="setActive(data.id, data.title, data.picture)">
-            <span @click="showInformation(data.id)"><i class="fas fa-info"></i></span>
-            <FoodInfoModal :id="data.id" v-if="showModal === true"/>
+    <transition name="modal">
+        <div class="col-md-3 food-card">
+            <div class="img-thumb">
+                <img class="img-fluid" v-bind:src="path + data.picture" v-bind:alt="data.title" :class="{'selected': this.$parent.activeChoice === data.id}" @click="setActive(data.id, data.title, data.picture)">
+                <span @click="showInformation(data.id)"><i class="fas fa-info"></i></span>
+                <FoodInfoModal :showModal="showModal" :food="data" v-if="showModal"/>
+            </div>
+            <h5>{{data.title}}</h5>
         </div>
-        <h5>{{data.title}}</h5>
-    </div>
+    </transition>
 </template>
 
 <script>
@@ -31,6 +33,9 @@
                 // Appel le composant parent, nous avons besoin que l'aliment selectionné soit lié au nouveau repas, pas à lui même
                 this.$parent.setActive(index);
                 this.$parent.setTemporaryData(title, picture);
+            },
+            hideInformation() {
+                this.showModal = false;
             }
         }
     }

diff --git a/assets/vue/views/newMeal/FoodInfoModal.vue b/assets/vue/views/newMeal/FoodInfoModal.vue
@@ -1,34 +1,26 @@
 <template>
     <div class="modal-mask">
         <div class="modal-wrapper">
-            <div class="modal-container" v-if="info">
-                // TODO
+            <div class="modal-container">
+                <div class="modal-head border-bottom mb-2">
+                    <h5>{{food.title}}</h5>
+                    <span @click="hideModal" class="modal-close">&times;</span>
+                </div>
+                <div class="modal-main">
+                    {{food.information ? food.information : "Il n'y a pas d'informations concernant cet aliment"}}
+                </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
-    import axios from "axios";
-
     export default {
         name: "FoodInfoModal",
-        props: ['id'],
-        mounted() {
-            this.fetchInfo(this.id);
-        },
-        data: function() {
-            return {
-                info: {}
-            }
-        },
+        props: ['food'],
         methods: {
-            fetchInfo: function (id) {
-                axios.get(`/api/food/${id}`)
-                    .then(response => this.info = response.data['hydra:member'])
-                    .catch(function() {
-                        console.log('Erreur dans le chargement!');
-                    });
+            hideModal() {
+                this.$parent.hideInformation();
             }
         }
     }