diff --git a/.angular-cli.json b/.angular-cli.json index 7e3da6d..3cc20c7 100644 --- a/.angular-cli.json +++ b/.angular-cli.json @@ -19,13 +19,10 @@ "testTsconfig": "tsconfig.spec.json", "prefix": "app", "styles": [ - "styles.css", - "../node_modules/bootstrap/dist/css/bootstrap.min.css" + "styles.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": { diff --git a/package-lock.json b/package-lock.json index a88f170..b1c8565 100644 --- a/package-lock.json +++ b/package-lock.json @@ -61,9 +61,17 @@ } }, "@angular/animations": { - "version": "5.2.6", - "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-5.2.6.tgz", - "integrity": "sha512-LMfg1NYTPPu+mEweOcwWEHM7Aaw7OnzjGE7UeUGYHd4ujQlOc8f6u4Z0X4Wfo4vIpHIz8ClNKbSuQ8+5S4Ofsg==", + "version": "5.2.10", + "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-5.2.10.tgz", + "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", diff --git a/package.json b/package.json index 8658982..8b0f229 100644 --- a/package.json +++ b/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" }, diff --git a/src/app/app.component.html b/src/app/app.component.html index ff72bda..90c6b64 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,7 +1 @@ -
-
- - - -
-
\ No newline at end of file + \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 1f321c2..707d087 100644 --- a/src/app/app.module.ts +++ b/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] diff --git a/src/app/game-grid/game-grid.component.css b/src/app/game-grid/game-grid.component.css index 8eb3bb4..3e67fc6 100644 --- a/src/app/game-grid/game-grid.component.css +++ b/src/app/game-grid/game-grid.component.css @@ -1,38 +1,62 @@ -.grid-item{ - min-height:250px; -} -.grid-item { - margin-bottom: 10px; -} -.grid-item-img{ - width: 250px; +.parentContainer{ + width: 100%; + height: 100%; } -.flex-row { - display: flex; - flex-wrap: wrap; -} -.flex-row > [class*='col-'] { - display: flex; - flex-direction: column; +.card{ + height: 280px; + width: 250px; + margin: 5px; } -.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%; +.flex-container { + display: flex; + height: auto; + flex-flow: row wrap; + align-items: center; + justify-content: center; } -.cardParent{ - margin: 10px 5px; +.example-fill-remaining-space { + /* 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; } \ 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 20082b7..7fc57cb 100644 --- a/src/app/game-grid/game-grid.component.html +++ b/src/app/game-grid/game-grid.component.html @@ -1,64 +1,53 @@ + + videogame_asset -
+ + -
-
- -
-
+ + + + + + + + + + + + + + + + +
+
-
-
- -
-
- -
- -
- -
-
- -
-
{{game.Title}}
-

- {{game.Title}} -
- {{game.System}} -
- {{game.Year}} -

- - View/Edit - -
-
-
+ + +
+

{{game.Title}}

+

{{game.System}}

+ + edit +
- -
+ - -
-
- -
-
-
-
- -
-
-
-
-
-
+ + +
\ 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 558beee..c26411c 100644 --- a/src/app/game-grid/game-grid.component.ts +++ b/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) { - if (lastItem) { - $('.grid').masonry({ - columnWidth: 250, - itemSelector: '.grid-item', - gutter: 10 - + // MatPaginator Output + pageEvent: PageEvent; - }); - + 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(); - } } diff --git a/src/index.html b/src/index.html index 0549fbe..90bb386 100644 --- a/src/index.html +++ b/src/index.html @@ -1,14 +1,15 @@ - - LudosData - + + LudosData + - - + + + - + diff --git a/src/styles.css b/src/styles.css index 90d4ee0..550b41f 100644 --- a/src/styles.css +++ b/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"; \ No newline at end of file