artus/CookAssistant
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

adds mdi icons, improves recipe design

Browse Source
This commit is contained in:
Arthur Gerbaud
2019-02-12 14:07:50 +01:00
parent 02bdbf0f2c
commit 8801596de7
9 changed files with 105 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
web/vue/src/components/RecipeDetails.vue
View File

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