From fca8160fa55dc3bb8c9c842b76e2c97555d4e809 Mon Sep 17 00:00:00 2001 From: CerealKiller97 Date: Thu, 29 Aug 2019 15:29:23 +0200 Subject: [PATCH] Finally started with angular --- angular.json | 4 ++- package.json | 5 +++- src/app/app-routing.module.ts | 8 +++--- src/app/app.module.ts | 4 ++- .../components/contact/contact.component.css | 0 .../components/contact/contact.component.html | 1 + .../contact/contact.component.spec.ts | 25 +++++++++++++++++ .../components/contact/contact.component.ts | 15 ++++++++++ src/app/modules/contact/contact.module.ts | 18 ++++++++++++ .../home/components/home/home.component.css | 0 .../home/components/home/home.component.html | 1 + .../components/home/home.component.spec.ts | 25 +++++++++++++++++ .../home/components/home/home.component.ts | 17 +++++++++++ src/app/modules/home/home.module.ts | 19 +++++++++++++ .../default/default.component.html | 3 ++ .../comoponents/default/default.component.ts | 7 ++--- .../video-gamer-layout.module.ts | 11 +++++++- .../components/footer/footer.component.css | 0 .../components/footer/footer.component.html | 1 + .../footer/footer.component.spec.ts | 25 +++++++++++++++++ .../components/footer/footer.component.ts | 12 ++++++++ .../components/header/header.component.css | 9 ++++++ .../components/header/header.component.html | 15 +++++++++- .../components/header/header.component.ts | 17 +++++++++-- .../shared-components/components/index.ts | 4 ++- .../loading-spinner.component.css | 0 .../loading-spinner.component.html | 4 +++ .../loading-spinner.component.spec.ts | 25 +++++++++++++++++ .../loading-spinner.component.ts | 14 ++++++++++ .../material/material.module.ts | 13 +++++++++ .../shared-components.module.ts | 11 ++++++-- .../modules/shared/loading.service.spec.ts | 12 ++++++++ src/app/modules/shared/loading.service.ts | 25 +++++++++++++++++ src/app/modules/shared/shared.module.ts | 8 ++---- src/custom-theme.scss | 28 +++++++++++++++++++ src/index.html | 2 ++ src/main.ts | 1 + src/styles.css | 3 ++ yarn.lock | 28 ++++++++++++++++++- 39 files changed, 392 insertions(+), 28 deletions(-) create mode 100644 src/app/modules/contact/components/contact/contact.component.css create mode 100644 src/app/modules/contact/components/contact/contact.component.html create mode 100644 src/app/modules/contact/components/contact/contact.component.spec.ts create mode 100644 src/app/modules/contact/components/contact/contact.component.ts create mode 100644 src/app/modules/contact/contact.module.ts create mode 100644 src/app/modules/home/components/home/home.component.css create mode 100644 src/app/modules/home/components/home/home.component.html create mode 100644 src/app/modules/home/components/home/home.component.spec.ts create mode 100644 src/app/modules/home/components/home/home.component.ts create mode 100644 src/app/modules/home/home.module.ts create mode 100644 src/app/modules/shared-components/components/footer/footer.component.css create mode 100644 src/app/modules/shared-components/components/footer/footer.component.html create mode 100644 src/app/modules/shared-components/components/footer/footer.component.spec.ts create mode 100644 src/app/modules/shared-components/components/footer/footer.component.ts create mode 100644 src/app/modules/shared-components/components/loading-spinner/loading-spinner.component.css create mode 100644 src/app/modules/shared-components/components/loading-spinner/loading-spinner.component.html create mode 100644 src/app/modules/shared-components/components/loading-spinner/loading-spinner.component.spec.ts create mode 100644 src/app/modules/shared-components/components/loading-spinner/loading-spinner.component.ts create mode 100644 src/app/modules/shared-components/material/material.module.ts create mode 100644 src/app/modules/shared/loading.service.spec.ts create mode 100644 src/app/modules/shared/loading.service.ts create mode 100644 src/custom-theme.scss diff --git a/angular.json b/angular.json index 4e674c8..9623941 100644 --- a/angular.json +++ b/angular.json @@ -24,6 +24,7 @@ "src/assets" ], "styles": [ + "src/custom-theme.scss", "src/styles.css" ], "scripts": [] @@ -115,6 +116,7 @@ } } } - }}, + } + }, "defaultProject": "video-gamer" } \ No newline at end of file diff --git a/package.json b/package.json index 1d7c632..70be5ee 100644 --- a/package.json +++ b/package.json @@ -12,14 +12,17 @@ "private": true, "dependencies": { "@angular/animations": "~8.1.3", + "@angular/cdk": "~8.1.4", "@angular/common": "~8.1.3", "@angular/compiler": "~8.1.3", "@angular/core": "~8.1.3", "@angular/forms": "~8.1.3", + "@angular/material": "^8.1.4", "@angular/platform-browser": "~8.1.3", "@angular/platform-browser-dynamic": "~8.1.3", "@angular/router": "~8.1.3", "angular-epic-spinners": "^2.0.0", + "hammerjs": "^2.0.8", "rxjs": "~6.4.0", "tslib": "^1.9.0", "zone.js": "~0.9.1" @@ -45,4 +48,4 @@ "tslint": "~5.15.0", "typescript": "~3.4.3" } -} +} \ No newline at end of file diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index c758891..5d46eac 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,16 +1,16 @@ import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; -import { VideoGamerLayoutModule } from './modules/layouts/video-gamer-layout/video-gamer-layout.module'; +import { Routes, RouterModule, PreloadAllModules } from '@angular/router'; const routes: Routes = [ { path: '', - loadChildren: () => VideoGamerLayoutModule + loadChildren: () => + import('./modules/layouts/video-gamer-layout/video-gamer-layout.module').then(mod => mod.VideoGamerLayoutModule) } ]; @NgModule({ - imports: [RouterModule.forRoot(routes)], + imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })], exports: [RouterModule] }) export class AppRoutingModule {} diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2c3ba29..0cadd23 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,6 +3,7 @@ import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ declarations: [ @@ -10,7 +11,8 @@ import { AppComponent } from './app.component'; ], imports: [ BrowserModule, - AppRoutingModule + AppRoutingModule, + BrowserAnimationsModule ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/modules/contact/components/contact/contact.component.css b/src/app/modules/contact/components/contact/contact.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/modules/contact/components/contact/contact.component.html b/src/app/modules/contact/components/contact/contact.component.html new file mode 100644 index 0000000..9cae746 --- /dev/null +++ b/src/app/modules/contact/components/contact/contact.component.html @@ -0,0 +1 @@ +

contact works!

diff --git a/src/app/modules/contact/components/contact/contact.component.spec.ts b/src/app/modules/contact/components/contact/contact.component.spec.ts new file mode 100644 index 0000000..427633e --- /dev/null +++ b/src/app/modules/contact/components/contact/contact.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ContactComponent } from './contact.component'; + +describe('ContactComponent', () => { + let component: ContactComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ContactComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ContactComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/modules/contact/components/contact/contact.component.ts b/src/app/modules/contact/components/contact/contact.component.ts new file mode 100644 index 0000000..2126220 --- /dev/null +++ b/src/app/modules/contact/components/contact/contact.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-contact', + templateUrl: './contact.component.html', + styleUrls: ['./contact.component.css'] +}) +export class ContactComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/modules/contact/contact.module.ts b/src/app/modules/contact/contact.module.ts new file mode 100644 index 0000000..9e812d5 --- /dev/null +++ b/src/app/modules/contact/contact.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { ContactComponent } from './components/contact/contact.component'; +import { Routes, RouterModule } from '@angular/router'; + +const routes: Routes = [ + { + path: '', + component: ContactComponent + } +]; + +@NgModule({ + declarations: [ContactComponent], + imports: [CommonModule, RouterModule.forChild(routes)], + exports: [ContactComponent, RouterModule] +}) +export class ContactModule {} diff --git a/src/app/modules/home/components/home/home.component.css b/src/app/modules/home/components/home/home.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/modules/home/components/home/home.component.html b/src/app/modules/home/components/home/home.component.html new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/src/app/modules/home/components/home/home.component.html @@ -0,0 +1 @@ + diff --git a/src/app/modules/home/components/home/home.component.spec.ts b/src/app/modules/home/components/home/home.component.spec.ts new file mode 100644 index 0000000..490e81b --- /dev/null +++ b/src/app/modules/home/components/home/home.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HomeComponent } from './home.component'; + +describe('HomeComponent', () => { + let component: HomeComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HomeComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HomeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/modules/home/components/home/home.component.ts b/src/app/modules/home/components/home/home.component.ts new file mode 100644 index 0000000..1e408a0 --- /dev/null +++ b/src/app/modules/home/components/home/home.component.ts @@ -0,0 +1,17 @@ +import { Component, OnInit } from '@angular/core'; +import { Title } from '@angular/platform-browser'; + +@Component({ + selector: 'app-home', + templateUrl: './home.component.html', + styleUrls: ['./home.component.css'] +}) +export class HomeComponent implements OnInit { + + constructor(private readonly titleService: Title) { } + + ngOnInit() { + this.titleService.setTitle('Home page'); + } + +} diff --git a/src/app/modules/home/home.module.ts b/src/app/modules/home/home.module.ts new file mode 100644 index 0000000..eaf0be9 --- /dev/null +++ b/src/app/modules/home/home.module.ts @@ -0,0 +1,19 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { HomeComponent } from './components/home/home.component'; +import { RouterModule, Routes } from '@angular/router'; + +const routes: Routes = [ + { + path: '', + pathMatch: 'full', + component: HomeComponent + } +]; + +@NgModule({ + declarations: [HomeComponent], + imports: [CommonModule, RouterModule.forChild(routes)], + exports: [HomeComponent, RouterModule] +}) +export class HomeModule {} diff --git a/src/app/modules/layouts/video-gamer-layout/comoponents/default/default.component.html b/src/app/modules/layouts/video-gamer-layout/comoponents/default/default.component.html index e91fa55..fe97026 100644 --- a/src/app/modules/layouts/video-gamer-layout/comoponents/default/default.component.html +++ b/src/app/modules/layouts/video-gamer-layout/comoponents/default/default.component.html @@ -1 +1,4 @@ + + + diff --git a/src/app/modules/layouts/video-gamer-layout/comoponents/default/default.component.ts b/src/app/modules/layouts/video-gamer-layout/comoponents/default/default.component.ts index 0bec71f..b70debc 100644 --- a/src/app/modules/layouts/video-gamer-layout/comoponents/default/default.component.ts +++ b/src/app/modules/layouts/video-gamer-layout/comoponents/default/default.component.ts @@ -6,10 +6,7 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./default.component.css'] }) export class DefaultComponent implements OnInit { + constructor() {} - constructor() { } - - ngOnInit() { - } - + ngOnInit() {} } diff --git a/src/app/modules/layouts/video-gamer-layout/video-gamer-layout.module.ts b/src/app/modules/layouts/video-gamer-layout/video-gamer-layout.module.ts index 51543e4..c6e8879 100644 --- a/src/app/modules/layouts/video-gamer-layout/video-gamer-layout.module.ts +++ b/src/app/modules/layouts/video-gamer-layout/video-gamer-layout.module.ts @@ -8,7 +8,16 @@ const routes: Routes = [ { path: '', component: DefaultComponent, - children: [] + loadChildren: () => import('../../home/home.module').then(mod => mod.HomeModule) + }, + { + path: 'contact', + component: DefaultComponent, + loadChildren: () => import('../../contact/contact.module').then(mod => mod.ContactModule) + }, + { + path: '**', + component: null } ]; diff --git a/src/app/modules/shared-components/components/footer/footer.component.css b/src/app/modules/shared-components/components/footer/footer.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/modules/shared-components/components/footer/footer.component.html b/src/app/modules/shared-components/components/footer/footer.component.html new file mode 100644 index 0000000..28c0d7d --- /dev/null +++ b/src/app/modules/shared-components/components/footer/footer.component.html @@ -0,0 +1 @@ +

footer works!

diff --git a/src/app/modules/shared-components/components/footer/footer.component.spec.ts b/src/app/modules/shared-components/components/footer/footer.component.spec.ts new file mode 100644 index 0000000..2ca6c45 --- /dev/null +++ b/src/app/modules/shared-components/components/footer/footer.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FooterComponent } from './footer.component'; + +describe('FooterComponent', () => { + let component: FooterComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ FooterComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(FooterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/modules/shared-components/components/footer/footer.component.ts b/src/app/modules/shared-components/components/footer/footer.component.ts new file mode 100644 index 0000000..e1f3075 --- /dev/null +++ b/src/app/modules/shared-components/components/footer/footer.component.ts @@ -0,0 +1,12 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-footer', + templateUrl: './footer.component.html', + styleUrls: ['./footer.component.css'] +}) +export class FooterComponent implements OnInit { + constructor() {} + + ngOnInit() {} +} diff --git a/src/app/modules/shared-components/components/header/header.component.css b/src/app/modules/shared-components/components/header/header.component.css index e69de29..e561601 100644 --- a/src/app/modules/shared-components/components/header/header.component.css +++ b/src/app/modules/shared-components/components/header/header.component.css @@ -0,0 +1,9 @@ +.example-fill-remaining-space { + /* This fills the remaining space, by using flexbox. + Every toolbar row uses a flexbox row layout. */ + flex: 1 1 auto; +} + +.nav-link { + color: whitesmoke; +} 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 4f5a95d..8d654b2 100644 --- a/src/app/modules/shared-components/components/header/header.component.html +++ b/src/app/modules/shared-components/components/header/header.component.html @@ -1 +1,14 @@ -

header works!

+ + VideoGamer + + + + + + + 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 3ee4d0f..da7e2de 100644 --- a/src/app/modules/shared-components/components/header/header.component.ts +++ b/src/app/modules/shared-components/components/header/header.component.ts @@ -1,15 +1,26 @@ import { Component, OnInit } from '@angular/core'; +export interface Link { + name: string; + path: string; +} + @Component({ selector: 'app-header', templateUrl: './header.component.html', styleUrls: ['./header.component.css'] }) export class HeaderComponent implements OnInit { + public readonly links: Link[] = [ + { name: 'Home', path: '' }, + { name: 'About', path: 'about' }, + { name: 'Contact', path: 'contact' } + ]; + constructor() {} - constructor() { } + ngOnInit() {} - ngOnInit() { + trackByFunc(index: number, item: Link): string { + return item.path; } - } diff --git a/src/app/modules/shared-components/components/index.ts b/src/app/modules/shared-components/components/index.ts index 1765006..788c00f 100644 --- a/src/app/modules/shared-components/components/index.ts +++ b/src/app/modules/shared-components/components/index.ts @@ -1,3 +1,5 @@ import { HeaderComponent } from './header/header.component'; +import { FooterComponent } from './footer/footer.component'; +import { LoadingSpinnerComponent } from './loading-spinner/loading-spinner.component'; -export { HeaderComponent }; +export { HeaderComponent, FooterComponent, LoadingSpinnerComponent }; diff --git a/src/app/modules/shared-components/components/loading-spinner/loading-spinner.component.css b/src/app/modules/shared-components/components/loading-spinner/loading-spinner.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/modules/shared-components/components/loading-spinner/loading-spinner.component.html b/src/app/modules/shared-components/components/loading-spinner/loading-spinner.component.html new file mode 100644 index 0000000..fde6934 --- /dev/null +++ b/src/app/modules/shared-components/components/loading-spinner/loading-spinner.component.html @@ -0,0 +1,4 @@ +
+ + +
diff --git a/src/app/modules/shared-components/components/loading-spinner/loading-spinner.component.spec.ts b/src/app/modules/shared-components/components/loading-spinner/loading-spinner.component.spec.ts new file mode 100644 index 0000000..9ba71b5 --- /dev/null +++ b/src/app/modules/shared-components/components/loading-spinner/loading-spinner.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LoadingSpinnerComponent } from './loading-spinner.component'; + +describe('LoadingSpinnerComponent', () => { + let component: LoadingSpinnerComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ LoadingSpinnerComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(LoadingSpinnerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/modules/shared-components/components/loading-spinner/loading-spinner.component.ts b/src/app/modules/shared-components/components/loading-spinner/loading-spinner.component.ts new file mode 100644 index 0000000..0f333af --- /dev/null +++ b/src/app/modules/shared-components/components/loading-spinner/loading-spinner.component.ts @@ -0,0 +1,14 @@ +import { Component, OnInit, Input } from '@angular/core'; + +@Component({ + selector: 'app-loading-spinner', + templateUrl: './loading-spinner.component.html', + styleUrls: ['./loading-spinner.component.css'] +}) +export class LoadingSpinnerComponent implements OnInit { + @Input() loading: boolean; + + constructor() {} + + ngOnInit() {} +} diff --git a/src/app/modules/shared-components/material/material.module.ts b/src/app/modules/shared-components/material/material.module.ts new file mode 100644 index 0000000..2788889 --- /dev/null +++ b/src/app/modules/shared-components/material/material.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { MatToolbarModule } from '@angular/material/toolbar'; +import { MatTabsModule } from '@angular/material/tabs'; +import { MatButtonModule } from '@angular/material/button'; + +@NgModule({ + declarations: [], + imports: [CommonModule, MatToolbarModule, MatButtonModule, MatTabsModule], + exports: [MatToolbarModule, MatButtonModule, MatTabsModule] +}) +export class MaterialModule {} diff --git a/src/app/modules/shared-components/shared-components.module.ts b/src/app/modules/shared-components/shared-components.module.ts index 4dd986b..9881e9d 100644 --- a/src/app/modules/shared-components/shared-components.module.ts +++ b/src/app/modules/shared-components/shared-components.module.ts @@ -1,10 +1,15 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { HeaderComponent } from './components'; +import { FooterComponent } from './components/footer/footer.component'; +import { LoadingSpinnerComponent } from './components/loading-spinner/loading-spinner.component'; +import { FingerprintSpinnerModule } from 'angular-epic-spinners'; +import { RouterModule } from '@angular/router'; +import { MaterialModule } from './material/material.module'; @NgModule({ - declarations: [HeaderComponent], - imports: [CommonModule], - exports: [HeaderComponent] + declarations: [HeaderComponent, FooterComponent, LoadingSpinnerComponent], + imports: [CommonModule, FingerprintSpinnerModule, RouterModule, MaterialModule], + exports: [HeaderComponent, FooterComponent, LoadingSpinnerComponent] }) export class SharedComponentsModule {} diff --git a/src/app/modules/shared/loading.service.spec.ts b/src/app/modules/shared/loading.service.spec.ts new file mode 100644 index 0000000..b6518ad --- /dev/null +++ b/src/app/modules/shared/loading.service.spec.ts @@ -0,0 +1,12 @@ +import { TestBed } from '@angular/core/testing'; + +import { LoadingService } from './loading.service'; + +describe('LoadingService', () => { + beforeEach(() => TestBed.configureTestingModule({})); + + it('should be created', () => { + const service: LoadingService = TestBed.get(LoadingService); + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/modules/shared/loading.service.ts b/src/app/modules/shared/loading.service.ts new file mode 100644 index 0000000..1f00edb --- /dev/null +++ b/src/app/modules/shared/loading.service.ts @@ -0,0 +1,25 @@ +import { Injectable } from '@angular/core'; +import { BehaviorSubject, Subscription } from 'rxjs'; +@Injectable({ + providedIn: 'root' +}) +export class LoadingService { + private readonly loadingStatus: BehaviorSubject = new BehaviorSubject(false); + private subscription: Subscription; + + constructor() {} + + public setLoading(status: boolean): void { + this.loadingStatus.next(status); + } + + public subscribe(callbackFunc: (value: boolean) => void) { + this.subscription = this.loadingStatus.subscribe(callbackFunc); + } + + public unsubsribe(): void { + if (this.subscription) { + this.subscription.unsubscribe(); + } + } +} diff --git a/src/app/modules/shared/shared.module.ts b/src/app/modules/shared/shared.module.ts index 76cf203..77fe817 100644 --- a/src/app/modules/shared/shared.module.ts +++ b/src/app/modules/shared/shared.module.ts @@ -1,12 +1,8 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; - - @NgModule({ declarations: [], - imports: [ - CommonModule - ] + imports: [CommonModule] }) -export class SharedModule { } +export class SharedModule {} diff --git a/src/custom-theme.scss b/src/custom-theme.scss new file mode 100644 index 0000000..d4064ef --- /dev/null +++ b/src/custom-theme.scss @@ -0,0 +1,28 @@ + +// Custom Theming for Angular Material +// For more information: https://material.angular.io/guide/theming +@import '~@angular/material/theming'; +// Plus imports for other components in your app. + +// Include the common styles for Angular Material. We include this here so that you only +// have to load a single css file for Angular Material in your app. +// Be sure that you only ever include this mixin once! +@include mat-core(); + +// Define the palettes for your theme using the Material Design palettes available in palette.scss +// (imported above). For each palette, you can optionally specify a default, lighter, and darker +// hue. Available color palettes: https://material.io/design/color/ +$video-gamer-primary: mat-palette($mat-indigo); +$video-gamer-accent: mat-palette($mat-pink, A200, A100, A400); + +// The warn palette is optional (defaults to red). +$video-gamer-warn: mat-palette($mat-red); + +// Create the theme object (a Sass map containing all of the palettes). +$video-gamer-theme: mat-light-theme($video-gamer-primary, $video-gamer-accent, $video-gamer-warn); + +// Include theme styles for core and each component used in your app. +// Alternatively, you can import and @include the theme mixins for each component +// that you are using. +@include angular-material-theme($video-gamer-theme); + diff --git a/src/index.html b/src/index.html index da1127d..712a2f3 100644 --- a/src/index.html +++ b/src/index.html @@ -7,6 +7,8 @@ + + diff --git a/src/main.ts b/src/main.ts index c7b673c..3b2b7d0 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,3 +1,4 @@ +import 'hammerjs'; import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; diff --git a/src/styles.css b/src/styles.css index 90d4ee0..7e7239a 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1 +1,4 @@ /* You can add global styles to this file, and also import other style files */ + +html, body { height: 100%; } +body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } diff --git a/yarn.lock b/yarn.lock index bb2060a..7d53d27 100644 --- a/yarn.lock +++ b/yarn.lock @@ -110,6 +110,15 @@ dependencies: tslib "^1.9.0" +"@angular/cdk@~8.1.4": + version "8.1.4" + resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-8.1.4.tgz#69066053fe4cbd80cee2bb7fa238f1c9abb963fc" + integrity sha512-U0tjhAZM4qqUHGGKIKFZZ9d8929s2U/HO0FdoT/eX+oHPOA6mm3bBep7myrSzlkP9V7O1JJfYdhEgijXhYxprQ== + dependencies: + tslib "^1.7.1" + optionalDependencies: + parse5 "^5.0.0" + "@angular/cli@~8.1.3": version "8.1.3" resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-8.1.3.tgz#9a12953eb0be68c3c96712111e29ed437cecfa22" @@ -183,6 +192,13 @@ resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-8.1.3.tgz#beffcb8ca85410c1b4c82101a47dad7ffd5545af" integrity sha512-9s2LWlRlBhUXZ0oWh5ojYKnQgXgYH/VifEXteRWmEJ0dlwDApgw5Jk6usstDhv09XQvLdoumMQwOXf07zjcJrQ== +"@angular/material@^8.1.4": + version "8.1.4" + resolved "https://registry.yarnpkg.com/@angular/material/-/material-8.1.4.tgz#8bda747bb023af8ccce2c2d3e9e8dc25f05b3605" + integrity sha512-HV1qU63MaOtAc+cWg21Y2ygQKdEDjsGQ/3d3qym9sfR0xU2vvY7OG6gH48BfPeU63oMYxQkhxfoGP8wWMXSU1w== + dependencies: + tslib "^1.7.1" + "@angular/platform-browser-dynamic@~8.1.3": version "8.1.3" resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-8.1.3.tgz#bfa9ee9195b6dc3cb52aec02512fa9a21b048ddc" @@ -2916,6 +2932,11 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6 resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.0.tgz#8d8fdc73977cb04104721cb53666c1ca64cd328b" integrity sha512-jpSvDPV4Cq/bgtpndIWbI5hmYxhQGHPC4d4cqBPb4DLniCfhJokdXhwhaDuLBGLQdvvRum/UiX6ECVIPvDXqdg== +hammerjs@^2.0.8: + version "2.0.8" + resolved "https://registry.yarnpkg.com/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1" + integrity sha1-BO93hiz/K7edMPdpIJWTAiK/YPE= + handle-thing@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.0.tgz#0e039695ff50c93fc288557d696f3c1dc6776754" @@ -4863,6 +4884,11 @@ parse5@4.0.0: resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608" integrity sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA== +parse5@^5.0.0: + version "5.1.0" + resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.0.tgz#c59341c9723f414c452975564c7c00a68d58acd2" + integrity sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ== + parseqs@0.0.5: version "0.0.5" resolved "https://registry.yarnpkg.com/parseqs/-/parseqs-0.0.5.tgz#d5208a3738e46766e291ba2ea173684921a8b89d" @@ -6499,7 +6525,7 @@ ts-node@~7.0.0: source-map-support "^0.5.6" yn "^2.0.0" -tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0: +tslib@^1.7.1, tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0: version "1.10.0" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a" integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==