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

Compare commits

base: breadone:5a171f0f0f9425f4bf868acc1b37a268044049ad
Branches Tags
breadone:main
breadone:PIE-13
breadone:PIE-9
...
compare: breadone:9ac087c2e86220fec5cb9ce519a2cd3ba6438eea
Branches Tags
breadone:main
breadone:PIE-13
breadone:PIE-9

7 Commits
5a171f0f0f ... 9ac087c2e8

Author SHA1 Message Date
june
9ac087c2e8
Fix styling for new ingredient table 2025-08-14 11:07:58 +12:00
june
99698bfd74
Change ratio and text size of step ingredient list 2025-08-14 09:22:46 +12:00
june
b90a8604e2
Changed formatting to have title on left column at all times 2025-08-14 08:27:49 +12:00
june
dc86497474
fix edge-case layout bug 2025-08-13 23:59:48 +12:00
june
87d917c7cf
Added basic new recipe page 2025-08-13 23:34:45 +12:00
june
371563201c
i keep getting distracted bruh 2025-08-13 22:20:26 +12:00
june
4e94dac064
Add underline feedback for top bar 2025-08-13 21:37:42 +12:00
5 changed files with 87 additions and 14 deletions
Show Stats Expand all files Collapse all files

2
src/components/Detail/StepIngredientSideView.astro
View File

@ -10,7 +10,7 @@ const ings = await Promise.all(
<div class={className}>
{ings.map(i => (
<div>
<div class="text-sm">
<p>• {i.quantity} {i.unit || " "} {i.name}</p>
</div>
))}

6
src/components/Detail/StepView.astro
View File

@ -3,10 +3,10 @@ import { record } from "astro:schema"
import client from "@/data/pocketbase"
import StepIngredientSideView from "./StepIngredientSideView.astro"
const { steps } = Astro.props
const { steps, class: className } = Astro.props
---
<div class="md:ml-5 mt-2 md:mt-0">
<div class={className}>
<p class="text-[22pt] font-bold md:hidden">Steps</p>
{ steps.map(s => (
<div class="bg-[#2a2b2c] rounded-lg mb-2 p-3">
@ -15,7 +15,7 @@ const { steps } = Astro.props
<div class="flex flex-col md:flex-row md:items-stretch">
<p class="w-full md:flex-2/3 pr-1 text-left">{s.instruction}</p>
{s.ingredients && s.ingredients.length > 0 && (
<div class="w-full md:w-auto md:flex-1/3 mt-2 md:mt-0 md:ml-2 md:pl-3 md:border-l text-white/70 border-white/70">
<div class="w-full md:w-auto md:flex-2/5 mt-2 md:mt-0 md:ml-2 md:pl-3 md:border-l text-white/70 border-white/70">
<StepIngredientSideView class="text-left" ingredients={s.ingredients} />
</div>
)}

6
src/components/Header.astro
View File

@ -7,8 +7,8 @@
</a>
<div class="ml-auto space-x-5">
<a>new</a>
<a>tags</a>
<a>search</a>
<a class="hover:underline underline-offset-4 " href="/recipe/new">new</a>
<a class="hover:underline underline-offset-4 " >tags</a>
<a class="hover:underline underline-offset-4 " >search</a>
</div>
</div>

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

@ -28,10 +28,10 @@ const ingredients = await Promise.all(
---
<SiteLayout>
<div class="flex flex-col md:flex-row">
<div class="flex flex-col mt-2 md:mt-4 sticky">
<div class="flex flex-col md:flex-row mx-auto justify-center w-full lg:max-w-3/4 xl:max-w-2/3 2xl:max-w-1/2">
<div class="flex md:flex-1/3 flex-col mt-2 md:mt-4 sticky">
<ImageCarousel class="w-full" recipe={re} />
<p class=" md:hidden text-[28pt] font-bold leading-none mt-2">{re.name}</p>
<p class="text-[28pt] font-bold leading-none mt-2">{re.name}</p>
<!-- Details -->
<InfoView re={re} />
@ -40,11 +40,9 @@ const ingredients = await Promise.all(
<IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={ingredients} />
</div>
<div class="flex w-full flex-col">
<p class="hidden md:block text-[28pt] font-bold pl-5">{re.name}</p>
<div class="flex mt-4 md:flex-2/3 w-full flex-col">
<!-- Steps -->
<StepView steps={steps} />
<StepView class="md:ml-3" steps={steps} />
</div>
</div>

75
src/pages/recipe/new.astro Normal file
View File

@ -0,0 +1,75 @@
---
import client from "@/data/pocketbase";
import SiteLayout from "@/layouts/base";
import ImageCarousel from "@/components/Detail/ImageCarousel";
import IngredientTableView from "@/components/Detail/IngredientTableView";
import StepView from "@/components/Detail/StepView";
import InfoView from "@/components/Detail/InfoView";
const { recipeid } = Astro.params;
---
<script>
let ingredients: {qty: string, unit: string, ing: string}[] = []
function addIngredient(q: string, u: string, i: string) {
ingredients.push({qty: q, unit: u, ing: i})
}
</script>
<SiteLayout>
<div class="flex flex-col md:flex-row mx-auto justify-center w-full lg:max-w-3/4 xl:max-w-2/3 2xl:max-w-1/2">
<div class="flex md:flex-1/3 flex-col mt-2 md:mt-4 sticky">
<div class="w-full bg-white/20 rounded-lg h-50">
Image Upload
</div>
<!-- <ImageCarousel class="w-full" recipe={re} /> -->
<textarea
id="rec-name"
name="Recipe Name"
rows="1"
placeholder="Recipe Name"
class="text-[28pt] font-bold h-12 p-1 leading-none mt-2 bg-white/20 rounded-lg"
style="resize: none;"
/>
<!-- Details -->
<!-- <InfoView re={re} /> -->
<div class="flex flex-row align-middle items-center">
<p class="mt-4 text-[22pt] font-bold 'mt-4'">Ingredients</p>
</div>
<table class={`table-auto text-left bg-[#2a2b2c] rounded-lg w-full`}>
<thead>
<tr>
<th class="px-4 py-2">Qty</th>
<th class="px-4 py-2">Unit</th>
<th class="px-4 py-2">Ingredient</th>
</tr>
</thead>
<tbody id="ingredient-table" class="w-full border-t px-4 py-2 border-gray-600">
<tr id="ingredient-input" class="">
<td class="px-2 py-1">
<input class="w-full h-10 bg-white/20 rounded-lg px-2 py-2" type="text" placeholder="Amount">
</td>
<td class="px-2 py-1">
<input class="w-full h-10 bg-white/20 rounded-lg px-2 py-2" type="text" placeholder="Unit">
</td>
<td class="px-2 py-1">
<textarea class="w-full h-10 bg-white/20 rounded-lg px-2 py-2 mt-1 resize-none leading-tight" placeholder="Ingredient" rows="1"/>
</td>
</tr>
</tbody>
</table>
</div>
<div class="flex mt-4 md:flex-2/3 w-full flex-col">
<!-- <p class="hidden md:block text-[28pt] font-bold pl-5">Helloi</p> -->
<!-- Steps -->
<!-- <StepView steps={steps} /> -->
</div>
</div>
</SiteLayout>