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

style

Browse Source
This commit is contained in:
programmingPug
2018-05-13 17:43:30 -04:00
parent e3053414e4
commit 7ed167bb4e
3 changed files with 197 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,6 +20,7 @@ import {MatButtonModule} from '@angular/material/button';
import {MatInputModule} from '@angular/material/input'; import {MatInputModule} from '@angular/material/input';
import {MatPaginatorModule} from '@angular/material/paginator'; import {MatPaginatorModule} from '@angular/material/paginator';
import {MatFormFieldModule} from '@angular/material/form-field'; import {MatFormFieldModule} from '@angular/material/form-field';
import {MatSelectModule} from '@angular/material/select';
import { LoginComponent } from './login/login.component'; import { LoginComponent } from './login/login.component';
@@ -60,7 +61,8 @@ import { AlertService, AuthenticationService, UserService } from './_services/in
MatButtonModule, MatButtonModule,
MatInputModule, MatInputModule,
MatPaginatorModule, MatPaginatorModule,
MatFormFieldModule MatFormFieldModule,
MatSelectModule
], ],
providers: [ providers: [
GamesService, GamesService,

60
src/app/view-card/view-card.component.css
View File

@@ -1,4 +1,62 @@
#gameImageHeaderContainer{ #gameImageHeaderContainer{
height:250px; height:250px;
overflow: hidden; overflow: hidden;
} }
.lrCard{
width:80%;
}
.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 */
}

223
src/app/view-card/view-card.component.html
View File

@@ -1,5 +1,39 @@
<mat-toolbar color="primary" class="app-toolbar">
<mat-icon >videogame_asset</mat-icon>
<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;<span *ngIf="isEmptyObject(currentUser)">{{currentUser.username}}</span>
</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 (click)="logOut()">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(form)"> <div *ngIf="isEmptyObject(form)">
<div class="lrContainer">
<mat-card class="lrCard">
<div class="flex-container" >
<div class="card">
<div class="row"> <div class="row">
<div class="col-sm-12" id="gameImageHeaderContainer"> <div class="col-sm-12" id="gameImageHeaderContainer">
<img class="card-img-top" [src]="imageSample" alt=""> <img class="card-img-top" [src]="imageSample" alt="">
@@ -8,11 +42,11 @@
</div> </div>
</div> </div>
</div>
<div class="card">
<form novalidate (ngSubmit)="onSubmit(form.value)" [formGroup]="form" class="flex-container" >
<div class="card">
<form novalidate (ngSubmit)="onSubmit(form.value)" [formGroup]="form" >
<div id='Row_Title' class="form-group field-wrapper"> <div id='Row_Title' class="form-group field-wrapper">
<label [attr.for]="'Title'" class="control-label col-sm-3 isInputLabel"> <label [attr.for]="'Title'" class="control-label col-sm-3 isInputLabel">
Title Title
@@ -20,7 +54,8 @@
<div class="col-sm-9 isInputElement"> <div class="col-sm-9 isInputElement">
<div class="row"> <div class="row">
<div class="col-md-8 isInputElement"> <div class="col-md-8 isInputElement">
<input class="form-control" <mat-form-field class="fullWidth">
<input matInput class="form-control"
[formControlName]="'Title'" [formControlName]="'Title'"
[id]="'Title'" [id]="'Title'"
[type]="'text'" [type]="'text'"
@@ -28,7 +63,7 @@
<div class="invalidEntryContainer"> <div class="invalidEntryContainer">
<span *ngIf="(form.get('Title').dirty || form.get('Title').touched) && form.get('Title').invalid" >This field is required</span> <span *ngIf="(form.get('Title').dirty || form.get('Title').touched) && form.get('Title').invalid" >This field is required</span>
</div> </div>
</mat-form-field>
</div> </div>
</div> </div>
</div> </div>
@@ -41,12 +76,14 @@
<div class="col-sm-9 isInputElement"> <div class="col-sm-9 isInputElement">
<div class="row"> <div class="row">
<div class="col-md-8 isInputElement"> <div class="col-md-8 isInputElement">
<input class="form-control" <mat-form-field class="fullWidth">
<input matInput class="form-control"
[formControlName]="'Description'" [formControlName]="'Description'"
[id]="'Description'" [id]="'Description'"
[type]="'text'" [type]="'text'"
[name]="'Description'"> [name]="'Description'">
</mat-form-field>
</div> </div>
</div> </div>
</div> </div>
@@ -59,12 +96,14 @@
<div class="col-sm-9 isInputElement"> <div class="col-sm-9 isInputElement">
<div class="row"> <div class="row">
<div class="col-md-8 isInputElement"> <div class="col-md-8 isInputElement">
<input class="form-control" <mat-form-field class="fullWidth">
<input matInput class="form-control"
[formControlName]="'Developer'" [formControlName]="'Developer'"
[id]="'Developer'" [id]="'Developer'"
[type]="'text'" [type]="'text'"
[name]="'Developer'"> [name]="'Developer'">
</mat-form-field>
</div> </div>
</div> </div>
</div> </div>
@@ -77,12 +116,14 @@
<div class="col-sm-9 isInputElement"> <div class="col-sm-9 isInputElement">
<div class="row"> <div class="row">
<div class="col-md-8 isInputElement"> <div class="col-md-8 isInputElement">
<input class="form-control" <mat-form-field class="fullWidth">
<input matInput class="form-control"
[formControlName]="'Publisher'" [formControlName]="'Publisher'"
[id]="'Publisher'" [id]="'Publisher'"
[type]="'text'" [type]="'text'"
[name]="'Publisher'"> [name]="'Publisher'">
</mat-form-field>
</div> </div>
</div> </div>
</div> </div>
@@ -95,14 +136,16 @@
<div class="col-sm-9 isInputElement"> <div class="col-sm-9 isInputElement">
<div class="row"> <div class="row">
<div class="col-md-8 isInputElement"> <div class="col-md-8 isInputElement">
<input class="form-control" <mat-form-field class="fullWidth">
<input matInput matInput class="form-control"
[formControlName]="'Art'" [formControlName]="'Art'"
[id]="'Art'" [id]="'Art'"
[type]="'text'" [type]="'text'"
[name]="'Art'"> [name]="'Art'">
<input type="file" [name]="'fileToUpload'" (change)="handleFileInput($event)"> <input type="file" [name]="'fileToUpload'" (change)="handleFileInput($event)">
</mat-form-field>
</div> </div>
</div> </div>
</div> </div>
@@ -115,17 +158,20 @@
<div class="col-sm-9 isInputElement"> <div class="col-sm-9 isInputElement">
<div class="row"> <div class="row">
<div class="col-md-8 isInputElement"> <div class="col-md-8 isInputElement">
<input class="form-control" <mat-form-field class="fullWidth">
<input matInput matInput class="form-control"
[formControlName]="'Year'" [formControlName]="'Year'"
[id]="'Year'" [id]="'Year'"
[type]="'text'" [type]="'text'"
[name]="'Year'"> [name]="'Year'">
</mat-form-field>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="card">
<div id='Row_Genre' class="form-group field-wrapper"> <div id='Row_Genre' class="form-group field-wrapper">
<label [attr.for]="'Genre'" class="control-label col-sm-3 isInputLabel"> <label [attr.for]="'Genre'" class="control-label col-sm-3 isInputLabel">
Genre Genre
@@ -133,27 +179,26 @@
<div class="col-sm-9 isInputElement"> <div class="col-sm-9 isInputElement">
<div class="row"> <div class="row">
<div class="col-md-8 isInputElement"> <div class="col-md-8 isInputElement">
<mat-form-field>
<select class="form-control" <mat-select class="form-control" name="Genre"
[formControlName]="'Genre'" [formControlName]="'Genre'"
[id]="'Genre'" [id]="'Genre'">
[name]="'Genre'">
<option [value]="sports">sports</option> <mat-option [value]="sports">sports</mat-option>
<option [value]="platformer">platformer</option> <mat-option [value]="platformer">platformer</mat-option>
<option [value]="lightgun">lightgun</option> <mat-option [value]="lightgun">lightgun</mat-option>
<option [value]="fighter">fighter</option> <mat-option [value]="fighter">fighter</mat-option>
<option [value]="rpg">rpg</option> <mat-option [value]="rpg">rpg</mat-option>
<option [value]="strategy">strategy</option> <mat-option [value]="strategy">strategy</mat-option>
<option [value]="adventure">adventure</option> <mat-option [value]="adventure">adventure</mat-option>
<option [value]="racing">racing</option> <mat-option [value]="racing">racing</mat-option>
<option [value]="fps">fps</option> <mat-option [value]="fps">fps</mat-option>
<option [value]="action">action</option> <mat-option [value]="action">action</mat-option>
<option [value]="simulation">simulation</option> <mat-option [value]="simulation">simulation</mat-option>
<option [value]="card">card</option> <mat-option [value]="card">card</mat-option>
</select>
</mat-select>
</mat-form-field>
</div> </div>
</div> </div>
</div> </div>
@@ -166,27 +211,27 @@
<div class="col-sm-9 isInputElement"> <div class="col-sm-9 isInputElement">
<div class="row"> <div class="row">
<div class="col-md-8 isInputElement"> <div class="col-md-8 isInputElement">
<mat-form-field>
<select class="form-control" <mat-select class="form-control" name="System"
[formControlName]="'System'" [formControlName]="'System'"
[id]="'System'" [id]="'System'"
[name]="'System'"> >
<option [value]="SNES">SNES</option> <mat-option [value]="SNES">SNES</mat-option>
<option [value]="N64">N64</option> <mat-option [value]="N64">N64</mat-option>
<option [value]="PS1">PS1</option> <mat-option [value]="PS1">PS1</mat-option>
<option [value]="PS2">PS2</option> <mat-option [value]="PS2">PS2</mat-option>
<option [value]="GB">GB</option> <mat-option [value]="GB">GB</mat-option>
<option [value]="GBA">GBA</option> <mat-option [value]="GBA">GBA</mat-option>
<option [value]="DS">DS</option> <mat-option [value]="DS">DS</mat-option>
<option [value]="NES">NES</option> <mat-option [value]="NES">NES</mat-option>
<option [value]="GC">GC</option> <mat-option [value]="GC">GC</mat-option>
<option [value]="PSP">PSP</option> <mat-option [value]="PSP">PSP</mat-option>
<option [value]="360">360</option> <mat-option [value]="360">360</mat-option>
<option [value]="WII">WII</option> <mat-option [value]="WII">WII</mat-option>
</select>
</mat-select>
</mat-form-field>
</div> </div>
</div> </div>
</div> </div>
@@ -199,17 +244,16 @@
<div class="col-sm-9 isInputElement"> <div class="col-sm-9 isInputElement">
<div class="row"> <div class="row">
<div class="col-md-8 isInputElement"> <div class="col-md-8 isInputElement">
<mat-form-field>
<select class="form-control" <mat-select class="form-control" name="Own"
[formControlName]="'Own'" [formControlName]="'Own'"
[id]="'Own'" [id]="'Own'">
[name]="'Own'">
<option [value]="0">No</option> <mat-option [value]="0">No</mat-option>
<option [value]="1">Yes</option> <mat-option [value]="1">Yes</mat-option>
</select>
</mat-select>
</mat-form-field>
</div> </div>
</div> </div>
</div> </div>
@@ -222,17 +266,16 @@
<div class="col-sm-9 isInputElement"> <div class="col-sm-9 isInputElement">
<div class="row"> <div class="row">
<div class="col-md-8 isInputElement"> <div class="col-md-8 isInputElement">
<mat-form-field>
<select class="form-control" <mat-select class="form-control" name="Dumped"
[formControlName]="'Dumped'" [formControlName]="'Dumped'"
[id]="'Dumped'" [id]="'Dumped'">
[name]="'Dumped'">
<option [value]="0">No</option> <mat-option [value]="0">No</mat-option>
<option [value]="1">Yes</option> <mat-option [value]="1">Yes</mat-option>
</select>
</mat-select>
</mat-form-field>
</div> </div>
</div> </div>
</div> </div>
@@ -245,17 +288,16 @@
<div class="col-sm-9 isInputElement"> <div class="col-sm-9 isInputElement">
<div class="row"> <div class="row">
<div class="col-md-8 isInputElement"> <div class="col-md-8 isInputElement">
<mat-form-field>
<select class="form-control" <mat-select class="form-control" name="Played"
[formControlName]="'Played'" [formControlName]="'Played'"
[id]="'Played'" [id]="'Played'">
[name]="'Played'">
<option [value]="0">No</option> <mat-option [value]="0">No</mat-option>
<option [value]="1">Yes</option> <mat-option [value]="1">Yes</mat-option>
</select>
</mat-select>
</mat-form-field>
</div> </div>
</div> </div>
</div> </div>
@@ -268,23 +310,22 @@
<div class="col-sm-9 isInputElement"> <div class="col-sm-9 isInputElement">
<div class="row"> <div class="row">
<div class="col-md-8 isInputElement"> <div class="col-md-8 isInputElement">
<mat-form-field>
<select class="form-control" <mat-select class="form-control" name="Finished"
[formControlName]="'Finished'" [formControlName]="'Finished'"
[id]="'Finished'" [id]="'Finished'">
[name]="'Finished'">
<option [value]="0">No</option> <mat-option [value]="0">No</mat-option>
<option [value]="1">Yes</option> <mat-option [value]="1">Yes</mat-option>
</select>
</mat-select>
</mat-form-field>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<br /> <br />
@@ -292,17 +333,17 @@
<div class="buttonArea"> <div class="buttonArea">
<div class="row"> <div class="row">
<div class="col-sm-5 col-sm-push-7 buttonHolder text-center"> <div class="col-sm-5 col-sm-push-7 buttonHolder text-center">
<button class="btn btn-primary btn-lg addMarginTop btn-landing" routerLink="/game-grid"> <button mat-button class="btn btn-primary btn-lg addMarginTop btn-landing" routerLink="/game-grid">
Cancel Changes Cancel Changes
</button> </button>
</div> </div>
<div class="col-sm-2"> <div class="col-sm-2">
<button class="btn btn-primary btn-lg addMarginTop btn-landing" (click)="removeGame()" > <button mat-button class="btn btn-primary btn-lg addMarginTop btn-landing" (click)="removeGame()" >
Remove Game Remove Game
</button> </button>
</div> </div>
<div class="col-sm-5 col-sm-pull-7 buttonHolder text-center"> <div class="col-sm-5 col-sm-pull-7 buttonHolder text-center">
<input type="submit" class="btn btn-primary btn-lg" name="btnContinue" id="btnContinue" value="Submit Changes" [disabled]="!form.valid" /> <button mat-raised-button color="primary" type="submit" [disabled]="!form.valid" >Submit Changes</button>
</div> </div>
</div> </div>
</div> </div>
@@ -310,6 +351,12 @@
<br /> <br />
</form> </form>
</div>
</div>
</mat-card>
</div>
<hr /> <hr />