mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-05-24 01:12:54 -04:00
50a92c165c
* 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
59 lines
1.3 KiB
Vue
59 lines
1.3 KiB
Vue
<template>
|
|
<div class="ma-0 pa-0 text-subtitle-1 dense-markdown ingredient-item">
|
|
<SafeMarkdown v-if="quantity" class="d-inline" :source="quantity" />
|
|
<template v-if="unit">{{ unit }} </template>
|
|
<SafeMarkdown v-if="note && !name" class="text-bold d-inline" :source="note" />
|
|
<template v-else>
|
|
<SafeMarkdown v-if="name" class="text-bold d-inline" :source="name" />
|
|
<SafeMarkdown v-if="note" class="note" :source="note" />
|
|
</template>
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { defineComponent } from "@nuxtjs/composition-api";
|
|
import { RecipeIngredient } from "~/lib/api/types/group";
|
|
import { useParsedIngredientText } from "~/composables/recipes";
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
ingredient: {
|
|
type: Object as () => RecipeIngredient,
|
|
required: true,
|
|
},
|
|
disableAmount: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
scale: {
|
|
type: Number,
|
|
default: 1,
|
|
},
|
|
},
|
|
setup(props) {
|
|
const parsed = useParsedIngredientText(props.ingredient, props.disableAmount, props.scale);
|
|
return {
|
|
...parsed,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
<style>
|
|
.ingredient-item {
|
|
.d-inline {
|
|
& > p {
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
.text-bold {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.note {
|
|
line-height: 0.8em;
|
|
font-size: 0.8em;
|
|
opacity: 0.7;
|
|
}
|
|
</style>
|