Finishes terrible dashboard where all ticker updates are posted

Fixes issue with widths

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>

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;
-}

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>

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%;
-}
+.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;
+  }
+  

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() { }
 
 }

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';