summaryrefslogtreecommitdiff
path: root/recipeBuddy/src/app/add-recipe
diff options
context:
space:
mode:
authorTucker Evans <tuckerevans24@gmail.com>2019-12-05 15:03:16 -0500
committerTucker Evans <tuckerevans24@gmail.com>2019-12-08 15:03:07 -0500
commit1431653196467eec7608cb30592d462b4c207be4 (patch)
treeeaa93906777d0bc45f0ecc5506195bc809d2d611 /recipeBuddy/src/app/add-recipe
parent443ded565b1482eaf17176967372f3986497f1b8 (diff)
Add material look to Add Recipe form
Diffstat (limited to 'recipeBuddy/src/app/add-recipe')
-rw-r--r--recipeBuddy/src/app/add-recipe/add-recipe.component.css15
-rw-r--r--recipeBuddy/src/app/add-recipe/add-recipe.component.html91
2 files changed, 58 insertions, 48 deletions
diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.css b/recipeBuddy/src/app/add-recipe/add-recipe.component.css
index e69de29..901e02d 100644
--- a/recipeBuddy/src/app/add-recipe/add-recipe.component.css
+++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.css
@@ -0,0 +1,15 @@
+.form {
+ min-width: 150px;
+ max-width: 750px;
+ width: 100%;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.full-width {
+ width: 100%;
+}
+
+td {
+ padding-right: 8px;
+}
diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.html b/recipeBuddy/src/app/add-recipe/add-recipe.component.html
index 3a42687..b4f70ce 100644
--- a/recipeBuddy/src/app/add-recipe/add-recipe.component.html
+++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.html
@@ -1,70 +1,65 @@
-<form [formGroup]="recipeForm">
- <label>
- Name:
- <input type="text" formControlName="recipeName">
- </label>
- <label>
- Description:
- <input type="text" formControlName="desc">
- </label>
- <label>
- Servings:
- <input type="text" formControlName="servingSize">
- </label>
- <label>
- Cooking Time:
- <input type="text" formControlName="cookTime">
- </label>
- <label>
- Keywords/Tags:
- <input type="text" formControlName="tags">
- </label>
- <label>
- Photos (URLS):
- <input type="text" formControlName="photos">
- </label>
+<form [formGroup]="recipeForm" class="form">
+<h2>Add Recipe</h2>
+ <mat-form-field class="full-width">
+ <input matInput placeholder="Name" type="text" formControlName="recipeName">
+ </mat-form-field>
+ <mat-form-field class="full-width">
+ <textarea matInput placeholder="Description"
+ formControlName="desc"> TEST </textarea>
+ </mat-form-field>
+ <mat-form-field class="full-width">
+ <input matInput placeholder="Servings" type=text formControlName="servingSize">
+ </mat-form-field>
+ <mat-form-field class="full-width">
+ <input matInput placeholder="Cooking Time" type="text" formControlName="cookTime">
+ </mat-form-field>
+ <mat-form-field class="full-width">
+ <input matInput placeholder="Keywords/Tags" type="text" formControlName="tags">
+ </mat-form-field>
+ <mat-form-field class="full-width">
+ <input matInput placeholder="Photos (URLS)" type="text" formControlName="photos">
+ </mat-form-field>
<div formArrayName="ingredients">
<h3>Ingredients</h3>
- <button (click)="addIngredient()">Add Ingredient</button>
+ <button mat-mini-fab color="primary" (click)="addIngredient()">
+ <mat-icon>add</mat-icon>
+ </button>
<div *ngFor="let address of ingredients.controls; let i=index">
<div [formGroupName]="i">
<h4>Ingredient {{ i + 1 }}</h4>
- <label>
- Name:
- <input type="text"
+ <mat-form-field class="full-width">
+ <input matInput placeholder="Name" type="text"
formControlName="ingrName">
- </label>
- <label>
- Amount:
- <input type="text"
+ </mat-form-field>
+ <mat-form-field class="full-width">
+ <input matInput placeholder="Amount" type="text"
formControlName="amount">
- </label>
- <label>
- Name:
- <input type="text"
+ </mat-form-field>
+ <mat-form-field class="full-width">
+ <input matInput placeholder="Units" type="text"
formControlName="units">
- </label>
+ </mat-form-field>
</div>
</div>
</div>
<div formArrayName="steps">
<h3>Steps</h3>
- <button (click)="addStep()">Add Step</button>
+ <button mat-mini-fab color="primary" (click)="addStep()">
+ <mat-icon>add</mat-icon>
+ </button>
<div *ngFor="let address of steps.controls; let i=index">
<div [formGroupName]="i">
<h4>Step {{ i + 1 }}</h4>
- <label>
- Instructions:
- <input type="text"
- formControlName="instruct">
- </label>
- <label>
- Timer:
- <input type="text"
+ <mat-form-field class="full-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"
formControlName="timer">
- </label>
+ </mat-form-field>
</div>
</div>
</div>