diff --git a/frontend/components/Domain/Recipe/RecipePrintView.vue b/frontend/components/Domain/Recipe/RecipePrintView.vue index 18c73757e50b..06fbf2359b70 100644 --- a/frontend/components/Domain/Recipe/RecipePrintView.vue +++ b/frontend/components/Domain/Recipe/RecipePrintView.vue @@ -1,68 +1,58 @@ @@ -70,8 +60,16 @@ import { defineComponent } from "@nuxtjs/composition-api"; // @ts-ignore vue-markdown has no types import VueMarkdown from "@adapttive/vue-markdown"; +import { computed } from "@vue/reactivity"; import RecipeTimeCard from "~/components/Domain/Recipe/RecipeTimeCard.vue"; import { Recipe } from "~/types/api-types/recipe"; +import { parseIngredientText } from "~/composables/recipes"; + +type SplitIngredients = { + firstHalf: string[]; + secondHalf: string[]; +}; + export default defineComponent({ components: { RecipeTimeCard, @@ -83,6 +81,36 @@ export default defineComponent({ required: true, }, }, + setup(props) { + const splitIngredients = computed(() => { + const firstHalf = props.recipe.recipeIngredient + ?.slice(0, Math.ceil(props.recipe.recipeIngredient.length / 2)) + .map((ingredient) => { + return parseIngredientText(ingredient, props.recipe?.settings?.disableAmount || false); + }); + + const secondHalf = props.recipe.recipeIngredient + ?.slice(Math.ceil(props.recipe.recipeIngredient.length / 2)) + .map((ingredient) => { + return parseIngredientText(ingredient, props.recipe?.settings?.disableAmount || false); + }); + + return { + firstHalf: firstHalf || [], + secondHalf: secondHalf || [], + }; + }); + + const hasNotes = computed(() => { + return props.recipe.notes && props.recipe.notes.length > 0; + }); + + return { + hasNotes, + splitIngredients, + parseIngredientText, + }; + }, }); @@ -90,26 +118,46 @@ export default defineComponent({ @media print { body, html { - margin-top: -40px !important; + margin-top: 0 !important; + } + + .print-container { + display: block !important; + } + + .v-main { + display: block; + } + + .v-main__wrap { + position: absolute; + top: 0; + left: 0; } } + -h1 { - margin-top: 0 !important; - display: -webkit-box; - display: flex; - font-size: 2rem; - letter-spacing: -0.015625em; - font-weight: 300; - padding: 0; + \ No newline at end of file + diff --git a/frontend/pages/recipe/_slug/index.vue b/frontend/pages/recipe/_slug/index.vue index 918c5ffe63e8..7e253f48bc9f 100644 --- a/frontend/pages/recipe/_slug/index.vue +++ b/frontend/pages/recipe/_slug/index.vue @@ -454,12 +454,13 @@ > +