UI fix

.angular-cli.json

@@ -19,13 +19,10 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
-        "styles.css",
+        "styles.css"
-        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
       ],
       "scripts": [
-        "../node_modules/jquery/dist/jquery.min.js",
+
-        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
-        "../node_modules/masonry-layout/dist/masonry.pkgd.min.js"
       ],
       "environmentSource": "environments/environment.ts",
       "environments": {

package-lock.json

@@ -61,9 +61,17 @@
       }
     },
     "@angular/animations": {
-      "version": "5.2.6",
+      "version": "5.2.10",
-      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-5.2.6.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-5.2.10.tgz",
-      "integrity": "sha512-LMfg1NYTPPu+mEweOcwWEHM7Aaw7OnzjGE7UeUGYHd4ujQlOc8f6u4Z0X4Wfo4vIpHIz8ClNKbSuQ8+5S4Ofsg==",
+      "integrity": "sha512-QNYXqnti8BeFriNaZ/juLnO6l0MVlVNUmLycC9ma+pdTiEJl8rtgZ0WXxgOCjScyKpInkWn2J+m9FI/78SYFpw==",
+      "requires": {
+        "tslib": "1.9.0"
+      }
+    },
+    "@angular/cdk": {
+      "version": "5.2.5",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-5.2.5.tgz",
+      "integrity": "sha512-GN8m1d+VcCE9+Bgwv06Y8YJKyZ0i9ZIq2ZPBcJYt+KVgnVVRg4JkyUNxud07LNsvzOX22DquHqmIZiC4hAG7Ag==",
       "requires": {
         "tslib": "1.9.0"
       }
@@ -179,6 +187,14 @@
         "tslib": "1.9.0"
       }
     },
+    "@angular/flex-layout": {
+      "version": "5.0.0-beta.14",
+      "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-5.0.0-beta.14.tgz",
+      "integrity": "sha512-/fsOqXFUKdCmzzZx0bZ0HCYwcV+BSbVuIgOhaCrZKHj2rqiWKKPgj1ErU3HMT68bBBGag0u0skTdLGtrBorRIA==",
+      "requires": {
+        "tslib": "1.9.0"
+      }
+    },
     "@angular/forms": {
       "version": "5.2.6",
       "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-5.2.6.tgz",
@@ -201,6 +217,14 @@
       "integrity": "sha512-46PaLwRCVhzOb3/zvvznSqF1WQ7ITADCnFuhc09TS1YKH2yf62sOjnnuAo1ZZDdN6UI/Y1zajaBrhpupTit9Rw==",
       "dev": true
     },
+    "@angular/material": {
+      "version": "5.2.5",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-5.2.5.tgz",
+      "integrity": "sha512-IltfBeTJWnmZehOQNQ7KoFs7MGWuZTe0g21hIitGkusVNt1cIoTD24xKH5jwztjH19c04IgiwonpurMKM6pBCQ==",
+      "requires": {
+        "tslib": "1.9.0"
+      }
+    },
     "@angular/platform-browser": {
       "version": "5.2.6",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-5.2.6.tgz",
@@ -6855,6 +6879,11 @@
         "outlayer": "2.1.1"
       }
     },
+    "material-design-icons": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/material-design-icons/-/material-design-icons-3.0.1.tgz",
+      "integrity": "sha1-mnHEh0chjrylHlGmbaaCA4zct78="
+    },
     "md5.js": {
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.4.tgz",

package.json

@@ -12,12 +12,15 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^5.2.0",
+    "@angular/animations": "^5.2.10",
+    "@angular/cdk": "^5.2.5",
     "@angular/common": "^5.2.0",
     "@angular/compiler": "^5.2.0",
     "@angular/core": "^5.2.0",
+    "@angular/flex-layout": "^5.0.0-beta.14",
     "@angular/forms": "^5.2.0",
     "@angular/http": "^5.2.0",
+    "@angular/material": "^5.2.5",
     "@angular/platform-browser": "^5.2.0",
     "@angular/platform-browser-dynamic": "^5.2.0",
     "@angular/router": "^5.2.0",
@@ -26,6 +29,7 @@
     "infinite-scroll": "^3.0.3",
     "jquery": "^3.3.1",
     "masonry-layout": "^4.2.1",
+    "material-design-icons": "^3.0.1",
     "rxjs": "^5.5.6",
     "zone.js": "^0.8.19"
   },

src/app/app.component.html

@@ -1,7 +1 @@
-<div class="container">
+<router-outlet></router-outlet>
-  <div class="content-wrapper fill">
-
-    <router-outlet></router-outlet>
-
-  </div>
-</div>

src/app/app.module.ts

@@ -9,6 +9,15 @@ import { GameGridComponent } from './game-grid/game-grid.component';
 import { AppRoutingModule } from './/app-routing.module';
 import { ViewCardComponent } from './view-card/view-card.component';
 
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import { MatCardModule } from '@angular/material';
+import {MatToolbarModule} from '@angular/material/toolbar';
+import {MatMenuModule} from '@angular/material/menu';
+import {MatIconModule} from '@angular/material/icon';
+import {MatButtonModule} from '@angular/material/button';
+import {MatInputModule} from '@angular/material/input';
+import {MatPaginatorModule} from '@angular/material/paginator';
+
 
 @NgModule({
   declarations: [
@@ -20,7 +29,15 @@ import { ViewCardComponent } from './view-card/view-card.component';
     BrowserModule,
     AppRoutingModule,
     HttpClientModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    BrowserAnimationsModule,
+    MatCardModule,
+    MatToolbarModule,
+    MatMenuModule,
+    MatIconModule,
+    MatButtonModule,
+    MatInputModule,
+    MatPaginatorModule
   ],
   providers: [GamesService],
   bootstrap: [AppComponent]

src/app/game-grid/game-grid.component.css

@@ -1,38 +1,62 @@
-.grid-item{
+.parentContainer{
-	min-height:250px;
+  width: 100%;
-}
+  height: 100%;
-.grid-item {
-	margin-bottom: 10px;
-}
-.grid-item-img{
-	width: 250px;
 }
 
-.flex-row {
+.card{
-	display: flex;
+  height: 280px;
-	flex-wrap: wrap;
+  width: 250px;
-}
+  margin: 5px;
-.flex-row > [class*='col-'] {
-	display: flex;
-	flex-direction: column;
 }
 
-.flex-row .thumbnail,
+.flex-container {
-.flex-row .caption {
+  display: flex;
-	flex-direction: column;
+  height: auto;
-	display: flex;
+  flex-flow: row wrap;
-	flex: 1 0 auto;
+  align-items: center;
-	height: auto;
+  justify-content: center;
-	position: relative;
-}
-.flex-text {
-	flex-grow: 1;
-}
-.flex-row img {
-	min-width: 0;
-	width: 100%;
 }
 
-.cardParent{
+.example-fill-remaining-space {
-	margin: 10px 5px;
+  /* This fills the remaining space, by using flexbox. 
+     Every toolbar row uses a flexbox row layout. */
+  flex: 1 1 auto;
+}
+
+.menuButton{
+  margin-right: 10px;
+}
+
+.userButton{
+
+}
+.userButton img{
+  width:35px;
+  height:35px;
+  border-radius: 50%;
+}
+
+.gameSearchInput{
+  margin-left:25px;
+  border: 0;
+  border-radius: 4px;
+  color: #555;
+  font-size: 16px;
+  font-weight: 600;
+  height: 50%;
+  line-height: 20px;
+  outline: none;
+  padding: 0 0 0 15px;
+  width: 80%;
+}
+
+.app-toolbar {
+    position: sticky;
+    position: -webkit-sticky; /* For macOS/iOS Safari */
+    top: 0; /* Sets the sticky toolbar to be on top */
+    z-index: 1000; /* Ensure that your app's content doesn't overlap the toolbar */
+}
+
+.editCardButton{
+  float: right;
 }

src/app/game-grid/game-grid.component.html

@@ -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">
+	<span class="example-fill-remaining-space"></span>
-		<div class="col-sm-5 text-center">
+
-			<button class="btn btn-primary btn-lg addMarginTop btn-landing" routerLink="/view-card">
+
-				New Game
+	<button class="mat-button userButton" mat-button >
-			</button>
+		<img src="https://i.pinimg.com/280x280_RS/88/42/df/8842df04cd938aa654c865742253c276.jpg" >&nbsp;Christopher
-		</div>
+  	</button>
-	</div>
+  	
+
+  	<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">
+		<mat-card class="card" *ngFor="let game of gamesData;">
-		<div class="col-sm-5 text-center">
+			<img class="card-img-top" src="http://lazypug.net/globalAssets/images/temp1.png" alt="">
-			<input (keyup)="onKey($event)" placeholder="Search Games" class="form-control" >
+			<div class="card-body">
-		</div>
+				<p class="card-title">{{game.Title}}</p>
-	</div>
+				<p class="card-text">{{game.System}}</p>
-
+				<a class="editCardButton" mat-mini-fab [routerLink]="['/view-card', game.id]" >
-	<div class="flex-row row"  *ngIf="gamesData">
+					<mat-icon>edit</mat-icon>
-	
+				</a>
-		<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>
 			</div>
-
+		</mat-card>
-		</div>
 	
-
-</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">
+	<mat-paginator
-	<div class="col-sm-12 text-center">
+		[length]="length"
-		<br />
+		[pageSize]="pageSize"
-	</div>
+		[pageSizeOptions]="pageSizeOptions"
+		(page)="pageEvent = paginatorChange($event)">
+	</mat-paginator>
+
 </div>

src/app/game-grid/game-grid.component.ts

@@ -3,11 +3,10 @@ import { HttpClient } from '@angular/common/http';
 import { ActivatedRoute } from '@angular/router';
 
 import { GamesService } from '../games.service';
+import {PageEvent} from '@angular/material';
+
 
-declare var jquery:any;
-declare var $ :any;
 
-declare var masonry:any;
 
 @Component({
   selector: 'app-game-grid',
@@ -23,10 +22,11 @@ export class GameGridComponent implements OnInit {
 	queryFilters = "";
 	querryPage = 1;
 	queryOrder = "Title";
-	queryRecordMax = 10;
+
+	length = 100;
+	pageSize = 10;
+	pageSizeOptions = [5, 10, 25, 50, 100];
 	
-	showNext = true;
-	showBack = false;
 
 	constructor(
 		private route: ActivatedRoute,
@@ -42,20 +42,9 @@ export class GameGridComponent implements OnInit {
 
 	getGamesList(): any{
 
-		this.gameListSubscription = this.gamesService.getGames( this.queryFilters, this.querryPage, this.queryOrder, this.queryRecordMax ).subscribe( data => {
+		this.gameListSubscription = this.gamesService.getGames( this.queryFilters, this.querryPage, this.queryOrder, this.pageSize ).subscribe( data => {
+			this.length = data["_results"];
 			this.gamesData = data.games;
-
-			if( this.gamesData.length < this.queryRecordMax ){
-				this.showNext = false;
-			}else{
-				this.showNext = true;
-			}
-			if( this.querryPage != 1 ){
-				this.showBack = true;
-			}else{
-				this.showBack = false;
-			}
-			
 		});
 	}
 
@@ -78,28 +67,20 @@ export class GameGridComponent implements OnInit {
 		return (obj == undefined);
 	}
 
-	renderGridItems(lastItem: boolean) {
+	// MatPaginator Output
-		if (lastItem) {
+	pageEvent: PageEvent;
-			$('.grid').masonry({
-				columnWidth: 250,
-				itemSelector: '.grid-item',
-				gutter: 10
-				
 
-			});
+	paginatorChange(event){
-			
+		if( event.pageSize != this.pageSize ){
+			this.pageSize  = event.pageSize;
+			this.getGamesList();
+		}
+		if( event.pageIndex != (this.querryPage -1) ){
+			this.querryPage = event.pageIndex+1;
+			this.getGamesList();
 		}
-
 	}
 
-	nextPage(){
-		this.querryPage++;
-		this.getGamesList();
-	}
-	backPage(){
-		this.querryPage--;
-		this.getGamesList();
-	}
 
 
 }

src/index.html

@@ -1,14 +1,15 @@
 <!doctype html>
 <html lang="en">
 <head>
-  <meta charset="utf-8">
+	<meta charset="utf-8">
-  <title>LudosData</title>
+	<title>LudosData</title>
-  <base href="/">
+	<base href="/">
 
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+	<link rel="icon" type="image/x-icon" href="favicon.ico">
+	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
-  <app-root></app-root>
+	<app-root></app-root>
 </body>
 </html>

src/styles.css

@@ -1 +1,2 @@
 /* You can add global styles to this file, and also import other style files */
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";