Add header not finish
This commit is contained in:
parent
f923af8e5d
commit
61b053de08
8
package-lock.json
generated
8
package-lock.json
generated
@ -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",
|
||||
|
||||
11
package.json
11
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",
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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: [
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -1,3 +1,47 @@
|
||||
<p>
|
||||
header works!
|
||||
</p>
|
||||
<header>
|
||||
|
||||
<div id="header-container-desktop" fxLayout="row" fxLayoutAlign="space-between" fxShow
|
||||
fxHide.lt-md="true">
|
||||
|
||||
<div fxFlex="200px" class="title">
|
||||
<a [routerLink]="">DiscoTrip</a>
|
||||
</div>
|
||||
<div fxFlex="calc(100% - 200px)" fxLayout="row" fxLayoutAlign="end">
|
||||
|
||||
<div fxFlex="60px">
|
||||
<button mat-fab class="account-button">
|
||||
<mat-icon>local_airport</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div fxFlex="60px">
|
||||
<button mat-fab class="account-button">
|
||||
<mat-icon>person</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div fxFlex="50px">
|
||||
<!-- Search input -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="header-container-mobile" fxLayout="row" fxLayoutAlign="space-between" fxShow
|
||||
fxHide.gt-sm="true">
|
||||
|
||||
<button mat-flat-button style="position: absolute;top: 0;left: 0;height: 60px;">
|
||||
<mat-icon style="transform: scale(1.3)">menu</mat-icon>
|
||||
</button>
|
||||
|
||||
<div fxFlex="100%">
|
||||
|
||||
<div class="title" style="width: 200px;margin: 5px auto;">
|
||||
<a [routerLink]="">DiscoTrip</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
@ -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() {
|
||||
}
|
||||
|
||||
@ -1,3 +1 @@
|
||||
<app-header>
|
||||
Test
|
||||
</app-header>
|
||||
<app-header></app-header>
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster&display=swap" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user