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

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

@@ -1,4 +1,62 @@
#gameImageHeaderContainer{
height:250px;
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 class="lrContainer">
<mat-card class="lrCard">
<div class="flex-container" >
<div class="card">
<div class="row">
<div class="col-sm-12" id="gameImageHeaderContainer">
<img class="card-img-top" [src]="imageSample" alt="">
@@ -8,11 +42,11 @@
</div>
</div>
</div>
<div class="card">
<form novalidate (ngSubmit)="onSubmit(form.value)" [formGroup]="form" class="flex-container" >
<form novalidate (ngSubmit)="onSubmit(form.value)" [formGroup]="form" >
<div class="card">
<div id='Row_Title' class="form-group field-wrapper">
<label [attr.for]="'Title'" class="control-label col-sm-3 isInputLabel">
Title
@@ -20,7 +54,8 @@
<div class="col-sm-9 isInputElement">
<div class="row">
<div class="col-md-8 isInputElement">
<input class="form-control"
<mat-form-field class="fullWidth">
<input matInput class="form-control"
[formControlName]="'Title'"
[id]="'Title'"
[type]="'text'"
@@ -28,7 +63,7 @@
<div class="invalidEntryContainer">
<span *ngIf="(form.get('Title').dirty || form.get('Title').touched) && form.get('Title').invalid" >This field is required</span>
</div>
</mat-form-field>
</div>
</div>
</div>
@@ -41,12 +76,14 @@
<div class="col-sm-9 isInputElement">
<div class="row">
<div class="col-md-8 isInputElement">
<input class="form-control"
<mat-form-field class="fullWidth">
<input matInput class="form-control"
[formControlName]="'Description'"
[id]="'Description'"
[type]="'text'"
[name]="'Description'">
</mat-form-field>
</div>
</div>
</div>
@@ -59,12 +96,14 @@
<div class="col-sm-9 isInputElement">
<div class="row">
<div class="col-md-8 isInputElement">
<input class="form-control"
<mat-form-field class="fullWidth">
<input matInput class="form-control"
[formControlName]="'Developer'"
[id]="'Developer'"
[type]="'text'"
[name]="'Developer'">
</mat-form-field>
</div>
</div>
</div>
@@ -77,12 +116,14 @@
<div class="col-sm-9 isInputElement">
<div class="row">
<div class="col-md-8 isInputElement">
<input class="form-control"
<mat-form-field class="fullWidth">
<input matInput class="form-control"
[formControlName]="'Publisher'"
[id]="'Publisher'"
[type]="'text'"
[name]="'Publisher'">
</mat-form-field>
</div>
</div>
</div>
@@ -95,14 +136,16 @@
<div class="col-sm-9 isInputElement">
<div class="row">
<div class="col-md-8 isInputElement">
<input class="form-control"
<mat-form-field class="fullWidth">
<input matInput matInput class="form-control"
[formControlName]="'Art'"
[id]="'Art'"
[type]="'text'"
[name]="'Art'">
<input type="file" [name]="'fileToUpload'" (change)="handleFileInput($event)">
</mat-form-field>
</div>
</div>
</div>
@@ -115,17 +158,20 @@
<div class="col-sm-9 isInputElement">
<div class="row">
<div class="col-md-8 isInputElement">
<input class="form-control"
<mat-form-field class="fullWidth">
<input matInput matInput class="form-control"
[formControlName]="'Year'"
[id]="'Year'"
[type]="'text'"
[name]="'Year'">
</mat-form-field>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div id='Row_Genre' class="form-group field-wrapper">
<label [attr.for]="'Genre'" class="control-label col-sm-3 isInputLabel">
Genre
@@ -133,27 +179,26 @@
<div class="col-sm-9 isInputElement">
<div class="row">
<div class="col-md-8 isInputElement">
<select class="form-control"
<mat-form-field>
<mat-select class="form-control" name="Genre"
[formControlName]="'Genre'"
[id]="'Genre'"
[name]="'Genre'">
[id]="'Genre'">
<option [value]="sports">sports</option>
<option [value]="platformer">platformer</option>
<option [value]="lightgun">lightgun</option>
<option [value]="fighter">fighter</option>
<option [value]="rpg">rpg</option>
<option [value]="strategy">strategy</option>
<option [value]="adventure">adventure</option>
<option [value]="racing">racing</option>
<option [value]="fps">fps</option>
<option [value]="action">action</option>
<option [value]="simulation">simulation</option>
<option [value]="card">card</option>
</select>
<mat-option [value]="sports">sports</mat-option>
<mat-option [value]="platformer">platformer</mat-option>
<mat-option [value]="lightgun">lightgun</mat-option>
<mat-option [value]="fighter">fighter</mat-option>
<mat-option [value]="rpg">rpg</mat-option>
<mat-option [value]="strategy">strategy</mat-option>
<mat-option [value]="adventure">adventure</mat-option>
<mat-option [value]="racing">racing</mat-option>
<mat-option [value]="fps">fps</mat-option>
<mat-option [value]="action">action</mat-option>
<mat-option [value]="simulation">simulation</mat-option>
<mat-option [value]="card">card</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</div>
@@ -166,27 +211,27 @@
<div class="col-sm-9 isInputElement">
<div class="row">
<div class="col-md-8 isInputElement">
<select class="form-control"
<mat-form-field>
<mat-select class="form-control" name="System"
[formControlName]="'System'"
[id]="'System'"
[name]="'System'">
>
<option [value]="SNES">SNES</option>
<option [value]="N64">N64</option>
<option [value]="PS1">PS1</option>
<option [value]="PS2">PS2</option>
<option [value]="GB">GB</option>
<option [value]="GBA">GBA</option>
<option [value]="DS">DS</option>
<option [value]="NES">NES</option>
<option [value]="GC">GC</option>
<option [value]="PSP">PSP</option>
<option [value]="360">360</option>
<option [value]="WII">WII</option>
</select>
<mat-option [value]="SNES">SNES</mat-option>
<mat-option [value]="N64">N64</mat-option>
<mat-option [value]="PS1">PS1</mat-option>
<mat-option [value]="PS2">PS2</mat-option>
<mat-option [value]="GB">GB</mat-option>
<mat-option [value]="GBA">GBA</mat-option>
<mat-option [value]="DS">DS</mat-option>
<mat-option [value]="NES">NES</mat-option>
<mat-option [value]="GC">GC</mat-option>
<mat-option [value]="PSP">PSP</mat-option>
<mat-option [value]="360">360</mat-option>
<mat-option [value]="WII">WII</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</div>
@@ -199,17 +244,16 @@
<div class="col-sm-9 isInputElement">
<div class="row">
<div class="col-md-8 isInputElement">
<select class="form-control"
<mat-form-field>
<mat-select class="form-control" name="Own"
[formControlName]="'Own'"
[id]="'Own'"
[name]="'Own'">
[id]="'Own'">
<option [value]="0">No</option>
<option [value]="1">Yes</option>
</select>
<mat-option [value]="0">No</mat-option>
<mat-option [value]="1">Yes</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</div>
@@ -222,17 +266,16 @@
<div class="col-sm-9 isInputElement">
<div class="row">
<div class="col-md-8 isInputElement">
<select class="form-control"
<mat-form-field>
<mat-select class="form-control" name="Dumped"
[formControlName]="'Dumped'"
[id]="'Dumped'"
[name]="'Dumped'">
[id]="'Dumped'">
<option [value]="0">No</option>
<option [value]="1">Yes</option>
</select>
<mat-option [value]="0">No</mat-option>
<mat-option [value]="1">Yes</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</div>
@@ -245,17 +288,16 @@
<div class="col-sm-9 isInputElement">
<div class="row">
<div class="col-md-8 isInputElement">
<select class="form-control"
<mat-form-field>
<mat-select class="form-control" name="Played"
[formControlName]="'Played'"
[id]="'Played'"
[name]="'Played'">
[id]="'Played'">
<option [value]="0">No</option>
<option [value]="1">Yes</option>
</select>
<mat-option [value]="0">No</mat-option>
<mat-option [value]="1">Yes</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</div>
@@ -268,23 +310,22 @@
<div class="col-sm-9 isInputElement">
<div class="row">
<div class="col-md-8 isInputElement">
<select class="form-control"
<mat-form-field>
<mat-select class="form-control" name="Finished"
[formControlName]="'Finished'"
[id]="'Finished'"
[name]="'Finished'">
[id]="'Finished'">
<option [value]="0">No</option>
<option [value]="1">Yes</option>
</select>
<mat-option [value]="0">No</mat-option>
<mat-option [value]="1">Yes</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</div>
</div>
</div>
<br />
@@ -292,17 +333,17 @@
<div class="buttonArea">
<div class="row">
<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
</button>
</div>
<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
</button>
</div>
<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>
@@ -310,6 +351,12 @@
<br />
</form>
</div>
</div>
</mat-card>
</div>
<hr />