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

refactor(frontend): 🚧 rename recipe and meal-plan components

Browse source
This commit is contained in:
hay-kot 2021-07-31 15:07:19 -08:00
parent 5047b3f5af
commit f6b3285ae3
33 changed files with 1111 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

100
frontend.old/src/components/Recipe/CardImage.vue
View file

@ -1,100 +0,0 @@
<template>
<v-img
@click="$emit('click')"
:height="height"
v-if="!fallBackImage"
:src="getImage(slug)"
@load="fallBackImage = false"
@error="fallBackImage = true"
>
<slot> </slot>
</v-img>
<div class="icon-slot" v-else @click="$emit('click')">
<v-icon color="primary" class="icon-position" :size="iconSize">
{{ $globals.icons.primary }}
</v-icon>
<slot> </slot>
</div>
</template>
<script>
import { api } from "@/api";
export default {
props: {
tiny: {
type: Boolean,
default: null,
},
small: {
type: Boolean,
default: null,
},
large: {
type: Boolean,
default: null,
},
iconSize: {
default: 100,
},
slug: {
default: null,
},
imageVersion: {
default: null,
},
height: {
default: 200,
},
},
computed: {
imageSize() {
if (this.tiny) return "tiny";
if (this.small) return "small";
if (this.large) return "large";
return "large";
},
},
watch: {
slug() {
this.fallBackImage = false;
},
},
data() {
return {
fallBackImage: false,
};
},
methods: {
getImage(slug) {
switch (this.imageSize) {
case "tiny":
return api.recipes.recipeTinyImage(slug, this.imageVersion);
case "small":
return api.recipes.recipeSmallImage(slug, this.imageVersion);
case "large":
return api.recipes.recipeImage(slug, this.imageVersion);
}
},
},
};
</script>
<style scoped>
.icon-slot {
position: relative;
}
.icon-slot > div {
top: 0;
position: absolute;
z-index: 1;
}
.icon-position {
opacity: 0.8;
display: flex !important;
position: relative;
margin-left: auto !important;
margin-right: auto !important;
}
</style>