From 61b053de08d33a160d4bd855d5d54eee844ad045 Mon Sep 17 00:00:00 2001 From: Mathieu Sanchez Date: Tue, 21 May 2019 16:50:28 +0900 Subject: [PATCH] Add header not finish --- package-lock.json | 8 +++++ package.json | 11 +++--- src/app/app-material.module.ts | 2 ++ src/app/app.module.ts | 17 +++++----- src/app/header/header.component.css | 47 ++++++++++++++++++++++++++ src/app/header/header.component.html | 50 ++++++++++++++++++++++++++-- src/app/header/header.component.ts | 5 +-- src/app/home/home.component.html | 4 +-- src/index.html | 1 + src/styles.css | 19 +++++++++-- 10 files changed, 141 insertions(+), 23 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7c7bb2c..5def28c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -434,6 +434,14 @@ "resolved": "https://registry.npmjs.org/@angular/fire/-/fire-5.1.3.tgz", "integrity": "sha512-s9tdSDS0ZLWKax5atMSxpJWehQ59bKgbzy8uZJVo1vyJw/eshBduuCZbETBj6RmwWhKgrBfgS2odNwKxArE25w==" }, + "@angular/flex-layout": { + "version": "7.0.0-beta.24", + "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-7.0.0-beta.24.tgz", + "integrity": "sha512-ll6sK0nLGxqI/f5+z4jbd+pve1QITzgehv2AuGvfSDgIjPMeqUDB5YZqQmIGM/dQRk/vIio5KCW5LQPJWzMMYQ==", + "requires": { + "tslib": "^1.7.1" + } + }, "@angular/forms": { "version": "7.2.15", "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-7.2.15.tgz", diff --git a/package.json b/package.json index ccaac1f..0036230 100644 --- a/package.json +++ b/package.json @@ -13,11 +13,12 @@ "private": true, "dependencies": { "@angular/animations": "~7.2.0", - "@angular/cdk": "~7.3.7", + "@angular/cdk": "^7.3.7", "@angular/common": "~7.2.0", "@angular/compiler": "~7.2.0", "@angular/core": "~7.2.0", "@angular/fire": "^5.1.3", + "@angular/flex-layout": "^7.0.0-beta.24", "@angular/forms": "~7.2.0", "@angular/material": "^7.3.7", "@angular/platform-browser": "~7.2.0", @@ -26,12 +27,12 @@ "core-js": "^2.5.4", "firebase": "^6.0.2", "hammerjs": "^2.0.8", - "rxjs": "~6.3.3", - "tslib": "^1.9.0", - "zone.js": "~0.8.26", "js-sha512": "latest", "moment": "latest", - "stacktrace-js": "latest" + "rxjs": "~6.3.3", + "stacktrace-js": "latest", + "tslib": "^1.9.0", + "zone.js": "~0.8.26" }, "devDependencies": { "@angular-devkit/build-angular": "~0.13.0", diff --git a/src/app/app-material.module.ts b/src/app/app-material.module.ts index a4dcced..7d8e773 100644 --- a/src/app/app-material.module.ts +++ b/src/app/app-material.module.ts @@ -9,6 +9,7 @@ import { MatFormFieldModule } from '@angular/material/form-field'; import { MatExpansionModule } from '@angular/material/expansion'; import { MatDatepickerModule } from '@angular/material/datepicker'; import { MatSelectModule } from '@angular/material/select'; +import { FlexLayoutModule } from '@angular/flex-layout'; @NgModule( { exports: [ @@ -24,6 +25,7 @@ import { MatSelectModule } from '@angular/material/select'; MatNativeDateModule, MatSelectModule, MatTooltipModule, + FlexLayoutModule, ] } ) export class AppMaterialModule { diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 1c1f56d..f5d7032 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,19 +1,20 @@ -import { BrowserModule } from '@angular/platform-browser'; import { ErrorHandler, NgModule } from '@angular/core'; import { AppComponent } from './app.component'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; - import { HomeComponent } from './home/home.component'; +import { HeaderComponent } from './header/header.component'; +import { BrowserModule } from '@angular/platform-browser'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { AppRoutingModule } from '@app/app-routing.module'; import { AngularFireModule } from '@angular/fire'; import { AngularFireDatabaseModule } from '@angular/fire/database'; -import { environment } from '@env/environment'; -import { GlobalErrorHandler } from '@app/core/global-error-handler/global-error-handler.service'; -import { LogService, SEOService } from '@app/core/services'; import { AppMaterialModule } from '@app/app-material.module'; -import { AppRoutingModule } from '@app/app-routing.module'; -import { HeaderComponent } from './header/header.component'; + +import { LogService, SEOService } from '@app/core/services'; +import { GlobalErrorHandler } from '@app/core/global-error-handler/global-error-handler.service'; + +import { environment } from '@env/environment'; @NgModule({ declarations: [ diff --git a/src/app/header/header.component.css b/src/app/header/header.component.css index e69de29..b3268a1 100644 --- a/src/app/header/header.component.css +++ b/src/app/header/header.component.css @@ -0,0 +1,47 @@ +header { + width: 100%; + height: 60px; + background-color: #FFF; + box-shadow: 0 0 8px rgba(0, 0, 0, .4); +} + +header #header-container-desktop { + max-width: 1280px; + margin: auto; + height: 100%; + padding: 0 10px; +} + +header .title { + cursor: pointer; + line-height: 50px; + font-size: 36px; + letter-spacing: 0.1em; + font-family: 'Lobster', cursive, "Helvetica Neue", HelveticaNeue-Light, "Helvetica Neue Light", Helvetica, Arial, "Lucida Grande", sans-serif; + background-color: #078171; + text-align: center; + margin: 5px 0; + border-radius: 10px; +} + +header .title a { + color: #FFF; + text-decoration: none; +} + +header .icons-container { + text-align: right; +} + +header .account-button { + height: 50px; + width: 50px; + margin: 5px 0; + background-color: #078171; +} + +header .account-button span { + padding: 0; + margin: 0; + line-height: 50px; +} diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index 51bfb8c..584060c 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -1,3 +1,47 @@ -

- header works! -

+
+ +
+ +
+ DiscoTrip +
+
+ +
+ +
+ +
+ +
+
+ +
+ +
+ +
+ +
+ + + +
+ +
+ DiscoTrip +
+ +
+ +
+ +
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts index 3ee4d0f..6a5e7f3 100644 --- a/src/app/header/header.component.ts +++ b/src/app/header/header.component.ts @@ -3,11 +3,12 @@ import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-header', templateUrl: './header.component.html', - styleUrls: ['./header.component.css'] + styleUrls: [ './header.component.css' ] }) export class HeaderComponent implements OnInit { - constructor() { } + constructor() { + } ngOnInit() { } diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index a0e7d56..e91fa55 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,3 +1 @@ - - Test - + diff --git a/src/index.html b/src/index.html index c9449ea..1e05183 100644 --- a/src/index.html +++ b/src/index.html @@ -10,6 +10,7 @@ + diff --git a/src/styles.css b/src/styles.css index 7e7239a..82ab296 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,4 +1,19 @@ /* 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; } +@import "~@angular/material/prebuilt-themes/indigo-pink.css"; + +html, body { + height: 100%; + background-color: #f2f2f2; +} + +body { + margin: 0; + font-family: Roboto, "Helvetica Neue", sans-serif; +} + +/* For specific CSS */ +app-header .mat-fab .mat-button-wrapper { + line-height: normal; + padding: 0; +}