1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-24 15:49:42 +02:00

feat: improve readability of ingredients list (#2502)

* 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

View file

@ -13,7 +13,7 @@
>
<template #label>
<div :class="listItem.checked ? 'strike-through' : ''">
{{ listItem.display }}
<RecipeIngredientListItem :ingredient="listItem" :disable-amount="!(listItem.quantity && (listItem.isFood || listItem.quantity !== 1))" />
</div>
</template>
</v-checkbox>
@ -70,6 +70,7 @@
<script lang="ts">
import { defineComponent, computed, ref, useContext } from "@nuxtjs/composition-api";
import RecipeIngredientListItem from "../Recipe/RecipeIngredientListItem.vue";
import ShoppingListItemEditor from "./ShoppingListItemEditor.vue";
import MultiPurposeLabel from "./MultiPurposeLabel.vue";
import { ShoppingListItemOut } from "~/lib/api/types/group";
@ -82,7 +83,7 @@ interface actions {
}
export default defineComponent({
components: { ShoppingListItemEditor, MultiPurposeLabel },
components: { ShoppingListItemEditor, MultiPurposeLabel, RecipeIngredientListItem },
props: {
value: {
type: Object as () => ShoppingListItemOut,