commit 24f4a9cfedba188a6883c2fbb9084faaf491c46f
parent eae8db5987c1ab14729c430783ff3bff2fa43827
Author: MTRNord <mtrnord1@gmail.com>
Date: Sun, 8 Apr 2018 17:08:01 +0200
Get another navbar
Diffstat:
10 files changed, 196 insertions(+), 117 deletions(-)
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,22 +1,5 @@
<div class="wrapper">
- <header>
- <div class="header--inner">
- <div class="logo">
- <a href="#" class="logo--link">
- <h2>Social Networks News</h2>
- <!--<img class="logo--image" src="https://via.placeholder.com/150x50/eeeeee/333333/?text=Logo" />-->
- </a>
- </div>
- <nav>
- <a class="nav--link" routerLink="/">Home</a>
- <a class="nav--link" routerLink="/features">Features</a>
- <a class="nav--link" routerLink="/papers">Papers</a>
- <a class="nav--link" *ngIf="!authenticated" routerLink="/login">Login</a>
- <a class="nav--link" *ngIf="authenticated" routerLink="/profile/{{apiService.userUUID}}">Profile</a>
- </nav>
- </div>
-
- </header>
+ <app-navbar></app-navbar>
<div class="main">
<router-outlet></router-outlet>
</div>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -2,66 +2,6 @@
$header-bg: #f9a825;
$menu-width: 250px!default;
-header {
- order: 1;
- grid-area: header;
-}
-
-.header--inner {
- display: flex;
- flex-direction: column;
- align-items: center;
- padding: 1rem 0.5rem 1rem 0.5rem;
- background-color: #fff;
- border-bottom: 1px solid #ccc;
- @media (min-width: 40rem) {
- flex-direction: row;
- position: fixed;
- width: 100%;
- height: 5rem;
- top: 0;
- left: 0;
- right: 0;
- z-index: 1;
- }
-}
-
-.logo {
-
-}
-
-.logo--link {
- display: block;
- color: #333;
- &:hover {
- opacity: .7;
- }
-}
-
-.logo--image {
- display: block;
-}
-
-nav {
- margin-top: 1rem;
- @media (min-width: 40rem) {
- margin-top: 0;
- margin-left: auto;
- margin-right: 5px;
- }
-}
-
-.nav--link {
- display: inline-block;
- color: #333;
- padding: .5rem .75rem;
- text-decoration: none;
- &:hover {
- background-color: #eee;
- color: #555;
- }
-}
-
.main {
grid-area: content;
padding-top: 7rem;
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,8 +1,5 @@
import {Component, OnInit} from '@angular/core';
import {SpinnerComponent} from './spinner/spinner.component';
-import {ToastrService} from 'ngx-toastr';
-import {ApiService} from './api.service';
-import {Observable} from 'rxjs/Observable';
@Component({
selector: 'app-root',
@@ -11,43 +8,9 @@ import {Observable} from 'rxjs/Observable';
})
export class AppComponent implements OnInit {
public spinner = SpinnerComponent;
- authenticated: boolean;
- constructor(public apiService: ApiService, private toastr: ToastrService) { }
+ constructor() { }
ngOnInit() {
- this.apiService.checkIfUserIsAuthenticated()
- // TODO: Better variable naming
- .retryWhen(oerror => {
- return oerror
- .mergeMap((error: any) => {
- if (String(error.status).startsWith('50')) {
- return Observable.of(error.status).delay(1000);
- } else if (error.status === 404) {
- return Observable.throw({error: 'Sorry, there was an error. The Server just doesn\'t find any data for the requested time :('});
- } else if (error.status === 401) {
- return Observable.throw({error: '401'});
- }
- return Observable.throw({error: 'Unknown error'});
- })
- .take(5)
- // TODO: Allow to link to a Status Page
- .concat(Observable.throw({error: 'Sorry, there was an error (after 5 retries). This probably means we can\'t reach our API Server :('}));
- })
- .subscribe(
- data => { this.authenticated = true; },
- err => {
- if (err['error'] === '401') {
- this.authenticated = false;
- } else {
- this.toastr.error(err['error'], 'Error connecting API', {
- positionClass: 'toast-top-center',
- disableTimeOut: true
- });
- throw err;
- }
- },
- () => console.log('done checking if authenticated')
- );
}
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -26,6 +26,7 @@ import { ApiService } from './api.service';
import {Lightbox} from './utils/lightbox';
import {LinkifyPipe} from './utils/linkifier';
+import { NavbarComponent } from './navbar/navbar.component';
Raven
.config('https://b760c9f9035c472998ada3a02dcc81d3@sentry.io/294520', {
environment: 'development',
@@ -57,6 +58,7 @@ export class RavenErrorHandler implements ErrorHandler {
CallbackTwitterComponent,
ProfileComponent,
SettingsComponent,
+ NavbarComponent,
],
imports: [
BrowserModule.withServerTransition({appId: 'snn-app'}),
diff --git a/src/app/app.routing.ts b/src/app/app.routing.ts
@@ -6,6 +6,7 @@ import {PapersComponent} from './papers/papers.component';
import {LoginComponent} from './login/login.component';
import { TwitterComponent as CallbackTwitterComponent } from './callback/twitter/twitter.component';
import {ProfileComponent} from './user/profile/profile.component';
+import {SettingsComponent} from './user/settings/settings.component';
const routes: Routes = [
{
@@ -32,6 +33,10 @@ const routes: Routes = [
path: 'profile/:author',
component: ProfileComponent,
},
+ {
+ path: 'profile/:author/settings',
+ component: SettingsComponent,
+ },
];
@NgModule({
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
@@ -0,0 +1,18 @@
+<header>
+ <div class="container">
+ <span id="home"><span class="ion-camera"></span></span>
+ <div class="box">
+ <ul>
+ <li><a href="#">portfolio</a></li>
+ <li><a href="#">Blog</a></li>
+ <li><a href="#">Services</a></li>
+ <li><a href="#">Contact</a></li>
+ <li><a routerLink="/">Home</a></li>
+ <li><a routerLink="/features">Features</a></li>
+ <li><a routerLink="/papers">Papers</a></li>
+ <li><a *ngIf="!authenticated" routerLink="/login">Login</a></li>
+ <li><a *ngIf="authenticated" routerLink="/profile/{{apiService.userUUID}}">Profile</a></li>
+ </ul>
+ </div>
+ </div>
+</header>
diff --git a/src/app/navbar/navbar.component.scss b/src/app/navbar/navbar.component.scss
@@ -0,0 +1,87 @@
+html,
+body {
+ font-family: 'Lato', sans-serif;
+}
+
+a {
+ color: inherit;
+ text-decoration: none;
+}
+
+a:hover {
+ color: #FF5959;
+}
+
+ul,
+li {
+ list-style-type: none;
+ margin: 0 auto;
+ padding: 0;
+}
+
+ul li {
+ display: inline-block;
+}
+
+header {
+ background: #FFF;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
+ height: 60px;
+ left: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+ width: initial;
+ z-index: 9;
+ -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
+ -moz-transform: matrix(1, 0, 0, 1, 0, 0);
+ transform: matrix(1, 0, 0, 1, 0, 0);
+ -webkit-transition: all .5s ease-in-out;
+ -moz-transition: all .5s ease-in-out;
+ transition: all .5s ease-in-out;
+}
+
+header .box {
+ display: none;
+ height: 40px;
+ line-height: 40px;
+ margin: 0 80px;
+ padding: 10px;
+}
+
+header .box > ul {
+ display: flex;
+}
+
+header .box > ul li {
+ font-size: 12px;
+ font-weight: bold;
+ text-transform: uppercase;
+}
+
+#home,
+.logo > a {
+ border-radius: 8px;
+ box-shadow: inset 0 0 0 2px #FFF, inset 0 0 0 3px #FF5959;
+ color: #FF5959;
+ display: block;
+ font-size: 32px;
+ height: 36px;
+ left: 0;
+ line-height: 36px;
+ margin: 10px 20px 10px 30px;
+ overflow: hidden;
+ padding: 2px;
+ position: fixed;
+ text-align: center;
+ top: 0;
+ width: 36px;
+}
+@media only screen and (min-width: 520px) {
+ header .container {
+ max-width: 640px
+ }
+ header .box {
+ display: block;
+ }
+}
diff --git a/src/app/navbar/navbar.component.spec.ts b/src/app/navbar/navbar.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavbarComponent } from './navbar.component';
+
+describe('NavbarComponent', () => {
+ let component: NavbarComponent;
+ let fixture: ComponentFixture<NavbarComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ NavbarComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(NavbarComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/navbar/navbar.component.ts b/src/app/navbar/navbar.component.ts
@@ -0,0 +1,52 @@
+import { Component, OnInit } from '@angular/core';
+import {Observable} from 'rxjs/Observable';
+import {ToastrService} from 'ngx-toastr';
+import {ApiService} from '../api.service';
+
+@Component({
+ selector: 'app-navbar',
+ templateUrl: './navbar.component.html',
+ styleUrls: ['./navbar.component.scss']
+})
+export class NavbarComponent implements OnInit {
+ authenticated: boolean;
+
+ constructor(public apiService: ApiService, private toastr: ToastrService) { }
+
+ ngOnInit() {
+ this.apiService.checkIfUserIsAuthenticated()
+ // TODO: Better variable naming
+ .retryWhen(oerror => {
+ return oerror
+ .mergeMap((error: any) => {
+ if (String(error.status).startsWith('50')) {
+ return Observable.of(error.status).delay(1000);
+ } else if (error.status === 404) {
+ return Observable.throw({error: 'Sorry, there was an error. The Server just doesn\'t find any data for the requested time :('});
+ } else if (error.status === 401) {
+ return Observable.throw({error: '401'});
+ }
+ return Observable.throw({error: 'Unknown error'});
+ })
+ .take(5)
+ // TODO: Allow to link to a Status Page
+ .concat(Observable.throw({error: 'Sorry, there was an error (after 5 retries). This probably means we can\'t reach our API Server :('}));
+ })
+ .subscribe(
+ data => { this.authenticated = true; },
+ err => {
+ if (err['error'] === '401') {
+ this.authenticated = false;
+ } else {
+ this.toastr.error(err['error'], 'Error connecting API', {
+ positionClass: 'toast-top-center',
+ disableTimeOut: true
+ });
+ throw err;
+ }
+ },
+ () => console.log('done checking if authenticated')
+ );
+ }
+
+}
diff --git a/src/app/user/settings/settings.component.ts b/src/app/user/settings/settings.component.ts
@@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
@Component({
selector: 'app-settings',
@@ -6,8 +7,11 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./settings.component.scss']
})
export class SettingsComponent implements OnInit {
+ authorUUID: string;
- constructor() { }
+ constructor(private route: ActivatedRoute) {
+ this.authorUUID = this.route.snapshot.params.paperUUID;
+ }
ngOnInit() {
}
