Add more block info, reduce font size

frontend/src/app/components/eight-blocks/eight-blocks.component.html

@@ -16,10 +16,12 @@
         ></app-block-overview-graph>
         <div *ngIf="showInfo && blockInfo[i]" class="info" @infoChange>
           <h1>{{ blockInfo[i].height }}</h1>
-          <p class="hash">{{ blockInfo[i].hash }}</p>
+          <p class="hash">{{ blockInfo[i].id.slice(0, 32) }}<br>{{ blockInfo[i].id.slice(32) }}</p>
-          <h2>{{ blockInfo[i].time }}</h2>
+          <h2>{{ blockInfo[i].timeString }}</h2>
-          <h2>{{ blockInfo[i].count }}</h2>
+          <h2>{{ blockInfo[i].tx_count }} transactions</h2>
-          <h2>{{ blockInfo[i].size }}</h2>
+          <h2>{{ blockInfo[i].extras.medianFee | feeRounding }} sat/vB</h2>
+          <h2>{{ blockInfo[i].size | bytes: 2 : 'B' : 'MB' : true }}</h2>
+          <h2>Mined by {{ blockInfo[i].extras.pool.name || 'Unknown' }}</h2>
         </div>
       </div>
     </div>

frontend/src/app/components/eight-blocks/eight-blocks.component.scss

@@ -21,30 +21,37 @@
 
     .info {
       position: absolute;
-      left: 10%;
+      left: 5%;
-      top: 10%;
+      top: 5%;
-      right: 10%;
+      right: 5%;
-      bottom: 10%;
+      bottom: 5%;
-      height: 80%;
+      height: 90%;
-      width: 80%;
+      width: 90%;
-      overflow: hidden;
+      font-size: calc(var(--block-width) * 0.03);
-      font-size: calc(var(--block-width) * 0.04);
+      text-shadow: 0 0 calc(var(--block-width) * 0.05) black;
 
       h1 {
-        font-size: 4em;
+        font-size: 3em;
-        margin-bottom: 0.1em;
+        line-height: 1;
+        margin-bottom: calc(var(--block-width) * 0.03);
       }
       h2 {
-        font-size: 2.5em;
+        font-size: 1.5em;
-        margin-bottom: 0.1em;
+        line-height: 1;
+        margin-bottom: calc(var(--block-width) * 0.03);
       }
 
       .hash {
         font-family: monospace;
         word-wrap: break-word;
-        font-size: 1em;
+        font-size: 1.2em;
-        margin-bottom: 0.1em;
+        line-height: 1;
+        margin-bottom: calc(var(--block-width) * 0.03);
       }
     }
   }
+
+  .block-container {
+    overflow: hidden;
+  }
 }

frontend/src/app/components/eight-blocks/eight-blocks.component.ts

@@ -26,6 +26,10 @@ function bestFitResolution(min, max, n): number {
   return best;
 }
 
+interface BlockInfo extends BlockExtended {
+  timeString: string;
+}
+
 @Component({
   selector: 'app-eight-blocks',
   templateUrl: './eight-blocks.component.html',
@@ -70,7 +74,7 @@ export class EightBlocksComponent implements OnInit, OnDestroy {
   testShiftTimeout: number;
 
   showInfo: boolean = true;
-  blockInfo: { [key: string]: string}[] = [];
+  blockInfo: BlockInfo[] = [];
 
   wrapperStyle = {
     '--block-width': '1080px',
@@ -213,11 +217,8 @@ export class EightBlocksComponent implements OnInit, OnDestroy {
     setTimeout(() => {
       this.blockInfo = blocks.map(block => {
         return {
-          height: `${block.height}`,
+          ...block,
-          hash: block.id,
+          timeString: (new Date(block.timestamp * 1000)).toLocaleTimeString(),
-          time: (new Date(block.timestamp * 1000)).toLocaleTimeString(),
-          count: `${block.tx_count} txs`,
-          size: `${this.bytesPipe.transform(block.size, 2, 'B', 'MB', true)}`,
         };
       });
       this.showInfo = true;