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

[PIE-17] Design refinements and improvements #8

Merged
breadone merged 4 commits from PIE-17 into main 2025-08-13 19:24:10 +12:00
Conversation 0 Commits 4 Files Changed 4 +6 -6
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 8a5fec1712 - Show all commits

12
src/pages/recipe/[recipeid].astro
View File

@ -41,24 +41,24 @@ const waitTime = formatTime(re.waittime)
<SiteLayout> <SiteLayout>
<div class="flex flex-col md:flex-row"> <div class="flex flex-col md:flex-row">
<div class="flex flex-col "> <div class="flex flex-col mt-2 md:mt-4 sticky">
<ImageCarousel class="w-full" recipe={re} /> <ImageCarousel class="w-full" recipe={re} />
<p class=" md:hidden text-[28pt] font-bold leading-none mt-2">{re.name}</p> <p class=" md:hidden text-[28pt] font-bold leading-none mt-2">{re.name}</p>
<!-- Details --> <!-- Details -->
<p class="text-white/60 text-sm mt-1 italic">{re.description}</p> <p class="text-white/60 text-sm mt-1 italic">{re.description}</p>
<div class="flex pt-1"> <div class="flex pt-1 items-center">
{re.servings !== 0 && (<p class="border-r pr-2">Serves: {re.servings}</p>)} {re.servings !== 0 && (<p class="border-r pr-2">Serves: {re.servings}</p>)}
{workTime && (<p class="border-r px-2">{workTime} work</p>)} {workTime && (<p class="border-r px-2">{workTime} Work</p>)}
{waitTime && (<p class="border-r px-2">{waitTime} wait</p>)} {waitTime && (<p class="border-r px-2">{waitTime} Wait</p>)}
{re.rating !== 0 && (<p class="pl-2">{re.rating}⭐️</p>)} {re.rating !== 0 && (<p class="pl-2">{re.rating}</p><p class="text-white/40 text-xs">/10</p>)}
</div> </div>
<p class="text-[22pt] font-bold 'md:mt-4'">Ingredients</p> <p class="text-[22pt] font-bold 'md:mt-4'">Ingredients</p>
<IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={ingredients} /> <IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={ingredients} />
</div> </div>
<div class="flex flex-col"> <div class="flex w-full flex-col">
<p class="hidden md:block text-[28pt] font-bold pl-5">{re.name}</p> <p class="hidden md:block text-[28pt] font-bold pl-5">{re.name}</p>
<!-- Steps --> <!-- Steps -->