From e3d099a867dba8df34a32ff472bd0960cc39c48b Mon Sep 17 00:00:00 2001
From: GloriousCode <scott@gloriousedge.com>
Date: Wed, 27 Sep 2017 18:51:55 +1000
Subject: [PATCH] Finishes terrible dashboard where all ticker updates are
 posted Fixes issue with widths

---
 ...ll-enabled-currency-tickers.component.html |  4 +-
 ...ll-enabled-currency-tickers.component.scss | 18 ---------
 .../exchange-currency-ticker.component.html   | 18 ++++-----
 .../exchange-currency-ticker.component.scss   | 39 +++++++++----------
 .../exchange-currency-ticker.component.ts     |  3 +-
 web/src/styles.scss                           |  1 +
 6 files changed, 30 insertions(+), 53 deletions(-)

diff --git a/web/src/app/shared/all-enabled-currency-tickers/all-enabled-currency-tickers.component.html b/web/src/app/shared/all-enabled-currency-tickers/all-enabled-currency-tickers.component.html
index 5d9c3b3c..35dc542a 100644
--- a/web/src/app/shared/all-enabled-currency-tickers/all-enabled-currency-tickers.component.html
+++ b/web/src/app/shared/all-enabled-currency-tickers/all-enabled-currency-tickers.component.html
@@ -1,7 +1,5 @@
-<div style="width:1000px">
-<md-grid-list cols="3" rowHeight="2:1" >
+<md-grid-list cols="4" rowHeight="4:3" >
     <md-grid-tile *ngFor="let ticker of tickerCards">
   <app-exchange-currency-ticker  [ticker]="ticker" ></app-exchange-currency-ticker>
   </md-grid-tile>
 </md-grid-list>
-</div>
\ No newline at end of file
diff --git a/web/src/app/shared/all-enabled-currency-tickers/all-enabled-currency-tickers.component.scss b/web/src/app/shared/all-enabled-currency-tickers/all-enabled-currency-tickers.component.scss
index 5dfbae0f..e69de29b 100644
--- a/web/src/app/shared/all-enabled-currency-tickers/all-enabled-currency-tickers.component.scss
+++ b/web/src/app/shared/all-enabled-currency-tickers/all-enabled-currency-tickers.component.scss
@@ -1,18 +0,0 @@
-.example-form {
-    min-width: 150px;
-    width: 100%;
-}
-
-.example-full-width {
-    width: 100%;
-}
-
-.exchange-card {
-    margin-bottom: 20px;
-    width: 300px;
-}
-
-md-grid-tile {
-    width:300px;
-    padding:10px;
-}
\ No newline at end of file
diff --git a/web/src/app/shared/exchange-currency-ticker/exchange-currency-ticker.component.html b/web/src/app/shared/exchange-currency-ticker/exchange-currency-ticker.component.html
index 42012c60..8910f8cf 100644
--- a/web/src/app/shared/exchange-currency-ticker/exchange-currency-ticker.component.html
+++ b/web/src/app/shared/exchange-currency-ticker/exchange-currency-ticker.component.html
@@ -1,29 +1,27 @@
-<md-card class="exchange-card">
+<md-card class="exchange-card one-time-animation"  >
   <md-card-header>
       <md-card-title>{{ticker?.Exchange}} {{ticker?.CurrencyPair}} Ticker update</md-card-title>
   </md-card-header>
   <md-card-content>
-      <md-grid-list cols="3" rowHeight="2:1" >
+      <md-grid-list cols="3" rowHeight="16:9" >
           <md-grid-tile>
-              Last: {{ticker?.Last}}
+              <p>Last: {{ticker?.Last | number:'1.0-1'}}</p>
             </md-grid-tile>
           <md-grid-tile>
-              Low: {{ticker?.Low}}
+              <p> Low: {{ticker?.Low | number:'1.0-1'}}</p>
           </md-grid-tile>
           <md-grid-tile>
-            High: {{ticker?.High}}
+              <p> High: {{ticker?.High | number:'1.0-1'}}</p>
           </md-grid-tile>
           
           <md-grid-tile>
-              Bid: {{ticker?.Bid}}
+              <p> Bid: {{ticker?.Bid | number:'1.0-1'}}</p>
             </md-grid-tile>
-
             <md-grid-tile>
-                Ask: {{ticker?.Ask}}
+                <p> Ask: {{ticker?.Ask | number:'1.0-1'}}</p>
               </md-grid-tile>
-
               <md-grid-tile>
-                  Volume: {{ticker?.Volume}}
+                  <p>Volume: {{ticker?.Volume | number:'1.0-1'}}</p>
                 </md-grid-tile>
       </md-grid-list>
   </md-card-content>
diff --git a/web/src/app/shared/exchange-currency-ticker/exchange-currency-ticker.component.scss b/web/src/app/shared/exchange-currency-ticker/exchange-currency-ticker.component.scss
index d30dbd17..71bf966e 100644
--- a/web/src/app/shared/exchange-currency-ticker/exchange-currency-ticker.component.scss
+++ b/web/src/app/shared/exchange-currency-ticker/exchange-currency-ticker.component.scss
@@ -1,20 +1,19 @@
-.example-form {
-    min-width: 150px;
-    width: 100%;
-}
-
-.example-full-width {
-    width: 100%;
-}
-
-.exchange-card {
-    margin-bottom: 20px;
-    width: 300px;
-}
-
-.md-fab {
-    margin: 0;
-    position: fixed;
-    bottom: 5%;
-    right: 2%;
-}
\ No newline at end of file
+.one-time-animation {
+    animation: one-time-animation 2s forwards 1;
+  }
+  @keyframes one-time-animation {
+    from {
+      background: green;
+    }
+    to {
+      background: transparent;
+    }
+  }
+  
+  /* do the following changes */
+  
+  .selected {
+    box-shadow: 0 0 10px green inset;
+    transition: box-shadow 2s ease;
+  }
+  
\ No newline at end of file
diff --git a/web/src/app/shared/exchange-currency-ticker/exchange-currency-ticker.component.ts b/web/src/app/shared/exchange-currency-ticker/exchange-currency-ticker.component.ts
index e9f09e02..7413e424 100644
--- a/web/src/app/shared/exchange-currency-ticker/exchange-currency-ticker.component.ts
+++ b/web/src/app/shared/exchange-currency-ticker/exchange-currency-ticker.component.ts
@@ -6,9 +6,8 @@ import { Component, OnInit, Input } from '@angular/core';
 })
 export class ExchangeCurrencyTickerComponent implements OnInit {
   @Input('ticker') ticker: TickerUpdate;
-  
-  constructor() {}
 
+  constructor() {}
   ngOnInit() { }
 
 }
diff --git a/web/src/styles.scss b/web/src/styles.scss
index c33b3dae..87c0e2ca 100644
--- a/web/src/styles.scss
+++ b/web/src/styles.scss
@@ -17,6 +17,7 @@ body {
     display: inline-block;
     text-align: left;
     max-width: 940px;
+    width:100%;
 }
 
 @import '~@angular/material/prebuilt-themes/indigo-pink.css';