From f6c18ec73ddfe44a4380b30c58c3c0684c87b341 Mon Sep 17 00:00:00 2001 From: Michael Genson <71845777+michael-genson@users.noreply.github.com> Date: Sun, 12 Jun 2022 19:43:09 -0500 Subject: [PATCH] fix avoid page breaks in sections when printing recipes and other CSS tweaks (#1372) * grouped ingredients and instructions into sections * added missing import * divided ingredient sections and instruction sections into their own containers * tweaked css to prevent sections from getting split between pages * replaced horizontal rule with a text underline * removed leftover CSS * implement computer properties as reducers Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com> --- .../Domain/Recipe/RecipePrintView.vue | 165 +++++++++++++++--- 1 file changed, 145 insertions(+), 20 deletions(-) diff --git a/frontend/components/Domain/Recipe/RecipePrintView.vue b/frontend/components/Domain/Recipe/RecipePrintView.vue index cc629d167394..64efa7ab0e95 100644 --- a/frontend/components/Domain/Recipe/RecipePrintView.vue +++ b/frontend/components/Domain/Recipe/RecipePrintView.vue @@ -17,31 +17,51 @@
{{ $t("recipe.ingredients") }} -
- -
-
- -
- {{ $t("recipe.instructions") }} -
-

{{ step.title }}

-
-

{{ $t("recipe.step-index", { step: index + 1 }) }}

- +
+
+
+ +
+ {{ $t("recipe.instructions") }} +
+
+
+

+ {{ step.title }} +

+
{{ $t("recipe.step-index", { step: stepIndex + instructionSection.stepOffset + 1 }) }}
+ +
+
+
+
+ +
-

{{ note.title }}

- +
+

{{ note.title }}

+ +
@@ -52,9 +72,20 @@ 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, RecipeIngredient } from "~/types/api-types/recipe"; +import { Recipe, RecipeIngredient, RecipeStep } from "~/types/api-types/recipe"; import { parseIngredientText } from "~/composables/recipes"; +type IngredientSection = { + sectionName: string; + ingredients: RecipeIngredient[]; +}; + +type InstructionSection = { + sectionName: string; + stepOffset: number; + instructions: RecipeStep[]; +}; + export default defineComponent({ components: { RecipeTimeCard, @@ -67,6 +98,84 @@ export default defineComponent({ }, }, setup(props) { + // Group ingredients by section so we can style them independently + const ingredientSections = computed(() => { + if (!props.recipe.recipeIngredient) { + return []; + } + + return props.recipe.recipeIngredient.reduce((sections, ingredient) => { + // if title append new section to the end of the array + if (ingredient.title) { + sections.push({ + sectionName: ingredient.title, + ingredients: [ingredient], + }); + + return sections; + } + + // append new section if first + if (sections.length === 0) { + sections.push({ + sectionName: "", + ingredients: [ingredient], + }); + + return sections; + } + + // otherwise add ingredient to last section in the array + sections[sections.length - 1].ingredients.push(ingredient); + return sections; + }, [] as IngredientSection[]); + }); + + // Group instructions by section so we can style them independently + const instructionSections = computed(() => { + if (!props.recipe.recipeInstructions) { + return []; + } + + return props.recipe.recipeInstructions.reduce((sections, step) => { + const offset = (() => { + if (sections.length === 0) { + return 0; + } + + const lastOffset = sections[sections.length - 1].stepOffset; + const lastNumSteps = sections[sections.length - 1].instructions.length; + return lastOffset + lastNumSteps; + })(); + + // if title append new section to the end of the array + if (step.title) { + sections.push({ + sectionName: step.title, + stepOffset: offset, + instructions: [step], + }); + + return sections; + } + + // append if first element + if (sections.length === 0) { + sections.push({ + sectionName: "", + stepOffset: offset, + instructions: [step], + }); + + return sections; + } + + // otherwise add step to last section in the array + sections[sections.length - 1].instructions.push(step); + return sections; + }, [] as InstructionSection[]); + }); + const hasNotes = computed(() => { return props.recipe.notes && props.recipe.notes.length > 0; }); @@ -79,6 +188,8 @@ export default defineComponent({ hasNotes, parseText, parseIngredientText, + ingredientSections, + instructionSections, }; }, }); @@ -108,18 +219,23 @@ export default defineComponent({