From 38afecced9012c79f33ab368bb8eb23f9e7d9fab Mon Sep 17 00:00:00 2001 From: Mathieu Sanchez Date: Tue, 4 Jun 2019 10:34:00 +0900 Subject: [PATCH] Correct header not displaying in 960px + add card dashboard responsive + correct C2A title --- package-lock.json | 33 ++++++++----------- package.json | 6 ++-- src/app/app.module.ts | 2 ++ .../card-dashboard.component.css | 19 +++++++++++ .../card-dashboard.component.html | 26 +++++++++++++++ .../card-dashboard.component.spec.ts | 25 ++++++++++++++ .../card-dashboard.component.ts | 24 ++++++++++++++ src/app/core/services/seo/seo.service.ts | 2 +- src/app/header/header.component.html | 4 +-- src/app/home/home.component.html | 20 +++++++++++ src/styles.css | 9 +++++ 11 files changed, 146 insertions(+), 24 deletions(-) create mode 100644 src/app/card-dashboard/card-dashboard.component.css create mode 100644 src/app/card-dashboard/card-dashboard.component.html create mode 100644 src/app/card-dashboard/card-dashboard.component.spec.ts create mode 100644 src/app/card-dashboard/card-dashboard.component.ts diff --git a/package-lock.json b/package-lock.json index 3249e05..cb62c0f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3906,9 +3906,9 @@ } }, "fs-minipass": { - "version": "1.2.5", - "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.5.tgz", - "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==", + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.6.tgz", + "integrity": "sha512-crhvyXcMejjv3Z5d2Fa9sf5xLYVCF5O1c71QxbVnbLsmYMBEvDAftewesN/HhY03YRoA7zOMxjNGrF5svGaaeQ==", "dev": true, "requires": { "minipass": "^2.2.1" @@ -4492,6 +4492,11 @@ "rimraf": "2" } }, + "g": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/g/-/g-2.0.1.tgz", + "integrity": "sha1-C1lj69DKcOO8jGdmk0oCGCHIuFc=" + }, "gauge": { "version": "2.7.4", "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz", @@ -6247,11 +6252,6 @@ "dev": true, "optional": true }, - "js-sha512": { - "version": "0.8.0", - "resolved": "https://registry.npmjs.org/js-sha512/-/js-sha512-0.8.0.tgz", - "integrity": "sha512-PWsmefG6Jkodqt+ePTvBZCSMFgN7Clckjd0O7su3I0+BW2QWUTJNzjktHsztGLhncP2h8mcF9V9Y2Ha59pAViQ==" - }, "js-tokens": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz", @@ -7183,11 +7183,6 @@ "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==", "dev": true }, - "ng": { - "version": "0.0.0", - "resolved": "https://registry.npmjs.org/ng/-/ng-0.0.0.tgz", - "integrity": "sha512-HwR40IBJa1ZU+CIGyuy7vSCN3xFYlSRfw5eIwwKOdOMNNNIl8KhT6PXKmHuFEFYpfrbOMaCYtr4QOJ3gkkubcg==" - }, "nice-try": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", @@ -7843,18 +7838,18 @@ } }, "tar": { - "version": "4.4.8", - "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.8.tgz", - "integrity": "sha512-LzHF64s5chPQQS0IYBn9IN5h3i98c12bo4NCO7e0sGM2llXQ3p2FGC5sdENN4cTW48O915Sh+x+EXx7XW96xYQ==", + "version": "4.4.9", + "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.9.tgz", + "integrity": "sha512-xisFa7Q2i3HOgfn+nmnWLGHD6Tm23hxjkx6wwGmgxkJFr6wxwXnJOdJYcZjL453PSdF0+bemO03+flAzkIdLBQ==", "dev": true, "requires": { "chownr": "^1.1.1", "fs-minipass": "^1.2.5", - "minipass": "^2.3.4", - "minizlib": "^1.1.1", + "minipass": "^2.3.5", + "minizlib": "^1.2.1", "mkdirp": "^0.5.0", "safe-buffer": "^5.1.2", - "yallist": "^3.0.2" + "yallist": "^3.0.3" } }, "yallist": { diff --git a/package.json b/package.json index 0c08db4..ede5f59 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,9 @@ "@angular/router": "~7.2.0", "core-js": "^2.5.4", "firebase": "^6.0.2", + "g": "^2.0.1", "hammerjs": "^2.0.8", + "moment": "^2.24.0", "rxjs": "~6.3.3", "stacktrace-js": "latest", "tslib": "^1.9.0", @@ -34,12 +36,12 @@ }, "devDependencies": { "@angular-devkit/build-angular": "~0.13.0", - "@angular/cli": "~7.3.9", + "@angular/cli": "^7.3.9", "@angular/compiler-cli": "~7.2.0", "@angular/language-service": "~7.2.0", - "@types/node": "~8.9.4", "@types/jasmine": "~2.8.8", "@types/jasminewd2": "~2.0.3", + "@types/node": "~8.9.4", "codelyzer": "~4.5.0", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index eac0dc4..e9b2873 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -16,6 +16,7 @@ import { LogService, SEOService } from '@app/core/services'; import { GlobalErrorHandler } from '@app/core/global-error-handler/global-error-handler.service'; import { environment } from '@env/environment'; +import { CardDashboardComponent } from './card-dashboard/card-dashboard.component'; @NgModule( { declarations: [ @@ -23,6 +24,7 @@ import { environment } from '@env/environment'; HomeComponent, HeaderComponent, RegisterComponent, + CardDashboardComponent, ], imports: [ BrowserModule, diff --git a/src/app/card-dashboard/card-dashboard.component.css b/src/app/card-dashboard/card-dashboard.component.css new file mode 100644 index 0000000..9509c37 --- /dev/null +++ b/src/app/card-dashboard/card-dashboard.component.css @@ -0,0 +1,19 @@ +.card-container { + margin: 40px; +} + +.card-container.left.desktop { + margin-right: 20px; +} + +.card-container.right.desktop { + margin-left: 20px; +} + +.card-container.left.mobile { + margin-bottom: 20px; +} + +.card-container.right.mobile { + margin-top: 20px; +} diff --git a/src/app/card-dashboard/card-dashboard.component.html b/src/app/card-dashboard/card-dashboard.component.html new file mode 100644 index 0000000..f2be81d --- /dev/null +++ b/src/app/card-dashboard/card-dashboard.component.html @@ -0,0 +1,26 @@ +
+ + + + + Shiba Inu + + + +

+ The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from + Japan. + A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was + originally + bred for hunting. +

+ + + + + + + + + +
diff --git a/src/app/card-dashboard/card-dashboard.component.spec.ts b/src/app/card-dashboard/card-dashboard.component.spec.ts new file mode 100644 index 0000000..d74379c --- /dev/null +++ b/src/app/card-dashboard/card-dashboard.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CardDashboardComponent } from './card-dashboard.component'; + +describe( 'CardDashboardComponent', () => { + let component: CardDashboardComponent; + let fixture: ComponentFixture; + + beforeEach( async( () => { + TestBed.configureTestingModule( { + declarations: [ CardDashboardComponent ] + } ) + .compileComponents(); + } ) ); + + beforeEach( () => { + fixture = TestBed.createComponent( CardDashboardComponent ); + component = fixture.componentInstance; + fixture.detectChanges(); + } ); + + it( 'should create', () => { + expect( component ).toBeTruthy(); + } ); +} ); diff --git a/src/app/card-dashboard/card-dashboard.component.ts b/src/app/card-dashboard/card-dashboard.component.ts new file mode 100644 index 0000000..39aeac7 --- /dev/null +++ b/src/app/card-dashboard/card-dashboard.component.ts @@ -0,0 +1,24 @@ +import { Component, Input, OnInit } from '@angular/core'; + +@Component( { + selector: 'app-card-dashboard', + templateUrl: './card-dashboard.component.html', + styleUrls: [ './card-dashboard.component.css' ] +} ) +export class CardDashboardComponent implements OnInit { + + public matCardClass: string; + @Input() private position: string; + + constructor() { + } + + ngOnInit() { + if ( this.position === 'first' ) { + this.matCardClass = 'left'; + } else { + this.matCardClass = 'right'; + } + } + +} diff --git a/src/app/core/services/seo/seo.service.ts b/src/app/core/services/seo/seo.service.ts index ce8cff9..4f1d6a5 100644 --- a/src/app/core/services/seo/seo.service.ts +++ b/src/app/core/services/seo/seo.service.ts @@ -50,7 +50,7 @@ export class SEOService { event.description = ( !event.description ? this.defaultDescription : event.description ); event.noindex = ( !event.noindex ? this.defaultNoIndex : event.noindex ); event.nofollow = ( !event.nofollow ? this.defaultNoFollow : event.nofollow ); - this.updateTitle( event.title + ' | C2A' ); + this.updateTitle( event.title + ' | ' + environment.appName ); this.updateDescription( event.description ); this.updateIndexFollow( event.noindex, event.nofollow ); } diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index 584060c..6316782 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -27,8 +27,8 @@ -
+