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

[accelerator] improve dashboard responsiveness a bit

Browse Source
This commit is contained in:
nymkappa 2024-02-26 16:23:00 +01:00
parent fbebfdae04
commit b3b65c59dc
No known key found for this signature in database
GPG Key ID: 92358FC85D9645DE
3 changed files with 37 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html
View File

@ -17,7 +17,7 @@
<th class="fee text-right" i18n="transaction.bid-boost|Bid Boost">Bid Boost</th> <th class="fee text-right" i18n="transaction.bid-boost|Bid Boost">Bid Boost</th>
<th class="block text-right" i18n="accelerator.block">Block</th> <th class="block text-right" i18n="accelerator.block">Block</th>
<th class="status text-right" i18n="transaction.status|Transaction Status">Status</th> <th class="status text-right" i18n="transaction.status|Transaction Status">Status</th>
<th class="time text-right" i18n="" *ngIf="!this.widget">Date</th> <th class="date text-right" i18n="" *ngIf="!this.widget">Date</th>
</ng-container> </ng-container>
</thead> </thead>
<tbody *ngIf="accelerations; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''"> <tbody *ngIf="accelerations; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
@ -53,7 +53,7 @@
<span *ngIf="acceleration.status === 'mined' || acceleration.status === 'completed'" class="badge badge-success" i18n="transaction.rbf.mined">Mined</span> <span *ngIf="acceleration.status === 'mined' || acceleration.status === 'completed'" class="badge badge-success" i18n="transaction.rbf.mined">Mined</span>
<span *ngIf="acceleration.status === 'failed'" class="badge badge-danger" i18n="accelerator.canceled">Canceled</span> <span *ngIf="acceleration.status === 'failed'" class="badge badge-danger" i18n="accelerator.canceled">Canceled</span>
</td> </td>
<td class="time text-right" *ngIf="!this.widget"> <td class="date text-right" *ngIf="!this.widget">
<app-time kind="since" [time]="acceleration.added" [fastRender]="true"></app-time> <app-time kind="since" [time]="acceleration.added" [fastRender]="true"></app-time>
</td> </td>
</ng-container> </ng-container>

58
frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss
View File

@ -63,16 +63,28 @@ tr, td, th {
} }
.txid { .txid {
@media (max-width: 500px) { width: 20%;
}
.fee {
width: 15%;
}
.block {
width: 15%;
@media (max-width: 700px) {
display: none; display: none;
} }
} }
.fee, .block, .status { .status {
width: 15%; width: 13%;
}
@media (max-width: 720px) { .date {
width: 20%; width: 20%;
@media (max-width: 600px) {
display: none;
} }
} }
@ -83,23 +95,12 @@ tr, td, th {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
max-width: 30%; max-width: 30%;
@media (max-width: 1060px) and (min-width: 768px) {
display: none;
}
@media (max-width: 500px) {
display: none;
}
} }
.fee-rate { .fee-rate {
width: 20%; width: 20%;
@media (max-width: 1060px) and (min-width: 768px) { text-align: end !important;
text-align: start !important; @media (max-width: 975px) and (min-width: 768px) {
}
@media (max-width: 500px) {
text-align: start !important;
}
@media (max-width: 840px) and (min-width: 768px) {
display: none; display: none;
} }
@media (max-width: 410px) { @media (max-width: 410px) {
@ -108,32 +109,31 @@ tr, td, th {
} }
.bid { .bid {
text-align: end !important;
width: 30%; width: 30%;
min-width: 150px; min-width: 150px;
@media (max-width: 840px) and (min-width: 768px) {
text-align: start !important;
}
@media (max-width: 410px) {
text-align: start !important;
}
} }
.time { .time {
width: 25%; width: 25%;
@media (max-width: 600px) {
display: none;
}
@media (max-width: 1200px) and (min-width: 768px) {
display: none;
}
} }
.fee { .fee {
width: 30%; width: 30%;
@media (max-width: 1060px) and (min-width: 768px) { text-align: end !important;
text-align: start !important;
}
@media (max-width: 500px) {
text-align: start !important;
}
} }
.block { .block {
width: 20%; width: 20%;
@media (max-width: 1200px) and (min-width: 768px) {
display: none;
}
} }
.status { .status {

6
frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts
View File

@ -47,9 +47,11 @@ export class AccelerationsListComponent implements OnInit {
const accelerationObservable$ = this.accelerations$ || (this.pending ? this.servicesApiService.getAccelerations$() : this.servicesApiService.getAccelerationHistoryObserveResponse$({ timeframe: '1m', page: page })); const accelerationObservable$ = this.accelerations$ || (this.pending ? this.servicesApiService.getAccelerations$() : this.servicesApiService.getAccelerationHistoryObserveResponse$({ timeframe: '1m', page: page }));
return accelerationObservable$.pipe( return accelerationObservable$.pipe(
switchMap(response => { switchMap(response => {
const accelerations = response.body; let accelerations = response;
if (response.body) {
accelerations = response.body;
this.accelerationCount = parseInt(response.headers.get('x-total-count'), 10); this.accelerationCount = parseInt(response.headers.get('x-total-count'), 10);
console.log(this.accelerationCount); }
if (this.pending) { if (this.pending) {
for (const acceleration of accelerations) { for (const acceleration of accelerations) {
acceleration.status = acceleration.status || 'accelerating'; acceleration.status = acceleration.status || 'accelerating';