Adds trading menu

Changes how the menus render - more accurate scrollbars even if sidebar and navbar are no longer fixed
AaronReboot · Oct 30, 2017 · 50f6fd8 · 50f6fd8
1 parent d7f6693
commit 50f6fd8
Show file tree

Hide file tree

Showing 9 changed files with 45 additions and 32 deletions.
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -46,6 +46,7 @@
         "e2e": "protractor ./protractor.conf.js"
     },
     "dependencies": {
+        "@amcharts/amcharts3-angular": "^1.5.0",
         "@angular/animations": "^4.4.5",
         "@angular/cdk": "^2.0.0-beta.12",
         "@angular/common": "4.4.5",

diff --git a/web/src/app/app.component.html b/web/src/app/app.component.html
@@ -1,21 +1,26 @@
-    <app-navbar class="navbar mat-elevation-z6"></app-navbar>
-    <mat-sidenav-container class="container ">
-        <mat-sidenav #sidenav mode="side" class="sidebar" opened="true">
-            <mat-nav-list>
-                    <mat-list-item routerLink="dashboard" routerLinkActive="dashboard-highlight">
-                            <mat-icon >trending_up</mat-icon>&nbsp;<h3>Dashboard</h3>
-                    </mat-list-item>
-                    <mat-list-item routerLink="wallet" routerLinkActive="wallet-highlight">
-                            <mat-icon >account_balance_wallet</mat-icon>&nbsp;<h3>Wallet</h3>
-                    </mat-list-item>
-                    <mat-list-item routerLink="trading" routerLinkActive="trading-highlight">
-                            <mat-icon >history</mat-icon>&nbsp;<h3>Trading</h3>
-                    </mat-list-item>
-                    <mat-list-item routerLink="settings" routerLinkActive="settings-highlight">
-                            <mat-icon >settings</mat-icon>&nbsp;<h3>Settings</h3>
-                    </mat-list-item>
-                  </mat-nav-list>
+<app-navbar class="mat-elevation-z6"></app-navbar>
+
+<mat-sidenav-container class="container ">
+    <mat-sidenav #sidenav mode="side" class="sidebar" opened="true">
+        <mat-nav-list>
+            <mat-list-item routerLink="dashboard" routerLinkActive="dashboard-highlight">
+                <mat-icon>trending_up</mat-icon>&nbsp;
+                <h3>Dashboard</h3>
+            </mat-list-item>
+            <mat-list-item routerLink="wallet" routerLinkActive="wallet-highlight">
+                <mat-icon>account_balance_wallet</mat-icon>&nbsp;
+                <h3>Wallet</h3>
+            </mat-list-item>
+            <mat-list-item routerLink="trading" routerLinkActive="trading-highlight">
+                <mat-icon>history</mat-icon>&nbsp;
+                <h3>Trading</h3>
+            </mat-list-item>
+            <mat-list-item routerLink="settings" routerLinkActive="settings-highlight">
+                <mat-icon>settings</mat-icon>&nbsp;
+                <h3>Settings</h3>
+            </mat-list-item>
+        </mat-nav-list>
     </mat-sidenav>
 
-        <router-outlet class="main"></router-outlet>
-    </mat-sidenav-container>
+    <router-outlet class="main"></router-outlet>
+</mat-sidenav-container>
diff --git a/web/src/app/app.component.scss b/web/src/app/app.component.scss
@@ -1,6 +1,5 @@
 .container {
-    border: 1px solid rgba(0, 0, 0, 0.5);
-    height: 96vh;
+    height: 96vmax;
 }
 
 .main {

diff --git a/web/src/app/services/style-manager/style-manager.service.spec.ts b/web/src/app/services/style-manager/style-manager.service.spec.ts
@@ -1,7 +1,7 @@
 import {inject, TestBed} from '@angular/core/testing';
 import {HttpModule} from '@angular/http';
 import {StyleManagerComponent} from './style-manager.component';
-
+ 
 
 describe('StyleManager', () => {
   let styleManager: StyleManagerComponent;

diff --git a/web/src/app/services/style-manager/style-manager.service.ts b/web/src/app/services/style-manager/style-manager.service.ts
@@ -2,7 +2,7 @@ import {Injectable} from '@angular/core';
 /**
  * Class for managing stylesheets. Stylesheets are loaded into named slots so that they can be
  * removed or changed later.
- */
+ */ 
 @Injectable()
 export class StyleManagerService {
   /**

diff --git a/web/src/app/services/websocket/websocket.service.ts b/web/src/app/services/websocket/websocket.service.ts
@@ -1,13 +1,13 @@
 import { Injectable } from '@angular/core';
-import * as Rx from 'rxjs/Rx';
+import {Subject, Observable, Observer } from 'rxjs/Rx';
 
 @Injectable()
 export class WebsocketService {
   constructor() { }
 
-  private subject: Rx.Subject<MessageEvent>;
+  private subject: Subject<MessageEvent>;
 
-  public connect(url): Rx.Subject<MessageEvent> {
+  public connect(url): Subject<MessageEvent> {
     if (!this.subject) {
       this.subject = this.create(url);
     } 
@@ -21,11 +21,11 @@ export class WebsocketService {
 
   private isAuth = false;
 
-  private create(url): Rx.Subject<MessageEvent> {
+  private create(url): Subject<MessageEvent> {
     let ws = new WebSocket(url);
 
-    let observable = Rx.Observable.create(
-	(obs: Rx.Observer<MessageEvent>) => {
+    let observable = Observable.create(
+	(obs: Observer<MessageEvent>) => {
 		ws.onmessage = obs.next.bind(obs);
 		ws.onerror = obs.error.bind(obs);
     ws.onclose = obs.complete.bind(obs);
@@ -40,6 +40,6 @@ let observer = {
       }
   }
   }
-	return Rx.Subject.create(observer, observable);
+	return Subject.create(observer, observable);
   }
 }
diff --git a/web/src/app/shared/navbar/navbar.component.scss b/web/src/app/shared/navbar/navbar.component.scss
@@ -1,3 +1,7 @@
 .material-icons {
     cursor: pointer;
-}
+}
+
+.flex-spacer {
+    flex-grow: 1;
+  }
diff --git a/web/src/styles.scss b/web/src/styles.scss
@@ -4,7 +4,6 @@ html,
 body {
     margin: 0;
     padding: 0;
-    overflow-y: hidden;
 }
 
 .loading-spinner {