diff --git a/frontend/components/Domain/Recipe/RecipePrintView.vue b/frontend/components/Domain/Recipe/RecipePrintView.vue index 0f859b95..cc629d16 100644 --- a/frontend/components/Domain/Recipe/RecipePrintView.vue +++ b/frontend/components/Domain/Recipe/RecipePrintView.vue @@ -14,19 +14,14 @@ +
{{ $t("recipe.ingredients") }}
-
-
    -
  • -
-
-
-
    -
  • -
-
+
@@ -57,14 +52,9 @@ import { defineComponent, computed } from "@nuxtjs/composition-api"; // @ts-ignore vue-markdown has no types import VueMarkdown from "@adapttive/vue-markdown"; import RecipeTimeCard from "~/components/Domain/Recipe/RecipeTimeCard.vue"; -import { Recipe } from "~/types/api-types/recipe"; +import { Recipe, RecipeIngredient } from "~/types/api-types/recipe"; import { parseIngredientText } from "~/composables/recipes"; -type SplitIngredients = { - firstHalf: string[]; - secondHalf: string[]; -}; - export default defineComponent({ components: { RecipeTimeCard, @@ -77,32 +67,17 @@ export default defineComponent({ }, }, 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; }); + function parseText(ingredient: RecipeIngredient) { + return parseIngredientText(ingredient, props.recipe.settings?.disableAmount || false); + } + return { hasNotes, - splitIngredients, + parseText, parseIngredientText, }; }, @@ -136,6 +111,12 @@ export default defineComponent({ .print-container { display: none; background-color: white; +} + +/* Makes all text solid black */ +.print-container, +.print-container >>> * { + opacity: 1 !important; color: black !important; } @@ -152,7 +133,11 @@ p { .ingredient-grid { display: grid; grid-template-columns: 1fr 1fr; - grid-gap: 1rem; + grid-gap: 0.5rem; +} + +.ingredient-title { + grid-column: 1 / span 2; } ul {