From 3ace510aac0b5c2f4717ee74d37e82544691e20e Mon Sep 17 00:00:00 2001
From: "Phyks (Lucas Verney)" <phyks@phyks.me>
Date: Sat, 3 Mar 2018 11:41:23 +0100
Subject: [PATCH] UI improvements

---
 cuizin/js_src/components/Home.vue   |  5 ++-
 cuizin/js_src/components/Recipe.vue | 56 ++++++++++++++++++-----------
 cuizin/js_src/main.js               |  1 +
 package.json                        |  1 +
 4 files changed, 42 insertions(+), 21 deletions(-)

diff --git a/cuizin/js_src/components/Home.vue b/cuizin/js_src/components/Home.vue
index eab0ac4..18143bc 100644
--- a/cuizin/js_src/components/Home.vue
+++ b/cuizin/js_src/components/Home.vue
@@ -4,7 +4,10 @@
       <v-flex
         v-for="recipe in recipes"
         :key="recipe.title"
-        xs3
+        xs12
+        sm6
+        md3
+        lg2
       >
         <v-card :to="{name: 'Recipe', params: { recipeId: recipe.id }}">
           <v-card-media :src="recipe.picture" height="200px"></v-card-media>
diff --git a/cuizin/js_src/components/Recipe.vue b/cuizin/js_src/components/Recipe.vue
index 63b1ebe..33b8da5 100644
--- a/cuizin/js_src/components/Recipe.vue
+++ b/cuizin/js_src/components/Recipe.vue
@@ -1,32 +1,40 @@
 <template>
-  <v-container grid-list-md>
-    <v-layout row wrap>
-      <v-flex xs6 offset-xs3>
+  <v-container grid-list-md class="panel">
+    <v-layout row>
+      <v-flex xs12 v-if="recipe">
           <h1 class="text-xs-center mt-3 mb-3">
-              {{ this.recipe.title }}
-              <v-btn @click="handleDelete">Delete</v-btn>
+              {{ recipe.title }}
           </h1>
-          <p class="text-xs-center">
-              <img :src="this.recipe.picture" />
+          <p>
           </p>
-          <v-layout row text-xs-center>
+          <p class="text-xs-center">
+              <img :src="recipe.picture" />
+          </p>
+          <v-layout row class="text-xs-center">
             <v-flex xs6>
-              <p><v-icon>timelapse</v-icon> {{ recipe.preparation_time }} mins</p>
+                <p>{{ recipe.nb_person }}</p>
             </v-flex>
             <v-flex xs6>
-              <p><v-icon>whatshot</v-icon> {{ recipe.cooking_time }} mins</p>
+              <p><v-icon>timelapse</v-icon> Preparation: {{ recipe.preparation_time }}&nbsp;mins</p>
+              <p><v-icon>whatshot</v-icon> Cooking: {{ recipe.cooking_time }}&nbsp;mins</p>
             </v-flex>
           </v-layout>
-          <ul>
-            <li v-for="ingredient in this.recipe.ingredients">
-              {{ ingredient }}
-            </li>
+          <p>{{ recipe.short_description }}</p>
+          <h2>Ingredients</h2>
+          <ul class="ml-5">
+              <li v-for="ingredient in recipe.ingredients">
+                  {{ ingredient }}
+              </li>
           </ul>
-          <p>{{ this.recipe.nb_person }}</p>
-          <p>{{ this.recipe.short_description }}</p>
-          <p>{{ this.recipe.instructions }}</p>
-          <p v-if="this.recipe.url">
-              <a :href="this.recipe.url">Original link</a>
+          <h2 class="mt-3">Instructions</h2>
+          <p>{{ recipe.instructions }}</p>
+          <p v-if="recipe.url" class="text-xs-center">
+              <v-btn :href="recipe.url">
+                  <v-icon class="fa-icon">fa-external-link</v-icon>
+              </v-btn>
+              <v-btn @click="handleDelete">
+                  <v-icon>delete</v-icon>
+              </v-btn>
           </p>
       </v-flex>
     </v-layout>
@@ -73,6 +81,14 @@ export default {
 
 <style scoped>
 img {
-    width: 75%;
+    width: 100%;
+}
+
+.panel {
+    max-width: 600px;
+}
+
+.fa-icon {
+    font-size: 20px;
 }
 </style>
diff --git a/cuizin/js_src/main.js b/cuizin/js_src/main.js
index 835a331..2bf5f6b 100644
--- a/cuizin/js_src/main.js
+++ b/cuizin/js_src/main.js
@@ -2,6 +2,7 @@
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue';
 import Vuetify from 'vuetify';
+import 'font-awesome/css/font-awesome.css';
 import 'vuetify/dist/vuetify.min.css';
 
 import App from './App';
diff --git a/package.json b/package.json
index 7028588..43d242a 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "es6-promise": "^4.2.4",
+    "font-awesome": "^4.7.2",
     "isomorphic-fetch": "^2.2.1",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1",