Skip to content

Commit 26c36cb

Browse files
nilbertnilbert
committed
-add landing page.
1 parent 2d9ce95 commit 26c36cb

29 files changed

+8112
-3221
lines changed

‎nlbcode/.angular-cli.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@
1919
"testTsconfig": "tsconfig.spec.json",
2020
"prefix": "app",
2121
"styles": [
22-
"styles.css"
22+
"styles.css",
23+
"../node_modules/font-awesome/css/font-awesome.min.css"
2324
],
2425
"scripts": [],
2526
"environmentSource": "environments/environment.ts",

‎nlbcode/package-lock.json‎

Lines changed: 7004 additions & 3124 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎nlbcode/package.json‎

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -13,43 +13,43 @@
1313
},
1414
"private": true,
1515
"dependencies": {
16-
"@angular/animations": "^4.4.6",
17-
"@angular/cdk": "^2.0.0-beta.12",
18-
"@angular/common": "^4.2.4",
19-
"@angular/compiler": "^4.2.4",
20-
"@angular/core": "^4.2.4",
21-
"@angular/flex-layout": "^2.0.0-beta.12",
22-
"@angular/forms": "^4.2.4",
23-
"@angular/http": "^4.2.4",
24-
"@angular/material": "^2.0.0-beta.12",
25-
"@angular/platform-browser": "^4.2.4",
26-
"@angular/platform-browser-dynamic": "^4.2.4",
27-
"@angular/router": "^4.2.4",
28-
"angularfire2": "^5.0.0-rc.4",
16+
"@angular/animations": "^5.2.0",
17+
"@angular/cdk": "^5.2.4",
18+
"@angular/common": "^5.2.0",
19+
"@angular/compiler": "^5.2.0",
20+
"@angular/core": "^5.2.0",
21+
"@angular/flex-layout": "^5.0.0-beta.13",
22+
"@angular/forms": "^5.2.0",
23+
"@angular/http": "^5.2.0",
24+
"@angular/material": "^5.2.4",
25+
"@angular/platform-browser": "^5.2.0",
26+
"@angular/platform-browser-dynamic": "^5.2.0",
27+
"@angular/router": "^5.2.0",
28+
"angular-in-memory-web-api": "^0.6.0",
2929
"core-js": "^2.4.1",
30-
"hammerjs": "^2.0.8",
31-
"rxjs": "^5.4.2",
32-
"zone.js": "^0.8.14"
30+
"font-awesome": "^4.7.0",
31+
"ng2-scroll-to-el": "^1.2.1",
32+
"rxjs": "^5.5.6",
33+
"zone.js": "^0.8.19"
3334
},
3435
"devDependencies": {
35-
"@angular/cli": "1.4.8",
36-
"@angular/compiler-cli": "^4.2.4",
37-
"@angular/language-service": "^4.2.4",
38-
"@types/jasmine": "~2.5.53",
36+
"@angular/cli": "~1.7.3",
37+
"@angular/compiler-cli": "^5.2.0",
38+
"@angular/language-service": "^5.2.0",
39+
"@types/jasmine": "~2.8.3",
3940
"@types/jasminewd2": "~2.0.2",
4041
"@types/node": "~6.0.60",
41-
"codelyzer": "~3.2.0",
42-
"jasmine-core": "~2.6.2",
43-
"jasmine-spec-reporter": "~4.1.0",
44-
"karma": "~1.7.0",
45-
"karma-chrome-launcher": "~2.1.1",
46-
"karma-cli": "~1.0.1",
42+
"codelyzer": "^4.0.1",
43+
"jasmine-core": "~2.8.0",
44+
"jasmine-spec-reporter": "~4.2.1",
45+
"karma": "~2.0.0",
46+
"karma-chrome-launcher": "~2.2.0",
4747
"karma-coverage-istanbul-reporter": "^1.2.1",
4848
"karma-jasmine": "~1.1.0",
4949
"karma-jasmine-html-reporter": "^0.2.2",
5050
"protractor": "~5.1.2",
51-
"ts-node": "~3.2.0",
52-
"tslint": "~5.7.0",
53-
"typescript": "~2.3.3"
51+
"ts-node": "~4.1.0",
52+
"tslint": "~5.9.1",
53+
"typescript": "~2.5.3"
5454
}
5555
}

‎nlbcode/src/app/app-routing.module.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { NgModule } from '@angular/core';
2+
import { RouterModule, Routes } from '@angular/router';
3+
import { HomeComponent } from './home/home.component';
4+
import { ContactComponent } from './contact/contact.component';
5+
6+
const routes: Routes = [
7+
{ path: '', component: HomeComponent },
8+
{ path: 'contact', component: ContactComponent }
9+
];
10+
11+
@NgModule({
12+
imports: [RouterModule.forRoot(routes)],
13+
exports: [RouterModule],
14+
declarations: []
15+
})
16+
export class AppRoutingModule {}

‎nlbcode/src/app/app.component.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
a{
2+
text-decoration: none;
3+
}
4+
.menuitem{
5+
text-decoration: none;
6+
color: #727272;
7+
padding: 15px 0;
8+
border-bottom: 6px solid transparent;
9+
text-transform: uppercase;
10+
background-color: transparent;
11+
line-height: 20px;
12+
-webkit-transition: all 0.3s ease-out;
13+
transition: all 0.3s ease-out;
14+
margin-left: 40px;
15+
font-size: 13px;
16+
font-weight: 550
17+
}
18+
a.menuitem:hover {
19+
border-bottom-color: #42A5F5;
20+
}
21+
#logo{height: 75px;}

‎nlbcode/src/app/app.component.html‎

Lines changed: 59 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,64 @@
1-
<!--The content below is only a placeholder and can be replaced.-->
2-
<mat-toolbar>My App</mat-toolbar>
3-
<div style="text-align:center">
4-
<h1>
5-
Welcome to {{title}}!
6-
</h1>
7-
<img width="300" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
8-
</div>
9-
<h2>Here are some links to help you start: </h2>
10-
<ul>
11-
<li>
12-
<h2>
13-
<a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a>
14-
</h2>
15-
</li>
16-
<li>
17-
<h2>
18-
<a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a>
19-
</h2>
20-
</li>
21-
<li>
22-
<h2>
23-
<a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a>
24-
</h2>
25-
</li>
26-
</ul>
271
<div>
28-
<mat-grid-list cols="6" rowHeight="2:1">
29-
<mat-grid-tile>
30-
<mat-card>
31-
<mat-card-header>Header</mat-card-header>
32-
<mat-card-content>
33-
<img width="300" mat-card-image src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
34-
</mat-card-content>
35-
</mat-card>
36-
</mat-grid-tile>
37-
<mat-grid-tile>
38-
<mat-card>
39-
<mat-card-header>Header</mat-card-header>
40-
<mat-card-content>
41-
<img width="300" mat-card-image src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
42-
</mat-card-content>
43-
</mat-card>
44-
</mat-grid-tile>
45-
<mat-grid-tile>
46-
<mat-card>
47-
<mat-card-header>Header</mat-card-header>
48-
<mat-card-content>
49-
<img width="300" mat-card-image src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
50-
</mat-card-content>
51-
</mat-card>
52-
</mat-grid-tile>
53-
<mat-grid-tile>
54-
<mat-card>
55-
<mat-card-header>Header</mat-card-header>
56-
<mat-card-content>
57-
<img width="300" mat-card-image src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
58-
</mat-card-content>
59-
</mat-card>
60-
</mat-grid-tile>
61-
</mat-grid-list>
622

3+
<mat-toolbar color="">
4+
<div fxShow="true" fxHide.gt-sm="true">
5+
6+
<span href="#" (click)="sidenav.open()" style="color:white;" mat-button>
7+
<mat-icon fontSet="fa" fontIcon="fa-bars"></mat-icon>
8+
</span>
9+
10+
</div>
11+
<span>
12+
<a class="menuitem" routerLink="/">
13+
<figure>
14+
<img id="logo" src="assets/img/logo.svg" alt="">
15+
</figure>
16+
</a>
17+
</span>
18+
<!-- <a routerLink="/contact" mat-button>Contact</a> -->
19+
20+
<span class="example-spacer"></span>
21+
22+
<div fxShow="true" fxHide.lt-md="true">
23+
24+
<!-- The following menu items will be hidden on both SM and XS screen sizes -->
25+
26+
<a href="#" class="menuitem" >About me</a>
27+
28+
<a href="#" class="menuitem" >Resume</a>
29+
30+
<a routerLink="/contact" class="menuitem">Contact</a>
31+
32+
</div>
33+
34+
35+
36+
</mat-toolbar>
37+
38+
<mat-sidenav-container fxFlexFill class="example-container">
39+
40+
<mat-sidenav #sidenav fxLayout="column">
41+
42+
<div fxLayout="column">
43+
44+
<button (click)="sidenav.close()" mat-button>Close</button >
45+
46+
<a href="#" mat-button>Menu Item 1</a>
47+
48+
<a href="#" mat-button>Menu Item 2</a>
49+
50+
<a href="#" mat-button>Menu Item 3</a>
51+
52+
<a routerLink="/contact" mat-button>Contact</a>
53+
54+
</div>
55+
56+
</mat-sidenav>
57+
58+
<mat-sidenav-content fxFlexFill>
59+
<router-outlet></router-outlet>
60+
</mat-sidenav-content>
6361

62+
</mat-sidenav-container>
6463

6564
</div>

‎nlbcode/src/app/app.component.ts‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,23 @@
1-
import { Component } from '@angular/core';
1+
import { Component, ViewChild,OnInit } from '@angular/core';
2+
import { Router, RouterModule } from '@angular/router';
3+
import { MatSidenav, MatSidenavModule } from '@angular/material';
24

35
@Component({
46
selector: 'app-root',
57
templateUrl: './app.component.html',
68
styleUrls: ['./app.component.css']
79
})
8-
export class AppComponent {
10+
export class AppComponent implements OnInit{
11+
constructor( private _router: Router){
12+
13+
}
14+
ngOnInit(): void {
15+
this._router.events.subscribe(() => {
16+
console.log("navigate detected")
17+
this.sidenav.close();
18+
});
19+
}
20+
@ViewChild(MatSidenav) sidenav: MatSidenav;
21+
922
title = 'app';
1023
}

‎nlbcode/src/app/app.module.ts‎

Lines changed: 35 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,34 @@
11
import { BrowserModule } from '@angular/platform-browser';
22
import { NgModule } from '@angular/core';
33
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
4+
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
45
import {
56
MatButtonModule,
67
MatCheckboxModule,
78
MatToolbarModule,
89
MatCardModule,
9-
MatGridListModule
10+
MatGridListModule,
11+
MatIconModule,
12+
MatIconRegistry,
13+
MatSidenavModule,
14+
MatSidenav
1015
} from '@angular/material';
16+
import {MatInputModule} from '@angular/material/input';
1117

1218
import { AppComponent } from './app.component';
19+
import { AppRoutingModule } from './app-routing.module';
20+
import { HomeComponent } from './home/home.component';
21+
import { ContactComponent } from './contact/contact.component';
22+
23+
import { FlexLayoutModule } from '@angular/flex-layout';
24+
import { FooterComponent } from './footer/footer.component';
1325

1426
@NgModule({
1527
declarations: [
16-
AppComponent
28+
AppComponent,
29+
HomeComponent,
30+
ContactComponent,
31+
FooterComponent
1732
],
1833
imports: [
1934
BrowserModule,
@@ -22,9 +37,24 @@ import { AppComponent } from './app.component';
2237
MatCheckboxModule,
2338
MatToolbarModule,
2439
MatCardModule,
25-
MatGridListModule
40+
MatGridListModule,
41+
MatIconModule,
42+
AppRoutingModule,
43+
MatInputModule,
44+
FormsModule,
45+
ReactiveFormsModule,
46+
FlexLayoutModule,
47+
MatSidenavModule
48+
],
49+
exports:[],
50+
providers: [
51+
MatIconRegistry
2652
],
27-
providers: [],
2853
bootstrap: [AppComponent]
2954
})
30-
export class AppModule { }
55+
export class AppModule {
56+
constructor(public matIconRegistry:MatIconRegistry){
57+
matIconRegistry.registerFontClassAlias('fontawasome','fa');
58+
59+
}
60+
}

‎nlbcode/src/app/contact/contact.component.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.example-form {
2+
min-width: 150px;
3+
max-width: 500px;
4+
width: 100%;
5+
}
6+
7+
.example-full-width {
8+
width: 100%;
9+
}

0 commit comments

Comments
 (0)