Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-22 14:49:40 +02:00
Code Issues Releases Activity

fallback to icon when no image (#414)

Browse source 
Co-authored-by: hay-kot <hay-kot@pm.me>
This commit is contained in:
Hayden 2021-05-20 19:48:29 -08:00 • committed by GitHub
parent dcd9567059
commit 53e97c5315
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 31 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

18
frontend/src/components/Recipe/RecipeCard.vue
View file

@ -7,7 +7,10 @@
@click="$emit('click')"
min-height="275"
>
<v-img height="200" :src="getImage(slug)">
<v-img height="200" class="d-flex" :src="getImage(slug)" @error="fallBackImage = true">
<v-icon v-if="fallBackImage" color="primary" class="icon-position" size="200">
mdi-silverware-variant
</v-icon>
<v-expand-transition v-if="description">
<div v-if="hover" class="d-flex transition-fast-in-fast-out secondary v-card--reveal " style="height: 100%;">
<v-card-text class="v-card--text-show white--text">
@ -57,6 +60,11 @@ export default {
default: true,
},
},
data() {
return {
fallBackImage: false,
};
},
methods: {
getImage(image) {
return api.recipes.recipeSmallImage(image);
@ -83,4 +91,12 @@ export default {
overflow: hidden;
text-overflow: ellipsis;
}
.icon-position {
opacity: 0.8;
display: flex !important;
position: relative;
margin-left: auto !important;
margin-right: auto !important;
}
</style>