From 2a3b0509a8164b5bbecbc46602b29bf5a5571d18 Mon Sep 17 00:00:00 2001 From: Christopher Koch Date: Sun, 4 Mar 2018 13:43:58 -0500 Subject: [PATCH] stuff --- package-lock.json | 9 ++++ package.json | 1 + src/app/game-grid/game-grid.component.css | 33 ++++++++++++- src/app/game-grid/game-grid.component.html | 34 ++++++++----- src/app/game-grid/game-grid.component.ts | 55 ++++++++++++++-------- src/app/games.service.ts | 4 +- 6 files changed, 100 insertions(+), 36 deletions(-) diff --git a/package-lock.json b/package-lock.json index 566756b..a88f170 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5399,6 +5399,15 @@ "integrity": "sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=", "dev": true }, + "infinite-scroll": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/infinite-scroll/-/infinite-scroll-3.0.3.tgz", + "integrity": "sha512-MwhXytjtcGI/TpGvjxS3RuJwG19HkCH4HGsWhOaKRNA1vfNH4ZvHgqO9Ifo2U8ZUjKFRmak4OUrKqHQbFaVdhg==", + "requires": { + "ev-emitter": "1.1.1", + "fizzy-ui-utils": "2.0.7" + } + }, "inflection": { "version": "1.10.0", "resolved": "https://registry.npmjs.org/inflection/-/inflection-1.10.0.tgz", diff --git a/package.json b/package.json index b252968..8658982 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "@angular/router": "^5.2.0", "bootstrap": "^4.0.0", "core-js": "^2.4.1", + "infinite-scroll": "^3.0.3", "jquery": "^3.3.1", "masonry-layout": "^4.2.1", "rxjs": "^5.5.6", diff --git a/src/app/game-grid/game-grid.component.css b/src/app/game-grid/game-grid.component.css index fa08eea..8eb3bb4 100644 --- a/src/app/game-grid/game-grid.component.css +++ b/src/app/game-grid/game-grid.component.css @@ -1,9 +1,38 @@ -.grid-sizer, .grid-item{ - width: 25%; +.grid-item{ + min-height:250px; } .grid-item { margin-bottom: 10px; } .grid-item-img{ width: 250px; +} + +.flex-row { + display: flex; + flex-wrap: wrap; +} +.flex-row > [class*='col-'] { + display: flex; + flex-direction: column; +} + +.flex-row .thumbnail, +.flex-row .caption { + flex-direction: column; + display: flex; + flex: 1 0 auto; + height: auto; + position: relative; +} +.flex-text { + flex-grow: 1; +} +.flex-row img { + min-width: 0; + width: 100%; +} + +.cardParent{ + margin: 10px 5px; } \ No newline at end of file diff --git a/src/app/game-grid/game-grid.component.html b/src/app/game-grid/game-grid.component.html index e37b720..f549009 100644 --- a/src/app/game-grid/game-grid.component.html +++ b/src/app/game-grid/game-grid.component.html @@ -1,18 +1,28 @@ -
-
+ +
+
-
-
-
- {{renderGridItems(isLast)}} -
- -

{{game.Title}}

+
+ + +
+
+ +
+
{{game.Title}}
+

{{game.Title}}

+ Go somewhere +
+
+
+
+
-
+
-
-
\ No newline at end of file + + + diff --git a/src/app/game-grid/game-grid.component.ts b/src/app/game-grid/game-grid.component.ts index f7fd9ed..e25a065 100644 --- a/src/app/game-grid/game-grid.component.ts +++ b/src/app/game-grid/game-grid.component.ts @@ -20,6 +20,10 @@ export class GameGridComponent implements OnInit { rawGamesContent; gamesData; + queryFilters; + querryPage; + queryOrder; + constructor( private route: ActivatedRoute, private gamesService: GamesService @@ -28,33 +32,36 @@ export class GameGridComponent implements OnInit { } ngOnInit() { - this.getGamesList(); - - - - } - getGamesList(): any{ - this.gameListSubscription = this.gamesService.getGames( ).subscribe( data => { + getGamesList( ): any{ + + this.queryFilters = "Played,eq,true"; + this.querryPage = 1; + this.queryOrder = "Title"; + + this.gameListSubscription = this.gamesService.getGames( this.queryFilters, this.querryPage, this.queryOrder ).subscribe( data => { console.log( data ); this.gamesData = data.games; - //var tempItemContent = []; - - /* parse out just the input data and set that in object array */ - /*for( var key in data['ContentBlocks'] ){ - console.log( data['ContentBlocks'][key]['Type'] ); - if( data['ContentBlocks'][key]['Type'] == "ItemSelectionSetting" ){ - tempItemContent.push( data['ContentBlocks'][key]['Content'] ); - } - } - this.formItemContent = tempItemContent; - */ }); } + getGamesList2( ): any{ + + this.queryFilters = "Played,eq,true"; + this.querryPage = 2; + this.queryOrder = "Title"; + + this.gameListSubscription = this.gamesService.getGames( this.queryFilters, this.querryPage, this.queryOrder ).subscribe( data => { + console.log( data ); + this.gamesData = data.games; + }); + } + + + isEmptyObject(obj) { return (obj != undefined); } @@ -66,13 +73,21 @@ export class GameGridComponent implements OnInit { renderGridItems(lastItem: boolean) { if (lastItem) { $('.grid').masonry({ - columnWidth: '.grid-sizer', + columnWidth: 250, itemSelector: '.grid-item', - percentPosition: true + gutter: 10 }); + } + + } + + myFunc(){ + $('.grid').masonry('destroy') +this.getGamesList2(); + } diff --git a/src/app/games.service.ts b/src/app/games.service.ts index 5a7dd59..002f808 100644 --- a/src/app/games.service.ts +++ b/src/app/games.service.ts @@ -21,8 +21,8 @@ export class GamesService { private http: HttpClient ){ } - getGames( ): Observable { - return this.http.get( this.APIURL + "/games?filter=Played,eq,true&page=1&order=Title&transform=1" ) + getGames( queryFilters, querryPage, queryOrder ): Observable { + return this.http.get( this.APIURL + "/games?filter="+ queryFilters +"&page="+ querryPage +"&order="+ queryOrder +"&transform=1" ) .map(res => { return( res