Fix TV View graph height. (#527)

* Fix graph alignment.
Only show the graph on desktop resolutions.

* Fix mempool-info-chart chart alignment.

frontend/src/app/components/television/television.component.html

@@ -1,21 +1,23 @@
 <div id="tv-wrapper">
 
-  <div *ngIf="loading" class="text-center">
+  <div *ngIf="loading" class="loading">
     <div class="spinner-border text-light"></div>
   </div>
 
+  <div class="tv-only" i18n="television.tv-only">TV only</div>
+
+  <div class="tv-container" *ngIf="!loading">
+
     <div class="chart-holder" *ngIf="mempoolStats.length">
       <app-mempool-graph dir="ltr" [data]="mempoolStats"></app-mempool-graph>
     </div>
 
-  <div class="text-center" class="blockchain-wrapper">
+    <div class="blockchain-wrapper">
       <div class="position-container">
         <app-mempool-blocks></app-mempool-blocks>
         <app-blockchain-blocks></app-blockchain-blocks>
-
         <div id="divider"></div>
       </div>
-
     </div>
-
+  </div>
 </div>

frontend/src/app/components/television/television.component.scss

@@ -1,24 +1,44 @@
+
+.loading {
+  margin: auto;
+  width: 100%;
+  display: flex;
+  text-align: center;
+  justify-content: center;
+  height: 100vh;
+  align-items: center;
+}
+
 #tv-wrapper {
-  height: 100%;
-  padding: 10px;
-  padding-top: 20px;
-}
-
-.blockchain-wrapper {
+  height: 100vh;
   overflow: hidden;
-}
-
-.position-container {
-  position: absolute;
-  left: 50%;
-  bottom: 170px;
+  position: relative;
 }
 
 .chart-holder {
-  height: calc(100% - 220px);
+  height: calc(100vh - 270px);
+  min-height: 600px;
+  padding-left: 20px;
+  width: 97%;
+  padding-top: 70px;
+  @media(min-width: 992px){
+    padding-top: 30px;
+  }
 }
 
-#divider {
+.blockchain-wrapper {
+
+  .position-container {
+    position: absolute;
+    left: 50%;
+    bottom: 170px;
+  }
+
+  .chart-holder {
+    height: calc(100% - 220px);
+  }
+
+  #divider {
     width: 3px;
     height: 175px;
     left: 0;
@@ -26,15 +46,14 @@
     background-image: url('/resources/divider-new.png');
     background-repeat: repeat-y;
     position: absolute;
-}
-
-#divider > img {
+    img {
       position: absolute;
       left: -100px;
       top: -28px;
-}
+    }
+  }
 
-@media (min-width: 1920px) {
+  @media (min-width: 1920px) {
     .position-container {
       transform: scale(1.3);
       bottom: 210px;
@@ -42,8 +61,36 @@
     .chart-holder {
       height: calc(100% - 280px);
     }
+  }
+
+  :host ::ng-deep .ct-legend {
+    top: 25px;
+  }
 }
 
-:host ::ng-deep .ct-legend {
-  top: 25px;
+.tv-only {
+  display: block;    
+  height: 100vh;
+  width: 100%;
+  position: relative;
+  display: flex;
+  text-align: center;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  @media(min-width: 768px) {
+    display: none;
+  }
+  @media(max-height: 720px) {
+    display: flex;
+  }
+}
+.tv-container {
+  display: none;
+  @media(min-width: 768px) {
+    display: flex;
+  }
+  @media(max-height: 720px) {
+    display: none;
+  }
 }

frontend/src/app/dashboard/dashboard.component.scss

@@ -58,7 +58,7 @@
   } 
   .item {
     width: 124px;
-    margin: 0px auto 20px;
+    margin: 0px auto 0px;
     display: inline-block;
     @media (min-width: 400px) {
       width: 50%;