machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Responsive latest blocks and transactions tables.

Browse Source
This commit is contained in:
softsimon 2020-03-04 02:53:31 +07:00
parent c1a8863861
commit f71ac67d24
4 changed files with 25 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/app/components/address/address.component.html
View File

@ -15,15 +15,15 @@
<tbody>
<tr>
<td>Total received</td>
<td>{{ receieved / 100000000 | number: '1.2-8' }} BTC</td>
<td>{{ receieved / 100000000 | number: '1.8-8' }} BTC</td>
</tr>
<tr>
<td>Total sent</td>
<td>{{ sent / 100000000 | number: '1.2-8' }} BTC</td>
<td>{{ sent / 100000000 | number: '1.8-8' }} BTC</td>
</tr>
<tr>
<td>Balance</td>
<td>{{ (receieved - sent) / 100000000 | number: '1.2-8' }} BTC (<app-fiat [value]="receieved - sent"></app-fiat>)</td>
<td>{{ (receieved - sent) / 100000000 | number: '1.8-8' }} BTC (<app-fiat [value]="receieved - sent"></app-fiat>)</td>
</tr>
</tbody>
</table>

12
frontend/src/app/components/latest-blocks/latest-blocks.component.html
View File

@ -1,11 +1,11 @@
<table class="table table-borderless" [alwaysCallback]="true" [fromRoot]="true" [infiniteScrollContainer]="'body'" infiniteScroll [infiniteScrollDistance]="1.5" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50" (scrolled)="loadMore()">
<thead>
<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 class="d-none d-lg-block" style="width: 150px;">Transactions</th>
<th class="d-none d-lg-block" style="width: 175px;">Size</th>
<th>Filled</th>
<th style="width: 15%;">Height</th>
<th class="d-none d-md-block" style="width: 20%;">Timestamp</th>
<th style="width: 20%;">Mined</th>
<th class="d-none d-lg-block" style="width: 15%;">Transactions</th>
<th class="d-none d-lg-block" style="width: 15%;">Size</th>
<th style="width: 20%;">Filled</th>
</thead>
<tbody>
<tr *ngFor="let block of blocks; let i= index; trackBy: trackByBlock">

11
frontend/src/app/components/latest-transactions/latest-transactions.component.html
View File

@ -1,16 +1,17 @@
<table class="table table-borderless">
<thead>
<th>Transaction ID</th>
<th style="width: 200px;">Value</th>
<th class="d-none d-xl-block" style="width: 180px;">Value</th>
<th style="width: 125px;">Size</th>
<th style="width: 150px;">Fee</th>
<th>Fee</th>
</thead>
<tbody>
<ng-container *ngIf="(transactions$ | async) as transactions">
<ng-template [ngIf]="!isLoading">
<tr *ngFor="let transaction of transactions">
<td><a [routerLink]="['/tx/', transaction.txid]">{{ transaction.txid }}</a></td>
<td>{{ transaction.value / 100000000 }} BTC</td>
<td class="d-block d-md-none d-xl-none"><a [routerLink]="['/tx/', transaction.txid]">{{ transaction.txid | shortenString }}</a></td>
<td class="d-none d-md-block d-xl-none"><a [routerLink]="['/tx/', transaction.txid]">{{ transaction.txid }}</a></td>
<td class="d-none d-xl-block">{{ transaction.value / 100000000 | number: '1.8-8' }} BTC</td>
<td>{{ transaction.vsize | vbytes: 2 }}</td>
<td>{{ transaction.fee / transaction.vsize | number : '1.2-2'}} sats/vB</td>
</tr>
@ -19,7 +20,7 @@
<ng-template [ngIf]="isLoading">
<tr *ngFor="let item of [1,2,3,4,5,6,7,8,9,10]">
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
<td class="d-none d-lg-block"><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
</tr>

10
frontend/src/app/components/latest-transactions/latest-transactions.component.scss
View File

@ -0,0 +1,10 @@
@media (min-width: 768px) {
.d-md-block {
display: table-cell !important;
}
}
@media (min-width: 992px) {
.d-lg-block {
display: table-cell !important;
}
}