mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-02-25 07:07:36 +01:00
Code Issues Projects Releases Wiki Activity

Responsive active acceleration details

Browse source
This commit is contained in:
Mononaut 2024-05-28 21:06:58 +00:00
parent e281684ca4
commit 83246be962
No known key found for this signature in database
GPG key ID: A3F058E41374C04E
2 changed files with 69 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.html
View file

@ -1,8 +1,8 @@
<table> <table>
<tbody> <tbody>
<tr> <tr>
<td class="td-width" i18n="transaction.accelerated-to-feerate|Accelerated to feerate">Accelerated to</td> <td class="td-width field-label" i18n="transaction.accelerated-to-feerate|Accelerated to feerate">Accelerated to</td>
<td> <td class="field-value">
<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>
@ -11,24 +11,30 @@
} }
</div> </div>
</td> </td>
<td rowspan="2" *ngIf="tx && (tx.acceleratedBy || accelerationInfo) && miningStats" class="text-right" style="width: 100%;"> <td class="pie-chart" rowspan="2">
<div class="chart-container" style="width: 100px; margin-left:auto;"> <div class="chart-container">
<div @if (tx && (tx.acceleratedBy || accelerationInfo) && miningStats) {
echarts <div
*browserOnly echarts
class="chart" *browserOnly
[initOpts]="chartInitOptions" class="chart"
[options]="chartOptions" [initOpts]="chartInitOptions"
style="height: 72px" [options]="chartOptions"
(chartInit)="onChartInit($event)" style="height: 72px; width: 72px;"
></div> (chartInit)="onChartInit($event)"
></div>
} @else {
<div class="chart-loading">
<div class="spinner-border text-light"></div>
</div>
}
</div> </div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="td-width" i18n="transaction.accelerated-by-hashrate|Accelerated to hashrate">Accelerated by</td> <td class="td-width field-label" i18n="transaction.accelerated-by-hashrate|Accelerated to hashrate">Accelerated by</td>
<td *ngIf="acceleratedByPercentage"> <td class="field-value" *ngIf="acceleratedByPercentage">
{{ acceleratedByPercentage }} <span class="symbol">of hashrate</span> {{ acceleratedByPercentage }} <span class="symbol hashrate-label">of hashrate</span>
</td> </td>
</tr> </tr>
</tbody> </tbody>

53
frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.scss
View file

@ -1,9 +1,50 @@
.td-width { .td-width {
width: 150px; width: 150px;
min-width: 150px; min-width: 150px;
@media (max-width: 768px) { @media (max-width: 768px) {
width: 175px; width: 175px;
min-width: 175px; min-width: 175px;
} }
}
.field-label {
@media (max-width: 849px) {
text-align: left;
}
@media (max-width: 649px) {
width: auto;
min-width: auto;
}
}
.field-value {
@media (max-width: 849px) {
width: 100%;
}
.hashrate-label {
@media (max-width: 420px) {
display: none;
}
}
}
.pie-chart {
width: 100%;
vertical-align: middle;
text-align: center;
.chart-container {
width: 72px;
height: 100%;
margin-left: auto;
}
@media (max-width: 850px) {
width: 150px;
}
@media (max-width: 420px) {
padding-left: 0;
}
} }