diff options
| author | Jacob <gatelyjm@clarkson.edu> | 2019-12-10 04:44:33 -0500 |
|---|---|---|
| committer | Jacob <gatelyjm@clarkson.edu> | 2019-12-10 04:44:33 -0500 |
| commit | 7698331e4bb85232535182eeeaa09fdf54b66a76 (patch) | |
| tree | 96d6f523a7d428d6b407cf622d322655bfc066ec /recipeBuddy/src/app/recipe-card/recipe-card.component.html | |
| parent | 1b23ba09800009f484b9ab6a49a5626b0baaf504 (diff) | |
Update main page to put recipes three wide, and to work
Diffstat (limited to 'recipeBuddy/src/app/recipe-card/recipe-card.component.html')
| -rw-r--r-- | recipeBuddy/src/app/recipe-card/recipe-card.component.html | 33 |
1 files changed, 17 insertions, 16 deletions
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 @@ -<div *ngFor="let recipe of recipes"> -<p>{{recipe}}</p> -</div> -<ul class="list"> -<cdk-virtual-scroll-viewport [itemSize]="100" class="example-viewport" style="height:300px; minBufferPx:50;"> -<ng-container *cdkVirtualFor="let recipe of recipes" class="example-viewport"> -<h1>Hello</h1> -<!--<div id="cardContainer"> +<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"> - <mat-card-title (click)="cookPage(i)">{{recipes[i].name}}</mat-card-title> + <mat-card-title>{{recipe.name}}</mat-card-title> </div> <div id="edit"> - <input (click)="edit(i)" type="image" src="https://image.freepik.com/free-icon/scissors_318-9061.jpg" + <input (click)="edit(getId(recipe))" type="image" src="https://image.freepik.com/free-icon/scissors_318-9061.jpg" alt="edit" width="24" height="32"> </div> <div id="cart"> <input (click)="shoppingCart()" type="image" src="https://image.flaticon.com/icons/png/512/126/126083.png" alt="cart" width="24" height ="32"> </div> <div id="delete"> - <input (click)="delete(i)" type="image" src="https://image.flaticon.com/icons/svg/61/61391.svg" alt="delete" width="24" height="32"> + <input (click)="delete(getId(recipe))" type="image" src="https://image.flaticon.com/icons/svg/61/61391.svg" alt="delete" width="24" height="32"> </div> </mat-card-header> - <img mat-card-image src={{recipes[i].photos[0]}} alt="Photo of recipe" width="150" height="220"> - <p>Rating: {{recipes[i].rating}}</p> + <div *ngIf="recipe.photos.length > 1000; else elseBlock" id="imgContainer"> + <img mat-card-image src={{recipe.photos[0]}} alt="Photo of recipe"> + </div> + <ng-template #elseBlock> + <img mat-card-image src="https://seeklogo.net/wp-content/themes/seeklogo-2017/images/not-available.jpg" alt="No image available" width="150" height="220"> + </ng-template> + <div id="ratingContainer"> + <p>Rating: {{recipe.rating}}</p> + </div> </mat-card> </div> - --> - </ng-container> + </div> </cdk-virtual-scroll-viewport> -</ul> + <!--No image found web address: https://www.azfinesthomes.com/assets/images/image-not-available.jpg -->
\ No newline at end of file |