(FIX): Added directions for create page. #42

Merged
azpect merged 4 commits from dev into master 2025-08-20 21:39:46 -07:00
17 changed files with 68 additions and 31 deletions

View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.924
// templ: version: v0.3.937
package components
//lint:file-ignore SA4006 This context is only used if a nested component is present.

View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.924
// templ: version: v0.3.937
package components
//lint:file-ignore SA4006 This context is only used if a nested component is present.

View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.924
// templ: version: v0.3.937
package components
//lint:file-ignore SA4006 This context is only used if a nested component is present.

View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.924
// templ: version: v0.3.937
package components
//lint:file-ignore SA4006 This context is only used if a nested component is present.

View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.924
// templ: version: v0.3.937
package components
//lint:file-ignore SA4006 This context is only used if a nested component is present.

View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.924
// templ: version: v0.3.937
package templates
//lint:file-ignore SA4006 This context is only used if a nested component is present.

View File

@ -32,10 +32,13 @@ templ Page() {
hx-encoding="multipart/form-data"
>
<div class="flex flex-col">
<label for="title" class="text-sm mb-2">
<label for="title" class="text-sm">
Recipe Title
<span class="text-red-500">*</span>
</label>
<p class="text-xs pt-1 pb-2 text-gray-700">
Please provide a unique title for your recipe. This is the most important part!
</p>
<input
onkeydown="return event.key != 'Enter';"
class="peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500
@ -51,10 +54,13 @@ templ Page() {
<p class="hidden peer-invalid:block text-xs text-red-500 my-1">Please enter a title. Between 1-128 characters.</p>
</div>
<div class="flex flex-col my-4">
<label for="description" class="text-sm mb-2">
<label for="description" class="text-sm">
Description
<span class="text-red-500">*</span>
</label>
<p class="text-xs pt-1 pb-2 text-gray-700">
Please provide a description for your recipe. This can be short and sweet or long and detailed!
</p>
<textarea
class="peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500
focus:ring-2 duration-200 ease-in-out transition-all resize-none shadow-sm invalid:border-red-500"
@ -72,9 +78,12 @@ templ Page() {
</div>
<div class="my-4 flex flex-col gap-x-2">
<div class="flex flex-col flex-grow">
<label for="tags" class="text-sm mb-2">
<label for="tags" class="text-sm">
Recipe Tags
</label>
<p class="text-xs pt-1 pb-2 text-gray-700">
Please provide a list of tags. <span class="italic">e.g., easy, dairy-free, gluten-free, high protein.</span>
</p>
<input
onkeydown="return event.key != 'Enter';"
class="border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm"
@ -96,10 +105,13 @@ templ Page() {
</div>
<div class="my-4 flex gap-x-2">
<div class="flex flex-col flex-grow w-1/3">
<label for="preparation-time" class="text-sm mb-2">
<label for="preparation-time" class="text-sm">
Prep Time
<span class="text-red-500">*</span>
</label>
<p class="text-xs pt-1 pb-2 text-gray-700">
Please provide the estimated prep time (minutes).
</p>
<input
onkeydown="return event.key != 'Enter';"
class="peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500
@ -117,10 +129,13 @@ templ Page() {
</p>
</div>
<div class="flex flex-col flex-grow w-1/3">
<label for="cook-time" class="text-sm mb-2">
<label for="cook-time" class="text-sm">
Cook Time
<span class="text-red-500">*</span>
</label>
<p class="text-xs pt-1 pb-2 text-gray-700">
Please provide the estimated cook time (minutes).
</p>
<input
onkeydown="return event.key != 'Enter';"
class="peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500
@ -138,10 +153,13 @@ templ Page() {
</p>
</div>
<div class="flex flex-col flex-grow w-1/3">
<label for="serving-size" class="text-sm mb-2">
<label for="serving-size" class="text-sm">
Serving Size
<span class="text-red-500">*</span>
</label>
<p class="text-xs pt-1 pb-2 text-gray-700">
Please provide the estimated serving size.
</p>
<input
onkeydown="return event.key != 'Enter';"
class="peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500
@ -161,10 +179,13 @@ templ Page() {
</div>
<div class="my-4 flex gap-x-2">
<div class="flex flex-col flex-grow w-1/3">
<label for="category" class="text-sm mb-2">
<label for="category" class="text-sm">
Category
<span class="text-red-500">*</span>
</label>
<p class="text-xs pt-1 pb-2 text-gray-700">
Please provide the meal category.
</p>
<select
id="category"
name="category"
@ -187,10 +208,13 @@ templ Page() {
</p>
</div>
<div class="flex flex-col flex-grow w-1/3">
<label for="difficulty" class="text-sm mb-2">
<label for="difficulty" class="text-sm">
Difficulty
<span class="text-red-500">*</span>
</label>
<p class="text-xs pt-1 pb-2 text-gray-700">
Please provide a baseline difficulty.
</p>
<select
id="difficulty"
name="difficulty"
@ -216,6 +240,7 @@ templ Page() {
Ingredients
<span class="text-red-500">*</span>
</label>
<p class="text-xs py-1 text-gray-700">Please provide a list of ingredients and their quantities.</p>
<ul id="ingredient-list">
<li class="w-full flex gap-x-2 py-2">
<div class="flex-grow">
@ -267,6 +292,9 @@ templ Page() {
Instructions
<span class="text-red-500">*</span>
</label>
<p class="text-xs py-1 text-gray-700">
Please provide a list of instructions. You do not need to include step number, they will be added automatically!
</p>
<div id="instruction-list" class="flex flex-col">
<textarea
class="peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500
@ -295,6 +323,9 @@ templ Page() {
<label for="image" class="text-sm">
Recipe Image
</label>
<p class="text-xs pt-1 pb-2 text-gray-700">
Please provide an image of your creation. This is optional but is a nice touch!
</p>
<input
type="file"
accept="image/*"
@ -383,7 +414,7 @@ templ Page() {
list.appendChild(div);
}
function removeInstruction (num) {
function removeInstruction(num) {
const list = document.getElementById("instruction-list");
const item = list.querySelector(`#instruction-${num}`);
if (item) item.remove();
@ -418,5 +449,5 @@ templ Page() {
remainingItems[i - 2].replaceWith(div);
}
}
</script>
</script>
}

File diff suppressed because one or more lines are too long

View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.924
// templ: version: v0.3.937
package templates
//lint:file-ignore SA4006 This context is only used if a nested component is present.

View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.924
// templ: version: v0.3.937
package templates
//lint:file-ignore SA4006 This context is only used if a nested component is present.

View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.924
// templ: version: v0.3.937
package templates
//lint:file-ignore SA4006 This context is only used if a nested component is present.

View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.924
// templ: version: v0.3.937
package templates
//lint:file-ignore SA4006 This context is only used if a nested component is present.

View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.924
// templ: version: v0.3.937
package templates
//lint:file-ignore SA4006 This context is only used if a nested component is present.

View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.924
// templ: version: v0.3.937
package templates
//lint:file-ignore SA4006 This context is only used if a nested component is present.

View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.924
// templ: version: v0.3.937
package templates
//lint:file-ignore SA4006 This context is only used if a nested component is present.

View File

@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.924
// templ: version: v0.3.937
package templates
//lint:file-ignore SA4006 This context is only used if a nested component is present.

View File

@ -1,4 +1,4 @@
/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
@ -204,6 +204,9 @@
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
padding-block: 0;
}
::-webkit-calendar-picker-indicator {
line-height: 1;
}
:-moz-ui-invalid {
box-shadow: none;
}
@ -748,6 +751,9 @@
.py-8 {
padding-block: calc(var(--spacing) * 8);
}
.pt-1 {
padding-top: calc(var(--spacing) * 1);
}
.pt-2 {
padding-top: calc(var(--spacing) * 2);
}
@ -757,8 +763,8 @@
.pb-1 {
padding-bottom: calc(var(--spacing) * 1);
}
.pl-4 {
padding-left: calc(var(--spacing) * 4);
.pb-2 {
padding-bottom: calc(var(--spacing) * 2);
}
.pl-10 {
padding-left: calc(var(--spacing) * 10);