summaryrefslogtreecommitdiff
path: root/recipeBuddy/src/app/recipe-card/recipe-card.component.html
diff options
context:
space:
mode:
authorschencej <schencej@clarkson.edu>2019-12-12 11:56:57 -0500
committerschencej <schencej@clarkson.edu>2019-12-12 11:56:57 -0500
commit47254348140fce18c985e9a0ffb592390b226c80 (patch)
tree407d7c52ad55a02f006b095be71ff1056864766e /recipeBuddy/src/app/recipe-card/recipe-card.component.html
parent946512c32a3b94079c9d2aaf48ef16d09fd14e3d (diff)
added main page
Diffstat (limited to 'recipeBuddy/src/app/recipe-card/recipe-card.component.html')
-rw-r--r--recipeBuddy/src/app/recipe-card/recipe-card.component.html49
1 files changed, 49 insertions, 0 deletions
diff --git a/recipeBuddy/src/app/recipe-card/recipe-card.component.html b/recipeBuddy/src/app/recipe-card/recipe-card.component.html
new file mode 100644
index 0000000..eaba29a
--- /dev/null
+++ b/recipeBuddy/src/app/recipe-card/recipe-card.component.html
@@ -0,0 +1,49 @@
+<cdk-virtual-scroll-viewport [itemSize]="1" class="example-viewport">
+<div *cdkVirtualFor="let recipe of recipes" class="example-test">
+<div id="cardContainer">
+ <mat-card class="example-card">
+ <mat-card-header>
+ <div id="card-title">
+ <button mat-button routerLink="/preCook" routerLinkActive="active"
+ (click)="cookPage(recipe)">
+ <mat-card-title>{{recipe.name}}</mat-card-title>
+ </button>
+ </div>
+ </mat-card-header>
+ <mat-card-actions matSuffix>
+ <div id="edit">
+ <button mat-button (click)="edit(recipe)" routerLink="/"
+ routerLinkActive="active">
+ <mat-icon>edit</mat-icon>
+ </button>
+ </div>
+ <div id="cart">
+ <button mat-button routerLink="/cart" routerLinkActive="active">
+ <mat-icon>shopping_cart</mat-icon>
+ </button>
+ </div>
+ <div id="delete">
+ <button mat-button (click)="delete(recipe.id)">
+ <mat-icon>delete</mat-icon>
+ </button>
+ </div>
+ </mat-card-actions>
+
+ <div *ngIf="recipe.photos.length > 0; else elseBlock" id="imgContainer">
+ <img mat-card-image style="margin-top: 20px; height: 300px" src={{recipe.photos[0]}}
+alt="Photo of recipe">
+ </div>
+ <ng-template #elseBlock>
+ <img mat-card-image style="margin-top: 20px"
+ src="https://seeklogo.net/wp-content/themes/seeklogo-2017/images/not-available.jpg"
+ alt="No image available"
+ height="300px">
+ </ng-template>
+ <div id="ratingContainer">
+ <p>Rating: {{recipe.rating}}</p>
+ </div>
+ </mat-card>
+ </div>
+ </div>
+</cdk-virtual-scroll-viewport>
+