Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-19 05:09:40 +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

14
frontend/components/Domain/Recipe/RecipeContextMenu.vue
View file

@ -114,7 +114,10 @@
color="secondary"
/>
<v-list-item-content :key="ingredientData.ingredient.quantity">
<SafeMarkdown class="ma-0 pa-0 text-subtitle-1 dense-markdown" :source="ingredientData.display" />
<RecipeIngredientListItem
:ingredient="ingredientData.ingredient"
:disable-amount="ingredientData.disableAmount"
:scale="recipeScale" />
</v-list-item-content>
</v-list-item>
</v-card>
@ -168,13 +171,13 @@
<script lang="ts">
import { defineComponent, reactive, toRefs, useContext, useRouter, ref } from "@nuxtjs/composition-api";
import RecipeIngredientListItem from "./RecipeIngredientListItem.vue";
import RecipeDialogPrintPreferences from "./RecipeDialogPrintPreferences.vue";
import RecipeDialogShare from "./RecipeDialogShare.vue";
import { useUserApi } from "~/composables/api";
import { alert } from "~/composables/use-toast";
import { usePlanTypeOptions } from "~/composables/use-group-mealplan";
import { Recipe, RecipeIngredient } from "~/lib/api/types/recipe";
import { parseIngredientText } from "~/composables/recipes";
import { ShoppingListSummary } from "~/lib/api/types/group";
import { PlanEntryType } from "~/lib/api/types/meal-plan";
import { useAxiosDownloader } from "~/composables/api/use-axios-download";
@ -203,7 +206,8 @@ export default defineComponent({
components: {
RecipeDialogPrintPreferences,
RecipeDialogShare,
},
RecipeIngredientListItem
},
props: {
useItems: {
type: Object as () => ContextMenuIncludes,
@ -384,7 +388,7 @@ export default defineComponent({
const shoppingLists = ref<ShoppingListSummary[]>();
const selectedShoppingList = ref<ShoppingListSummary>();
const recipeRef = ref<Recipe>(props.recipe);
const recipeIngredients = ref<{ checked: boolean; ingredient: RecipeIngredient; display: string }[]>([]);
const recipeIngredients = ref<{ checked: boolean; ingredient: RecipeIngredient, disableAmount: boolean }[]>([]);
async function getShoppingLists() {
const { data } = await api.shopping.lists.getAll();
@ -411,7 +415,7 @@ export default defineComponent({
return {
checked: true,
ingredient,
display: parseIngredientText(ingredient, recipeRef.value?.settings?.disableAmount || false, props.recipeScale),
disableAmount: recipeRef.value.settings?.disableAmount || false
};
});
}