Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-08-05 13:35:23 +02:00
Code Issues Releases Activity

feat: improve readability of ingredients list (#2502)

Browse source 
* feat: improve readability of notes in ingredients list

Makes the notes in the ingredients list more readable by making them slightly opaque. This creates a better visual separation between the notes and the rest of the ingredient.

* Use server display if available

* Move note to newline and make quantity more distinct

* Use safeMarkdown for shopping list

* Use component

* Wrap unit in accent color

* Update RecipeIngredientListItem to set food in bold
This commit is contained in:
Hugo van Rijswijk 2023-08-21 17:32:09 +02:00 • committed by GitHub
parent 2151451634
commit 50a92c165c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 140 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

24
frontend/composables/recipes/use-recipe-ingredients.ts
View file

@ -10,11 +10,14 @@ function sanitizeIngredientHTML(rawHtml: string) {
});
}
export function parseIngredientText(ingredient: RecipeIngredient, disableAmount: boolean, scale = 1): string {
// TODO: the backend now supplies a "display" property which does this for us, so we don't need this function
export function useParsedIngredientText(ingredient: RecipeIngredient, disableAmount: boolean, scale = 1) {
if (disableAmount) {
return ingredient.note || "";
return {
name: ingredient.note ? sanitizeIngredientHTML(ingredient.note) : undefined,
quantity: undefined,
unit: undefined,
note: undefined,
};
}
const { quantity, food, unit, note } = ingredient;
@ -43,6 +46,17 @@ export function parseIngredientText(ingredient: RecipeIngredient, disableAmount:
}
}
const text = `${returnQty} ${unitDisplay || " "} ${food?.name || " "} ${note || " "}`.replace(/ {2,}/g, " ");
return {
quantity: returnQty ? sanitizeIngredientHTML(returnQty) : undefined,
unit: unitDisplay ? sanitizeIngredientHTML(unitDisplay) : undefined,
name: food?.name ? sanitizeIngredientHTML(food.name) : undefined,
note: note ? sanitizeIngredientHTML(note) : undefined,
};
}
export function parseIngredientText(ingredient: RecipeIngredient, disableAmount: boolean, scale = 1): string {
const { quantity, unit, name, note } = useParsedIngredientText(ingredient, disableAmount, scale);
const text = `${quantity || ""} ${unit || ""} ${name || ""} ${note || ""}`.replace(/ {2,}/g, " ").trim();
return sanitizeIngredientHTML(text);
}