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

Merge pull request #5216 from mempool/natsoni/align-acceleration-pie-chart

Browse Source 
Align "Accelerated to / by" fields on mobile
This commit is contained in:
softsimon 2024-06-27 15:44:03 +09:00 committed by GitHub
commit c8d443bea7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,8 +4,11 @@
<table> <table>
<tbody> <tbody>
<tr> <tr>
<td class="td-width field-label" i18n="transaction.accelerated-to-feerate|Accelerated to feerate">Accelerated to</td> <td class="td-width field-label" [class]="isMobile() ? 'mobile' : ''" i18n="transaction.accelerated-to-feerate|Accelerated to feerate">Accelerated to</td>
<td class="field-value"> <td class="pie-chart" rowspan="2" *ngIf="isMobile()">
<ng-container *ngTemplateOutlet="pieChart"></ng-container>
</td>
<td class="field-value" [class]="isMobile() ? 'mobile' : ''">
<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>
@ -14,7 +17,7 @@
} }
</div> </div>
</td> </td>
<td class="pie-chart" rowspan="2"> <td class="pie-chart" rowspan="2" *ngIf="!isMobile()">
<ng-container *ngTemplateOutlet="pieChart"></ng-container> <ng-container *ngTemplateOutlet="pieChart"></ng-container>
</td> </td>
</tr> </tr>

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

@ -16,6 +16,9 @@
width: auto; width: auto;
min-width: auto; min-width: auto;
} }
&.mobile {
width: 100%;
}
} }
.field-value { .field-value {
@ -23,6 +26,10 @@
width: 100%; width: 100%;
} }
&.mobile {
width: auto;
}
.hashrate-label { .hashrate-label {
@media (max-width: 420px) { @media (max-width: 420px) {
display: none; display: none;

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

@ -128,4 +128,8 @@ export class ActiveAccelerationBox implements OnChanges {
} }
this.chartInstance = ec; this.chartInstance = ec;
} }
isMobile() {
return window.innerWidth <= 767.98;
}
} }