breadone/Recipie2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add support for ingredient preparation instructions

Browse Source
This commit is contained in:
June
2025-11-17 15:35:26 +13:00
parent deac573d30
commit 2f8ceef0ed
3 changed files with 7 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
web/src/components/detail/InfoView.astro
View File

@@ -1,29 +1,14 @@
--- ---
import TagRow from "@component/tagRow"; import TagRow from "@component/tagRow";
const { cookTime, prepTime, description, servings, rating, tags } = Astro.props const { cookTime, prepTime, description, servings, rating, tags } = Astro.props
function formatTimeMin(minutes: number) {
if (minutes === 0) return null
const h = Math.floor(minutes / 60);
const m = minutes % 60;
let result = "";
if (h > 0) result += `${h}h`;
if (m > 0) result += `${m}m`;
if (result === "") result = "0m";
return result;
}
// const workTime = formatTimeMin(re.worktime)
// const waitTime = formatTimeMin(re.waittime)
--- ---
<p class="text-white/60 text-sm mt-1 italic">{description}</p> <p class="text-white/60 text-sm mt-1 italic">{description}</p>
<div class="flex pt-1 items-center"> <div class="flex pt-1 items-center">
{servings !== 0 && (<p class="border-r pr-2">Serves: {servings}</p>)} {servings !== 0 && (<p class="border-r pr-2">Serves {servings}</p>)}
{prepTime && (<p class="border-r px-2">{prepTime} Prep</p>)} {prepTime && (<p class="border-r px-2">{prepTime} prep</p>)}
{cookTime && (<p class=" px-2">{cookTime} Cook</p>)} {cookTime && (<p class=" px-2">{cookTime} cook</p>)}
<!-- {rating !== 0 && (<p class="pl-2">{rating}</p><p class="text-white/40 text-xs">/10</p>)} --> <!-- {rating !== 0 && (<p class="pl-2">{rating}</p><p class="text-white/40 text-xs">/10</p>)} -->
</div> </div>
<TagRow tags={tags}/> <TagRow tags={tags}/>

4
web/src/components/detail/IngredientTableView.astro
View File

@@ -10,7 +10,7 @@ const tableView = true
{ {
ingredients.map(ing => ( ingredients.map(ing => (
<div class="text-white/70"> <div class="text-white/70">
<p>• {ing.quantity.value.value}&nbsp;{ing.unit || ''}&nbsp;{ing.name}</p> <p>• {ing.quantity.value.value}&nbsp;{ing.unit || ''}&nbsp;{ing.name}{ing.preparation ? ` (${ing.preparation})` : ''}</p>
</div> </div>
)) ))
} }
@@ -34,7 +34,7 @@ const tableView = true
<tr class="border-t border-white/10 cursor-pointer hover:bg-white/10 transition-opacity ingredient-row" data-index={index}> <tr class="border-t border-white/10 cursor-pointer hover:bg-white/10 transition-opacity ingredient-row" data-index={index}>
<td class="px-4 py-2">{ing.quantity.value.value}</td> <td class="px-4 py-2">{ing.quantity.value.value}</td>
<td class="px-4 py-2">{ing.unit || ''}</td> <td class="px-4 py-2">{ing.unit || ''}</td>
<td class="px-4 py-2">{ing.name}</td> <td class="px-4 py-2">{ing.name}{ing.preparation ? ` (${ing.preparation})` : ''}</td>
</tr> </tr>
</> </>
)) ))

5
web/src/components/detail/StepIngredientSideView.astro
View File

@@ -4,8 +4,7 @@ const { ingredients, class: className } = Astro.props;
<div class={className}> <div class={className}>
{ingredients.map(i => ( {ingredients.map(i => (
<div class="text-sm"> <ul class="text-sm">
<p>• {i.quantity.value.value} {i.unit || ""} {i.name}</p> <li class="">{i.quantity.value.value} {i.unit || ""} {i.name} {i.preparation ? `(${i.preparation})` : ''}</li class=""> </ul>
</div>
))} ))}
</div> </div>