From 1431653196467eec7608cb30592d462b4c207be4 Mon Sep 17 00:00:00 2001 From: Tucker Evans Date: Thu, 5 Dec 2019 15:03:16 -0500 Subject: Add material look to Add Recipe form --- .../src/app/add-recipe/add-recipe.component.css | 15 ++++ .../src/app/add-recipe/add-recipe.component.html | 91 ++++++++++------------ recipeBuddy/src/app/app.module.ts | 13 +++- recipeBuddy/src/index.html | 2 + recipeBuddy/src/styles.css | 3 + 5 files changed, 75 insertions(+), 49 deletions(-) (limited to 'recipeBuddy/src') 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 @@ -
- - - - - - + +

Add Recipe

+ + + + + + + + + + + + + + + + + +

Ingredients

- +

Ingredient {{ i + 1 }}

- - - +

Steps

- +

Step {{ i + 1 }}

- - +
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 @@ + + 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; } -- cgit v1.1