mathieu/CAU-ICT-Spring-2019-Project-1
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Remove header

Browse Source 
Add search card
Rename Card-dashboard into card
This commit is contained in:
Mathieu Sanchez 2019-06-04 15:12:42 +09:00
parent 6b5d96ce24
commit 108af03cd8
17 changed files with 200 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/app-material.module.ts
View File

@ -4,13 +4,14 @@ import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatTableModule } from '@angular/material/table';
import { MatInputModule, MatNativeDateModule, MatSnackBarModule, MatTooltipModule } from '@angular/material';
import { MatInputModule, MatListModule, MatNativeDateModule, MatSnackBarModule, MatTooltipModule } from '@angular/material';
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';
import { MatMenuModule } from '@angular/material/menu';
import { MatSidenavModule } from '@angular/material/sidenav';
@NgModule( {
exports: [
@ -28,6 +29,8 @@ import { MatMenuModule } from '@angular/material/menu';
MatTooltipModule,
FlexLayoutModule,
MatMenuModule,
MatSidenavModule,
MatListModule,
]
} )
export class AppMaterialModule {

47
src/app/app.component.css
View File

@ -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;
}

94
src/app/app.component.html
View File

@ -1 +1,93 @@
<router-outlet></router-outlet>
<mat-sidenav-container [hasBackdrop]="true" style="height: 100%">
<mat-sidenav #drawer mode="over" role="navigation">
<mat-nav-list>
<a [matMenuTriggerFor]="profileMenu" mat-list-item>
<mat-icon style="padding-right: 20px">person</mat-icon>
Account
</a>
<a [matMenuTriggerFor]="tripMenu" mat-list-item>
<mat-icon style="padding-right: 20px">local_airport</mat-icon>
Trips
</a>
</mat-nav-list>
</mat-sidenav>
<mat-menu #tripMenu="matMenu">
<button mat-menu-item>My Trips</button>
<button mat-menu-item>My Schedule</button>
</mat-menu>
<mat-menu #profileMenu="matMenu">
<button mat-menu-item>Login</button>
<button mat-menu-item>Create Account</button>
<button mat-menu-item>Logout</button>
</mat-menu>
<mat-sidenav-content>
<header>
<div fxHide.lt-md="true" fxLayout="row" fxLayoutAlign="space-between" fxShow
id="header-container-desktop">
<div class="title" fxFlex="200px">
<a [routerLink]="">DiscoTrip</a>
</div>
<div fxFlex="calc(100% - 200px)" fxLayout="row" fxLayoutAlign="end">
<div fxFlex="60px">
<button [matMenuTriggerFor]="tripMenu" class="account-button" mat-fab>
<mat-icon>local_airport</mat-icon>
</button>
</div>
<div fxFlex="60px">
<button [matMenuTriggerFor]="profileMenu" class="account-button" mat-fab>
<mat-icon>person</mat-icon>
</button>
</div>
<div>
<mat-form-field appearance="fill">
<mat-label>Fill form field</mat-label>
<input matInput placeholder="Placeholder">
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
</div>
</div>
</div>
<div fxHide.gt-sm="true" fxLayout="row" fxLayoutAlign="space-between" fxShow
id="header-container-mobile">
<button (click)="drawer.toggle()" 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>
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>

12
src/app/app.module.ts
View File

@ -2,7 +2,6 @@ import { ErrorHandler, NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { HeaderComponent } from './header/header.component';
import { RegisterComponent } from './register/register.component';
import { BrowserModule } from '@angular/platform-browser';
@ -10,29 +9,30 @@ 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 { AngularFireAuthModule } from "@angular/fire/auth";
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AppMaterialModule } from '@app/app-material.module';
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';
import { CardComponent } from './card/card.component';
import { SearchCardComponent } from './search-card/search-card.component';
@NgModule( {
declarations: [
AppComponent,
HomeComponent,
HeaderComponent,
RegisterComponent,
CardDashboardComponent,
CardComponent,
SearchCardComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
AngularFireModule.initializeApp( environment.firebaseConfig ),
AngularFireAuthModule,
AngularFireAuthModule,
AngularFireDatabaseModule,
AppMaterialModule,
],

0
src/app/card-dashboard/card-dashboard.component.css → src/app/card/card.component.css
View File

10
src/app/card-dashboard/card-dashboard.component.html → src/app/card/card.component.html
View File

@ -4,16 +4,14 @@
<mat-card>
<mat-card-header>
<mat-card-title>Shiba Inu</mat-card-title>
<mat-card-title>
<ng-content select="[title]"></ng-content>
</mat-card-title>
</mat-card-header>
<mat-card-content>
<p>
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.
<ng-content select="[desc]"></ng-content>
</p>
</mat-card-content>

12
src/app/header/header.component.spec.ts → src/app/card/card.component.spec.ts
View File

@ -1,20 +1,20 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HeaderComponent } from './header.component';
import { CardComponent } from './card.component';
describe( 'HeaderComponent', () => {
let component: HeaderComponent;
let fixture: ComponentFixture<HeaderComponent>;
describe( 'CardComponent', () => {
let component: CardComponent;
let fixture: ComponentFixture<CardComponent>;
beforeEach( async( () => {
TestBed.configureTestingModule( {
declarations: [ HeaderComponent ]
declarations: [ CardComponent ]
} )
.compileComponents();
} ) );
beforeEach( () => {
fixture = TestBed.createComponent( HeaderComponent );
fixture = TestBed.createComponent( CardComponent );
component = fixture.componentInstance;
fixture.detectChanges();
} );

12
src/app/card-dashboard/card-dashboard.component.ts → src/app/card/card.component.ts
View File

@ -1,15 +1,19 @@
import { Component, Input, OnInit } from '@angular/core';
@Component( {
selector: 'app-card-dashboard',
templateUrl: './card-dashboard.component.html',
styleUrls: [ './card-dashboard.component.css' ]
selector: 'app-card',
templateUrl: './card.component.html',
styleUrls: [ './card.component.css' ]
} )
export class CardDashboardComponent implements OnInit {
export class CardComponent implements OnInit {
public matCardClass: string;
@Input() private position: string;
@Input() public title: string;
@Input() public description: any;
constructor() {
}

47
src/app/header/header.component.css
View File

@ -1,47 +0,0 @@
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;
}

69
src/app/header/header.component.html
View File

@ -1,69 +0,0 @@
<header>
<div fxHide.lt-md="true" fxLayout="row" fxLayoutAlign="space-between" fxShow
id="header-container-desktop">
<div class="title" fxFlex="200px">
<a [routerLink]="">DiscoTrip</a>
</div>
<div fxFlex="calc(100% - 200px)" fxLayout="row" fxLayoutAlign="end">
<div fxFlex="60px">
<button [matMenuTriggerFor]="tripMenu" class="account-button" mat-fab>
<mat-icon>local_airport</mat-icon>
</button>
<mat-menu #tripMenu="matMenu">
<button mat-menu-item>My Trips</button>
<button mat-menu-item>My Schedule</button>
</mat-menu>
</div>
<div fxFlex="60px">
<button [matMenuTriggerFor]="profileMenu" class="account-button" mat-fab>
<mat-icon>person</mat-icon>
</button>
<mat-menu #profileMenu="matMenu">
<button mat-menu-item>Login</button>
<button mat-menu-item>Create Account</button>
<button mat-menu-item>Logout</button>
</mat-menu>
</div>
<div>
<mat-form-field appearance="fill">
<mat-label>Fill form field</mat-label>
<input matInput placeholder="Placeholder">
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
</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>

17
src/app/header/header.component.ts
View File

@ -1,17 +0,0 @@
import { Component, OnInit } from '@angular/core';
import { AuthService } from '@app/core/services/auth/auth.service';
@Component( {
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: [ './header.component.css' ]
} )
export class HeaderComponent implements OnInit {
constructor( private authService: AuthService ) {
}
ngOnInit() {
}
}

7
src/app/home/home.component.html
View File

@ -1,18 +1,17 @@
<app-header></app-header>
<div class="main-container">
<div fxLayout="row" fxLayout.sm="column" fxLayout.xs="column" fxLayoutAlign="space-between">
<div fxFlex>
<app-card-dashboard position="first"></app-card-dashboard>
<app-search-card position="first"></app-search-card>
<!-- <app-card position="first"></app-card>-->
</div>
<div fxFlex>
<app-card-dashboard position="second"></app-card-dashboard>
<!-- <app-card position="second"></app-card>-->
</div>

0
src/app/search-card/search-card.component.css Normal file
View File

4
src/app/search-card/search-card.component.html Normal file
View File

@ -0,0 +1,4 @@
<app-card position="{{ position }}">
<div title>Search Your Trip</div>
<div desc>Here search bar</div>
</app-card>

12
src/app/card-dashboard/card-dashboard.component.spec.ts → src/app/search-card/search-card.component.spec.ts
View File

@ -1,20 +1,20 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CardDashboardComponent } from './card-dashboard.component';
import { SearchCardComponent } from './search-card.component';
describe( 'CardDashboardComponent', () => {
let component: CardDashboardComponent;
let fixture: ComponentFixture<CardDashboardComponent>;
describe( 'SearchCardComponent', () => {
let component: SearchCardComponent;
let fixture: ComponentFixture<SearchCardComponent>;
beforeEach( async( () => {
TestBed.configureTestingModule( {
declarations: [ CardDashboardComponent ]
declarations: [ SearchCardComponent ]
} )
.compileComponents();
} ) );
beforeEach( () => {
fixture = TestBed.createComponent( CardDashboardComponent );
fixture = TestBed.createComponent( SearchCardComponent );
component = fixture.componentInstance;
fixture.detectChanges();
} );

18
src/app/search-card/search-card.component.ts Normal file
View File

@ -0,0 +1,18 @@
import { Component, Input, OnInit } from '@angular/core';
@Component( {
selector: 'app-search-card',
templateUrl: './search-card.component.html',
styleUrls: [ './search-card.component.css' ]
} )
export class SearchCardComponent implements OnInit {
@Input() public position: string;
constructor() {
}
ngOnInit() {
}
}

3
src/styles.css
View File

@ -13,7 +13,7 @@ body {
}
/* For specific CSS */
app-header .mat-fab .mat-button-wrapper {
app-root .mat-fab .mat-button-wrapper {
line-height: normal;
padding: 0;
}
@ -22,7 +22,6 @@ app-header .mat-fab .mat-button-wrapper {
max-width: 1280px;
margin: auto;
box-sizing: border-box;
padding: 0 10px;
width: 100%;
min-height: 80%;
}