(UI/STYLE): Began working on the spec and UI for the create page.
Nearly completed the UI spec, but did not start the API spec. Started on the UI implementation using an example from my Potion Gem.
This commit is contained in:
Hayden Hargreaves
parent
6ec6f4d1c7
commit
a0c67cedc5
@ -1,5 +1,70 @@
|
||||
<div class="text-white my-5">
|
||||
<h1 class="text-xl">
|
||||
Page: <span class="font-bold">{@current_page}</span>
|
||||
</h1>
|
||||
<div class="w-full h-full mb-12">
|
||||
|
||||
<!-- Container: Page -->
|
||||
<div class="w-full h-full flex flex-col">
|
||||
|
||||
<!-- Content: Recipe Creation Form -->
|
||||
<main class="w-full min-h-screen p-4">
|
||||
|
||||
<!-- Section: Heading Banner -->
|
||||
<section class="w-full bg-gradient-to-tr from-primary-600 to-primary-500
|
||||
text-white text-center px-6 py-10 rounded-lg">
|
||||
<h1 class="text-3xl font-extrabold mb-2">
|
||||
Create Your Recipe
|
||||
</h1>
|
||||
<p class="text-lg mt-4">
|
||||
Share your culinary masterpieces with the world! Fill out the details below
|
||||
to get started.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Section: Recipe Details -->
|
||||
<section class="w-full my-8">
|
||||
<div class="flex flex-col mb-4">
|
||||
<h2 class="text-2xl font-semibold text-white flex items-center">
|
||||
Recipe Details
|
||||
</h2>
|
||||
<p class="text-red-500 text-sm my-1">*Required</p>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Title input -->
|
||||
<div class="grid grid-cols-1 gap-6">
|
||||
<div>
|
||||
<label for="title" class="block font-sm font-medium text-background-100">
|
||||
Recipe Title <span class="text-red-500 text-sm my-1">*</span>
|
||||
</label>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
id="title"
|
||||
name="title"
|
||||
placeholder="e.g., Avocado Toast"
|
||||
class="my-1 w-full px-4 py-2 border border-background-200 rounded-md shadow-sm
|
||||
focus:ring-primary-500 focus:border-primary-500 bg-transparent text-background-100"
|
||||
maxlength="128"
|
||||
required />
|
||||
|
||||
<!-- Hidden Messages: Valid or Invalid -->
|
||||
<div class="hidden items-center text-red-600 text-xs mt-1" id="title-error">
|
||||
<svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm-1-12a1 1 0 112 0v4a1 1 0 11-2 0V6zm0 8a1 1 0 102 0 1 1 0 00-2 0z" clip-rule="evenodd"></path></svg>
|
||||
Title is required and max 128 characters.
|
||||
</div>
|
||||
<div class="hidden items-center text-green-600 text-xs mt-1" id="title-valid">
|
||||
<svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
|
||||
Looks good!
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,11 +1,3 @@
|
||||
<!--
|
||||
<div class="text-white my-5">
|
||||
<h1 class="text-xl">
|
||||
Page: <span class="font-bold">{@current_page}</span>
|
||||
</h1>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<div class="w-full h-full mb-12">
|
||||
|
||||
<!-- Container: Page -->
|
||||
|
||||
@ -33,7 +33,7 @@ by page.
|
||||
|
||||
#### Home
|
||||
|
||||
Home page will server as the landing page where users can search recipes, filter their search, as
|
||||
The home page will server as the landing page where users can search recipes, filter their search, as
|
||||
well as view lists of recently made recipes, recently viewed and trending recipes lists.
|
||||
|
||||
##### UI Requirements
|
||||
@ -128,6 +128,65 @@ well as view lists of recently made recipes, recently viewed and trending recipe
|
||||
|
||||
#### Create
|
||||
|
||||
The create page will contain a page to create a new recipe. It will include
|
||||
all of the required details without any need to move to other pages. The entire
|
||||
creation process will take place here
|
||||
|
||||
|
||||
##### UI Requirements
|
||||
|
||||
- [ ] Create Recipe Heading Banner
|
||||
- [ ] Large, simple text banner that displays a header
|
||||
- [ ] Smaller text section that contains some useful information for using the wizard
|
||||
|
||||
- [ ] Recipe Creation Wizard
|
||||
- [ ] **Recipe Details:** required
|
||||
- [ ] **Recipe title:** small text input (1 to 128)
|
||||
- [ ] **Recipe description:** large text input
|
||||
- [ ] **Meal category:** pill radio buttons or drop down*
|
||||
- [ ] **Service size:** numeric input (1 to 16)
|
||||
- [ ] **Difficulty rating:** star buttons that can be selected (up to 5)
|
||||
- [ ] **Duration:** prep and cook time, individual numeric inputs
|
||||
- [ ] **Ingredients:** required
|
||||
- [ ] **Dynamic ingredient list:** List of each ingredient
|
||||
- [ ] **Content:** name and quantity (both text inputs)
|
||||
- [ ] **Actions:** delete button and **reorder element***
|
||||
- [ ] **Add ingredient button:** Simple button to add a blank ingredient row
|
||||
- [ ] **Instructions:** required
|
||||
- [ ] **Dynamic instructions list:** Numbered list of each instruction
|
||||
- [ ] **Content:** number and large text instruction
|
||||
- [ ] **Rich text editor?***
|
||||
- [ ] **Actions:** delete button and **reorder element***
|
||||
- [ ] **Add step button:** Simple button to add a blank instruction element
|
||||
- [ ] **Media & Tags:** optional
|
||||
- [ ] **Image Upload**
|
||||
- [ ] Single image selector for the thumbnail image
|
||||
- [ ] Small image display once one has been upload
|
||||
- [ ] Remove button to remove the image
|
||||
- [ ] Replace button to replace the image
|
||||
- [ ] **Tags**
|
||||
- [ ] Text input to add tags
|
||||
- [ ] Using list of existing tags, use a prefill while typing
|
||||
- [ ] Tags that don't exist will be added
|
||||
- [ ] Display a small list of added tags
|
||||
- [ ] Clicking a tag will remove it from the list
|
||||
- [ ] **Footer & Submit**
|
||||
- [ ] Save recipe button to complete the form
|
||||
- [ ] Button is disabled until the minimum required fields are complete*
|
||||
|
||||
- [ ] Input Validation
|
||||
- [ ] Required elements should have a **required indicator**
|
||||
- [ ] Required elements will be validated input
|
||||
- [ ] **Valid:** Green outline or indicator* maybe a small, green check mark
|
||||
- [ ] **Invalid:** Red outline or indicator* maybe a red border with error text
|
||||
|
||||
|
||||
'*': Not sure yet, still under consideration
|
||||
|
||||
|
||||
##### API Requirements
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user