Skip to content

Commit 188c44b

Browse files
codediodeiocodediodeio
committed
refactor: main-nav
1 parent 221c5cb commit 188c44b

21 files changed

Lines changed: 321 additions & 30 deletions

‎README.md‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,8 @@ FireStarter is a basic Angular PWA powered by Firebase. It can serve as a founda
1313
## Features
1414

1515
- Angular 6.x
16-
- 100 PWA Lighthouse Score
17-
- Firebase Auth with Custom Data in Firestore
18-
- CRUD Demos (Firestore & Realtime DB)
19-
- File Uploads to Firebase Storage Demo
16+
- 100 PWA Lighthouse Score with NGSW
17+
- Firebase Auth, Storage, and Cloud Firestore Demos
2018

2119

2220
## Usage

‎package-lock.json‎

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

‎package.json‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,17 +26,18 @@
2626
"core-js": "^2.5.4",
2727
"firebase": "^5.0.2",
2828
"rxjs": "^6.0.0",
29-
"zone.js": "^0.8.26"
29+
"zone.js": "^0.8.26",
30+
"@angular/cdk": "^6.0.0"
3031
},
3132
"devDependencies": {
32-
"@angular/compiler-cli": "^6.0.0",
3333
"@angular-devkit/build-angular": "~0.6.1",
34-
"typescript": "~2.7.2",
3534
"@angular/cli": "~6.0.1",
35+
"@angular/compiler-cli": "^6.0.0",
3636
"@angular/language-service": "^6.0.0",
3737
"@types/jasmine": "~2.8.6",
3838
"@types/jasminewd2": "~2.0.3",
3939
"@types/node": "~8.9.4",
40+
"bulma": "^0.7.1",
4041
"codelyzer": "~4.2.1",
4142
"jasmine-core": "~2.99.1",
4243
"jasmine-spec-reporter": "~4.2.1",
@@ -47,6 +48,7 @@
4748
"karma-jasmine-html-reporter": "^0.2.2",
4849
"protractor": "~5.3.0",
4950
"ts-node": "~5.0.1",
50-
"tslint": "~5.9.1"
51+
"tslint": "~5.9.1",
52+
"typescript": "~2.7.2"
5153
}
5254
}

‎src/app/app.component.html‎

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,25 @@
1-
<!--The content below is only a placeholder and can be replaced.-->
2-
<div style="text-align:center">
3-
<h1>
4-
Welcome to {{ title }}!
5-
</h1>
6-
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
7-
</div>
8-
<h2>Here are some links to help you start: </h2>
9-
<ul>
10-
<li>
11-
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
12-
</li>
13-
<li>
14-
<h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
15-
</li>
16-
<li>
17-
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
18-
</li>
19-
</ul>
1+
<div id="wrapper">
2+
<main-nav></main-nav>
3+
4+
<div class="content columns">
5+
<aside class="column is-2 is-offset-1">
6+
<!-- <user-profile></user-profile> -->
7+
</aside>
8+
9+
<main class="column is-8">
10+
<!-- <notification-message></notification-message> -->
2011

21-
<router-outlet></router-outlet>
12+
<router-outlet></router-outlet>
13+
</main>
14+
</div>
15+
16+
<div class="github-banner" style="z-index: 9999999">
17+
<a href="https://github.com/codediodeio/angular-firestarter" class="github-corner" aria-label="View source on Github">
18+
<svg width="60" height="60" viewBox="0 0 250 250" style="z-index: 11; fill:#FD6C6C; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
19+
</svg>
20+
</a>
21+
<style>
22+
.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
23+
</style>
24+
</div>
25+
</div>

‎src/app/app.module.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { AngularFireAuthModule } from 'angularfire2/auth';
2121
// See README for Firebase setup instructions
2222
// 1. Delete Me!
2323
import { firebasePlaceholderConfig } from '../env';
24+
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
2425
// 2. Add your project credentials to environments/environment.ts
2526
// 3. Then use it in the imports section below environment.firebase
2627

@@ -39,7 +40,8 @@ import { firebasePlaceholderConfig } from '../env';
3940
AngularFireModule.initializeApp(firebasePlaceholderConfig, 'firestarter'),
4041
AngularFirestoreModule,
4142
AngularFireAuthModule,
42-
AngularFireStorageModule
43+
AngularFireStorageModule,
44+
BrowserAnimationsModule
4345
],
4446
providers: [],
4547
bootstrap: [AppComponent]

‎src/app/ui/main-nav/main-nav.component.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
2+
<nav class="navbar" role="navigation" aria-label="main navigation">
3+
<div class="navbar-brand">
4+
<a class="navbar-item" routerLink="/">
5+
<img src="assets/images/angularfirebase.png" width="30px" alt="Firestarter Angular4 Demo App"/> FireStarter
6+
</a>
7+
8+
<a role="button" class="navbar-burger" (click)="toggleCollapse()" [ngClass]="{'is-active': show}">
9+
<span aria-hidden="true"></span>
10+
<span aria-hidden="true"></span>
11+
<span aria-hidden="true"></span>
12+
</a>
13+
</div>
14+
15+
<div class="navbar-menu" [ngClass]="{'is-active': show}">
16+
<div class="navbar-end" >
17+
<a class="navbar-item" routerLink="/login">
18+
Login
19+
</a>
20+
<a class="navbar-item" routerLink="/notes">
21+
Firestore
22+
</a>
23+
<a class="navbar-item" routerLink="/uploads">
24+
File Uploads
25+
</a>
26+
</div>
27+
</div>
28+
</nav>
29+
30+
31+
32+
33+
34+
35+
36+
37+
38+
39+
40+

‎src/app/ui/main-nav/main-nav.component.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
nav {
2+
border-bottom: 1px solid #E4E4E4;
3+
box-shadow: 0 0 4px rgba(0,0,0,.1), 0 2px 4px rgba(0, 0, 0, 0.1);
4+
margin-bottom: 25px;
5+
}
6+
7+
.navbar-brand {
8+
padding: 0 50px 0 2em;
9+
}

‎src/app/ui/main-nav/main-nav.component.spec.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { MainNavComponent } from './main-nav.component';
4+
5+
describe('MainNavComponent', () => {
6+
let component: MainNavComponent;
7+
let fixture: ComponentFixture<MainNavComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ MainNavComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(MainNavComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎src/app/ui/main-nav/main-nav.component.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'main-nav',
5+
templateUrl: './main-nav.component.html',
6+
styleUrls: ['./main-nav.component.scss']
7+
})
8+
export class MainNavComponent {
9+
10+
show = false;
11+
12+
constructor() { }
13+
14+
toggleCollapse() {
15+
this.show = !this.show;
16+
}
17+
18+
}

‎src/app/ui/ui.module.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,13 @@ import { NgModule } from '@angular/core';
22
import { CommonModule } from '@angular/common';
33
import { UserLoginComponent } from './user-login/user-login.component';
44
import { HomePageComponent } from './home-page/home-page.component';
5+
import { MainNavComponent } from './main-nav/main-nav.component';
56

67
@NgModule({
78
imports: [
89
CommonModule
910
],
10-
declarations: [UserLoginComponent, HomePageComponent]
11+
declarations: [UserLoginComponent, HomePageComponent, MainNavComponent],
12+
exports: [MainNavComponent]
1113
})
1214
export class UiModule { }

0 commit comments

Comments
 (0)