summaryrefslogtreecommitdiff
path: root/recipeBuddy/src/app/add-recipe
diff options
context:
space:
mode:
authorTucker Evans <tuckerevans24@gmail.com>2019-12-07 11:52:00 -0500
committerTucker Evans <tuckerevans24@gmail.com>2019-12-08 15:03:07 -0500
commit75a82f8a40b9f296aa71a4b6cef0fa8ea8a1c591 (patch)
treedd3bf3cdea3ac116bee9c3719dc8c4798360cacf /recipeBuddy/src/app/add-recipe
parent2a89221eee68bc26ea3e90c380ce983f5a0985f0 (diff)
Fix UI of add form
Moves Add/Delete buttons around Puts Ingredient/Step parts together Changes Submit button look Removes JSON preview of form value object
Diffstat (limited to 'recipeBuddy/src/app/add-recipe')
-rw-r--r--recipeBuddy/src/app/add-recipe/add-recipe.component.html40
1 files changed, 23 insertions, 17 deletions
diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.html b/recipeBuddy/src/app/add-recipe/add-recipe.component.html
index 47d2ea1..36d45b6 100644
--- a/recipeBuddy/src/app/add-recipe/add-recipe.component.html
+++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.html
@@ -24,22 +24,19 @@
<div formArrayName="ingredients">
<h3>Ingredients</h3>
- <button mat-mini-fab color="primary" (click)="addIngredient()"
- type="button">
- <mat-icon>add</mat-icon>
- </button>
<div *ngFor="let address of ingredients.controls; let i=index">
<div [formGroupName]="i">
<h4>Ingredient {{ i + 1 }}</h4>
- <mat-form-field class="full-width">
+ <div class="full-width">
+ <mat-form-field class="quarter-width">
<input matInput placeholder="Name" type="text"
formControlName="ingrName">
</mat-form-field>
- <mat-form-field class="full-width">
+ <mat-form-field class="quarter-width">
<input matInput placeholder="Amount" type="text"
formControlName="amount">
</mat-form-field>
- <mat-form-field class="full-width">
+ <mat-form-field class="quarter-width">
<input matInput placeholder="Units" type="text"
formControlName="units">
</mat-form-field>
@@ -47,35 +44,44 @@
type="button" style="margin-left: 10px">
<mat-icon>remove</mat-icon>
</button>
+ </div>
</div>
</div>
+ <div style="text-align: center">
+ <button mat-mini-fab (click)="addIngredient()"
+ type="button">
+ <mat-icon>add</mat-icon>
+ </button>
+ </div>
</div>
<div formArrayName="steps">
<h3>Steps</h3>
- <button mat-mini-fab color="primary" (click)="addStep()" type="button">
- <mat-icon>add</mat-icon>
- </button>
<div *ngFor="let address of steps.controls; let i=index">
<div [formGroupName]="i">
<h4>Step {{ i + 1 }}</h4>
- <mat-form-field class="full-width">
+ <div class="ful-width">
+ <mat-form-field class="half-width">
<textarea matInput placeholder="Instructions" type="text" formControlName="instruct">
</textarea>
</mat-form-field>
- <mat-form-field class="full-width">
- <input matInput placeholder="Timer" type="text"
+ <mat-form-field class="quarter-width">
+ <mat-label>Timer</mat-label>
+ <input matInput placeholder="hh:mm" type="text"
formControlName="timer">
</mat-form-field>
<button matSuffix mat-mini-fab (click)="rmStep(i)"
type="button" style="margin-left: 10px">
<mat-icon>remove</mat-icon>
</button>
+ </div>
</div>
</div>
+ <div style="text-align: center">
+ <button mat-mini-fab (click)="addStep()" matSuffix type="button">
+ <mat-icon>add</mat-icon>
+ </button>
+ </div>
</div>
- <button mat-button color="primary" type="submit">Submit</button>
+ <button mat-flat-button color="primary" type="submit">Submit</button>
</form>
-<p>
-Value: {{ recipeForm.value | json }}
-</p>