Add `/recipe/new` path with form to add new recipe Mostly designed but not fully: steps and ingredients are inputtable with final styling but it cannot be submitted yet, and other crucial components like description, rating, etc are not yet implemented. Many design changes too cos i couldnt help myself More additions will certainly be required but this PR is huge so I will split it out into more Reviewed-on: #11 Co-authored-by: june <self@breadone.net> Co-committed-by: june <self@breadone.net>
This commit was merged in pull request #11.
This commit is contained in:
@@ -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-11 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>
|
||||
|
||||
94
src/pages/recipe/new.astro
Normal file
94
src/pages/recipe/new.astro
Normal file
@@ -0,0 +1,94 @@
|
||||
---
|
||||
import SiteLayout from "@/layouts/base";
|
||||
|
||||
const { recipeid } = Astro.params;
|
||||
|
||||
// Actually post the recipe with the stored variables
|
||||
async function submitRecipe() {
|
||||
|
||||
}
|
||||
|
||||
---
|
||||
<script src="@/script/newRecipe.ts"/>
|
||||
|
||||
<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="relative">
|
||||
<input
|
||||
id="photo"
|
||||
type="file"
|
||||
accept="image/png,image/jpeg"
|
||||
class="w-full bg-white/10 rounded-lg h-50
|
||||
file:mr-4 file:py-2 file:px-4
|
||||
file:rounded-lg file:border-0 file:hidden
|
||||
before:content-['camera'] before:w-full before:h-full before:flex
|
||||
before:items-center before:justify-center before:absolute
|
||||
relative cursor-pointer
|
||||
[&::-webkit-file-upload-button]:hidden"
|
||||
>
|
||||
</div>
|
||||
<textarea
|
||||
id="rec-name"
|
||||
rows="1"
|
||||
placeholder="Name"
|
||||
class="text-[28pt] font-bold p-1 leading-none mt-2 bg-white/10 rounded-lg resize-none overflow-hidden"
|
||||
oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"
|
||||
/>
|
||||
<!-- if it works :3 -->
|
||||
|
||||
<!-- 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>
|
||||
<button disabled class="disabled:text-white/20 transition-colors ml-auto mt-5 text-white bg-white/10 rounded-lg px-3 py-1 " id="add-ingredient-btn" >Add</button>
|
||||
</div>
|
||||
<table class={`table-fixed text-left bg-[#2a2b2c] rounded-lg w-full`}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="px-4 py-2 w-18">Qty</th>
|
||||
<th class="px-4 py-2 w-20">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-white/10">
|
||||
<tr id="ingredient-input" class="">
|
||||
<td class="px-2 py-1">
|
||||
<input id="ing-qty" class="w-full h-9 my-1 bg-white/10 rounded-lg px-2 py-2" type="text" placeholder="Qty">
|
||||
</td>
|
||||
<td class="px-2 py-1">
|
||||
<input id="ing-unit" class="w-full h-9 bg-white/10 rounded-lg px-2 py-2" type="text" placeholder="Unit">
|
||||
</td>
|
||||
<td class="px-2 py-1">
|
||||
<!-- <textarea id="ing-name" class="w-full h-11 bg-white/20 rounded-lg px-2 py-3 mt-1 resize-none leading-tight" placeholder="Ingredient" rows="1"/> -->
|
||||
<input id="ing-name" class="w-full h-9 bg-white/10 rounded-lg px-2 py-2" type="text" placeholder="Ingredient">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="flex mt-4 md:flex-2/3 w-full flex-col md:ml-3">
|
||||
<!-- <p class="hidden md:block text-[28pt] font-bold pl-5">Helloi</p> -->
|
||||
|
||||
<!-- Steps -->
|
||||
<p class="text-[22pt] font-bold md:hidden">Steps</p>
|
||||
|
||||
<div class="bg-[#2a2b2c] rounded-lg mb-2 p-2">
|
||||
<!-- <p class="text-bold text-[10pt]">Step</p> -->
|
||||
<textarea
|
||||
id="new-instruction"
|
||||
class="block bg-white/10 w-full h-full rounded-lg resize-none px-3 py-1"
|
||||
placeholder="New Step"
|
||||
oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button disabled class="disabled:text-white/20 ml-auto mb-2 transition-colors text-white bg-white/10 rounded-lg px-3 py-1 " id="add-step-btn" >Add</button>
|
||||
|
||||
<ul id="step-list"></ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</SiteLayout>
|
||||
Reference in New Issue
Block a user