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

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

@ -1,9 +1,50 @@
.td-width {
width: 150px;
min-width: 150px;
width: 150px;
min-width: 150px;
@media (max-width: 768px) {
width: 175px;
min-width: 175px;
}
@media (max-width: 768px) {
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;
}
}