azpect/Potion
1
1
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

(FIX): Added directions for create page.

Browse Source 
It was brought to my attention that the menu was hard to understand. Now
there are some simple directions.
This commit is contained in:
Hayden Hargreaves 2025-08-20 21:33:21 -07:00
parent 3dd8185257
commit d22f9a7ff3
17 changed files with 68 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
internal/templates/components/banner_templ.go
View File

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

2
internal/templates/components/cards_templ.go
View File

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

2
internal/templates/components/dropdowns_templ.go
View File

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

2
internal/templates/components/navbar_templ.go
View File

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

2
internal/templates/components/search_bar_templ.go
View File

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

2
internal/templates/layouts/app_layout_templ.go
View File

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

51
internal/templates/pages/create.templ
View File

@ -32,10 +32,13 @@ templ Page() {
hx-encoding="multipart/form-data" hx-encoding="multipart/form-data"
> >
<div class="flex flex-col"> <div class="flex flex-col">
<label for="title" class="text-sm mb-2"> <label for="title" class="text-sm">
Recipe Title Recipe Title
<span class="text-red-500">*</span> <span class="text-red-500">*</span>
</label> </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 <input
onkeydown="return event.key != 'Enter';" onkeydown="return event.key != 'Enter';"
class="peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 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> <p class="hidden peer-invalid:block text-xs text-red-500 my-1">Please enter a title. Between 1-128 characters.</p>
</div> </div>
<div class="flex flex-col my-4"> <div class="flex flex-col my-4">
<label for="description" class="text-sm mb-2"> <label for="description" class="text-sm">
Description Description
<span class="text-red-500">*</span> <span class="text-red-500">*</span>
</label> </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 <textarea
class="peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 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" 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>
<div class="my-4 flex flex-col gap-x-2"> <div class="my-4 flex flex-col gap-x-2">
<div class="flex flex-col flex-grow"> <div class="flex flex-col flex-grow">
<label for="tags" class="text-sm mb-2"> <label for="tags" class="text-sm">
Recipe Tags Recipe Tags
</label> </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 <input
onkeydown="return event.key != 'Enter';" 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" 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>
<div class="my-4 flex gap-x-2"> <div class="my-4 flex gap-x-2">
<div class="flex flex-col flex-grow w-1/3"> <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 Prep Time
<span class="text-red-500">*</span> <span class="text-red-500">*</span>
</label> </label>
<p class="text-xs pt-1 pb-2 text-gray-700">
Please provide the estimated prep time (minutes).
</p>
<input <input
onkeydown="return event.key != 'Enter';" onkeydown="return event.key != 'Enter';"
class="peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 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> </p>
</div> </div>
<div class="flex flex-col flex-grow w-1/3"> <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 Cook Time
<span class="text-red-500">*</span> <span class="text-red-500">*</span>
</label> </label>
<p class="text-xs pt-1 pb-2 text-gray-700">
Please provide the estimated cook time (minutes).
</p>
<input <input
onkeydown="return event.key != 'Enter';" onkeydown="return event.key != 'Enter';"
class="peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 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> </p>
</div> </div>
<div class="flex flex-col flex-grow w-1/3"> <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 Serving Size
<span class="text-red-500">*</span> <span class="text-red-500">*</span>
</label> </label>
<p class="text-xs pt-1 pb-2 text-gray-700">
Please provide the estimated serving size.
</p>
<input <input
onkeydown="return event.key != 'Enter';" onkeydown="return event.key != 'Enter';"
class="peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 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>
<div class="my-4 flex gap-x-2"> <div class="my-4 flex gap-x-2">
<div class="flex flex-col flex-grow w-1/3"> <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 Category
<span class="text-red-500">*</span> <span class="text-red-500">*</span>
</label> </label>
<p class="text-xs pt-1 pb-2 text-gray-700">
Please provide the meal category.
</p>
<select <select
id="category" id="category"
name="category" name="category"
@ -187,10 +208,13 @@ templ Page() {
</p> </p>
</div> </div>
<div class="flex flex-col flex-grow w-1/3"> <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 Difficulty
<span class="text-red-500">*</span> <span class="text-red-500">*</span>
</label> </label>
<p class="text-xs pt-1 pb-2 text-gray-700">
Please provide a baseline difficulty.
</p>
<select <select
id="difficulty" id="difficulty"
name="difficulty" name="difficulty"
@ -216,6 +240,7 @@ templ Page() {
Ingredients Ingredients
<span class="text-red-500">*</span> <span class="text-red-500">*</span>
</label> </label>
<p class="text-xs py-1 text-gray-700">Please provide a list of ingredients and their quantities.</p>
<ul id="ingredient-list"> <ul id="ingredient-list">
<li class="w-full flex gap-x-2 py-2"> <li class="w-full flex gap-x-2 py-2">
<div class="flex-grow"> <div class="flex-grow">
@ -267,6 +292,9 @@ templ Page() {
Instructions Instructions
<span class="text-red-500">*</span> <span class="text-red-500">*</span>
</label> </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"> <div id="instruction-list" class="flex flex-col">
<textarea <textarea
class="peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 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"> <label for="image" class="text-sm">
Recipe Image Recipe Image
</label> </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 <input
type="file" type="file"
accept="image/*" accept="image/*"
@ -383,7 +414,7 @@ templ Page() {
list.appendChild(div); list.appendChild(div);
} }
function removeInstruction (num) { function removeInstruction(num) {
const list = document.getElementById("instruction-list"); const list = document.getElementById("instruction-list");
const item = list.querySelector(`#instruction-${num}`); const item = list.querySelector(`#instruction-${num}`);
if (item) item.remove(); if (item) item.remove();
@ -418,5 +449,5 @@ templ Page() {
remainingItems[i - 2].replaceWith(div); remainingItems[i - 2].replaceWith(div);
} }
} }
</script> </script>
} }

8
internal/templates/pages/create_templ.go
View File

File diff suppressed because one or more lines are too long

2
internal/templates/pages/favorites_templ.go
View File

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

2
internal/templates/pages/home_templ.go
View File

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

2
internal/templates/pages/list_templ.go
View File

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

2
internal/templates/pages/login_templ.go
View File

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

2
internal/templates/pages/notFound_templ.go
View File

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

2
internal/templates/pages/profile_templ.go
View File

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

2
internal/templates/pages/recipe_templ.go
View File

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

2
internal/templates/pages/search_templ.go
View File

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

12
web/static/css/tailwind.css
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 properties;
@layer theme, base, components, utilities; @layer theme, base, components, utilities;
@layer theme { @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 { ::-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; padding-block: 0;
} }
::-webkit-calendar-picker-indicator {
line-height: 1;
}
:-moz-ui-invalid { :-moz-ui-invalid {
box-shadow: none; box-shadow: none;
} }
@ -748,6 +751,9 @@
.py-8 { .py-8 {
padding-block: calc(var(--spacing) * 8); padding-block: calc(var(--spacing) * 8);
} }
.pt-1 {
padding-top: calc(var(--spacing) * 1);
}
.pt-2 { .pt-2 {
padding-top: calc(var(--spacing) * 2); padding-top: calc(var(--spacing) * 2);
} }
@ -757,8 +763,8 @@
.pb-1 { .pb-1 {
padding-bottom: calc(var(--spacing) * 1); padding-bottom: calc(var(--spacing) * 1);
} }
.pl-4 { .pb-2 {
padding-left: calc(var(--spacing) * 4); padding-bottom: calc(var(--spacing) * 2);
} }
.pl-10 { .pl-10 {
padding-left: calc(var(--spacing) * 10); padding-left: calc(var(--spacing) * 10);