wbrawner/mealie
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: fixed text color on RecipeCard in RecipePrintView and implemented ingredient sections (#1351)

Browse source 
* Enhanced ingredients in RecipePrintView

* Resolved frontend lint tests

* switched lets to consts and simplified import

* implement with CSS grid

Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>
This commit is contained in:
Michael Genson 2022-06-10 19:48:07 -05:00 committed by GitHub
parent c0d59db83d
commit 92ccbae657
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 22 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
frontend/components/Domain/Recipe/RecipePrintView.vue
View file

@ -14,19 +14,14 @@
<VueMarkdown :source="recipe.description" />
</v-card-text>
<!-- Ingredients -->
<section>
<v-card-title class="headline pl-0"> {{ $t("recipe.ingredients") }} </v-card-title>
<div class="ingredient-grid">
<div class="ingredient-col-1">
<ul>
<li v-for="(text, index) in splitIngredients.firstHalf" :key="index" v-html="text" />
</ul>
</div>
<div class="ingredient-col-2">
<ul>
<li v-for="(text, index) in splitIngredients.secondHalf" :key="index" v-html="text" />
</ul>
</div>
<template v-for="(ingredient, index) in recipe.recipeIngredient">
<h4 v-if="ingredient.title" :key="`title-${index}`" class="ingredient-title mt-2">{{ ingredient.title }}</h4>
<p :key="`ingredient-${index}`" v-html="parseText(ingredient)" />
</template>
</div>
</section>
@ -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<SplitIngredients>(() => {
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 {