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

add rating to recipe card

Browse Source
This commit is contained in:
smilerz
2023-12-20 13:51:04 -06:00
parent 4de9be5c89
commit 089677d799
2 changed files with 75 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,8 +2,7 @@
<div> <div>
<template v-if="recipe && recipe.loading"> <template v-if="recipe && recipe.loading">
<b-card no-body v-hover style="height: 100%"> <b-card no-body v-hover style="height: 100%">
<b-card-img-lazy style="height: 15vh; object-fit: cover" class="" :src="placeholder_image" <b-card-img-lazy style="height: 15vh; object-fit: cover" class="" :src="placeholder_image" v-bind:alt="$t('Recipe_Image')" top></b-card-img-lazy>
v-bind:alt="$t('Recipe_Image')" top></b-card-img-lazy>
<b-card-body class="p-4"> <b-card-body class="p-4">
<h6> <h6>
@ -20,12 +19,10 @@
</template> </template>
<template v-else> <template v-else>
<b-card no-body v-hover v-if="recipe" style="height: 100%"> <b-card no-body v-hover v-if="recipe" style="height: 100%">
<a :href="recipe_link"> <a :href="recipe_link">
<div class="content"> <div class="content">
<div class="content-overlay" v-if="recipe.description !== null && recipe.description !== ''"></div> <div class="content-overlay" v-if="recipe.description !== null && recipe.description !== ''"></div>
<b-card-img-lazy style="height: 15vh; object-fit: cover" class="" :src="recipe_image" <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>
v-bind:alt="$t('Recipe_Image')" top></b-card-img-lazy>
<div class="content-details"> <div class="content-details">
<p class="content-text"> <p class="content-text">
@ -33,17 +30,21 @@
</p> </p>
</div> </div>
<div class="card-img-overlay d-flex flex-column justify-content-left float-left text-left pt-2" style="width:40%" <b-row class="card-img-overlay pt-1">
v-if="recipe.working_time !== 0 || recipe.waiting_time !== 0"> <b-col cols="6">
<div v-if="recipe.working_time !== 0 || recipe.waiting_time !== 0">
<b-badge pill variant="light" class="mt-1 font-weight-normal" v-if="recipe.working_time !== 0 && recipe.working_time !== undefined"> <b-badge pill variant="light" class="mt-1 font-weight-normal" v-if="recipe.working_time !== 0 && recipe.working_time !== undefined">
<i <i class="fa fa-clock"></i> {{ working_time }}
class="fa fa-clock"></i> {{ working_time }}
</b-badge> </b-badge>
<b-badge pill variant="secondary" class="mt-1 font-weight-normal" <b-badge pill variant="secondary" class="mt-1 font-weight-normal" v-if="recipe.waiting_time !== 0 && recipe.waiting_time !== undefined">
v-if="recipe.waiting_time !== 0 && recipe.waiting_time !== undefined">
<i class="fa fa-pause"></i> {{ waiting_time }} <i class="fa fa-pause"></i> {{ waiting_time }}
</b-badge> </b-badge>
</div> </div>
</b-col>
<b-col cols="6" class="text-right">
<recipe-rating :recipe="recipe" :pill="true"></recipe-rating>
</b-col>
</b-row>
</div> </div>
</a> </a>
@ -56,13 +57,15 @@
</a> </a>
</div> </div>
<div class="justify-content-end"> <div class="justify-content-end">
<recipe-context-menu :recipe="recipe" class="justify-content-end float-right align-items-end pr-0" <recipe-context-menu
:recipe="recipe"
class="justify-content-end float-right align-items-end pr-0"
:disabled_options="context_disabled_options" :disabled_options="context_disabled_options"
v-if="recipe !== null && show_context_menu"></recipe-context-menu> v-if="recipe !== null && show_context_menu"
></recipe-context-menu>
</div> </div>
</div> </div>
<b-card-text style="text-overflow: ellipsis"> <b-card-text style="text-overflow: ellipsis">
<template v-if="recipe !== null"> <template v-if="recipe !== null">
<div v-if="show_detail"> <div v-if="show_detail">
@ -71,34 +74,29 @@
<p class="mt-1 mb-1"> <p class="mt-1 mb-1">
<last-cooked :recipe="recipe"></last-cooked> <last-cooked :recipe="recipe"></last-cooked>
<keywords-component :recipe="recipe" :limit="3" :enable_keyword_links="enable_keyword_links" <keywords-component
style="margin-top: 4px; position: relative; z-index: 3;"></keywords-component> :recipe="recipe"
:limit="3"
:enable_keyword_links="enable_keyword_links"
style="margin-top: 4px; position: relative; z-index: 3"
></keywords-component>
</p> </p>
<transition name="fade" mode="in-out"> <transition name="fade" mode="in-out">
<div class="row mt-3" v-if="show_detail"> <div class="row mt-3" v-if="show_detail">
<div class="col-md-12"> <div class="col-md-12">
<h6 class="card-title"><i class="fas fa-pepper-hot"></i> {{ $t("Ingredients") }} <h6 class="card-title"><i class="fas fa-pepper-hot"></i> {{ $t("Ingredients") }}</h6>
</h6>
<ingredients-card <ingredients-card :steps="recipe.steps" :header="false" :detailed="false" :servings="recipe.servings" />
:steps="recipe.steps"
:header="false"
:detailed="false"
:servings="recipe.servings"/>
</div> </div>
</div> </div>
</transition> </transition>
<b-badge pill variant="info" v-if="recipe.internal !== undefined && !recipe.internal">{{ $t("External") }}</b-badge> <b-badge pill variant="info" v-if="recipe.internal !== undefined && !recipe.internal">{{ $t("External") }}</b-badge>
</template> </template>
</b-card-text> </b-card-text>
</b-card-body> </b-card-body>
</b-card> </b-card>
</template> </template>
</div> </div>
<!-- <!--
@ -123,14 +121,14 @@
</template> </template>
<script> <script>
import RecipeContextMenu from "@/components/RecipeContextMenu" import IngredientsCard from "@/components/IngredientsCard"
import KeywordsComponent from "@/components/KeywordsComponent" import KeywordsComponent from "@/components/KeywordsComponent"
import {resolveDjangoUrl, ResolveUrlMixin, calculateHourMinuteSplit} from "@/utils/utils" import LastCooked from "@/components/LastCooked"
import RecipeContextMenu from "@/components/RecipeContextMenu"
import RecipeRating from "@/components/RecipeRating" import RecipeRating from "@/components/RecipeRating"
import { ResolveUrlMixin, calculateHourMinuteSplit, resolveDjangoUrl } from "@/utils/utils"
import moment from "moment/moment" import moment from "moment/moment"
import Vue from "vue" import Vue from "vue"
import LastCooked from "@/components/LastCooked"
import IngredientsCard from "@/components/IngredientsCard"
Vue.prototype.moment = moment Vue.prototype.moment = moment
@ -141,7 +139,8 @@ export default {
LastCooked, LastCooked,
KeywordsComponent, KeywordsComponent,
"recipe-context-menu": RecipeContextMenu, "recipe-context-menu": RecipeContextMenu,
IngredientsCard IngredientsCard,
RecipeRating,
}, },
props: { props: {
recipe: Object, recipe: Object,
@ -161,8 +160,7 @@ export default {
} }
}, },
mounted() { mounted() {},
},
computed: { computed: {
show_detail: function () { show_detail: function () {
return this.recipe?.steps !== undefined && this.detailed return this.recipe?.steps !== undefined && this.detailed
@ -182,11 +180,11 @@ export default {
}, },
recipe_link: function () { recipe_link: function () {
if (this.open_recipe_on_click) { if (this.open_recipe_on_click) {
return this.recipe.id !== undefined ? resolveDjangoUrl('view_recipe', this.recipe.id) : null return this.recipe.id !== undefined ? resolveDjangoUrl("view_recipe", this.recipe.id) : null
} else { } else {
return "#" return "#"
} }
} },
}, },
methods: {}, methods: {},
directives: { directives: {
@ -210,8 +208,7 @@ export default {
transition: opacity 0.5s; transition: opacity 0.5s;
} }
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
{
opacity: 0; opacity: 0;
} }

22
vue/src/components/RecipeRating.vue
View File

@ -1,24 +1,30 @@
<template> <template>
<div> <div>
<span class="d-inline" v-if="recipe.rating > 0"> <span class="d-inline" v-if="recipe.rating > 0">
<div v-if="!pill">
<i class="fas fa-star fa-xs text-primary" v-for="i in Math.floor(recipe.rating)" v-bind:key="i"></i> <i class="fas fa-star fa-xs text-primary" v-for="i in Math.floor(recipe.rating)" v-bind:key="i"></i>
<i class="fas fa-star-half-alt fa-xs text-primary" v-if="recipe.rating % 1 > 0"></i> <i class="fas fa-star-half-alt fa-xs text-primary" v-if="recipe.rating % 1 > 0"></i>
<i class="far fa-star fa-xs text-secondary" v-for="i in (5 - Math.ceil(recipe.rating))" v-bind:key="i + 10"></i> <i class="far fa-star fa-xs text-secondary" v-for="i in 5 - Math.ceil(recipe.rating)" v-bind:key="i + 10"></i>
</div>
<div v-else>
<b-badge pill variant="light" class="mt-1 font-weight-normal">
<i class="fas fa-star fa-xs text-dark" v-for="i in Math.floor(recipe.rating)" v-bind:key="i"></i>
<i class="fas fa-star-half-alt fa-xs text-dark" v-if="recipe.rating % 1 > 0"></i>
<i class="far fa-star fa-xs text-dark" v-for="i in 5 - Math.ceil(recipe.rating)" v-bind:key="i + 10"></i>
</b-badge>
</div>
</span> </span>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: "RecipeRating", name: "RecipeRating",
props: { props: {
recipe: Object recipe: Object,
} pill: { required: false, type: Boolean, default: false },
},
} }
</script> </script>
<style scoped> <style scoped></style>
</style>