diff options
Diffstat (limited to 'recipeBuddy')
| -rw-r--r-- | recipeBuddy/angular.json | 5 | ||||
| -rw-r--r-- | recipeBuddy/src/app/add-recipe/add-recipe.component.css | 15 | ||||
| -rw-r--r-- | recipeBuddy/src/app/add-recipe/add-recipe.component.html | 91 | ||||
| -rw-r--r-- | recipeBuddy/src/app/app.module.ts | 13 | ||||
| -rw-r--r-- | recipeBuddy/src/index.html | 2 | ||||
| -rw-r--r-- | recipeBuddy/src/styles.css | 3 |
6 files changed, 79 insertions, 50 deletions
diff --git a/recipeBuddy/angular.json b/recipeBuddy/angular.json index f316a85..982ce12 100644 --- a/recipeBuddy/angular.json +++ b/recipeBuddy/angular.json @@ -24,6 +24,7 @@ "src/assets" ], "styles": [ + "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "src/styles.css" ], "scripts": [] @@ -89,6 +90,7 @@ "src/assets" ], "styles": [ + "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "src/styles.css" ], "scripts": [] @@ -120,6 +122,7 @@ } } } - }}, + } + }, "defaultProject": "recipeBuddy" }
\ No newline at end of file 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; } |