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

Refactor address table to improve cell wrapping

Browse Source
This commit is contained in:
Mononaut 2024-06-23 03:17:33 +00:00
parent 9394572ec3
commit 29a8f6a09e
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
2 changed files with 61 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,39 +24,42 @@
<div class="col-sm"> <div class="col-sm">
<table class="table table-borderless table-striped address-table"> <table class="table table-borderless table-striped address-table">
<tbody> <tbody>
<ng-container *ngTemplateOutlet="balanceRow"></ng-container> <tr><ng-container *ngTemplateOutlet="balanceRow"></ng-container></tr>
<ng-container *ngTemplateOutlet="pendingBalanceRow"></ng-container> <tr><ng-container *ngTemplateOutlet="pendingBalanceRow"></ng-container></tr>
<ng-container *ngTemplateOutlet="utxoRow"></ng-container> <tr><ng-container *ngTemplateOutlet="utxoRow"></ng-container></tr>
<ng-container *ngTemplateOutlet="pendingUtxoRow"></ng-container> <tr><ng-container *ngTemplateOutlet="pendingUtxoRow"></ng-container></tr>
@if (network === 'liquid' || network === 'liquidtestnet') { @if (network === 'liquid' || network === 'liquidtestnet') {
<ng-container *ngTemplateOutlet="liquidRow"></ng-container> <tr><ng-container *ngTemplateOutlet="liquidRow"></ng-container></tr>
} @else { } @else {
<ng-container *ngTemplateOutlet="volumeRow"></ng-container> <tr><ng-container *ngTemplateOutlet="volumeRow"></ng-container></tr>
} }
<ng-container *ngTemplateOutlet="typeRow"></ng-container> <tr><ng-container *ngTemplateOutlet="typeRow"></ng-container></tr>
</tbody> </tbody>
</table> </table>
</div> </div>
} @else { } @else {
<div class="col-sm"> <div class="col-sm">
<table class="table table-borderless table-striped table-fixed address-table"> <table class="table table-borderless dual-col-striped table-fixed address-table">
<tbody> <tbody>
<ng-container *ngTemplateOutlet="balanceRow"></ng-container> <tr>
<ng-container *ngTemplateOutlet="utxoRow"></ng-container> <ng-container *ngTemplateOutlet="balanceRow"></ng-container>
@if (network === 'liquid' || network === 'liquidtestnet') { <ng-container *ngTemplateOutlet="spacerCell"></ng-container>
<ng-container *ngTemplateOutlet="liquidRow"></ng-container> <ng-container *ngTemplateOutlet="pendingBalanceRow"></ng-container>
} @else { </tr>
<ng-container *ngTemplateOutlet="volumeRow"></ng-container> <tr>
} <ng-container *ngTemplateOutlet="utxoRow"></ng-container>
</tbody> <ng-container *ngTemplateOutlet="spacerCell"></ng-container>
</table> <ng-container *ngTemplateOutlet="pendingUtxoRow"></ng-container>
</div> </tr>
<div class="col-sm"> <tr>
<table class="table table-borderless table-striped table-fixed address-table"> @if (network === 'liquid' || network === 'liquidtestnet') {
<tbody> <ng-container *ngTemplateOutlet="liquidRow"></ng-container>
<ng-container *ngTemplateOutlet="pendingBalanceRow"></ng-container> } @else {
<ng-container *ngTemplateOutlet="pendingUtxoRow"></ng-container> <ng-container *ngTemplateOutlet="volumeRow"></ng-container>
<ng-container *ngTemplateOutlet="typeRow"></ng-container> }
<ng-container *ngTemplateOutlet="spacerCell"></ng-container>
<ng-container *ngTemplateOutlet="typeRow"></ng-container>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
@ -159,30 +162,21 @@
</div> </div>
} @else { } @else {
<div class="col-sm"> <div class="col-sm">
<table class="table table-borderless table-striped table-fixed"> <table class="table table-borderless dual-col-striped table-fixed">
<tbody> <tbody>
<tr> <tr>
<td colspan="2"><span class="skeleton-loader"></span></td> <td colspan="2"><span class="skeleton-loader"></span></td>
</tr> <ng-container *ngTemplateOutlet="spacerCell"></ng-container>
<tr>
<td colspan="2"><span class="skeleton-loader"></span></td> <td colspan="2"><span class="skeleton-loader"></span></td>
</tr> </tr>
<tr> <tr>
<td colspan="2"><span class="skeleton-loader"></span></td> <td colspan="2"><span class="skeleton-loader"></span></td>
</tr> <ng-container *ngTemplateOutlet="spacerCell"></ng-container>
</tbody>
</table>
</div>
<div class="col-sm">
<table class="table table-borderless table-striped table-fixed">
<tbody>
<tr>
<td colspan="2"><span class="skeleton-loader"></span></td> <td colspan="2"><span class="skeleton-loader"></span></td>
</tr> </tr>
<tr> <tr>
<td colspan="2"><span class="skeleton-loader"></span></td> <td colspan="2"><span class="skeleton-loader"></span></td>
</tr> <ng-container *ngTemplateOutlet="spacerCell"></ng-container>
<tr>
<td colspan="2"><span class="skeleton-loader"></span></td> <td colspan="2"><span class="skeleton-loader"></span></td>
</tr> </tr>
</tbody> </tbody>
@ -234,61 +228,52 @@
</div> </div>
</ng-template> </ng-template>
<ng-template #spacerCell>
<td class="spacer"></td>
</ng-template>
<ng-template #balanceRow> <ng-template #balanceRow>
<tr> <td i18n="address.confirmed-balance">Confirmed balance</td>
<td i18n="address.confirmed-balance">Confirmed balance</td> <td *ngIf="chainStats.funded_txo_sum !== undefined; else confidentialTd" class="wrap-cell"><app-amount [satoshis]="chainStats.balance" [noFiat]="true"></app-amount> <span class="fiat"><app-fiat [value]="chainStats.balance"></app-fiat></span></td>
<td *ngIf="chainStats.funded_txo_sum !== undefined; else confidentialTd"><app-amount [satoshis]="chainStats.balance" [noFiat]="true"></app-amount> <span class="fiat"><app-fiat [value]="chainStats.balance"></app-fiat></span></td>
</tr>
</ng-template> </ng-template>
<ng-template #pendingBalanceRow> <ng-template #pendingBalanceRow>
<tr> <td i18n="address.unconfirmed-balance" class="font-italic">Unconfirmed balance</td>
<td i18n="address.unconfirmed-balance" class="font-italic">Unconfirmed balance</td> <td *ngIf="mempoolStats.funded_txo_sum !== undefined; else confidentialTd" class="font-italic wrap-cell"><app-amount [satoshis]="mempoolStats.balance" [noFiat]="true" [addPlus]="true"></app-amount> <span class="fiat"><app-fiat [value]="mempoolStats.balance"></app-fiat></span></td>
<td *ngIf="mempoolStats.funded_txo_sum !== undefined; else confidentialTd" class="font-italic"><app-amount [satoshis]="mempoolStats.balance" [noFiat]="true" [addPlus]="true"></app-amount> <span class="fiat"><app-fiat [value]="mempoolStats.balance"></app-fiat></span></td>
</tr>
</ng-template> </ng-template>
<ng-template #utxoRow> <ng-template #utxoRow>
<tr> <td i18n="address.confirmed-utxos">Confirmed UTXOs</td>
<td i18n="address.confirmed-utxos" i18n-ngbTooltip="unspent-transaction-outputs" ngbTooltip="unspent transaction outputs">Confirmed UTXOs</td> <td class="wrap-cell">{{ chainStats.utxos }}</td>
<td>{{ chainStats.utxos }}</td>
</tr>
</ng-template> </ng-template>
<ng-template #pendingUtxoRow> <ng-template #pendingUtxoRow>
<tr> <td i18n="address.unconfirmed-utxos" class="font-italic">Unconfirmed UTXOs</td>
<td i18n="address.unconfirmed-utxos" class="font-italic">Unconfirmed UTXOs</td> <td class="font-italic wrap-cell">{{ mempoolStats.utxos > 0 ? '+' : ''}}{{ mempoolStats.utxos }}</td>
<td class="font-italic">{{ mempoolStats.utxos > 0 ? '+' : ''}}{{ mempoolStats.utxos }}</td>
</tr>
</ng-template> </ng-template>
<ng-template #volumeRow> <ng-template #volumeRow>
<tr> <td i18n="address.total-received">Total received</td>
<td i18n="address.total-received">Total received</td> <td *ngIf="chainStats.funded_txo_sum !== undefined; else confidentialTd" class="wrap-cell"><app-amount [satoshis]="chainStats.totalReceived"></app-amount></td>
<td *ngIf="chainStats.funded_txo_sum !== undefined; else confidentialTd"><app-amount [satoshis]="chainStats.totalReceived"></app-amount></td>
</tr>
</ng-template> </ng-template>
<ng-template #typeRow> <ng-template #typeRow>
<tr> <td i18n="address.type">Type</td>
<td i18n="address.type">Type</td> <td class="wrap-cell">
<td class="wrap-cell"> <span placement="bottom" class="badge badge-primary">
<span placement="bottom" class="badge badge-primary"> <app-address-type [address]="addressTypeInfo"></app-address-type>
<app-address-type [address]="addressTypeInfo"></app-address-type> </span>
</span> <app-address-labels [channel]="exampleChannel" [address]="addressTypeInfo" class="ml-1"></app-address-labels>
<app-address-labels [channel]="exampleChannel" [address]="addressTypeInfo" class="ml-1"></app-address-labels> </td>
</td>
</tr>
</ng-template> </ng-template>
<ng-template #liquidRow> <ng-template #liquidRow>
<tr *ngIf="addressInfo && addressInfo.unconfidential"> <ng-container *ngIf="addressInfo && addressInfo.unconfidential">
<td i18n="address.unconfidential">Unconfidential</td> <td i18n="address.unconfidential">Unconfidential</td>
<td> <td>
<app-truncate [text]="addressInfo.unconfidential" [lastChars]="8" [textAlign]="isMobile ? 'end' : 'start'" [link]="['/address/' | relativeUrl, addressInfo.unconfidential]"> <app-truncate [text]="addressInfo.unconfidential" [lastChars]="8" [textAlign]="isMobile ? 'end' : 'start'" [link]="['/address/' | relativeUrl, addressInfo.unconfidential]">
<app-clipboard [text]="addressInfo.unconfidential"></app-clipboard> <app-clipboard [text]="addressInfo.unconfidential"></app-clipboard>
</app-truncate> </app-truncate>
</td> </td>
</tr> </ng-container>
</ng-template> </ng-template>

8
frontend/src/styles.scss
View File

@ -375,6 +375,14 @@ main {
background-color: var(--stat-box-bg); background-color: var(--stat-box-bg);
} }
.dual-col-striped tbody tr:nth-of-type(odd) td:not(.spacer) {
background-color: var(--stat-box-bg);
}
.dual-col-striped tbody tr td.spacer {
width: 30px;
}
.bordertop { .bordertop {
border-top: 1px solid #4c4c4c; border-top: 1px solid #4c4c4c;
} }