GlcoinCore/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2026-08-13 12:33:11 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Merge pull request #6291 from mempool/nymkappa/treasury-tx-list-responsive

Browse source 
[treasuries] make tx list more responsive
This commit is contained in:
mononaut 2026-02-19 13:23:50 +09:00 • committed by GitHub
commit eed334c655
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 51 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

23
frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.html
View file

@ -1,9 +1,10 @@
<table class="table latest-transactions">
<thead>
<th class="table-cell-txid" i18n="dashboard.latest-transactions.txid">TXID</th>
<th class="table-cell-satoshis" i18n="dashboard.latest-transactions.amount">Amount</th>
<th class="table-cell-satoshis-desktop" i18n="dashboard.latest-transactions.amount">Amount</th>
<th class="table-cell-fiat">{{ currency }}</th>
<th class="table-cell-date" i18n="shared.date">Date</th>
<th class="table-cell-satoshis-mobile" i18n="dashboard.latest-transactions.amount">Amount</th>
</thead>
<tbody *ngIf="transactions$ | async as transactions else recentTransactionsSkeleton">
<tr *ngFor="let transaction of transactions; let i = index;">
@ -12,9 +13,18 @@
<app-truncate [text]="transaction.txid" [lastChars]="5"></app-truncate>
</a>
</td>
<td class="table-cell-satoshis"><app-amount [satoshis]="transaction.value" [digitsInfo]="getAmountDigits(transaction.value)" [noFiat]="true"></app-amount></td>
<td class="table-cell-satoshis-desktop">
<app-amount [satoshis]="transaction.value" [digitsInfo]="getAmountDigits(transaction.value)" [noFiat]="true"></app-amount>
</td>
<td class="table-cell-fiat" ><app-fiat [value]="transaction.value" [blockConversion]="transaction.price" digitsInfo="1.0-0"></app-fiat></td>
<td class="table-cell-date"><app-time kind="since" [time]="transaction.time" [fastRender]="true" [showTooltip]="true"></app-time></td>
<td class="table-cell-date">
<a class="mobile-tx-link" [routerLink]="['/tx' | relativeUrl, transaction.txid]">
<app-time kind="since" [time]="transaction.time" [fastRender]="true" [showTooltip]="true"></app-time>
</a>
</td>
<td class="table-cell-satoshis-mobile">
<app-amount [satoshis]="transaction.value" [digitsInfo]="getAmountDigits(transaction.value)" [noFiat]="true"></app-amount>
</td>
</tr>
</tbody>
<div class="">&nbsp;</div>
@ -24,9 +34,10 @@
<tbody>
<tr *ngFor="let i of [1,2,3,4,5,6]">
<td class="table-cell-txid"><div class="skeleton-loader skeleton-loader-transactions"></div> </td>
<td class="table-cell-satoshis"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
<td class="table-cell-satoshis-desktop"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
<td class="table-cell-fiat"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
<td class="table-cell-fees"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
<td class="table-cell-date"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
<td class="table-cell-satoshis-mobile"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
</tr>
</tbody>
</ng-template>
</ng-template>

51
frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.scss
View file

@ -1,3 +1,9 @@
@mixin responsive-breakpoint {
@media (min-width: 420px) and (max-width: 767px), (min-width: 900px) {
@content;
}
}
.latest-transactions {
width: 100%;
text-align: left;
@ -11,34 +17,45 @@
overflow:hidden;
width: 25%;
}
.table-cell-satoshis {
.table-cell-txid {
display: none;
@include responsive-breakpoint {
display: table-cell;
}
}
.table-cell-satoshis-desktop {
display: none;
@include responsive-breakpoint {
display: table-cell;
text-align: right;
}
}
.table-cell-satoshis-mobile {
display: table-cell;
text-align: right;
@media (min-width: 576px) {
display: table-cell;
}
@media (min-width: 768px) {
@include responsive-breakpoint {
display: none;
}
@media (min-width: 1100px) {
display: table-cell;
}
}
.table-cell-fiat {
display: none;
text-align: right;
@media (min-width: 485px) {
display: table-cell;
}
@media (min-width: 768px) {
display: none;
}
@media (min-width: 992px) {
@media (min-width: 650px) and (max-width: 767px), (min-width: 1100px) {
display: table-cell;
}
}
.table-cell-date {
text-align: right;
text-align: left;
@include responsive-breakpoint {
text-align: right;
}
}
.mobile-tx-link {
display: inline;
@include responsive-breakpoint {
color: inherit;
pointer-events: none;
}
}
}
.skeleton-loader-transactions {
@ -47,4 +64,4 @@
top: 2px;
margin-bottom: -3px;
height: 18px;
}
}