From 4ce3c4733297978a8e9f6a1596ed6be433594ce4 Mon Sep 17 00:00:00 2001 From: CerealKiller97 Date: Mon, 2 Sep 2019 23:46:13 +0200 Subject: [PATCH] Cleaning up --- .nowignore | 2 + .../components/contact/contact.component.html | 4 +- .../components/contact/contact.component.ts | 2 +- .../game-list/game-list.component.ts | 41 +- .../gaming/components/game/game.component.ts | 8 +- src/app/modules/gaming/gaming.module.ts | 7 +- .../bug-report-dialog.component.html | 12 +- .../bug-report-dialog.component.ts | 52 +- .../components/header/header.component.html | 8 +- .../components/header/header.component.ts | 53 +- .../shared-components.module.ts | 20 +- .../shared/services/games/games.service.ts | 26 +- .../shared/services/genres/genres.service.ts | 38 + .../services/icons/custom-icons.service.ts | 8 +- .../platforms/platforms.service.spec.ts | 12 + .../services/platforms/platforms.service.ts | 37 + src/styles.css | 1309 +++++++++++++++++ 17 files changed, 1577 insertions(+), 62 deletions(-) create mode 100644 .nowignore create mode 100644 src/app/modules/shared/services/genres/genres.service.ts create mode 100644 src/app/modules/shared/services/platforms/platforms.service.spec.ts create mode 100644 src/app/modules/shared/services/platforms/platforms.service.ts diff --git a/.nowignore b/.nowignore new file mode 100644 index 0000000..3e5e123 --- /dev/null +++ b/.nowignore @@ -0,0 +1,2 @@ +README.md +yarn.lock diff --git a/src/app/modules/contact/components/contact/contact.component.html b/src/app/modules/contact/components/contact/contact.component.html index 8959764..92d11d4 100644 --- a/src/app/modules/contact/components/contact/contact.component.html +++ b/src/app/modules/contact/components/contact/contact.component.html @@ -1,5 +1,5 @@ -
+ @@ -15,6 +15,6 @@ - +
diff --git a/src/app/modules/contact/components/contact/contact.component.ts b/src/app/modules/contact/components/contact/contact.component.ts index 7341a5f..cd71724 100644 --- a/src/app/modules/contact/components/contact/contact.component.ts +++ b/src/app/modules/contact/components/contact/contact.component.ts @@ -35,7 +35,7 @@ export class ContactComponent implements OnInit { panelClass: ['success'] }; - this.snackBar.open('You have successfully contacted VideoGamer.', '', options); + this.snackBar.open('You have successfully contacted VideoGamer.', null, options); } public openErrorSnackBar(): void { diff --git a/src/app/modules/gaming/components/game-list/game-list.component.ts b/src/app/modules/gaming/components/game-list/game-list.component.ts index 93aa544..660e350 100644 --- a/src/app/modules/gaming/components/game-list/game-list.component.ts +++ b/src/app/modules/gaming/components/game-list/game-list.component.ts @@ -1,15 +1,46 @@ -import { Component, OnInit } from '@angular/core'; - +import { Component, OnInit, OnDestroy } from '@angular/core'; +import { Router, ActivatedRoute, Params, ParamMap } from '@angular/router'; +import { Subscription, Observable } from 'rxjs'; +import { GamesService } from '@service/games/games.service.ts'; +import { switchMap } from 'rxjs/operators'; @Component({ selector: 'app-game-list', templateUrl: './game-list.component.html', styleUrls: ['./game-list.component.css'] }) -export class GameListComponent implements OnInit { +export class GameListComponent implements OnInit, OnDestroy { + private subscriptions: Array = new Array(); + + constructor( + private readonly router: Router, + private readonly route: ActivatedRoute, + private readonly gamingService: GamesService + ) {} - constructor() { } + public ngOnInit() { + this.handleUrl(); + } - ngOnInit() { + private handleUrl(): void { + this.subscriptions.push( + this.route.paramMap + .pipe( + switchMap((params: ParamMap) => { + if (this.router.url.startsWith('/gaming/genres/')) { + return this.gamingService.getGamesByGenre(params.get('genre')); + } else if (this.router.url.startsWith('/gaming/platform/')) { + return this.gamingService.getGamesByPlatform(params.get('platform')); + } + }) + ) + .subscribe(data => console.log(data)) + ); } + public ngOnDestroy(): void { + // Performance reason + for (let i = 0; i < this.subscriptions.length; i++) { + this.subscriptions[i].unsubscribe(); + } + } } diff --git a/src/app/modules/gaming/components/game/game.component.ts b/src/app/modules/gaming/components/game/game.component.ts index db74dae..62b910a 100644 --- a/src/app/modules/gaming/components/game/game.component.ts +++ b/src/app/modules/gaming/components/game/game.component.ts @@ -6,10 +6,6 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./game.component.css'] }) export class GameComponent implements OnInit { - - constructor() { } - - ngOnInit() { - } - + constructor() {} + ngOnInit(): void {} } diff --git a/src/app/modules/gaming/gaming.module.ts b/src/app/modules/gaming/gaming.module.ts index bd9eb9a..2ff5628 100644 --- a/src/app/modules/gaming/gaming.module.ts +++ b/src/app/modules/gaming/gaming.module.ts @@ -6,8 +6,11 @@ import { GameListComponent } from './components/game-list/game-list.component'; const routes: Routes = [ { - path: '', - pathMatch: 'full', + path: 'platform/:platform', + component: GameListComponent + }, + { + path: 'genres/:genre', component: GameListComponent } ]; diff --git a/src/app/modules/shared-components/components/bug-report-dialog/bug-report-dialog.component.html b/src/app/modules/shared-components/components/bug-report-dialog/bug-report-dialog.component.html index 147e086..44cdca0 100644 --- a/src/app/modules/shared-components/components/bug-report-dialog/bug-report-dialog.component.html +++ b/src/app/modules/shared-components/components/bug-report-dialog/bug-report-dialog.component.html @@ -1,17 +1,21 @@

Bug Report

-
+ - + + Full name is + required. - + + Bug field is required.
- + +
diff --git a/src/app/modules/shared-components/components/bug-report-dialog/bug-report-dialog.component.ts b/src/app/modules/shared-components/components/bug-report-dialog/bug-report-dialog.component.ts index b843852..af72a79 100644 --- a/src/app/modules/shared-components/components/bug-report-dialog/bug-report-dialog.component.ts +++ b/src/app/modules/shared-components/components/bug-report-dialog/bug-report-dialog.component.ts @@ -2,6 +2,7 @@ import { Component, OnInit, Inject } from '@angular/core'; import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { HeaderComponent } from '..'; import { FormGroup, Validators, FormControl } from '@angular/forms'; +import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; export interface BugReport { fullName: string; @@ -20,13 +21,56 @@ export class BugReportDialogComponent implements OnInit { }); constructor( - public readonly dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) public data: BugReport + private readonly dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: BugReport, + private readonly snackBar: MatSnackBar ) {} - ngOnInit() {} + public ngOnInit() {} - onNoClick(): void { + public onNoClick(): void { this.dialogRef.close(); } + + private openSuccessSnackBar(): void { + const options: MatSnackBarConfig = { + direction: 'ltr', + duration: 4000, + horizontalPosition: 'end', + panelClass: ['success'] + }; + + this.snackBar.open('You have successfully contacted VideoGamer.', null, options); + } + + private openErrorSnackBar(): void { + const options: MatSnackBarConfig = { + direction: 'ltr', + duration: 4000, + horizontalPosition: 'end', + panelClass: ['danger'] + }; + + this.snackBar.open('Fill the form properly.', null, options); + } + + public submitReport(): void { + if (this.bugReportForm.invalid) { + console.log(this.bugReportForm.errors); + // Show snack bar error + this.openErrorSnackBar(); + } else { + const data: any = this.bugReportForm.getRawValue(); + + this.dialogRef.close(); + + // // Clear contact form + this.bugReportForm.reset(); + this.bugReportForm.markAsPristine(); + this.bugReportForm.markAsUntouched(); + + // Show success snack bar + this.openSuccessSnackBar(); + } + } } diff --git a/src/app/modules/shared-components/components/header/header.component.html b/src/app/modules/shared-components/components/header/header.component.html index 70bb9d9..d0f853f 100644 --- a/src/app/modules/shared-components/components/header/header.component.html +++ b/src/app/modules/shared-components/components/header/header.component.html @@ -9,7 +9,7 @@ diff --git a/src/app/modules/shared-components/components/header/header.component.ts b/src/app/modules/shared-components/components/header/header.component.ts index 1d182c8..75c12de 100644 --- a/src/app/modules/shared-components/components/header/header.component.ts +++ b/src/app/modules/shared-components/components/header/header.component.ts @@ -1,7 +1,10 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, OnDestroy } from '@angular/core'; import { CustomIconService } from '@service/icons/custom-icons.service'; import { MatDialog } from '@angular/material/dialog'; import { BugReportDialogComponent, BugReport } from '../bug-report-dialog/bug-report-dialog.component'; +import { GenreService } from '@service/genres/genres.service'; +import { Subscription } from 'rxjs'; +import { PlatformsService } from '@service/platforms/platforms.service'; export interface Link { name: string; path: string; @@ -25,7 +28,7 @@ export interface Platform { templateUrl: './header.component.html', styleUrls: ['./header.component.css'] }) -export class HeaderComponent implements OnInit { +export class HeaderComponent implements OnInit, OnDestroy { public bugReport: BugReport; public readonly links: Link[] = [ @@ -34,30 +37,30 @@ export class HeaderComponent implements OnInit { { name: 'Contact', path: 'contact', icon: 'mail' } ]; - public readonly genres: Genre[] = [ - { name: 'Action', icon: '../../../../../assets/images/genres/action.png', slug: 'action' }, - { name: 'Strategy', icon: '', slug: 'strategy' }, - { name: 'RPG', icon: '', slug: 'role-playing-games-rpg' }, - { name: 'Shooter', icon: '', slug: 'shooter' }, - { name: 'Adventure', icon: '', slug: 'adventure' }, - { name: 'Puzzle', icon: '', slug: 'puzzle' }, - { name: 'Racing', icon: '', slug: 'racing' }, - { name: 'Sports', icon: '', slug: 'sports' } - ]; + private subscriptions: Subscription[] = []; - public readonly platforms: Platform[] = [ - { name: 'PC', icon: 'windows', slug: 'pc' }, - { name: 'PlayStation 4', icon: 'ps4', slug: 'playstation4' }, - { name: 'Xbox One', icon: 'xbox', slug: 'xbox-one' }, - { name: 'Nintendo Switch', icon: 'nintendo', slug: 'nintendo-switch' }, - { name: 'iOS', icon: 'ios', slug: 'ios' }, - { name: 'Android', icon: 'android', slug: 'android' } - ]; + public genresMap: Map; + public genres: Array = []; + + public platforms: Platform[]; - constructor(private readonly customIconsService: CustomIconService, private readonly dialogService: MatDialog) {} + constructor( + private readonly customIconsService: CustomIconService, + private readonly dialogService: MatDialog, + private readonly genreService: GenreService, + private readonly platformService: PlatformsService + ) {} ngOnInit(): void { this.customIconsService.registerPlatformIcons(); + this.subscriptions.push( + this.genreService.getGenres().subscribe(([genreMap, genreArray]) => { + this.genresMap = genreMap as Map; + this.genres = genreArray as Array; + }) + ); + + this.platforms = this.platformService.getPlatforms(); // this.dialogService.open(); } @@ -73,7 +76,13 @@ export class HeaderComponent implements OnInit { }); } - trackByFunc(index: number, item: Link): string { + public trackByFunc(index: number, item: Link): string { return item.path; } + + public ngOnDestroy(): void { + for (let sub of this.subscriptions) { + sub.unsubscribe(); + } + } } diff --git a/src/app/modules/shared-components/shared-components.module.ts b/src/app/modules/shared-components/shared-components.module.ts index 49a5bae..6e00609 100644 --- a/src/app/modules/shared-components/shared-components.module.ts +++ b/src/app/modules/shared-components/shared-components.module.ts @@ -10,8 +10,10 @@ import { NotificationComponent } from './components/notification/notification.co import { CustomIconService } from '@serviceicons/custom-icons.service'; import { HeroComponent } from './components/hero/hero.component'; import { BugReportDialogComponent } from './components/bug-report-dialog/bug-report-dialog.component'; -import { FormsModule } from '@angular/forms'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; + import { MatInputModule } from '@angular/material/input'; +import { MatSnackBar, MatSnackBarContainer, SimpleSnackBar } from '@angular/material/snack-bar'; @NgModule({ declarations: [ HeaderComponent, @@ -21,9 +23,17 @@ import { MatInputModule } from '@angular/material/input'; HeroComponent, BugReportDialogComponent ], - imports: [CommonModule, FingerprintSpinnerModule, RouterModule, MaterialModule, FormsModule, MatInputModule], - exports: [HeaderComponent, FooterComponent, LoadingSpinnerComponent], - providers: [CustomIconService], - entryComponents: [BugReportDialogComponent] + imports: [ + CommonModule, + FingerprintSpinnerModule, + RouterModule, + MaterialModule, + FormsModule, + MatInputModule, + ReactiveFormsModule + ], + exports: [HeaderComponent, FooterComponent, LoadingSpinnerComponent, FormsModule, ReactiveFormsModule], + providers: [CustomIconService, MatSnackBar], + entryComponents: [BugReportDialogComponent, MatSnackBarContainer, SimpleSnackBar] }) export class SharedComponentsModule {} diff --git a/src/app/modules/shared/services/games/games.service.ts b/src/app/modules/shared/services/games/games.service.ts index fa0d699..95c2010 100644 --- a/src/app/modules/shared/services/games/games.service.ts +++ b/src/app/modules/shared/services/games/games.service.ts @@ -9,7 +9,18 @@ import { map } from 'rxjs/operators'; providedIn: 'root' }) export class GamesService { - private readonly resourcePath: string = `${environment.apiUrl}/games`; + private resourcePath: string = `${environment.apiUrl}/games`; + + private readonly genreMappings = new Map([ + ['action', 4], + ['strategy', 10], + ['role-playing-games-rpg', 5], + ['shooter', 2], + ['adventure', 3], + ['puzzle', 7], + ['racing', 1], + ['sports', 15] + ]); constructor(private readonly http: HttpClient) {} @@ -25,7 +36,16 @@ export class GamesService { return this.http.get(`${this.resourcePath}/${gameSlug}`); } - public getGamesByPlatform(platform: string) {} + public getGamesByPlatform(platform: string) { + this.resourcePath += '?'; + return this.http.get<{ results: Game[] }>(this.resourcePath).pipe(map(response => response.results)); + } - public getGamesByGenre(genre: string) {} + public getGamesByGenre(genre: string) { + const genreId: number = this.genreMappings.get(genre); + + return this.http + .get<{ results: Game[] }>(`${this.resourcePath}?genres=${genreId}`) + .pipe(map(response => response.results)); + } } diff --git a/src/app/modules/shared/services/genres/genres.service.ts b/src/app/modules/shared/services/genres/genres.service.ts new file mode 100644 index 0000000..f1f4db5 --- /dev/null +++ b/src/app/modules/shared/services/genres/genres.service.ts @@ -0,0 +1,38 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { environment } from 'environments/environment.prod'; +import { pluck, take, map } from 'rxjs/operators'; +import { Genre } from '@shared-components/components/header/header.component'; + +@Injectable({ + providedIn: 'root' +}) +export class GenreService { + private genres: Genre[]; + + public constructor(private readonly httpClient: HttpClient) {} + + public getGenres() { + return this.httpClient.get(`${environment.apiUrl}/genres`).pipe( + pluck('results'), + map((results: Array) => { + const genresMap = new Map(); + const genresArray = new Array(6); + let counter = 0; + + for (let result of results) { + if (counter > 5) { + break; + } + genresArray[counter] = { name: result.name, slug: result.slug }; + genresMap.set(result.name, { id: result.id, slug: result.slug }); + counter++; + } + + return [genresMap, genresArray]; + }) + ); + } + + public getGamesByGenre(id: number) {} +} diff --git a/src/app/modules/shared/services/icons/custom-icons.service.ts b/src/app/modules/shared/services/icons/custom-icons.service.ts index a405f65..5eaf14c 100644 --- a/src/app/modules/shared/services/icons/custom-icons.service.ts +++ b/src/app/modules/shared/services/icons/custom-icons.service.ts @@ -21,11 +21,11 @@ export class CustomIconService { constructor(private readonly matIconRegistry: MatIconRegistry, private readonly domSanitizer: DomSanitizer) {} public registerPlatformIcons(): void { - this.platformIcons.forEach((platformIcons: CustomIcon) => { + for (let i = 0; i < this.platformIcons.length; i++) { this.matIconRegistry.addSvgIcon( - platformIcons.name, - this.domSanitizer.bypassSecurityTrustResourceUrl(platformIcons.path) + this.platformIcons[i].name, + this.domSanitizer.bypassSecurityTrustResourceUrl(this.platformIcons[i].path) ); - }); + } } } diff --git a/src/app/modules/shared/services/platforms/platforms.service.spec.ts b/src/app/modules/shared/services/platforms/platforms.service.spec.ts new file mode 100644 index 0000000..ab9819f --- /dev/null +++ b/src/app/modules/shared/services/platforms/platforms.service.spec.ts @@ -0,0 +1,12 @@ +import { TestBed } from '@angular/core/testing'; + +import { PlatformsService } from './platforms.service'; + +describe('PlatformsService', () => { + beforeEach(() => TestBed.configureTestingModule({})); + + it('should be created', () => { + const service: PlatformsService = TestBed.get(PlatformsService); + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/modules/shared/services/platforms/platforms.service.ts b/src/app/modules/shared/services/platforms/platforms.service.ts new file mode 100644 index 0000000..5ed9022 --- /dev/null +++ b/src/app/modules/shared/services/platforms/platforms.service.ts @@ -0,0 +1,37 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { Platform } from '@shared-components/components/header/header.component'; +import { environment } from 'environments/environment'; + +@Injectable({ + providedIn: 'root' +}) +export class PlatformsService { + private readonly platforms: Platform[] = [ + { name: 'PC', icon: 'windows', slug: 'pc' }, + { name: 'PlayStation 4', icon: 'ps4', slug: 'playstation4' }, + { name: 'Xbox One', icon: 'xbox', slug: 'xbox-one' }, + { name: 'Nintendo Switch', icon: 'nintendo', slug: 'nintendo-switch' }, + { name: 'iOS', icon: 'ios', slug: 'ios' }, + { name: 'Android', icon: 'android', slug: 'android' } + ]; + + private readonly platformMapping = new Map([ + ['pc', null], + ['playstation4', null], + ['xbox-one', null], + ['nintendo-switch', null], + ['ios', null], + ['android', null] + ]); + + constructor(private readonly http: HttpClient) {} + + public getPlatforms() { + return this.platforms; + } + + public getGamesByPlatform(platform: string) { + return this.http.get(environment.apiUrl); + } +} diff --git a/src/styles.css b/src/styles.css index 1f0fd41..e9f46a3 100644 --- a/src/styles.css +++ b/src/styles.css @@ -21,3 +21,1312 @@ body { .danger { background-color: #f44336; } + +/*! + * Bootstrap v3.3.5 (http://getbootstrap.com) + * Copyright 2011-2016 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + */ + +/*! + * Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=dd756061b99b30782a31) + * Config saved to config.json and https://gist.github.com/dd756061b99b30782a31 + */ +/*! + * Bootstrap v3.3.6 (http://getbootstrap.com) + * Copyright 2011-2015 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + */ +/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ +body { + margin: 0px 0px 0px 0px; +} + +.container { + margin-right: auto; + margin-left: auto; + padding-left: 15px; + padding-right: 15px; +} + +@media (min-width: 768px) { + .container { + width: 750px; + } +} + +@media (min-width: 992px) { + .container { + width: 970px; + } +} + +@media (min-width: 1200px) { + .container { + width: 1170px; + } +} + +.container-fluid { + margin-right: auto; + margin-left: auto; +} + +.row { + width: 100%; +} + +.col-xs-1, +.col-sm-1, +.col-md-1, +.col-lg-1, +.col-xs-2, +.col-sm-2, +.col-md-2, +.col-lg-2, +.col-xs-3, +.col-sm-3, +.col-md-3, +.col-lg-3, +.col-xs-4, +.col-sm-4, +.col-md-4, +.col-lg-4, +.col-xs-5, +.col-sm-5, +.col-md-5, +.col-lg-5, +.col-xs-6, +.col-sm-6, +.col-md-6, +.col-lg-6, +.col-xs-7, +.col-sm-7, +.col-md-7, +.col-lg-7, +.col-xs-8, +.col-sm-8, +.col-md-8, +.col-lg-8, +.col-xs-9, +.col-sm-9, +.col-md-9, +.col-lg-9, +.col-xs-10, +.col-sm-10, +.col-md-10, +.col-lg-10, +.col-xs-11, +.col-sm-11, +.col-md-11, +.col-lg-11, +.col-xs-12, +.col-sm-12, +.col-md-12, +.col-lg-12 { + position: relative; + min-height: 1px; +} + +.col-xs-1, +.col-xs-2, +.col-xs-3, +.col-xs-4, +.col-xs-5, +.col-xs-6, +.col-xs-7, +.col-xs-8, +.col-xs-9, +.col-xs-10, +.col-xs-11, +.col-xs-12 { + float: left; +} + +.col-xs-12 { + width: 100%; +} + +.col-xs-11 { + width: 91.66666667%; +} + +.col-xs-10 { + width: 83.33333333%; +} + +.col-xs-9 { + width: 75%; +} + +.col-xs-8 { + width: 66.66666667%; +} + +.col-xs-7 { + width: 58.33333333%; +} + +.col-xs-6 { + width: 50%; +} + +.col-xs-5 { + width: 41.66666667%; +} + +.col-xs-4 { + width: 33.33333333%; +} + +.col-xs-3 { + width: 25%; +} + +.col-xs-2 { + width: 16.66666667%; +} + +.col-xs-1 { + width: 8.33333333%; +} + +.col-xs-pull-12 { + right: 100%; +} + +.col-xs-pull-11 { + right: 91.66666667%; +} + +.col-xs-pull-10 { + right: 83.33333333%; +} + +.col-xs-pull-9 { + right: 75%; +} + +.col-xs-pull-8 { + right: 66.66666667%; +} + +.col-xs-pull-7 { + right: 58.33333333%; +} + +.col-xs-pull-6 { + right: 50%; +} + +.col-xs-pull-5 { + right: 41.66666667%; +} + +.col-xs-pull-4 { + right: 33.33333333%; +} + +.col-xs-pull-3 { + right: 25%; +} + +.col-xs-pull-2 { + right: 16.66666667%; +} + +.col-xs-pull-1 { + right: 8.33333333%; +} + +.col-xs-pull-0 { + right: auto; +} + +.col-xs-push-12 { + left: 100%; +} + +.col-xs-push-11 { + left: 91.66666667%; +} + +.col-xs-push-10 { + left: 83.33333333%; +} + +.col-xs-push-9 { + left: 75%; +} + +.col-xs-push-8 { + left: 66.66666667%; +} + +.col-xs-push-7 { + left: 58.33333333%; +} + +.col-xs-push-6 { + left: 50%; +} + +.col-xs-push-5 { + left: 41.66666667%; +} + +.col-xs-push-4 { + left: 33.33333333%; +} + +.col-xs-push-3 { + left: 25%; +} + +.col-xs-push-2 { + left: 16.66666667%; +} + +.col-xs-push-1 { + left: 8.33333333%; +} + +.col-xs-push-0 { + left: auto; +} + +.col-xs-offset-12 { + margin-left: 100%; +} + +.col-xs-offset-11 { + margin-left: 91.66666667%; +} + +.col-xs-offset-10 { + margin-left: 83.33333333%; +} + +.col-xs-offset-9 { + margin-left: 75%; +} + +.col-xs-offset-8 { + margin-left: 66.66666667%; +} + +.col-xs-offset-7 { + margin-left: 58.33333333%; +} + +.col-xs-offset-6 { + margin-left: 50%; +} + +.col-xs-offset-5 { + margin-left: 41.66666667%; +} + +.col-xs-offset-4 { + margin-left: 33.33333333%; +} + +.col-xs-offset-3 { + margin-left: 25%; +} + +.col-xs-offset-2 { + margin-left: 16.66666667%; +} + +.col-xs-offset-1 { + margin-left: 8.33333333%; +} + +.col-xs-offset-0 { + margin-left: 0%; +} + +@media (min-width: 768px) { + + .col-sm-1, + .col-sm-2, + .col-sm-3, + .col-sm-4, + .col-sm-5, + .col-sm-6, + .col-sm-7, + .col-sm-8, + .col-sm-9, + .col-sm-10, + .col-sm-11, + .col-sm-12 { + float: left; + } + + .col-sm-12 { + width: 100%; + } + + .col-sm-11 { + width: 91.66666667%; + } + + .col-sm-10 { + width: 83.33333333%; + } + + .col-sm-9 { + width: 75%; + } + + .col-sm-8 { + width: 66.66666667%; + } + + .col-sm-7 { + width: 58.33333333%; + } + + .col-sm-6 { + width: 50%; + } + + .col-sm-5 { + width: 41.66666667%; + } + + .col-sm-4 { + width: 33.33333333%; + } + + .col-sm-3 { + width: 25%; + } + + .col-sm-2 { + width: 16.66666667%; + } + + .col-sm-1 { + width: 8.33333333%; + } + + .col-sm-pull-12 { + right: 100%; + } + + .col-sm-pull-11 { + right: 91.66666667%; + } + + .col-sm-pull-10 { + right: 83.33333333%; + } + + .col-sm-pull-9 { + right: 75%; + } + + .col-sm-pull-8 { + right: 66.66666667%; + } + + .col-sm-pull-7 { + right: 58.33333333%; + } + + .col-sm-pull-6 { + right: 50%; + } + + .col-sm-pull-5 { + right: 41.66666667%; + } + + .col-sm-pull-4 { + right: 33.33333333%; + } + + .col-sm-pull-3 { + right: 25%; + } + + .col-sm-pull-2 { + right: 16.66666667%; + } + + .col-sm-pull-1 { + right: 8.33333333%; + } + + .col-sm-pull-0 { + right: auto; + } + + .col-sm-push-12 { + left: 100%; + } + + .col-sm-push-11 { + left: 91.66666667%; + } + + .col-sm-push-10 { + left: 83.33333333%; + } + + .col-sm-push-9 { + left: 75%; + } + + .col-sm-push-8 { + left: 66.66666667%; + } + + .col-sm-push-7 { + left: 58.33333333%; + } + + .col-sm-push-6 { + left: 50%; + } + + .col-sm-push-5 { + left: 41.66666667%; + } + + .col-sm-push-4 { + left: 33.33333333%; + } + + .col-sm-push-3 { + left: 25%; + } + + .col-sm-push-2 { + left: 16.66666667%; + } + + .col-sm-push-1 { + left: 8.33333333%; + } + + .col-sm-push-0 { + left: auto; + } + + .col-sm-offset-12 { + margin-left: 100%; + } + + .col-sm-offset-11 { + margin-left: 91.66666667%; + } + + .col-sm-offset-10 { + margin-left: 83.33333333%; + } + + .col-sm-offset-9 { + margin-left: 75%; + } + + .col-sm-offset-8 { + margin-left: 66.66666667%; + } + + .col-sm-offset-7 { + margin-left: 58.33333333%; + } + + .col-sm-offset-6 { + margin-left: 50%; + } + + .col-sm-offset-5 { + margin-left: 41.66666667%; + } + + .col-sm-offset-4 { + margin-left: 33.33333333%; + } + + .col-sm-offset-3 { + margin-left: 25%; + } + + .col-sm-offset-2 { + margin-left: 16.66666667%; + } + + .col-sm-offset-1 { + margin-left: 8.33333333%; + } + + .col-sm-offset-0 { + margin-left: 0%; + } +} + +@media (min-width: 992px) { + + .col-md-1, + .col-md-2, + .col-md-3, + .col-md-4, + .col-md-5, + .col-md-6, + .col-md-7, + .col-md-8, + .col-md-9, + .col-md-10, + .col-md-11, + .col-md-12 { + float: left; + } + + .col-md-12 { + width: 100%; + } + + .col-md-11 { + width: 91.66666667%; + } + + .col-md-10 { + width: 83.33333333%; + } + + .col-md-9 { + width: 75%; + } + + .col-md-8 { + width: 66.66666667%; + } + + .col-md-7 { + width: 58.33333333%; + } + + .col-md-6 { + width: 50%; + } + + .col-md-5 { + width: 41.66666667%; + } + + .col-md-4 { + width: 33.33333333%; + } + + .col-md-3 { + width: 25%; + } + + .col-md-2 { + width: 16.66666667%; + } + + .col-md-1 { + width: 8.33333333%; + } + + .col-md-pull-12 { + right: 100%; + } + + .col-md-pull-11 { + right: 91.66666667%; + } + + .col-md-pull-10 { + right: 83.33333333%; + } + + .col-md-pull-9 { + right: 75%; + } + + .col-md-pull-8 { + right: 66.66666667%; + } + + .col-md-pull-7 { + right: 58.33333333%; + } + + .col-md-pull-6 { + right: 50%; + } + + .col-md-pull-5 { + right: 41.66666667%; + } + + .col-md-pull-4 { + right: 33.33333333%; + } + + .col-md-pull-3 { + right: 25%; + } + + .col-md-pull-2 { + right: 16.66666667%; + } + + .col-md-pull-1 { + right: 8.33333333%; + } + + .col-md-pull-0 { + right: auto; + } + + .col-md-push-12 { + left: 100%; + } + + .col-md-push-11 { + left: 91.66666667%; + } + + .col-md-push-10 { + left: 83.33333333%; + } + + .col-md-push-9 { + left: 75%; + } + + .col-md-push-8 { + left: 66.66666667%; + } + + .col-md-push-7 { + left: 58.33333333%; + } + + .col-md-push-6 { + left: 50%; + } + + .col-md-push-5 { + left: 41.66666667%; + } + + .col-md-push-4 { + left: 33.33333333%; + } + + .col-md-push-3 { + left: 25%; + } + + .col-md-push-2 { + left: 16.66666667%; + } + + .col-md-push-1 { + left: 8.33333333%; + } + + .col-md-push-0 { + left: auto; + } + + .col-md-offset-12 { + margin-left: 100%; + } + + .col-md-offset-11 { + margin-left: 91.66666667%; + } + + .col-md-offset-10 { + margin-left: 83.33333333%; + } + + .col-md-offset-9 { + margin-left: 75%; + } + + .col-md-offset-8 { + margin-left: 66.66666667%; + } + + .col-md-offset-7 { + margin-left: 58.33333333%; + } + + .col-md-offset-6 { + margin-left: 50%; + } + + .col-md-offset-5 { + margin-left: 41.66666667%; + } + + .col-md-offset-4 { + margin-left: 33.33333333%; + } + + .col-md-offset-3 { + margin-left: 25%; + } + + .col-md-offset-2 { + margin-left: 16.66666667%; + } + + .col-md-offset-1 { + margin-left: 8.33333333%; + } + + .col-md-offset-0 { + margin-left: 0%; + } +} + +@media (min-width: 1200px) { + + .col-lg-1, + .col-lg-2, + .col-lg-3, + .col-lg-4, + .col-lg-5, + .col-lg-6, + .col-lg-7, + .col-lg-8, + .col-lg-9, + .col-lg-10, + .col-lg-11, + .col-lg-12 { + float: left; + } + + .col-lg-12 { + width: 100%; + } + + .col-lg-11 { + width: 91.66666667%; + } + + .col-lg-10 { + width: 83.33333333%; + } + + .col-lg-9 { + width: 75%; + } + + .col-lg-8 { + width: 66.66666667%; + } + + .col-lg-7 { + width: 58.33333333%; + } + + .col-lg-6 { + width: 50%; + } + + .col-lg-5 { + width: 41.66666667%; + } + + .col-lg-4 { + width: 33.33333333%; + } + + .col-lg-3 { + width: 25%; + } + + .col-lg-2 { + width: 16.66666667%; + } + + .col-lg-1 { + width: 8.33333333%; + } + + .col-lg-pull-12 { + right: 100%; + } + + .col-lg-pull-11 { + right: 91.66666667%; + } + + .col-lg-pull-10 { + right: 83.33333333%; + } + + .col-lg-pull-9 { + right: 75%; + } + + .col-lg-pull-8 { + right: 66.66666667%; + } + + .col-lg-pull-7 { + right: 58.33333333%; + } + + .col-lg-pull-6 { + right: 50%; + } + + .col-lg-pull-5 { + right: 41.66666667%; + } + + .col-lg-pull-4 { + right: 33.33333333%; + } + + .col-lg-pull-3 { + right: 25%; + } + + .col-lg-pull-2 { + right: 16.66666667%; + } + + .col-lg-pull-1 { + right: 8.33333333%; + } + + .col-lg-pull-0 { + right: auto; + } + + .col-lg-push-12 { + left: 100%; + } + + .col-lg-push-11 { + left: 91.66666667%; + } + + .col-lg-push-10 { + left: 83.33333333%; + } + + .col-lg-push-9 { + left: 75%; + } + + .col-lg-push-8 { + left: 66.66666667%; + } + + .col-lg-push-7 { + left: 58.33333333%; + } + + .col-lg-push-6 { + left: 50%; + } + + .col-lg-push-5 { + left: 41.66666667%; + } + + .col-lg-push-4 { + left: 33.33333333%; + } + + .col-lg-push-3 { + left: 25%; + } + + .col-lg-push-2 { + left: 16.66666667%; + } + + .col-lg-push-1 { + left: 8.33333333%; + } + + .col-lg-push-0 { + left: auto; + } + + .col-lg-offset-12 { + margin-left: 100%; + } + + .col-lg-offset-11 { + margin-left: 91.66666667%; + } + + .col-lg-offset-10 { + margin-left: 83.33333333%; + } + + .col-lg-offset-9 { + margin-left: 75%; + } + + .col-lg-offset-8 { + margin-left: 66.66666667%; + } + + .col-lg-offset-7 { + margin-left: 58.33333333%; + } + + .col-lg-offset-6 { + margin-left: 50%; + } + + .col-lg-offset-5 { + margin-left: 41.66666667%; + } + + .col-lg-offset-4 { + margin-left: 33.33333333%; + } + + .col-lg-offset-3 { + margin-left: 25%; + } + + .col-lg-offset-2 { + margin-left: 16.66666667%; + } + + .col-lg-offset-1 { + margin-left: 8.33333333%; + } + + .col-lg-offset-0 { + margin-left: 0%; + } +} + +.clearfix:before, +.clearfix:after, +.container:before, +.container:after, +.container-fluid:before, +.container-fluid:after, +.row:before, +.row:after { + content: " "; + display: table; +} + +.clearfix:after, +.container:after, +.container-fluid:after, +.row:after { + clear: both; +} + +.center-block { + display: block; + margin-left: auto; + margin-right: auto; +} + +.pull-right { + float: right !important; +} + +.pull-left { + float: left !important; +} + +.hide { + display: none !important; +} + +.show { + display: block !important; +} + +.invisible { + visibility: hidden; +} + +.text-hide { + font: 0/0 a; + color: transparent; + text-shadow: none; + background-color: transparent; + border: 0; +} + +.hidden { + display: none !important; +} + +.affix { + position: fixed; +} + +@-ms-viewport { + width: device-width; +} + +.visible-xs, +.visible-sm, +.visible-md, +.visible-lg { + display: none !important; +} + +.visible-xs-block, +.visible-xs-inline, +.visible-xs-inline-block, +.visible-sm-block, +.visible-sm-inline, +.visible-sm-inline-block, +.visible-md-block, +.visible-md-inline, +.visible-md-inline-block, +.visible-lg-block, +.visible-lg-inline, +.visible-lg-inline-block { + display: none !important; +} + +@media (max-width: 767px) { + .visible-xs { + display: block !important; + } + + table.visible-xs { + display: table !important; + } + + tr.visible-xs { + display: table-row !important; + } + + th.visible-xs, + td.visible-xs { + display: table-cell !important; + } +} + +@media (max-width: 767px) { + .visible-xs-block { + display: block !important; + } +} + +@media (max-width: 767px) { + .visible-xs-inline { + display: inline !important; + } +} + +@media (max-width: 767px) { + .visible-xs-inline-block { + display: inline-block !important; + } +} + +@media (min-width: 768px) and (max-width: 991px) { + .visible-sm { + display: block !important; + } + + table.visible-sm { + display: table !important; + } + + tr.visible-sm { + display: table-row !important; + } + + th.visible-sm, + td.visible-sm { + display: table-cell !important; + } +} + +@media (min-width: 768px) and (max-width: 991px) { + .visible-sm-block { + display: block !important; + } +} + +@media (min-width: 768px) and (max-width: 991px) { + .visible-sm-inline { + display: inline !important; + } +} + +@media (min-width: 768px) and (max-width: 991px) { + .visible-sm-inline-block { + display: inline-block !important; + } +} + +@media (min-width: 992px) and (max-width: 1199px) { + .visible-md { + display: block !important; + } + + table.visible-md { + display: table !important; + } + + tr.visible-md { + display: table-row !important; + } + + th.visible-md, + td.visible-md { + display: table-cell !important; + } +} + +@media (min-width: 992px) and (max-width: 1199px) { + .visible-md-block { + display: block !important; + } +} + +@media (min-width: 992px) and (max-width: 1199px) { + .visible-md-inline { + display: inline !important; + } +} + +@media (min-width: 992px) and (max-width: 1199px) { + .visible-md-inline-block { + display: inline-block !important; + } +} + +@media (min-width: 1200px) { + .visible-lg { + display: block !important; + } + + table.visible-lg { + display: table !important; + } + + tr.visible-lg { + display: table-row !important; + } + + th.visible-lg, + td.visible-lg { + display: table-cell !important; + } +} + +@media (min-width: 1200px) { + .visible-lg-block { + display: block !important; + } +} + +@media (min-width: 1200px) { + .visible-lg-inline { + display: inline !important; + } +} + +@media (min-width: 1200px) { + .visible-lg-inline-block { + display: inline-block !important; + } +} + +@media (max-width: 767px) { + .hidden-xs { + display: none !important; + } +} + +@media (min-width: 768px) and (max-width: 991px) { + .hidden-sm { + display: none !important; + } +} + +@media (min-width: 992px) and (max-width: 1199px) { + .hidden-md { + display: none !important; + } +} + +@media (min-width: 1200px) { + .hidden-lg { + display: none !important; + } +} + +.visible-print { + display: none !important; +} + +@media print { + .visible-print { + display: block !important; + } + + table.visible-print { + display: table !important; + } + + tr.visible-print { + display: table-row !important; + } + + th.visible-print, + td.visible-print { + display: table-cell !important; + } +} + +.visible-print-block { + display: none !important; +} + +@media print { + .visible-print-block { + display: block !important; + } +} + +.visible-print-inline { + display: none !important; +} + +@media print { + .visible-print-inline { + display: inline !important; + } +} + +.visible-print-inline-block { + display: none !important; +} + +@media print { + .visible-print-inline-block { + display: inline-block !important; + } +} + +@media print { + .hidden-print { + display: none !important; + } +}