diff --git a/resources/ts/front/Pages/Recipes/Show.tsx b/resources/ts/front/Pages/Recipes/Show.tsx index bbb17b44..ddc3ad24 100644 --- a/resources/ts/front/Pages/Recipes/Show.tsx +++ b/resources/ts/front/Pages/Recipes/Show.tsx @@ -65,6 +65,22 @@ export default function Show({ recipe }: Readonly) { return match?.label ?? value; }; + // * Format a string into a list (ul or ol) if it doesn't already contain one. + const formatList = (html: string | undefined | null, type: "ul" | "ol") => { + if (!html) return ""; + if (html.includes("]*>/gi, "
") + .split(/|\n/i) + .map((i) => i.trim()) + .filter((i) => i.length > 0); + + if (items.length === 0) return html; + + return `<${type}>${items.map((item) => `
  • ${item}
  • `).join("")}`; + }; + const badges = [ getLabel(productCategoryEnum, recipe.productRange), getLabel(consumptionTimeEnum, recipe.consomptionTime), @@ -93,16 +109,16 @@ export default function Show({ recipe }: Readonly) { } .list-egg-bullets ul li { position: relative; - padding-left: 1.5rem; - margin-bottom: 0.5rem; + padding-left: 2rem; + margin-bottom: 0.75rem; } .list-egg-bullets ul li::before { content: ''; position: absolute; left: 0; - top: 0.4rem; - width: 0.6rem; - height: 0.8rem; + top: 0.2rem; + width: 1rem; + height: 1.33rem; background-color: white; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; display: inline-block; @@ -122,9 +138,9 @@ export default function Show({ recipe }: Readonly) { content: counter(prep-counter) ". "; position: absolute; left: 0; - top: -0.1rem; - font-weight: bold; - font-size: 1.25rem; + top: -0.25rem; + font-weight: 800; + font-size: 1.75rem; color: inherit; } `} @@ -221,7 +237,7 @@ export default function Show({ recipe }: Readonly) {
    - +
    @@ -233,7 +249,7 @@ export default function Show({ recipe }: Readonly) { Préparation
    - +