UI improvements

This commit is contained in:
Lucas Verney 2018-03-03 11:41:23 +01:00
parent 9aa4756887
commit 3ace510aac
4 changed files with 42 additions and 21 deletions

View File

@ -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>

View File

@ -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">
<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>

View File

@ -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';

View File

@ -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",