mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-01-17 18:52:34 +01:00
Code Issues Projects Releases Wiki Activity

Table design and responsiveness updates.

Browse Source
This commit is contained in:
softsimon 2020-07-18 11:04:04 +07:00
parent 74e9eca0d9
commit 3ff1957f0c
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
5 changed files with 22 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,16 +8,16 @@
<table class="table table-borderless table-striped">
<thead>
<th style="width: 25%;">Height</th>
<th style="width: 25%;">Timestamp</th>
<th style="width: 25%;">Total Sent (BSQ)</th>
<th style="width: 25%;">Transactions</th>
<th style="width: 25%;">Confirmed</th>
<th style="width: 25%;">Total Sent</th>
<th class="d-none d-md-block" style="width: 25%;">Transactions</th>
</thead>
<tbody *ngIf="!isLoading; else loadingTmpl">
<tr *ngFor="let block of blocks; trackBy: trackByFn">
<td><a [routerLink]="['/block/' | relativeUrl, block.hash]" [state]="{ data: { block: block } }">{{ block.height }}</a></td>
<td>{{ block.time | date:'yyyy-MM-dd HH:mm' }}</td>
<td>{{ calculateTotalOutput(block) / 100 | number: '1.2-2' }}</td>
<td>{{ block.txs.length }}</td>
<td><app-time-since [time]="block.time / 1000" [fastRender]="true"></app-time-since> ago</td>
<td>{{ calculateTotalOutput(block) / 100 | number: '1.2-2' }}<span class="d-none d-md-inline"> BSQ</span></td>
<td class="d-none d-md-block">{{ block.txs.length }}</td>
</tr>
</tbody>
</table>

27
frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.html
View File

@ -7,28 +7,29 @@
<div class="table-responsive-sm">
<table class="table table-borderless table-striped">
<thead>
<th style="width: 18%;">Transaction</th>
<th style="width: 20%;">Transaction</th>
<th style="width: 20%;">Type</th>
<th style="width: 15%;">Total Sent (BSQ)</th>
<th style="width: 10%;">Outputs</th>
<th style="width: 12%;">Block Height</th>
<th style="width: 15%;">Block Time</th>
<th style="width: 20%;">Amount</th>
<th style="width: 20%;">Confirmed</th>
<th class="d-none d-md-block" style="width: 20%;">Height</th>
</thead>
<tbody *ngIf="!isLoading; else loadingTmpl">
<tr *ngFor="let tx of transactions; trackBy: trackByFn">
<td><a [routerLink]="['/tx/' | relativeUrl, tx.id]" [state]="{ data: tx }">{{ tx.id | shortenString : 16 }}</a></td>
<td><app-bisq-icon class="mr-1" [txType]="tx.txType"></app-bisq-icon> {{ tx.txTypeDisplayString }}</td>
<td><a [routerLink]="['/tx/' | relativeUrl, tx.id]" [state]="{ data: tx }">{{ tx.id | slice : 0 : 8 }}</a></td>
<td>
<app-bisq-icon class="mr-1" [txType]="tx.txType"></app-bisq-icon>
<span class="d-none d-md-inline"> {{ tx.txTypeDisplayString }}</span>
</td>
<td>
<ng-template [ngIf]="tx.txType === 'PAY_TRADE_FEE'" [ngIfElse]="defaultTxType">
{{ tx.burntFee / 100 | number: '1.2-2' }}
{{ tx.burntFee / 100 | number: '1.2-2' }}<span class="d-none d-md-inline"> BSQ</span>
</ng-template>
<ng-template #defaultTxType>
{{ calculateTotalOutput(tx.outputs) / 100 | number: '1.2-2' }}
{{ calculateTotalOutput(tx.outputs) / 100 | number: '1.2-2' }}<span class="d-none d-md-inline"> BSQ</span>
</ng-template>
</td>
<td>{{ tx.outputs.length }}</td>
<td><a [routerLink]="['/block/' | relativeUrl, tx.blockHash]">{{ tx.blockHeight }}</a></td>
<td>{{ tx.time | date:'yyyy-MM-dd HH:mm' }}</td>
<td><app-time-since [time]="tx.time / 1000" [fastRender]="true"></app-time-since> ago</td>
<td class="d-none d-md-block"><a [routerLink]="['/block/' | relativeUrl, tx.blockHash]">{{ tx.blockHeight }}</a></td>
</tr>
</tbody>
</table>
@ -42,6 +43,6 @@
<ng-template #loadingTmpl>
<tr *ngFor="let i of loadingItems">
<td *ngFor="let j of [1, 2, 3, 4, 5, 6]"><span class="skeleton-loader"></span></td>
<td *ngFor="let j of [1, 2, 3, 4, 5]"><span class="skeleton-loader"></span></td>
</tr>
</ng-template>

1
frontend/src/app/components/about/about.component.html
View File

@ -8,7 +8,6 @@
<p>Development <a href="https://twitter.com/softsimon_">@softsimon_</a>
<br />Operations <a href="https://twitter.com/wiz">@wiz</a>
<br />Design <a href="https://instagram.com/markjborg">@markjborg</a>
<br><br>

2
frontend/src/app/components/master-page/master-page.component.html
View File

@ -1,6 +1,6 @@
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" [routerLink]="['/']" style="position: relative;">
<a class="navbar-brand" [routerLink]="['/' | relativeUrl]" style="position: relative;">
<img src="./resources/mempool-logo.png" height="35" width="140" class="logo" [ngStyle]="{'opacity': connectionState === 2 ? 1 : 0.5 }">
<div class="badge badge-warning connection-badge" *ngIf="connectionState === 0">Offline</div>
<div class="badge badge-warning connection-badge" style="left: 30px;" *ngIf="connectionState === 1">Reconnecting...</div>

2
frontend/src/styles.scss
View File

@ -375,7 +375,7 @@ h1, h2, h3 {
}
@media (min-width: 768px) {
.md-inline {
.d-md-inline {
display: inline-block;
}
}