cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

cookbook view refactored, minor ui fixes

Browse Source
This commit is contained in:
Kaibu
2021-09-13 19:28:16 +02:00
parent 0501dd9a0a
commit fd8797e2b7
12 changed files with 3956 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
vue/src/components/RecipeCard.vue
View File

@ -6,12 +6,20 @@
<b-card-img-lazy style="height: 15vh; object-fit: cover" class="" :src=recipe_image
v-bind:alt="$t('Recipe_Image')"
top></b-card-img-lazy>
<div class="card-img-overlay h-100 d-flex flex-column justify-content-right"
style="float:right; text-align: right; padding-top: 10px; padding-right: 5px">
<div class="card-img-overlay h-100 d-flex flex-column justify-content-right float-right text-right pt-2 pr-1">
<a>
<recipe-context-menu :recipe="recipe" style="float:right" v-if="recipe !== null"></recipe-context-menu>
<recipe-context-menu :recipe="recipe" class="float-right" v-if="recipe !== null"></recipe-context-menu>
</a>
</div>
<div class="card-img-overlay w-50 d-flex flex-column justify-content-left float-left text-left pt-2"
v-if="recipe.waiting_time !== 0">
<b-badge pill variant="light" class="mt-1 font-weight-normal"><i class="fa fa-clock"></i>
{{ recipe.working_time }} {{ $t('min') }}
</b-badge>
<b-badge pill variant="secondary" class="mt-1 font-weight-normal"><i class="fa fa-pause"></i>
{{ recipe.waiting_time }} {{ $t('min') }}
</b-badge>
</div>
</a>
@ -25,18 +33,31 @@
<template v-if="recipe !== null">
<recipe-rating :recipe="recipe"></recipe-rating>
<template v-if="recipe.description !== null">
<span v-if="recipe.description.length > 120">
{{ recipe.description.substr(0, 120) + "\u2026" }}
<span v-if="recipe.description.length > text_length">
{{ recipe.description.substr(0, text_length) + "\u2026" }}
</span>
<span v-if="recipe.description.length <= 120">
<span v-if="recipe.description.length <= text_length">
{{ recipe.description }}
</span>
</template>
<br/> <!-- TODO UGLY! -->
<last-cooked :recipe="recipe"></last-cooked>
<keywords :recipe="recipe" style="margin-top: 4px"></keywords>
<p class="mt-1">
<last-cooked :recipe="recipe"></last-cooked>
<keywords :recipe="recipe" style="margin-top: 4px"></keywords>
</p>
<div class="row mt-3" v-if="detailed">
<div class="col-md-12">
<h6 class="card-title"><i class="fas fa-pepper-hot"></i> {{ $t('Ingredients') }}</h6>
<table class="table table-sm text-wrap">
<!-- eslint-disable vue/no-v-for-template-key-on-child -->
<template v-for="s in recipe.steps">
<template v-for="i in s.ingredients">
<Ingredient :detailed="false" :ingredient="i" :ingredient_factor="1" :key="i.id"></Ingredient>
</template>
</template>
<!-- eslint-enable vue/no-v-for-template-key-on-child -->
</table>
</div>
</div>
<b-badge pill variant="info" v-if="!recipe.internal">{{ $t('External') }}</b-badge>
<!-- <b-badge pill variant="success"
@ -65,6 +86,7 @@ import RecipeRating from "@/components/RecipeRating";
import moment from "moment/moment";
import Vue from "vue";
import LastCooked from "@/components/LastCooked";
import Ingredient from "./Ingredient";
Vue.prototype.moment = moment
@ -73,18 +95,30 @@ export default {
mixins: [
ResolveUrlMixin,
],
components: {LastCooked, RecipeRating, Keywords, RecipeContextMenu},
components: {LastCooked, RecipeRating, Keywords, RecipeContextMenu, Ingredient},
props: {
recipe: Object,
meal_plan: Object,
footer_text: String,
footer_icon: String,
footer_icon: String
},
data() {
return {
recipe_image: '',
}
},
computed: {
detailed: function () {
return this.recipe.steps !== undefined;
},
text_length: function () {
if (this.detailed) {
return 200
} else {
return 120
}
}
},
mounted() {
if (this.recipe == null || this.recipe.image === null) {