From 7698331e4bb85232535182eeeaa09fdf54b66a76 Mon Sep 17 00:00:00 2001 From: Jacob Date: Tue, 10 Dec 2019 04:44:33 -0500 Subject: Update main page to put recipes three wide, and to work --- .../src/app/recipe-card/recipe-card.component.css | 66 +++++++--------------- .../src/app/recipe-card/recipe-card.component.html | 33 +++++------ .../src/app/recipe-card/recipe-card.component.ts | 13 ++--- 3 files changed, 43 insertions(+), 69 deletions(-) (limited to 'recipeBuddy/src/app') diff --git a/recipeBuddy/src/app/recipe-card/recipe-card.component.css b/recipeBuddy/src/app/recipe-card/recipe-card.component.css index 8cf412a..7b0fd3b 100644 --- a/recipeBuddy/src/app/recipe-card/recipe-card.component.css +++ b/recipeBuddy/src/app/recipe-card/recipe-card.component.css @@ -1,21 +1,10 @@ - .example-viewport{ - height: 250px; - width: 80%; - margin-left: 50px; - border: 1px solid saddlebrown; +.example-viewport { + height: 500px; + width: 100%; display: flex; - } - .list{ - height: 50px; - justify-content: center; - align-items: center; - } - h2{ - margin-left: 40px; - } - .container{ - margin-bottom: 40px; - } + margin-left: auto; + margin-right: auto; +} p { font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; } @@ -46,33 +35,9 @@ button{ margin:0 auto;width:100px; } .example-card { - max-width: 400px; float: left; - width:25%; - padding: 0px 35px; -} -.example-header-image { - background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg'); - background-size: cover; -} -#like-rating { - height: auto; - width: auto; - max-width: 200px; - max-height: 1000px; - background-size: contain; -} -#like-rating img{ - width:100%; -} -#rating { - height: auto; - width: auto; - max-width: 200px; - max-height: 1000px; -} -#rating img { - width:100%; + width: 100%; + margin: 10px; } #edit { padding: 10px; @@ -86,9 +51,6 @@ button{ #delete { padding: 10px; } -#previous { - float:left; -} .example-card:hover { border: solid; } @@ -96,4 +58,16 @@ button{ font-weight: bold; cursor: pointer; padding: 10px; +} +#imgContainer { + padding:10px; + text-align:center; +} +#ratingContainer { + padding:10px; +} +#cardContainer { + width: 35%; + padding: 5%; + float: left; } \ No newline at end of file diff --git a/recipeBuddy/src/app/recipe-card/recipe-card.component.html b/recipeBuddy/src/app/recipe-card/recipe-card.component.html index 4584d6f..7a9f8d4 100644 --- a/recipeBuddy/src/app/recipe-card/recipe-card.component.html +++ b/recipeBuddy/src/app/recipe-card/recipe-card.component.html @@ -1,33 +1,34 @@ -
-

{{recipe}}

-
- + \ No newline at end of file diff --git a/recipeBuddy/src/app/recipe-card/recipe-card.component.ts b/recipeBuddy/src/app/recipe-card/recipe-card.component.ts index bd44316..a9a4618 100644 --- a/recipeBuddy/src/app/recipe-card/recipe-card.component.ts +++ b/recipeBuddy/src/app/recipe-card/recipe-card.component.ts @@ -1,5 +1,6 @@ import {Component,OnInit} from '@angular/core'; import{BackendService} from '../REST_service/backend.service'; +import{Recipe} from '../DataModels/recipe'; /** * @title Card with multiple sections @@ -13,8 +14,8 @@ export class RecipeCardComponent implements OnInit { constructor(private restService: BackendService) {} - recipes = []; //array of recipe objects - mynumbers = []; + + recipes: Recipe[] = []; //array of recipe objects ngOnInit() { this.restService.getRecipes().subscribe( @@ -23,8 +24,10 @@ export class RecipeCardComponent implements OnInit { for(i = 0; i < res.length; i++) { this.restService.getRecipe(res[i]).subscribe( res2 => { - this.recipes.push(res2) + this.recipes = [...this.recipes, res2] + console.log(res2.photos) }, err => {/*Deal with error*/}, () => {/*Code for complete observable*/} + ); } }, @@ -35,10 +38,6 @@ export class RecipeCardComponent implements OnInit { //Complete observable } ); - for(var i = 0; i <10; ++i) - { - mynumbers.push(i); - } } shoppingCart() { -- cgit v1.1