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

Fix accel pool pie chart placement

Browse Source
This commit is contained in:
natsoni 2024-06-27 17:50:45 +09:00
parent 66f90cb0bd
commit bb91f9142e
No known key found for this signature in database
GPG Key ID: C65917583181743B
4 changed files with 8 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.html
View File

@ -4,11 +4,11 @@
<table> <table>
<tbody> <tbody>
<tr> <tr>
<td class="td-width field-label" [class]="isMobile() ? 'mobile' : ''" i18n="transaction.accelerated-to-feerate|Accelerated to feerate">Accelerated to</td> <td class="td-width field-label" [class]="chartPositionLeft ? 'chart-left' : ''" i18n="transaction.accelerated-to-feerate|Accelerated to feerate">Accelerated to</td>
<td class="pie-chart" rowspan="2" *ngIf="isMobile()"> <td class="pie-chart" rowspan="2" *ngIf="chartPositionLeft">
<ng-container *ngTemplateOutlet="pieChart"></ng-container> <ng-container *ngTemplateOutlet="pieChart"></ng-container>
</td> </td>
<td class="field-value" [class]="isMobile() ? 'mobile' : ''"> <td class="field-value" [class]="chartPositionLeft ? 'chart-left' : ''">
<div class="effective-fee-container"> <div class="effective-fee-container">
@if (accelerationInfo?.acceleratedFeeRate && (!tx.effectiveFeePerVsize || accelerationInfo.acceleratedFeeRate >= tx.effectiveFeePerVsize)) { @if (accelerationInfo?.acceleratedFeeRate && (!tx.effectiveFeePerVsize || accelerationInfo.acceleratedFeeRate >= tx.effectiveFeePerVsize)) {
<app-fee-rate [fee]="accelerationInfo.acceleratedFeeRate"></app-fee-rate> <app-fee-rate [fee]="accelerationInfo.acceleratedFeeRate"></app-fee-rate>
@ -17,7 +17,7 @@
} }
</div> </div>
</td> </td>
<td class="pie-chart" rowspan="2" *ngIf="!isMobile()"> <td class="pie-chart" rowspan="2" *ngIf="!chartPositionLeft">
<ng-container *ngTemplateOutlet="pieChart"></ng-container> <ng-container *ngTemplateOutlet="pieChart"></ng-container>
</td> </td>
</tr> </tr>

4
frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.scss
View File

@ -16,7 +16,7 @@
width: auto; width: auto;
min-width: auto; min-width: auto;
} }
&.mobile { &.chart-left {
width: 100%; width: 100%;
} }
} }
@ -26,7 +26,7 @@
width: 100%; width: 100%;
} }
&.mobile { &.chart-left {
width: auto; width: auto;
} }

5
frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.ts
View File

@ -28,6 +28,7 @@ export class ActiveAccelerationBox implements OnChanges {
@Input() miningStats: MiningStats; @Input() miningStats: MiningStats;
@Input() pools: number[]; @Input() pools: number[];
@Input() chartOnly: boolean = false; @Input() chartOnly: boolean = false;
@Input() chartPositionLeft: boolean = false;
acceleratedByPercentage: string = ''; acceleratedByPercentage: string = '';
@ -132,8 +133,4 @@ export class ActiveAccelerationBox implements OnChanges {
} }
this.chartInstance = ec; this.chartInstance = ec;
} }
isMobile() {
return window.innerWidth <= 767.98;
}
} }

2
frontend/src/app/components/transaction/transaction.component.html
View File

@ -650,7 +650,7 @@
<ng-template #acceleratingRow> <ng-template #acceleratingRow>
<tr> <tr>
<td rowspan="2" colspan="2" style="padding: 0;"> <td rowspan="2" colspan="2" style="padding: 0;">
<app-active-acceleration-box [tx]="tx" [accelerationInfo]="accelerationInfo" [miningStats]="miningStats"></app-active-acceleration-box> <app-active-acceleration-box [tx]="tx" [accelerationInfo]="accelerationInfo" [miningStats]="miningStats" [chartPositionLeft]="isMobile"></app-active-acceleration-box>
</td> </td>
</tr> </tr>
<tr></tr> <tr></tr>