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

fix: mealplanner day title card height & alignment (#5561)

Browse source
This commit is contained in:
Kuchenpirat 2025-06-22 22:44:13 +02:00 • committed by GitHub
parent 93cec24f26
commit b77ff9c341
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 54 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

122
frontend/pages/household/mealplan/planner/view.vue
View file

@ -4,14 +4,14 @@
<v-col v-for="(day, index) in plan" :key="index" cols="12" sm="12" md="4" lg="4" xl="2" <v-col v-for="(day, index) in plan" :key="index" cols="12" sm="12" md="4" lg="4" xl="2"
class="col-borders my-1 d-flex flex-column"> class="col-borders my-1 d-flex flex-column">
<v-card class="mb-2 border-left-primary rounded-sm px-2"> <v-card class="mb-2 border-left-primary rounded-sm px-2">
<v-container class="px-0"> <v-container class="px-0 d-flex align-center" height="56px">
<v-row no-gutters style="width: 100%;"> <v-row no-gutters style="width: 100%;">
<v-col cols="10"> <v-col cols="10" class="d-flex align-center">
<p class="pl-2 my-1"> <p class="pl-2 my-1">
{{ $d(day.date, "short") }} {{ $d(day.date, "short") }}
</p> </p>
</v-col> </v-col>
<v-col class="d-flex justify-top" cols="2"> <v-col class="d-flex align-center" cols="2">
<GroupMealPlanDayContextMenu v-if="day.recipes.length" :recipes="day.recipes" /> <GroupMealPlanDayContextMenu v-if="day.recipes.length" :recipes="day.recipes" />
</v-col> </v-col>
</v-row> </v-row>
@ -38,82 +38,68 @@
</v-container> </v-container>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import type { MealsByDate } from "./types"; import type { MealsByDate } from "./types";
import type { ReadPlanEntry } from "~/lib/api/types/meal-plan"; import type { ReadPlanEntry } from "~/lib/api/types/meal-plan";
import GroupMealPlanDayContextMenu from "~/components/Domain/Household/GroupMealPlanDayContextMenu.vue"; import GroupMealPlanDayContextMenu from "~/components/Domain/Household/GroupMealPlanDayContextMenu.vue";
import RecipeCardMobile from "~/components/Domain/Recipe/RecipeCardMobile.vue"; import RecipeCardMobile from "~/components/Domain/Recipe/RecipeCardMobile.vue";
import type { RecipeSummary } from "~/lib/api/types/recipe"; import type { RecipeSummary } from "~/lib/api/types/recipe";
export default defineNuxtComponent({ const props = defineProps<{
components: { mealplans: MealsByDate[];
GroupMealPlanDayContextMenu, }>();
RecipeCardMobile,
}, type DaySection = {
props: { title: string;
mealplans: { meals: ReadPlanEntry[];
type: Array as () => MealsByDate[], };
required: true,
}, type Days = {
}, date: Date;
setup(props) { sections: DaySection[];
type DaySection = { recipes: RecipeSummary[];
title: string; };
meals: ReadPlanEntry[];
const i18n = useI18n();
const plan = computed<Days[]>(() => {
return props.mealplans.reduce((acc, day) => {
const out: Days = {
date: day.date,
sections: [
{ title: i18n.t("meal-plan.breakfast"), meals: [] },
{ title: i18n.t("meal-plan.lunch"), meals: [] },
{ title: i18n.t("meal-plan.dinner"), meals: [] },
{ title: i18n.t("meal-plan.side"), meals: [] },
],
recipes: [],
}; };
type Days = { for (const meal of day.meals) {
date: Date; if (meal.entryType === "breakfast") {
sections: DaySection[]; out.sections[0].meals.push(meal);
recipes: RecipeSummary[]; }
}; else if (meal.entryType === "lunch") {
out.sections[1].meals.push(meal);
}
else if (meal.entryType === "dinner") {
out.sections[2].meals.push(meal);
}
else if (meal.entryType === "side") {
out.sections[3].meals.push(meal);
}
const i18n = useI18n(); if (meal.recipe) {
out.recipes.push(meal.recipe);
}
}
const plan = computed<Days[]>(() => { // Drop empty sections
return props.mealplans.reduce((acc, day) => { out.sections = out.sections.filter(section => section.meals.length > 0);
const out: Days = {
date: day.date,
sections: [
{ title: i18n.t("meal-plan.breakfast"), meals: [] },
{ title: i18n.t("meal-plan.lunch"), meals: [] },
{ title: i18n.t("meal-plan.dinner"), meals: [] },
{ title: i18n.t("meal-plan.side"), meals: [] },
],
recipes: [],
};
for (const meal of day.meals) { acc.push(out);
if (meal.entryType === "breakfast") {
out.sections[0].meals.push(meal);
}
else if (meal.entryType === "lunch") {
out.sections[1].meals.push(meal);
}
else if (meal.entryType === "dinner") {
out.sections[2].meals.push(meal);
}
else if (meal.entryType === "side") {
out.sections[3].meals.push(meal);
}
if (meal.recipe) { return acc;
out.recipes.push(meal.recipe); }, [] as Days[]);
}
}
// Drop empty sections
out.sections = out.sections.filter(section => section.meals.length > 0);
acc.push(out);
return acc;
}, [] as Days[]);
});
return {
plan,
};
},
}); });
</script> </script>