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

meal plan style improvements

Browse Source
This commit is contained in:
vabene1111
2024-04-15 20:12:50 +02:00
parent 4266029e84
commit e5691d0e98
4 changed files with 244 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
vue3/src/components/display/MealPlanCalendarItem.vue
View File

@@ -1,39 +1,39 @@
<template>
<div class="card cv-item meal-plan-card p-0"
:style="{'top': itemTop, 'height': itemHeight, 'border-color': mealPlan.mealType.color}"
:key="value.id"
:class="value.classes"
<v-card class="card cv-item pa-0" hover
:style="{'top': itemTop, 'height': itemHeight, 'border-color': mealPlan.mealType.color}"
:key="value.id"
:class="value.classes"
>
<div class="d-flex flex-row align-items-center">
<div class="flex-column">
<img class="" style="object-fit: cover" :style="{'height': itemHeight, 'width': itemHeight}" :src="mealPlan.recipe.image"
v-if="mealPlan.recipe != undefined && detailedItems"/>
<img class="" style="object-fit: cover" :style="{'height': itemHeight, 'width': itemHeight}" src="../../assets/recipe_no_image.svg"
v-if="detailedItems && ((mealPlan.recipe == undefined && mealPlan.note === '') || (mealPlan.recipe != undefined && mealPlan.recipe.image === null))"/>
</div>
<div class="flex-column flex-grow-0 align-middle justify-content-center">
<div class="card-body p-0 pl-1 align-middle">
<v-card-text class="pa-0">
<div class="d-flex flex-row align-items-center">
<div class="flex-column">
<recipe-image :height="itemHeight" :width="itemHeight" :recipe="mealPlan.recipe"></recipe-image>
</div>
<div class="flex-column flex-grow-0">
<div class="card-body pl-1 pa-1">
<span class="font-light" :class="{'two-line-text': detailedItems,'one-line-text': !detailedItems,}">
<i class="fas fa-shopping-cart fa-xs float-left" v-if="mealPlan.shopping"/>
<i class="fas fa-shopping-cart fa-xs float-left" v-if="mealPlan.shopping"/>
{{ itemTitle }}</span>
</div>
</div>
</div>
</div>
</div>
</v-card-text>
</v-card>
</template>
<script setup lang="ts">
import {computed, PropType} from "vue";
import {IMealPlanNormalizedCalendarItem} from "@/types/MealPlan";
import RecipeImage from "@/components/display/RecipeImage.vue";
let props = defineProps({
value: {type: {} as PropType<IMealPlanNormalizedCalendarItem>, required: true},
itemHeight: {type: String, default: '2.6rem'},
itemHeight: {type: String,},
itemTop: {type: String,},
detailedItems: {type: Boolean, default: true}
})
@@ -52,6 +52,13 @@ const itemTitle = computed(() => {
}
})
const itemImage = computed(() => {
if (mealPlan.value.recipe != undefined && mealPlan.value.recipe.image != undefined && props.detailedItems){
return mealPlan.value.recipe.image
} else {
return recipeDefaultImage
}
})
</script>