ckoch/LudosData
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI fix

Browse Source
This commit is contained in:
Christopher Koch
2018-04-18 17:01:37 -04:00
parent 2e1a7f06d3
commit 35d200a865
10 changed files with 181 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/app/game-grid/game-grid.component.html
View File

@@ -1,64 +1,53 @@
<mat-toolbar color="primary" class="app-toolbar">
<mat-icon >videogame_asset</mat-icon>
<div class="container">
<input class="gameSearchInput" (keyup)="onKey($event)" placeholder="Search Games" >
<div class="row">
<div class="col-sm-5 text-center">
<button class="btn btn-primary btn-lg addMarginTop btn-landing" routerLink="/view-card">
New Game
</button>
</div>
</div>
<span class="example-fill-remaining-space"></span>
<button class="mat-button userButton" mat-button >
<img src="https://i.pinimg.com/280x280_RS/88/42/df/8842df04cd938aa654c865742253c276.jpg" >&nbsp;Christopher
</button>
<button class="menuButton" mat-button routerLink="/view-card">New Game</button>
<mat-menu #settingsMenu="matMenu">
<button mat-menu-item>Settings</button>
<button mat-menu-item>Help</button>
<button mat-menu-item>Log out</button>
</mat-menu>
<button class="mat-icon-button" mat-icon-button [matMenuTriggerFor]="settingsMenu">
<mat-icon>menu</mat-icon>
</button>
</mat-toolbar>
<div *ngIf="isEmptyObject(gamesData)">
<div class="flex-container" >
<div class="row">
<div class="col-sm-5 text-center">
<input (keyup)="onKey($event)" placeholder="Search Games" class="form-control" >
</div>
</div>
<div class="flex-row row" *ngIf="gamesData">
<div *ngFor="let game of gamesData;">
<div class="col-xs-6 col-sm-4 col-lg-3 cardParent">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="http://lazypug.net/globalAssets/images/temp1.png" alt="">
<div class="card-body">
<h5 class="card-title">{{game.Title}}</h5>
<p class="card-text">
{{game.Title}}
<br />
{{game.System}}
<br />
{{game.Year}}
</p>
<a [routerLink]="['/view-card', game.id]">
<span class="btn btn-primary">View/Edit</span>
</a>
</div>
</div>
</div>
<mat-card class="card" *ngFor="let game of gamesData;">
<img class="card-img-top" src="http://lazypug.net/globalAssets/images/temp1.png" alt="">
<div class="card-body">
<p class="card-title">{{game.Title}}</p>
<p class="card-text">{{game.System}}</p>
<a class="editCardButton" mat-mini-fab [routerLink]="['/view-card', game.id]" >
<mat-icon>edit</mat-icon>
</a>
</div>
</div>
</mat-card>
</div>
</div>
<div class="row">
<div class="col-sm-6 text-center">
<button *ngIf="showBack" class="btn btn-primary" (click)="backPage()">Back Page</button>
</div>
<div class="col-sm-6 text-center">
<button *ngIf="showNext" class="btn btn-primary" (click)="nextPage()">Next Page</button>
</div>
</div>
<div class="row">
<div class="col-sm-12 text-center">
<br />
</div>
<mat-paginator
[length]="length"
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
(page)="pageEvent = paginatorChange($event)">
</mat-paginator>
</div>