mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-01 12:18:45 -05:00
Code Issues Packages Projects Releases Wiki Activity

added loading animation to main search page

Browse Source
This commit is contained in:
vabene1111
2022-09-15 20:53:22 +02:00
parent 459be74a7c
commit e06c82297d
2 changed files with 114 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
vue/src/apps/RecipeSearchView/RecipeSearchView.vue
View File

@@ -1115,6 +1115,9 @@ export default {
}, },
}, },
mounted() { mounted() {
this.recipes = Array(this.ui.page_size).fill({loading:true})
this.$nextTick(function () { this.$nextTick(function () {
if (this.$cookies.isKey(UI_COOKIE_NAME)) { if (this.$cookies.isKey(UI_COOKIE_NAME)) {
this.ui = Object.assign({}, this.ui, this.$cookies.get(UI_COOKIE_NAME)) this.ui = Object.assign({}, this.ui, this.$cookies.get(UI_COOKIE_NAME))

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

@@ -1,65 +1,105 @@
<template> <template>
<b-card no-body v-hover v-if="recipe"> <div>
<a :href="this.recipe.id !== undefined ? resolveDjangoUrl('view_recipe', this.recipe.id) : null"> <template v-if="recipe && recipe.loading">
<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> <b-card no-body v-hover>
<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="placeholder_image"
<a> v-bind:alt="$t('Recipe_Image')" top></b-card-img-lazy>
<recipe-context-menu :recipe="recipe" class="float-right" v-if="recipe !== null"></recipe-context-menu>
</a> <b-card-body class="p-4">
</div> <h6>
<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-skeleton width="95%"></b-skeleton>
<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> </h6>
<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> <b-card-text>
</a> <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">
<b-card-body class="p-4">
<h6>
<a :href="this.recipe.id !== undefined ? resolveDjangoUrl('view_recipe', this.recipe.id) : null"> <a :href="this.recipe.id !== undefined ? resolveDjangoUrl('view_recipe', this.recipe.id) : null">
<template v-if="recipe !== null">{{ recipe.name }}</template> <b-card-img-lazy style="height: 15vh; object-fit: cover" class="" :src="recipe_image"
<template v-else>{{ meal_plan.title }}</template> 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>
</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>
</a> </a>
</h6>
<b-card-text style="text-overflow: ellipsis"> <b-card-body class="p-4">
<template v-if="recipe !== null"> <h6>
<recipe-rating :recipe="recipe"></recipe-rating> <a :href="this.recipe.id !== undefined ? resolveDjangoUrl('view_recipe', this.recipe.id) : null">
<template v-if="recipe.description !== null && recipe.description !== undefined"> <template v-if="recipe !== null">{{ recipe.name }}</template>
<template v-else>{{ meal_plan.title }}</template>
</a>
</h6>
<b-card-text style="text-overflow: ellipsis">
<template v-if="recipe !== null">
<recipe-rating :recipe="recipe"></recipe-rating>
<template v-if="recipe.description !== null && recipe.description !== undefined">
<span v-if="recipe.description.length > text_length"> <span v-if="recipe.description.length > text_length">
{{ recipe.description.substr(0, text_length) + "\u2026" }} {{ recipe.description.substr(0, text_length) + "\u2026" }}
</span> </span>
<span v-if="recipe.description.length <= text_length"> <span v-if="recipe.description.length <= text_length">
{{ recipe.description }} {{ recipe.description }}
</span> </span>
</template> </template>
<p class="mt-1"> <p class="mt-1">
<last-cooked :recipe="recipe"></last-cooked> <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"
</p> style="margin-top: 4px; position: relative; z-index: 3;"></keywords-component>
<transition name="fade" mode="in-out"> </p>
<div class="row mt-3" v-if="show_detail"> <transition name="fade" mode="in-out">
<div class="col-md-12"> <div class="row mt-3" v-if="show_detail">
<h6 class="card-title"><i class="fas fa-pepper-hot"></i> {{ $t("Ingredients") }}</h6> <div class="col-md-12">
<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"
</div> :servings="recipe.servings"/>
</div> </div>
</transition> </div>
</transition>
<b-badge pill variant="info" v-if="!recipe.internal">{{ $t("External") }}</b-badge> <b-badge pill variant="info" v-if="!recipe.internal">{{ $t("External") }}</b-badge>
</template> </template>
<template v-else>{{ meal_plan.note }}</template> <template v-else>{{ meal_plan.note }}</template>
</b-card-text> </b-card-text>
</b-card-body> </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>
</template>
</div>
<b-card-footer v-if="footer_text !== undefined"> <i v-bind:class="footer_icon"></i> {{ footer_text }} </b-card-footer>
</b-card>
</template> </template>
<script> <script>
import RecipeContextMenu from "@/components/RecipeContextMenu" import RecipeContextMenu from "@/components/RecipeContextMenu"
import KeywordsComponent from "@/components/KeywordsComponent" 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 RecipeRating from "@/components/RecipeRating"
import moment from "moment/moment" import moment from "moment/moment"
import Vue from "vue" import Vue from "vue"
@@ -71,16 +111,29 @@ Vue.prototype.moment = moment
export default { export default {
name: "RecipeCard", name: "RecipeCard",
mixins: [ResolveUrlMixin], mixins: [ResolveUrlMixin],
components: { LastCooked, RecipeRating, KeywordsComponent, "recipe-context-menu": RecipeContextMenu, IngredientsCard }, components: {
LastCooked,
RecipeRating,
KeywordsComponent,
"recipe-context-menu": RecipeContextMenu,
IngredientsCard
},
props: { props: {
recipe: Object, recipe: Object,
meal_plan: Object, meal_plan: Object,
footer_text: String, footer_text: String,
footer_icon: String, footer_icon: String,
detailed: { type: Boolean, default: true }, detailed: {type: Boolean, default: true},
show_context_menu: { type: Boolean, default: true } show_context_menu: {type: Boolean, default: true}
},
data() {
return {
placeholder_image: window.IMAGE_PLACEHOLDER,
}
},
mounted() {
}, },
mounted() {},
computed: { computed: {
show_detail: function () { show_detail: function () {
return this.recipe?.steps !== undefined && this.detailed return this.recipe?.steps !== undefined && this.detailed
@@ -99,14 +152,14 @@ export default {
return this.recipe.image return this.recipe.image
} }
}, },
working_time: function() { working_time: function () {
return calculateHourMinuteSplit(this.recipe.working_time)}, return calculateHourMinuteSplit(this.recipe.working_time)
waiting_time: function() { },
return calculateHourMinuteSplit(this.recipe.waiting_time)}, waiting_time: function () {
}, return calculateHourMinuteSplit(this.recipe.waiting_time)
methods: { },
}, },
methods: {},
directives: { directives: {
hover: { hover: {
inserted: function (el) { inserted: function (el) {
@@ -127,7 +180,9 @@ export default {
.fade-leave-active { .fade-leave-active {
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;
} }
</style> </style>