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

Fix styling for new ingredient table

Browse Source
This commit is contained in:
June 2025-08-14 11:07:58 +12:00
parent 99698bfd74
commit 9ac087c2e8
Signed by: breadone
GPG Key ID: FDC19FE143200483
1 changed files with 30 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/pages/recipe/new.astro
View File

@ -11,49 +11,61 @@ const { recipeid } = Astro.params;
--- ---
<script> <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> </script>
<SiteLayout> <SiteLayout>
<div class="flex flex-col md:flex-row"> <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 flex-1/3 flex-col mt-2 md:mt-4 sticky"> <div class="flex md:flex-1/3 flex-col mt-2 md:mt-4 sticky">
<div class="w-full bg-green-600 h-50"> <div class="w-full bg-white/20 rounded-lg h-50">
Image Upload Image Upload
</div> </div>
<!-- <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> --> <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 --> <!-- Details -->
<!-- <InfoView re={re} /> --> <!-- <InfoView re={re} /> -->
<p class="text-[22pt] font-bold 'md:mt-4'">Ingredients</p> <div class="flex flex-row align-middle items-center">
<table class={`table-auto text-left bg-[#2a2b2c] md:w-80 px-4 rounded-lg w-full`}> <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> <thead>
<tr> <tr>
<th class="px-4 py-2">Quantity</th> <th class="px-4 py-2">Qty</th>
<th class="px-4 py-2">Unit</th> <th class="px-4 py-2">Unit</th>
<th class="px-4 py-2">Ingredient</th> <th class="px-4 py-2">Ingredient</th>
</tr> </tr>
</thead> </thead>
<tbody id="ingredient-table" class="border-t px-4 py-2 border-gray-600"> <tbody id="ingredient-table" class="w-full border-t px-4 py-2 border-gray-600">
<tr id="ingredient-input" class=""> <tr id="ingredient-input" class="">
<td class="px-4 py-1">˚ <td class="px-2 py-1">
<input class="w-3/4 bg-white/20 rounded-lg px-2" type="text"> <input class="w-full h-10 bg-white/20 rounded-lg px-2 py-2" type="text" placeholder="Amount">
</td> </td>
<td class="px-4 py-1"> <td class="px-2 py-1">
<input class="w-3/4 bg-white/20 rounded-lg px-2" type="text"> <input class="w-full h-10 bg-white/20 rounded-lg px-2 py-2" type="text" placeholder="Unit">
</td> </td>
<td class="px-4 py-1"> <td class="px-2 py-1">
<!-- <input class="w-3/4 text-wrap bg-white/20 rounded-lg px-2" type="text"> --> <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"/>
<textarea class="block bg-white/20 rounded-lg px-2"></textarea>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="flex w-full flex-col"> <div class="flex mt-4 md:flex-2/3 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">Helloi</p> -->
<!-- Steps --> <!-- Steps -->
<!-- <StepView steps={steps} /> --> <!-- <StepView steps={steps} /> -->