operator routing update

Author: btroncone

src/app/operators/operator/operator-header/operator-header.component.html renamed to src/app/operators/components/operator-header/operator-header.component.html

@@ -2,6 +2,10 @@
   font-size:30px;
 }
 
+.signature {
+  margin-bottom: 24px;
+}
+
 mat-toolbar {
   background: #62757f !important;
   font-weight: normal;

src/app/operators/operator/operator-header/operator-header.component.scss renamed to src/app/operators/components/operator-header/operator-header.component.scss

@@ -5,6 +5,7 @@
   class="operator-header">
 </app-operator-header>
 <div class="main-operator-container">
-
-
+  <div class="short-description">
+    {{ shortDescription }}
+  </div>
 </div>

src/app/operators/operator/operator-header/operator-header.component.ts renamed to src/app/operators/components/operator-header/operator-header.component.ts

@@ -1,6 +1,8 @@
 
 .main-operator-container {
-  width: 70%;
   padding: 5px;
   height: 1000px;
+  display: flex;
+  flex-direction: column;
+  padding: 0 16px;
 }

src/app/operators/operator/operator.component.html renamed to src/app/operators/components/operator/operator.component.html

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { OperatorDoc } from '../../operator-docs/operator.model';
+import { OperatorDoc } from '../../../operator-docs/operator.model';
 
 @Component({
   selector: 'app-operator',

src/app/operators/operator/operator.component.scss renamed to src/app/operators/components/operator/operator.component.scss

@@ -12,8 +12,7 @@
       <h3 mat-subheader class="category-subheader">{{ category }}</h3>
       <a mat-list-item
         *ngFor="let operator of groupedOperators[category]"
-        (click)="scrollToOperator(operator.name)"
-        [routerLink]="[ '/operators', { name: operator.name } ]"
+        [href]="'/operators#' + operator.name"
         [class.active-operator]="(activeOperator$ | async) === operator.name">
         {{ operator.name }}
       </a>

src/app/operators/operator/operator.component.ts renamed to src/app/operators/components/operator/operator.component.ts

@@ -3,7 +3,6 @@ import { Router, ActivatedRoute } from '@angular/router';
 import { Observable } from 'rxjs/Observable';
 import { ALL_OPERATORS } from '../operator-docs';
 import { OperatorDoc } from '../operator-docs/operator.model';
-import 'rxjs/add/operator/pluck';
 
 @Component({
   selector: 'app-operators',
@@ -22,14 +21,12 @@ export class OperatorsComponent implements OnInit, AfterViewInit {
   ) { }
 
   ngOnInit() {
-    this.activeOperator$ = this._activatedRoute
-      .params
-      .pluck('name');
+    this.activeOperator$ = this._activatedRoute.fragment;
   }
 
   ngAfterViewInit() {
     // scroll initial param when applicable
-    const { name } = this._activatedRoute.snapshot.params;
+    const name = this._activatedRoute.snapshot.fragment;
 
     if (name) {
       // wait a tick from scroll to be accurate
@@ -38,7 +35,7 @@ export class OperatorsComponent implements OnInit, AfterViewInit {
   }
 
   updateUrl(name: string) {
-    this._router.navigate([ '/operators', { name } ]);
+    this._router.navigate([ '/operators' ], { fragment: name });
   }
 
   scrollToOperator(name: string) {

src/app/operators/operators.component.html

@@ -4,8 +4,8 @@ import { MatSidenavModule, MatIconModule, MatListModule, MatToolbarModule } from
 import { RouterModule } from '@angular/router';
 
 import { OperatorsComponent } from './operators.component';
-import { OperatorComponent } from './operator/operator.component';
-import { OperatorHeaderComponent } from './operator/operator-header/operator-header.component';
+import { OperatorComponent } from './components/operator/operator.component';
+import { OperatorHeaderComponent } from './components/operator-header/operator-header.component';
 
 import { OperatorScrollDirective } from './directives/operator-scroll.directive';
 import { HighlightJsDirective } from './directives/highlight-js.directive';