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

Fix styling issue in peg and utxo widgets

Browse Source
This commit is contained in:
natsoni 2024-02-04 13:01:07 +01:00
parent 7bfc649042
commit 03e4a21bce
No known key found for this signature in database
GPG Key ID: C65917583181743B
3 changed files with 21 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
View File

@ -49,7 +49,7 @@
</a> </a>
</ng-container> </ng-container>
<ng-template #noPeginMessage> <ng-template #noPeginMessage>
<span class="text-muted">-</span> <i><span class="text-muted" i18n="liquid.change-output">Change output</span></i>
</ng-template> </ng-template>
</td> </td>
<td class="timestamp text-right"> <td class="timestamp text-right">

26
frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html
View File

@ -11,10 +11,10 @@
<table class="table table-borderless"> <table class="table table-borderless">
<thead style="vertical-align: middle;"> <thead style="vertical-align: middle;">
<th class="transaction text-left" [ngClass]="{'widget': widget}" i18n="shared.transaction">Transaction</th> <th class="transaction text-left" [ngClass]="{'widget': widget}" i18n="shared.transaction">Transaction</th>
<th class="timestamp text-left" i18n="shared.date" [ngClass]="{'widget': widget}">Date</th>
<th class="amount text-right" [ngClass]="{'widget': widget}" i18n="shared.amount">Amount</th> <th class="amount text-right" [ngClass]="{'widget': widget}" i18n="shared.amount">Amount</th>
<th class="output text-left" *ngIf="!widget" i18n="liquid.fund-redemption-tx">Fund / Redemption Tx</th> <th class="output text-left" *ngIf="!widget" i18n="liquid.fund-redemption-tx">Fund / Redemption Tx</th>
<th class="address text-left" *ngIf="!widget" i18n="liquid.bitcoin-address">BTC Address</th> <th class="address text-left" *ngIf="!widget" i18n="liquid.bitcoin-address">BTC Address</th>
<th class="timestamp text-right" i18n="shared.date" [ngClass]="{'widget': widget}">Date</th>
</thead> </thead>
<tbody *ngIf="recentPegs$ | async as pegs; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''"> <tbody *ngIf="recentPegs$ | async as pegs; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
<ng-container *ngIf="widget; else regularRows"> <ng-container *ngIf="widget; else regularRows">
@ -31,12 +31,12 @@
</a> </a>
</ng-container> </ng-container>
</td> </td>
<td class="timestamp text-left widget">
<app-time kind="since" [time]="peg.blocktime"></app-time>
</td>
<td class="amount text-right widget" [ngClass]="{'credit': peg.amount > 0, 'debit': peg.amount < 0}"> <td class="amount text-right widget" [ngClass]="{'credit': peg.amount > 0, 'debit': peg.amount < 0}">
<app-amount [satoshis]="peg.amount" [noFiat]="true" [forceBtc]="true" [addPlus]="true"></app-amount> <app-amount [satoshis]="peg.amount" [noFiat]="true" [forceBtc]="true" [addPlus]="true"></app-amount>
</td> </td>
<td class="timestamp text-right widget">
<app-time kind="since" [time]="peg.blocktime"></app-time>
</td>
</tr> </tr>
</ng-container> </ng-container>
<ng-template #regularRows> <ng-template #regularRows>
@ -53,6 +53,10 @@
</a> </a>
</ng-container> </ng-container>
</td> </td>
<td class="timestamp text-left">
&lrm;{{ peg.blocktime * 1000 | date:'yyyy-MM-dd HH:mm' }}
<div class="symbol lg-inline relative-time"><i>(<app-time kind="since" [time]="peg.blocktime"></app-time>)</i></div>
</td>
<td class="amount text-right" [ngClass]="{'credit': peg.amount > 0, 'debit': peg.amount < 0}"> <td class="amount text-right" [ngClass]="{'credit': peg.amount > 0, 'debit': peg.amount < 0}">
<app-amount [satoshis]="peg.amount" [noFiat]="true" [forceBtc]="true" [addPlus]="true"></app-amount> <app-amount [satoshis]="peg.amount" [noFiat]="true" [forceBtc]="true" [addPlus]="true"></app-amount>
</td> </td>
@ -75,10 +79,6 @@
</a> </a>
</ng-container> </ng-container>
</td> </td>
<td class="timestamp text-right">
&lrm;{{ peg.blocktime * 1000 | date:'yyyy-MM-dd HH:mm' }}
<div class="symbol lg-inline relative-time"><i>(<app-time kind="since" [time]="peg.blocktime"></app-time>)</i></div>
</td>
</tr> </tr>
</ng-template> </ng-template>
</tbody> </tbody>
@ -88,10 +88,10 @@
<td class="transaction text-left widget"> <td class="transaction text-left widget">
<span class="skeleton-loader" style="max-width: 400px"></span> <span class="skeleton-loader" style="max-width: 400px"></span>
</td> </td>
<td class="amount text-right widget"> <td class="timestamp text-left widget">
<span class="skeleton-loader" style="max-width: 300px"></span> <span class="skeleton-loader" style="max-width: 300px"></span>
</td> </td>
<td class="timestamp text-right widget"> <td class="amount text-right widget">
<span class="skeleton-loader" style="max-width: 300px"></span> <span class="skeleton-loader" style="max-width: 300px"></span>
</td> </td>
</tr> </tr>
@ -101,6 +101,9 @@
<td class="transaction text-left"> <td class="transaction text-left">
<span class="skeleton-loader" style="max-width: 300px"></span> <span class="skeleton-loader" style="max-width: 300px"></span>
</td> </td>
<td class="timestamp text-left">
<span class="skeleton-loader" style="max-width: 140px"></span>
</td>
<td class="amount text-right"> <td class="amount text-right">
<span class="skeleton-loader" style="max-width: 140px"></span> <span class="skeleton-loader" style="max-width: 140px"></span>
</td> </td>
@ -110,9 +113,6 @@
<td class="address text-left"> <td class="address text-left">
<span class="skeleton-loader" style="max-width: 140px"></span> <span class="skeleton-loader" style="max-width: 140px"></span>
</td> </td>
<td class="timestamp text-right">
<span class="skeleton-loader" style="max-width: 140px"></span>
</td>
</tr> </tr>
</ng-template> </ng-template>
</ng-template> </ng-template>

18
frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss
View File

@ -28,14 +28,14 @@ tr, td, th {
} }
.transaction { .transaction {
width: 25%; width: 20%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
max-width: 120px; max-width: 120px;
} }
.transaction.widget { .transaction.widget {
width: 40%; width: 100%;
} }
@ -50,19 +50,16 @@ tr, td, th {
} }
.amount { .amount {
width: 12%; width: 0%;
}
.amount.widget {
width: 30%;
} }
.output { .output {
width: 25%; width: 20%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
max-width: 160px; max-width: 160px;
@media (max-width: 825px) { @media (max-width: 800px) {
display: none; display: none;
} }
} }
@ -72,13 +69,13 @@ tr, td, th {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
max-width: 160px; max-width: 160px;
@media (max-width: 840px) { @media (max-width: 960px) {
display: none; display: none;
} }
} }
.timestamp { .timestamp {
width: 18%; width: 0%;
@media (max-width: 650px) { @media (max-width: 650px) {
display: none; display: none;
} }
@ -89,7 +86,6 @@ tr, td, th {
} }
} }
.timestamp.widget { .timestamp.widget {
width: 100%;
@media (min-width: 768px) AND (max-width: 1050px) { @media (min-width: 768px) AND (max-width: 1050px) {
display: none; display: none;
} }