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

7
.angular-cli.json
View File

@@ -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": {

35
package-lock.json generated
View File

@@ -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",

6
package.json
View File

@@ -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"
},

6
src/app/app.component.html
View File

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

19
src/app/app.module.ts
View File

@@ -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]

92
src/app/game-grid/game-grid.component.css
View File

@@ -1,38 +1,62 @@
.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;
.parentContainer{
width: 100%;
height: 100%;
}
.cardParent{
margin: 10px 5px;
.card{
height: 280px;
width: 250px;
margin: 5px;
}
.flex-container {
display: flex;
height: auto;
flex-flow: row wrap;
align-items: center;
justify-content: center;
}
.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;
}

85
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
<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>
</div>
</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">
<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;">
<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">
<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>
<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>
</div>
</div>
</mat-card>
</div>
<mat-paginator
[length]="length"
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
(page)="pageEvent = paginatorChange($event)">
</mat-paginator>
</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>
</div>

53
src/app/game-grid/game-grid.component.ts
View File

@@ -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;
showNext = true;
showBack = false;
length = 100;
pageSize = 10;
pageSizeOptions = [5, 10, 25, 50, 100];
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;
});
}
}
nextPage(){
this.querryPage++;
paginatorChange(event){
if( event.pageSize != this.pageSize ){
this.pageSize = event.pageSize;
this.getGamesList();
}
backPage(){
this.querryPage--;
if( event.pageIndex != (this.querryPage -1) ){
this.querryPage = event.pageIndex+1;
this.getGamesList();
}
}
}

1
src/index.html
View File

@@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>

1
src/styles.css
View File

@@ -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";