Latest block design updates.

frontend/src/app/app.module.ts

@@ -10,7 +10,6 @@ import { AppComponent } from './components/app/app.component';
 
 import { StartComponent } from './components/start/start.component';
 import { ElectrsApiService } from './services/electrs-api.service';
-import { TimeSincePipe } from './pipes/time-since/time-since.pipe';
 import { BytesPipe } from './pipes/bytes-pipe/bytes.pipe';
 import { VbytesPipe } from './pipes/bytes-pipe/vbytes.pipe';
 import { WuBytesPipe } from './pipes/bytes-pipe/wubytes.pipe';
@@ -55,7 +54,6 @@ import { AudioService } from './services/audio.service';
     TransactionComponent,
     BlockComponent,
     TransactionsListComponent,
-    TimeSincePipe,
     BytesPipe,
     VbytesPipe,
     WuBytesPipe,

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 style="width: 210px;">Height</th>
-    <th class="d-none d-md-block" style="width: 300px;">Timestamp</th>
+    <th class="d-none d-md-block" style="width: 210px;">Timestamp</th>
-    <th style="width: 200px;">Mined</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)
+          }
+        }
+      }
+    }
+  }
+
 }

frontend/src/app/pipes/time-since/time-since.pipe.ts

@@ -1,36 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({ name: 'timeSince' })
-export class TimeSincePipe implements PipeTransform {
-  transform(value: any, args?: any): any {
-    if (value) {
-      const seconds = Math.floor((+new Date() - +new Date(value * 1000)) / 1000);
-      if (seconds < 60) {
-        return '< 1 minute';
-      }
-      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)
-            }
-          }
-        }
-      }
-    }
-    return value;
-  }
-}

frontend/src/styles.scss

@@ -7,7 +7,7 @@ $gray-700: #fff;
 
 $nav-tabs-link-active-bg: #11131f;
 
-$primary: #2b89c7;
+$primary: #105fb0;
 $secondary: #2d3348;
 
 $link-color:                #1bd8f4;