adds mdi icons, improves recipe design

web/vue/package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@mdi/font": "^3.4.93",
     "bulma": "^0.7.2",
     "vue": "^2.5.22"
   },

web/vue/src/App.vue

@@ -25,6 +25,7 @@
 
 <script>
 import 'bulma/css/bulma.css'
+import '@mdi/font/css/materialdesignicons.min.css'
 import Heading from './components/Heading.vue'
 import RecipeDetails from './components/RecipeDetails.vue'
 import RecipeList from './components/RecipeList.vue'

web/vue/src/components/Planner.vue

@@ -1,15 +1,19 @@
 <template>
   <div class="box">
-    <button @click="fetchSolution" class="button is-primary">FetchSolution</button>
+    <button @click="fetchSolution"
+            class="button is-primary"
+            v-bind:class="{'is-loading': is_loading }">
+    FetchSolution</button>
     <hr />
     <div v-if="template">
-      <div class="columns is-desktop is-vcentered">
+      <div class="columns is-desktop is-vcentered is-multiline">
         <div v-for="day_meals in itemsGroupedByDay"
-             class="column">
+             class="column is-one-quarter">
           <strong> {{ day_meals[0] }}</strong>
           <div v-for="meal in day_meals[1]">
             <div v-if="meal.value" class="tags has-addons">
-              <span class="tag is-info">{{ meal.value.title }}</span>
+              <span class="tag is-info">{{ meal.key[1] }}</span>
+              <span class="tag is-light">{{ meal.value.title }}</span>
               <a @click="unsetMeal(meal.key)"
                  class="tag is-delete"></a>
             </div>
@@ -52,11 +56,16 @@ export default {
   data () {
     return {
     template: null,
+    is_loading: false,
   };},
   methods: {
     fetchSolution: function() {
+      this.is_loading = true;
       fetch("http://localhost:8000/api/solver/one")
-        .then((res) => res.json())
+        .then((res) => {
+          this.is_loading = false;
+          return res.json();}
+        )
         .then((data) => this.template = data)
         .catch((err) => console.log(err));
     },

web/vue/src/components/RecipeDetails.vue

@@ -1,16 +1,27 @@
 <template>
-  <div class="container box">
-  <button @click="$emit('close')" class="button is-pulled-left">Return to list</button>
-    <h4 class="title">{{ item.title }}</h4>
-    <h6 class="subtitle">{{ categories[item.category].name }}</h6>
-    <p><strong>Ingredients : </strong></p>
-    <ul>
-      <li v-for="ing in item.ingredients.split('\n')">{{ ing }}</li>
-    </ul>
-    <button @click="$emit('delete', item.id)"
-            class="button is-danger is-pulled-right">
-      DELETE !
-    </button>
+  <div class="columns">
+    <div class="column is-narrow">
+      <a @click="$emit('close')" class="has-text-dark">
+        <span class="icon is-large">
+          <i class="mdi mdi-48px mdi-view-list"></i>
+        </span>
+      </a>
+    </div>
+    <div class="column">
+      <h4 class="title">{{ item.title }}</h4>
+      <h6 class="subtitle">{{ categories[item.category].name }}</h6>
+      <p><strong>Ingredients</strong></p>
+      <ul>
+        <li v-for="ing in item.ingredients.split('\n')">{{ ing }}</li>
+      </ul>
+    </div>
+    <div class="column is-narrow">
+      <a @click="$emit('delete', item.id)">
+        <span class="icon is-large has-text-danger">
+          <i class="mdi mdi-48px mdi-delete-forever"></i>
+        </span>
+      </a>
+    </div>
   </div>
 </template>
 

web/vue/src/components/RecipeList.vue

@@ -3,34 +3,47 @@
     <div v-if="active_category == -1" class="columns is-multiline is-mobile">
       <div v-for="c in categories" :key="c.id" class="column is-one-quarter-desktop is-half-tablet">
         <button @click="setActiveCategory(c.id)"
-          class="button is-large is-primary has-text-dark button-block">
-        {{ c.name }}</button>
+          class="button is-large is-info is-fullwidth button-block">
+          <span class="icon is-large">
+            <i class="mdi mdi-24px" v-bind:class="c.icon"></i>
+          </span>
+          <br />
+          <p>{{ c.name }}</p></button>
       </div>
     </div>
-    <div v-else class="box">
-      <button @click="setActiveCategory(-1)" class="button is-pulled-left">Categories</button>
-      <h2 class="subtitle">{{ categories[active_category].name }}</h2>
-      <ul>
-        <li v-for="item in displayed" :key="item.id" class="has-text-left">
-          <a href=""
-             @click.prevent="$emit(
-               'open-details',
-               items.findIndex((i) => i.id ==item.id))">
-          {{ item.title }}</a>
-        </li>
-      </ul>
+    <div v-else class="columns">
+      <div class="column is-narrow">
+        <a @click="setActiveCategory(-1)" class="has-text-dark">
+          <span class="icon is-large" >
+            <i class="mdi mdi-48px mdi-view-grid"></i>
+          </span>
+        </a>
+      </div>
+      <div class="column">
+        <h2 class="subtitle">{{ categories[active_category].name }}</h2>
+        <ul class="content">
+          <li v-for="item in displayed" :key="item.id" class="has-text-left">
+            <a href=""
+               @click.prevent="$emit(
+                 'open-details',
+                 items.findIndex((i) => i.id ==item.id))">
+            {{ item.title }}</a>
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 export const categories = [
-  {id: 0, name: "Petit-déjeuner"},
-  {id: 1, name: "Entrée"},
-  {id: 2, name: "Plat principal"},
-  {id: 3, name: "Dessert"}
+  {id: 0, name: "Petit-déjeuner", icon: "mdi-food-croissant"},
+  {id: 1, name: "Entrée", icon: "mdi-bowl"},
+  {id: 2, name: "Plat principal", icon: "mdi-food"},
+  {id: 3, name: "Dessert", icon: "mdi-cupcake"}
 ];
 
+
 export default {
   name: 'RecipeList',
   props: ["items"],
@@ -57,8 +70,7 @@ export default {
 
 <style scoped>
   .button-block {
-    width: 200px;
-    height: 200px;
+    min-height: 150px;
   }
 
   .li {