From 23592cae5cdfe61f742151204a98334fa693569f Mon Sep 17 00:00:00 2001 From: schencej Date: Wed, 11 Dec 2019 18:15:48 -0500 Subject: added styling to cook pages --- .../src/app/cook-page/cook-page.component.css | 27 ++++++++++++++++--- .../src/app/cook-page/cook-page.component.html | 29 +++++++++++++-------- .../src/app/cook-page/cook-page.component.ts | 30 +++++++++++++++++----- 3 files changed, 66 insertions(+), 20 deletions(-) (limited to 'recipeBuddy/src/app/cook-page') diff --git a/recipeBuddy/src/app/cook-page/cook-page.component.css b/recipeBuddy/src/app/cook-page/cook-page.component.css index b2b97e5..a899372 100644 --- a/recipeBuddy/src/app/cook-page/cook-page.component.css +++ b/recipeBuddy/src/app/cook-page/cook-page.component.css @@ -1,45 +1,66 @@ +h4{text-align: center;} +h1{text-align: center; font-size: 50px} + .previous { margin: auto; + margin-top: 40px; width: 200px; height: 200px; border: solid; align: center; text-align: center; grid-column: 1; + grid-row: 2; background-color: grey; - } +.title { + margin: auto; + text-align: center; + grid-row: 1; + grid-column: 2; +} + .current { margin: auto; + margin-top: 30px; width: 300px; height:300px; border: solid; text-align: center; grid-column: 2; + grid-row: 2; background-color: grey; } .next { margin: auto; + margin-top: 40px; width: 200px; height: 200px; border: solid; align: center; text-align: center; grid-column: 3; + grid-row: 2; background-color: grey; - } .container { + text-align: center; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; - grid-template-rows: 1fr; + grid-template-rows: 1fr 2fr; } .step-count { text-align: center; } + +.last-button { + grid-row: 2; + grid-column: 3; + margin-top: 100px; +} diff --git a/recipeBuddy/src/app/cook-page/cook-page.component.html b/recipeBuddy/src/app/cook-page/cook-page.component.html index 4744ed1..0574e5f 100644 --- a/recipeBuddy/src/app/cook-page/cook-page.component.html +++ b/recipeBuddy/src/app/cook-page/cook-page.component.html @@ -1,28 +1,37 @@
- Serving {{servingSize}} +
+

{{recipe.name}}

+

Serving {{servingSize}}

+
+
-

Step {{stepNum}}

+

Step {{stepNum}}

{{currentStep}}

-
-

{{timeHoursFirst}}{{timeHoursSecond}}:{{timeMinutesFirst}}{{timeMinutesSecond}}:{{timeSecondsFirst}}{{timeSecondsSecond}}

- +
+

{{timeHoursFirst}}{{timeHoursSecond}}:{{timeMinutesFirst}}{{timeMinutesSecond}}:{{timeSecondsFirst}}{{timeSecondsSecond}}

+
- - + + +
+ +
+ +
-

Step: {{stepNum}}/{{steps.length}}

+

Step: {{stepNum}}/{{steps.length}}

diff --git a/recipeBuddy/src/app/cook-page/cook-page.component.ts b/recipeBuddy/src/app/cook-page/cook-page.component.ts index a3a1dfe..fea2611 100644 --- a/recipeBuddy/src/app/cook-page/cook-page.component.ts +++ b/recipeBuddy/src/app/cook-page/cook-page.component.ts @@ -1,7 +1,7 @@ import {Component, OnInit} from '@angular/core'; import {Recipe} from '../DataModels/recipe'; import {Step} from '../DataModels/step'; -import {RecipePassService} from '../recipePass/recipe-pass.service' +import {RecipePassService} from '../recipePass/recipe-pass.service'; @Component({ selector: 'app-cook-page', @@ -9,8 +9,10 @@ import {RecipePassService} from '../recipePass/recipe-pass.service' styleUrls: ['./cook-page.component.css'] }) export class CookPageComponent implements OnInit { + recipe:Recipe; steps: Step[]; stepNum: number; + name: string; firstStep: boolean = true; lastStep: boolean = false; @@ -33,9 +35,10 @@ export class CookPageComponent implements OnInit { constructor(private recipePass: RecipePassService){} ngOnInit() { - var recipe: Recipe = this.recipePass.getRecipe(); - this.steps = recipe.steps; - this.servingSize = recipe.servingSize; + this.recipe = this.recipePass.getRecipe(); + this.name = this.recipe.name; + this.steps = this.recipe.steps; + this.servingSize = this.recipe.servingSize; this.stepNum = 1; this.currentStep = this.steps[this.stepNum-1].instruction; if(this.steps.length > 1) @@ -43,7 +46,7 @@ export class CookPageComponent implements OnInit { else this.lastStep = true; - this.timeLeft = this.steps[this.stepNum-1].timer; + this.timeLeft = this.steps[this.stepNum-1].timer*60; this.timeHoursFirst = Math.floor(this.timeLeft/3600/10); this.timeHoursSecond = Math.floor(this.timeLeft/3600%10); this.timeMinutesFirst = Math.floor(this.timeLeft%3600/60/10); @@ -63,7 +66,13 @@ export class CookPageComponent implements OnInit { } this.previousStep = this.steps[this.stepNum-2].instruction; this.currentStep = this.steps[this.stepNum-1].instruction; - this.timeLeft = this.steps[this.stepNum-1].timer; + this.timeLeft = this.steps[this.stepNum-1].timer*60; + this.timeHoursFirst = Math.floor(this.timeLeft/3600/10); + this.timeHoursSecond = Math.floor(this.timeLeft/3600%10); + this.timeMinutesFirst = Math.floor(this.timeLeft%3600/60/10); + this.timeMinutesSecond = Math.floor(this.timeLeft%3600/60%10); + this.timeSecondsFirst = Math.floor(this.timeLeft%3600%60/10); + this.timeSecondsSecond = Math.floor(this.timeLeft%3600%60%10); } previous(): void { @@ -77,7 +86,13 @@ export class CookPageComponent implements OnInit { } this.currentStep = this.steps[this.stepNum-1].instruction; this.nextStep = this.steps[this.stepNum].instruction; - this.timeLeft = this.steps[this.stepNum-1].timer; + this.timeLeft = this.steps[this.stepNum-1].timer*60; + this.timeHoursFirst = Math.floor(this.timeLeft/3600/10); + this.timeHoursSecond = Math.floor(this.timeLeft/3600%10); + this.timeMinutesFirst = Math.floor(this.timeLeft%3600/60/10); + this.timeMinutesSecond = Math.floor(this.timeLeft%3600/60%10); + this.timeSecondsFirst = Math.floor(this.timeLeft%3600%60/10); + this.timeSecondsSecond = Math.floor(this.timeLeft%3600%60%10); } hasTimer(): boolean { @@ -91,6 +106,7 @@ export class CookPageComponent implements OnInit { console.log("timerStarted"); this.timerInterval = setInterval(() => { if(this.timeLeft > 0) { + this.timeLeft--; this.timeHoursFirst = Math.floor(this.timeLeft/3600/10); this.timeHoursSecond = Math.floor(this.timeLeft/3600%10); this.timeMinutesFirst = Math.floor(this.timeLeft%3600/60/10); -- cgit v1.1