added loading animation to main search page
This commit is contained in:
vabene1111
@ -1115,6 +1115,9 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.recipes = Array(this.ui.page_size).fill({loading:true})
|
||||
|
||||
this.$nextTick(function () {
|
||||
if (this.$cookies.isKey(UI_COOKIE_NAME)) {
|
||||
this.ui = Object.assign({}, this.ui, this.$cookies.get(UI_COOKIE_NAME))
|
||||
|
||||
@ -1,15 +1,47 @@
|
||||
<template>
|
||||
<div>
|
||||
<template v-if="recipe && recipe.loading">
|
||||
<b-card no-body v-hover>
|
||||
<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>
|
||||
|
||||
<b-card-body class="p-4">
|
||||
<h6>
|
||||
<b-skeleton width="95%"></b-skeleton>
|
||||
</h6>
|
||||
|
||||
<b-card-text>
|
||||
<b-skeleton height="12px" :width="(45 + Math.random() * 45).toString() + '%'"></b-skeleton>
|
||||
<b-skeleton height="12px" :width="(20 + Math.random() * 25).toString() + '%'"></b-skeleton>
|
||||
<b-skeleton height="12px" :width="(30 + Math.random() * 35).toString() + '%'"></b-skeleton>
|
||||
</b-card-text>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</template>
|
||||
<template v-else>
|
||||
<b-card no-body v-hover v-if="recipe">
|
||||
|
||||
<a :href="this.recipe.id !== undefined ? resolveDjangoUrl('view_recipe', this.recipe.id) : null">
|
||||
<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 float-right text-right pt-2 pr-1" v-if="show_context_menu">
|
||||
<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 float-right text-right pt-2 pr-1"
|
||||
v-if="show_context_menu">
|
||||
<a>
|
||||
<recipe-context-menu :recipe="recipe" class="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.working_time !== 0 || recipe.waiting_time !== 0">
|
||||
<b-badge pill variant="light" class="mt-1 font-weight-normal" v-if="recipe.working_time !== 0"><i class="fa fa-clock"></i> {{ working_time }} </b-badge>
|
||||
<b-badge pill variant="secondary" class="mt-1 font-weight-normal" v-if="recipe.waiting_time !== 0"><i class="fa fa-pause"></i> {{ waiting_time }} </b-badge>
|
||||
<div class="card-img-overlay w-50 d-flex flex-column justify-content-left float-left text-left pt-2"
|
||||
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">
|
||||
<i
|
||||
class="fa fa-clock"></i> {{ working_time }}
|
||||
</b-badge>
|
||||
<b-badge pill variant="secondary" class="mt-1 font-weight-normal"
|
||||
v-if="recipe.waiting_time !== 0">
|
||||
<i class="fa fa-pause"></i> {{ waiting_time }}
|
||||
</b-badge>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
@ -34,14 +66,17 @@
|
||||
</template>
|
||||
<p class="mt-1">
|
||||
<last-cooked :recipe="recipe"></last-cooked>
|
||||
<keywords-component :recipe="recipe" style="margin-top: 4px; position: relative; z-index: 3;"></keywords-component>
|
||||
<keywords-component :recipe="recipe"
|
||||
style="margin-top: 4px; position: relative; z-index: 3;"></keywords-component>
|
||||
</p>
|
||||
<transition name="fade" mode="in-out">
|
||||
<div class="row mt-3" v-if="show_detail">
|
||||
<div class="col-md-12">
|
||||
<h6 class="card-title"><i class="fas fa-pepper-hot"></i> {{ $t("Ingredients") }}</h6>
|
||||
<h6 class="card-title"><i class="fas fa-pepper-hot"></i> {{ $t("Ingredients") }}
|
||||
</h6>
|
||||
|
||||
<ingredients-card :steps="recipe.steps" :header="false" :detailed="false" :servings="recipe.servings" />
|
||||
<ingredients-card :steps="recipe.steps" :header="false" :detailed="false"
|
||||
:servings="recipe.servings"/>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
@ -52,14 +87,19 @@
|
||||
</b-card-text>
|
||||
</b-card-body>
|
||||
|
||||
<b-card-footer v-if="footer_text !== undefined"> <i v-bind:class="footer_icon"></i> {{ footer_text }} </b-card-footer>
|
||||
<b-card-footer v-if="footer_text !== undefined"><i v-bind:class="footer_icon"></i> {{ footer_text }}
|
||||
</b-card-footer>
|
||||
</b-card>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import RecipeContextMenu from "@/components/RecipeContextMenu"
|
||||
import KeywordsComponent from "@/components/KeywordsComponent"
|
||||
import { resolveDjangoUrl, ResolveUrlMixin, calculateHourMinuteSplit } from "@/utils/utils"
|
||||
import {resolveDjangoUrl, ResolveUrlMixin, calculateHourMinuteSplit} from "@/utils/utils"
|
||||
import RecipeRating from "@/components/RecipeRating"
|
||||
import moment from "moment/moment"
|
||||
import Vue from "vue"
|
||||
@ -71,16 +111,29 @@ Vue.prototype.moment = moment
|
||||
export default {
|
||||
name: "RecipeCard",
|
||||
mixins: [ResolveUrlMixin],
|
||||
components: { LastCooked, RecipeRating, KeywordsComponent, "recipe-context-menu": RecipeContextMenu, IngredientsCard },
|
||||
components: {
|
||||
LastCooked,
|
||||
RecipeRating,
|
||||
KeywordsComponent,
|
||||
"recipe-context-menu": RecipeContextMenu,
|
||||
IngredientsCard
|
||||
},
|
||||
props: {
|
||||
recipe: Object,
|
||||
meal_plan: Object,
|
||||
footer_text: String,
|
||||
footer_icon: String,
|
||||
detailed: { type: Boolean, default: true },
|
||||
show_context_menu: { type: Boolean, default: true }
|
||||
detailed: {type: Boolean, default: true},
|
||||
show_context_menu: {type: Boolean, default: true}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
placeholder_image: window.IMAGE_PLACEHOLDER,
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
},
|
||||
mounted() {},
|
||||
computed: {
|
||||
show_detail: function () {
|
||||
return this.recipe?.steps !== undefined && this.detailed
|
||||
@ -99,14 +152,14 @@ export default {
|
||||
return this.recipe.image
|
||||
}
|
||||
},
|
||||
working_time: function() {
|
||||
return calculateHourMinuteSplit(this.recipe.working_time)},
|
||||
waiting_time: function() {
|
||||
return calculateHourMinuteSplit(this.recipe.waiting_time)},
|
||||
working_time: function () {
|
||||
return calculateHourMinuteSplit(this.recipe.working_time)
|
||||
},
|
||||
methods: {
|
||||
|
||||
waiting_time: function () {
|
||||
return calculateHourMinuteSplit(this.recipe.waiting_time)
|
||||
},
|
||||
},
|
||||
methods: {},
|
||||
directives: {
|
||||
hover: {
|
||||
inserted: function (el) {
|
||||
@ -127,7 +180,9 @@ export default {
|
||||
.fade-leave-active {
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user