summaryrefslogtreecommitdiff
path: root/recipeBuddy/src
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
parent443ded565b1482eaf17176967372f3986497f1b8 (diff)
Add material look to Add Recipe form
Diffstat (limited to 'recipeBuddy/src')
-rw-r--r--recipeBuddy/src/app/add-recipe/add-recipe.component.css15
-rw-r--r--recipeBuddy/src/app/add-recipe/add-recipe.component.html91
-rw-r--r--recipeBuddy/src/app/app.module.ts13
-rw-r--r--recipeBuddy/src/index.html2
-rw-r--r--recipeBuddy/src/styles.css3
5 files changed, 75 insertions, 49 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>
diff --git a/recipeBuddy/src/app/app.module.ts b/recipeBuddy/src/app/app.module.ts
index 4d2ab47..359254e 100644
--- a/recipeBuddy/src/app/app.module.ts
+++ b/recipeBuddy/src/app/app.module.ts
@@ -13,6 +13,12 @@ import { HttpClientModule } from '@angular/common/http';
import { AddRecipeComponent } from './add-recipe/add-recipe.component';
import { ReactiveFormsModule } from '@angular/forms';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
@NgModule({
declarations: [
@@ -26,7 +32,12 @@ import { ReactiveFormsModule } from '@angular/forms';
AppRoutingModule,
MatCardModule,
HttpClientModule,
- ReactiveFormsModule
+ ReactiveFormsModule,
+ NoopAnimationsModule,
+ MatInputModule,
+ MatFormFieldModule,
+ MatIconModule,
+ MatButtonModule
],
providers: [],
bootstrap: [AppComponent]
diff --git a/recipeBuddy/src/index.html b/recipeBuddy/src/index.html
index 122efbf..29b1c1b 100644
--- a/recipeBuddy/src/index.html
+++ b/recipeBuddy/src/index.html
@@ -6,6 +6,8 @@
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
+ <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<app-root></app-root>
diff --git a/recipeBuddy/src/styles.css b/recipeBuddy/src/styles.css
index 90d4ee0..7e7239a 100644
--- a/recipeBuddy/src/styles.css
+++ b/recipeBuddy/src/styles.css
@@ -1 +1,4 @@
/* You can add global styles to this file, and also import other style files */
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }