Latest block design updates.

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

@@ -1,8 +1,8 @@
 <table class="table table-borderless">
   <thead>
-    <th style="width: 120px;">Height</th>
-    <th class="d-none d-md-block" style="width: 300px;">Timestamp</th>
-    <th style="width: 200px;">Mined</th>
+    <th style="width: 210px;">Height</th>
+    <th class="d-none d-md-block" style="width: 210px;">Timestamp</th>
+    <th style="width: 210px;">Mined</th>
     <th style="width: 150px;">Transactions</th>
     <th style="width: 175px;">Size</th>
     <th class="d-none d-md-block">Filled</th>
@@ -16,7 +16,7 @@
       <td>{{ block.size | bytes: 2 }}</td>
       <td class="d-none d-md-block">
         <div class="progress position-relative">
-          <div class="progress-bar bg-success" role="progressbar" [ngStyle]="{'width': (block.weight / 4000000)*100 + '%' }"></div>
+          <div class="progress-bar progress-mempool" role="progressbar" [ngStyle]="{'width': (block.weight / 4000000)*100 + '%' }"></div>
         </div>
       </td>
     </tr>

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

@@ -0,0 +1,3 @@
+.progress-mempool {
+  background: repeating-linear-gradient(to right, #2d3348, #2d3348 0%, #105fb0 0%, #9339f4 100%);
+}

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

@@ -37,7 +37,7 @@ export class LatestBlocksComponent implements OnInit, OnDestroy {
           return;
         }
 
-        if (block.height === this.blocks[0].height) {
+        if (block.height <= this.blocks[0].height) {
           return;
         }
 

frontend/src/app/components/time-since/time-since.component.ts

@@ -2,12 +2,12 @@ import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, ChangeDet
 
 @Component({
   selector: 'app-time-since',
-  template: `{{ time | timeSince : trigger }}`,
+  template: `{{ text }}`,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class TimeSinceComponent implements OnInit, OnDestroy {
   interval: number;
-  trigger = 0;
+  text: string;
 
   @Input() time: number;
   @Input() fastRender = false;
@@ -17,8 +17,9 @@ export class TimeSinceComponent implements OnInit, OnDestroy {
   ) { }
 
   ngOnInit() {
+    this.text = this.calculate();
     this.interval = window.setInterval(() => {
-      this.trigger++;
+      this.text = this.calculate();
       this.ref.markForCheck();
     }, 1000 * (this.fastRender ? 1 : 60));
   }
@@ -27,4 +28,33 @@ export class TimeSinceComponent implements OnInit, OnDestroy {
     clearInterval(this.interval);
   }
 
+  calculate() {
+    const seconds = Math.floor((+new Date() - +new Date(this.time * 1000)) / 1000);
+    if (seconds < 60) {
+      return '< 1 min';
+    }
+    const intervals = {
+        year: 31536000,
+        month: 2592000,
+        week: 604800,
+        day: 86400,
+        hour: 3600,
+        minute: 60,
+        second: 1
+    };
+    let counter;
+    for (const i in intervals) {
+      if (intervals.hasOwnProperty(i)) {
+        counter = Math.floor(seconds / intervals[i]);
+        if (counter > 0) {
+          if (counter === 1) {
+              return counter + ' ' + i; // singular (1 day ago)
+          } else {
+              return counter + ' ' + i + 's'; // plural (2 days ago)
+          }
+        }
+      }
+    }
+  }
+
 }