Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-08-01 19:45:22 +02:00
Code Issues Releases Activity

fix: Make fractions in the ingredient list look a tiny bit nicer (#3725)

Browse source
This commit is contained in:
Bart Kummel 2024-06-13 15:04:45 +02:00 • committed by GitHub
parent 4a0a8e8a5e
commit 9f7d74aecf
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 19 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

16
frontend/components/Domain/Recipe/RecipeIngredientListItem.vue
View file

@ -45,6 +45,22 @@ export default defineComponent({
.d-inline { .d-inline {
& > p { & > p {
display: inline; display: inline;
&:has(>sub)>sup {
letter-spacing: -0.05rem;
}
}
&:has(sub) {
&:after {
letter-spacing: -0.2rem;
}
}
sup {
&+span{
letter-spacing: -0.05rem;
}
&:before {
letter-spacing: 0rem;
}
} }
} }

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

@ -31,13 +31,13 @@ describe(parseIngredientText.name, () => {
test("ingredient text with fraction", () => { test("ingredient text with fraction", () => {
const ingredient = createRecipeIngredient({ quantity: 1.5, unit: { fraction: true, id: "1", name: "cup" } }); const ingredient = createRecipeIngredient({ quantity: 1.5, unit: { fraction: true, id: "1", name: "cup" } });
expect(parseIngredientText(ingredient, false, 1, true)).contain("1 <sup>1</sup>").and.to.contain("<sub>2</sub>"); expect(parseIngredientText(ingredient, false, 1, true)).contain("1<sup>1</sup>").and.to.contain("<sub>2</sub>");
}); });
test("ingredient text with fraction when unit is null", () => { test("ingredient text with fraction when unit is null", () => {
const ingredient = createRecipeIngredient({ quantity: 1.5, unit: undefined }); const ingredient = createRecipeIngredient({ quantity: 1.5, unit: undefined });
expect(parseIngredientText(ingredient, false, 1, true)).contain("1 <sup>1</sup>").and.to.contain("<sub>2</sub>"); expect(parseIngredientText(ingredient, false, 1, true)).contain("1<sup>1</sup>").and.to.contain("<sub>2</sub>");
}); });
test("ingredient text with fraction no formatting", () => { test("ingredient text with fraction no formatting", () => {

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

@ -63,7 +63,7 @@ export function useParsedIngredientText(ingredient: RecipeIngredient, disableAmo
if (fraction[1] > 0) { if (fraction[1] > 0) {
returnQty += includeFormating ? returnQty += includeFormating ?
` <sup>${fraction[1]}</sup>&frasl;<sub>${fraction[2]}</sub>` : `<sup>${fraction[1]}</sup><span>&frasl;</span><sub>${fraction[2]}</sub>` :
` ${fraction[1]}/${fraction[2]}`; ` ${fraction[1]}/${fraction[2]}`;
} }
} }