web-ui: Create a PoC for the new explorer UI

update the principal page of the block explorer UI
wiringbits · Aug 21, 2019 · 865ae10 · 865ae10
1 parent 26b005c
commit 865ae10
Show file tree

Hide file tree

Showing 21 changed files with 219 additions and 61 deletions.
diff --git a/web-ui/src/app/app.component.ts b/web-ui/src/app/app.component.ts
@@ -90,7 +90,7 @@ export class AppComponent implements OnInit {
       'error.nothingFound': 'That doesn\'t seem to be a valid address, nor valid block, neither a valid transaction or ip address',
 
       // actions
-      'action.find': 'Find',
+      'action.find': 'Search',
 
       // labels
       'label.searchField': 'Transaction id, Blockhash, Block number, Address, IP address',

diff --git a/web-ui/src/app/app.module.ts b/web-ui/src/app/app.module.ts
@@ -48,6 +48,7 @@ import { BlockComponent } from './components/block/block.component';
 import { BlockRawComponent } from './components/block-raw/block-raw.component';
 import { ExplorerDatetimePipe } from './pipes/explorer-datetime.pipe';
 import { ExplorerCurrencyPipe } from './pipes/explorer-currency.pipe';
+import { ExplorerAmountPipe } from './pipes/explorer-amount.pipe';
 
 @NgModule({
   declarations: [
@@ -69,7 +70,8 @@ import { ExplorerCurrencyPipe } from './pipes/explorer-currency.pipe';
     BlockComponent,
     BlockRawComponent,
     ExplorerDatetimePipe,
-    ExplorerCurrencyPipe
+    ExplorerCurrencyPipe,
+    ExplorerAmountPipe
   ],
   imports: [
     AppRoutingModule,

diff --git a/web-ui/src/app/components/block-details/block-details.component.html b/web-ui/src/app/components/block-details/block-details.component.html
@@ -8,7 +8,7 @@ <h2 class="col-xs-12">{{'label.block' | translate}} #{{blockDetails.block.height
 
       <div class="col-xs-12 col-md-7">
         <div class="table-responsive">
-          <table class="table table-condensed table-bordered table-striped table-hover">
+          <table class="table table-condensed table-borderless table-striped table-hover">
             <thead>
               <tr>
                 <th class="col-xs-4 col-md-3 col-lg-9">{{'label.summary' | translate}}</th>

diff --git a/web-ui/src/app/components/finder/finder.component.css b/web-ui/src/app/components/finder/finder.component.css
@@ -0,0 +1,38 @@
+.btn-search {
+  background: #2C80FF;
+  border-radius: 0 8px 8px 0;
+  border-radius: 0px 8px 8px 0px;
+}
+
+::-webkit-input-placeholder {
+  /* Edge */
+  opacity: 0.8;
+  font-family: InterUI-Regular;
+  font-size: 12px;
+  color: #141829;
+}
+
+:-ms-input-placeholder {
+  /* Internet Explorer */
+  opacity: 0.8;
+  font-family: InterUI-Regular;
+  font-size: 12px;
+  color: #141829;
+}
+
+::placeholder {
+  opacity: 0.8;
+  font-family: InterUI-Regular;
+  font-size: 12px;
+  color: #141829;
+}
+
+.input-group-addon {
+  background-color: #ffffff;
+  border-left: #ffffff;
+  border-right: #ffffff;
+}
+
+.input-lg {
+  border-left: #ffffff;
+}
diff --git a/web-ui/src/app/components/finder/finder.component.html b/web-ui/src/app/components/finder/finder.component.html
@@ -1,31 +1,32 @@
-<form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate role="form">
+<div class="row">
+  <div class="col-xs-12 col-md-offset-2 col-md-8">
+    <form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate role="form">
 
-  <div
-    class="form-group"
-    [ngClass]="{
-      'has-success': errorService.hasCorrectValue(form, 'searchField'),
-      'has-error': errorService.hasWrongValue(form, 'searchField')
-    }"
-  >
-    <div class="row">
-      <div class="col-xs-9 col-md-offset-3 col-md-6">
-        <input
-          maxlength="64"
-          formControlName="searchField"
-          type="text"
-          id="searchField"
-          class="form-control"
-          placeholder="{{ 'label.searchField' | translate }}"
-        >
-      </div>
+      <div [ngClass]="{
+        'has-success': errorService.hasCorrectValue(form, 'searchField'),
+        'has-error': errorService.hasWrongValue(form, 'searchField')
+      }">
+        <div class="input-group">
+          <div class="input-group-addon">
+            <span class="glyphicon glyphicon-search text-primary"></span>
+          </div>
+          <input type="text" class="form-control input-lg" maxlength="64" formControlName="searchField" type="text"
+            id="searchField" placeholder="{{ 'label.searchField' | translate }}">
+
+          <span class="input-group-btn">
+            <button class="btn btn-primary btn-serach btn-lg" type="button" [disabled]="!form.valid">
+              {{ 'action.find' | translate }}
+            </button>
+          </span>
 
-      <div class="col-xs-3">
-        <input type="submit" [disabled]="!form.valid" value="{{ 'action.find' | translate }}" class="btn btn-primary">
+        </div>
       </div>
 
-      <div [hidden]="!errorService.hasWrongValue(form, 'searchField')" class="col-xs-9 col-md-offset-3 col-md-6">
-        <span class="help-block">{{ errorService.getFieldError(form, 'searchField') | translate }}</span>
+      <div [hidden]="!errorService.hasWrongValue(form, 'searchField')">
+        <span class="text-danger">{{ errorService.getFieldError(form, 'searchField') | translate }}</span>
       </div>
-    </div>
+
+    </form>
   </div>
-</form>
+</div>
+<br *ngIf="!errorService.hasWrongValue(form, 'searchField')">
diff --git a/web-ui/src/app/components/home/home.component.css b/web-ui/src/app/components/home/home.component.css
@@ -0,0 +1,15 @@
+.table-container {
+    background-color: white;
+    border-radius: 4px;
+    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
+    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
+    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
+}
+
+tabset > ul > li > a > span {
+    font-family: InterUI-Medium;
+    font-size: 22px;
+    color: #6672A6;
+    letter-spacing: -0.17px;
+    text-align: center;
+}
diff --git a/web-ui/src/app/components/home/home.component.html b/web-ui/src/app/components/home/home.component.html
@@ -3,7 +3,7 @@
   <app-ticker></app-ticker>
 
   <div class="row">
-    <div class="col-xs-12 col-md-offset-1 col-md-10">
+    <div class="col-xs-12 col-md-offset-2 col-md-8 table-container">
       <tabset justified="true">
         <tab heading="{{'label.latestBlocks' | translate}}" (select)="selectView('latestBlocks')">
           <app-latest-blocks *ngIf="isSelected('latestBlocks')"></app-latest-blocks>

diff --git a/web-ui/src/app/components/latest-blocks/latest-blocks.component.css b/web-ui/src/app/components/latest-blocks/latest-blocks.component.css
@@ -7,3 +7,12 @@
     background-color: #D4FFD4;
   }
 }
+
+.table-borderless > tbody > tr > td,
+.table-borderless > tbody > tr > th,
+.table-borderless > tfoot > tr > td,
+.table-borderless > tfoot > tr > th,
+.table-borderless > thead > tr > td,
+.table-borderless > thead > tr > th {
+    border: none;
+}
diff --git a/web-ui/src/app/components/latest-blocks/latest-blocks.component.html b/web-ui/src/app/components/latest-blocks/latest-blocks.component.html
@@ -13,7 +13,7 @@ <h4>{{'message.loadingLatestBlocks' | translate}}</h4>
 
   <div *ngIf="blocks != null">
     <div class="table-responsive">
-      <table class="table table-condensed table-bordered table-striped table-hover">
+      <table class="table table-condensed table-borderless table-striped table-hover">
         <thead>
           <tr>
             <th class="col-xs-2 col-md-1">{{'label.height' | translate}}</th>

diff --git a/web-ui/src/app/components/masternodes/masternodes.component.css b/web-ui/src/app/components/masternodes/masternodes.component.css
@@ -0,0 +1,8 @@
+.table-borderless > tbody > tr > td,
+.table-borderless > tbody > tr > th,
+.table-borderless > tfoot > tr > td,
+.table-borderless > tfoot > tr > th,
+.table-borderless > thead > tr > td,
+.table-borderless > thead > tr > th {
+    border: none;
+}
diff --git a/web-ui/src/app/components/masternodes/masternodes.component.html b/web-ui/src/app/components/masternodes/masternodes.component.html
@@ -4,7 +4,7 @@ <h2 class="col-xs-12">{{'label.masternodes' | translate}}</h2>
   </div>
 
   <div class="table-responsive">
-    <table class="table table-condensed table-bordered table-striped table-hover">
+    <table class="table table-condensed table-borderless table-striped table-hover">
       <thead>
         <tr>
           <th class="col-xs-1">#</th>

diff --git a/web-ui/src/app/components/navbar/navbar.component.css b/web-ui/src/app/components/navbar/navbar.component.css
@@ -3,3 +3,10 @@
   height: 35px;
   margin-top: -7.5px;
 }
+
+.navbar-brand {
+  font-family: InterUI-Bold;
+  font-size: 24px;
+  color: #141829;
+  font-weight: bold;
+}
diff --git a/web-ui/src/app/components/navbar/navbar.component.html b/web-ui/src/app/components/navbar/navbar.component.html
@@ -1,10 +1,10 @@
 <nav class="navbar navbar-default">
-  <div class="container-fluid">
+  <div class="container-fluid col-md-offset-2">
     <div class="navbar-header">
       <a routerLink="/" class="navbar-brand">
         <img class="navbar-logo" src="assets/stakenet.png" alt="Logo">
       </a>
-      <a routerLink="/">
+      <a routerLink="/" class="title">
         <span class="navbar-brand">XSN Block Explorer</span>
       </a>
     </div>

diff --git a/web-ui/src/app/components/richest-addresses/richest-addresses.component.css b/web-ui/src/app/components/richest-addresses/richest-addresses.component.css
@@ -7,3 +7,12 @@
     background-color: #D4FFD4;
   }
 }
+
+.table-borderless > tbody > tr > td,
+.table-borderless > tbody > tr > th,
+.table-borderless > tfoot > tr > td,
+.table-borderless > tfoot > tr > th,
+.table-borderless > thead > tr > td,
+.table-borderless > thead > tr > th {
+    border: none;
+}
diff --git a/web-ui/src/app/components/richest-addresses/richest-addresses.component.html b/web-ui/src/app/components/richest-addresses/richest-addresses.component.html
@@ -4,7 +4,7 @@ <h2 class="col-xs-12">{{'label.richestAddresses' | translate}}</h2>
   </div>
 
   <div class="table-responsive">
-    <table class="table table-condensed table-bordered table-striped table-hover">
+    <table class="table table-condensed table-borderless table-striped table-hover">
       <thead>
         <tr>
           <th class="col-xs-1">#</th>

diff --git a/web-ui/src/app/components/ticker/ticker.component.css b/web-ui/src/app/components/ticker/ticker.component.css
@@ -4,3 +4,39 @@ span.help {
   font-size: 16px;
   float: right;
 }
+
+div.panel-default {
+  border: 1px solid #6672A6;
+  border-radius: 8px;
+  border-radius: 8px;
+  background-color: #141829;
+  padding-left: 2px !important;
+  padding-right: 2px !important;
+}
+
+div.data {
+  opacity: 0.9;
+  font-family: sans-serif;
+  font-size: 20px;
+  color: #FFFFFF;
+  letter-spacing: 0;
+  padding: 15px;
+  padding-bottom: 0px;
+  font-weight: bold;
+}
+
+div.lbl-bottom {
+  font-family: sans-serif;
+  font-size: 11px;
+  color: #8192DB;
+  letter-spacing: 0.9px;
+  padding: 15px;
+  padding-top: 0px;
+  font-weight: bold;
+}
+
+small.currency {
+  font-size: 10px;
+  vertical-align: text-top;
+  padding-top: 10px;
+}
diff --git a/web-ui/src/app/components/ticker/ticker.component.html b/web-ui/src/app/components/ticker/ticker.component.html
@@ -1,50 +1,50 @@
 <div class="row">
-  <div class="col-xs-12 col-md-offset-1 col-md-10">
-    <div class="col-xs-12 col-sm-6 col-md-3">
-      <div class="panel panel-default">
-        <div class="panel-heading">
+  <div class="col-xs-12 col-md-offset-2 col-md-8">
 
-          {{'label.totalSupply' | translate}}
-          <span class="glyphicon glyphicon-question-sign help" [title]="'message.totalSupply' | translate"></span>
-        </div>
+    <div class="col-xs-12 col-sm-6 col-md-6">
+      <div class="panel panel-default">
 
-        <div class="panel-body">
+        <div class="panel-body data">
           <span *ngIf="ticker == null || ticker.totalSupply == null">
             {{'message.unavailable' | translate}}
           </span>
           <span *ngIf="ticker != null && ticker.totalSupply != null">
-            {{ticker.totalSupply | explorerCurrency}}
+            {{ticker.totalSupply | explorerAmount}}
+            <small class="currency">{{config.currentCurrency}}</small>
           </span>
         </div>
+        <div class="panel-body lbl-bottom">
+          {{'label.totalSupply' | translate | uppercase}}
+          <span class="glyphicon glyphicon-question-sign help" [title]="'message.totalSupply' | translate"></span>
+        </div>
       </div>
     </div>
 
-    <div class="col-xs-12 col-sm-6 col-md-3">
+    <div class="col-xs-12 col-sm-6 col-md-6">
       <div class="panel panel-default">
-        <div class="panel-heading">
-          {{'label.circulatingSupply' | translate}}
-          <span class="glyphicon glyphicon-question-sign help" [title]="'message.circulatingSupply' | translate"></span>
-        </div>
 
-        <div class="panel-body">
+        <div class="panel-body data">
           <span *ngIf="ticker == null || ticker.circulatingSupply == null">
             {{'message.unavailable' | translate}}
           </span>
 
           <span *ngIf="ticker != null && ticker.circulatingSupply != null">
-            {{ticker.circulatingSupply | explorerCurrency}}
+            {{ticker.circulatingSupply | explorerAmount}}
+            <small class="currency">{{config.currentCurrency}}</small>
           </span>
         </div>
+
+        <div class="panel-body lbl-bottom">
+          {{'label.circulatingSupply' | translate | uppercase}}
+          <span class="glyphicon glyphicon-question-sign help" [title]="'message.circulatingSupply' | translate"></span>
+        </div>
       </div>
     </div>
 
-    <div class="col-xs-12 col-sm-6 col-md-3">
+    <div class="col-xs-12 col-sm-6 col-md-6">
       <div class="panel panel-default">
-        <div class="panel-heading">
-          {{'label.blocks' | translate}}
-        </div>
 
-        <div class="panel-body">
+        <div class="panel-body data">
           <span *ngIf="ticker == null">
             {{'message.unavailable' | translate}}
           </span>
@@ -53,16 +53,15 @@
             {{ticker.blocks}}
           </span>
         </div>
+        <div class="panel-body lbl-bottom">
+          {{'label.blocks' | translate | uppercase}}
+        </div>
       </div>
     </div>
 
-    <div class="col-xs-12 col-sm-6 col-md-3">
+    <div class="col-xs-12 col-sm-6 col-md-6">
       <div class="panel panel-default">
-        <div class="panel-heading">
-          {{'label.masternodes' | translate}}
-        </div>
-
-        <div class="panel-body">
+        <div class="panel-body data">
           <span *ngIf="ticker == null || ticker.masternodes == null">
             {{'message.unavailable' | translate}}
           </span>
@@ -71,6 +70,9 @@
             {{ticker.masternodes}}
           </span>
         </div>
+        <div class="panel-body lbl-bottom">
+          {{'label.masternodes' | translate | uppercase}}
+        </div>
       </div>
     </div>
   </div>