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:
parent
2151451634
commit
50a92c165c
7 changed files with 140 additions and 25 deletions
|
@ -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,
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue