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

Moving fee box into a regular box.

Browse Source
This commit is contained in:
softsimon
2020-09-26 23:40:26 +07:00
parent 3dedf1e3e1
commit 21ef5054bf
4 changed files with 58 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
frontend/src/app/components/fees-box/fees-box.component.html
View File

@@ -1,19 +1,39 @@
<table class="table mx-auto text-center" style="max-width: 550px">
<tr>
<td class="d-none d-md-table-cell border-top-0">Low priority</td>
<td class="border-top-0">Medium priority</td>
<td class="border-top-0">High priority</td>
</tr>
<table style="width: 100%;">
<tr *ngIf="(isLoadingWebSocket$ | async) === false && (feeEstimations$ | async) as feeEstimations; else loadingFees">
<td class="d-none d-md-table-cell">{{ feeEstimations.hourFee }} sat/vB (<app-fiat [value]="feeEstimations.hourFee * 250"></app-fiat>)</td>
<td>{{ feeEstimations.halfHourFee }} sat/vB (<app-fiat [value]="feeEstimations.halfHourFee * 250"></app-fiat>)</td>
<td>{{ feeEstimations.fastestFee }} sat/vB (<app-fiat [value]="feeEstimations.fastestFee * 250"></app-fiat>)</td>
<td class="d-none d-md-block">
<h5 class="card-title">Low priority</h5>
<p class="card-text">
{{ feeEstimations.hourFee }} sat/vB (<app-fiat [value]="feeEstimations.hourFee * 250"></app-fiat>)
</p>
</td>
<td>
<h5 class="card-title">Medium priority</h5>
<p class="card-text">
{{ feeEstimations.halfHourFee }} sat/vB (<app-fiat [value]="feeEstimations.halfHourFee * 250"></app-fiat>)
</p>
</td>
<td>
<h5 class="card-title">High priority</h5>
<p class="card-text">
{{ feeEstimations.fastestFee }} sat/vB (<app-fiat [value]="feeEstimations.fastestFee * 250"></app-fiat>)
</p>
</td>
</tr>
<ng-template #loadingFees>
<tr>
<td class="d-none d-md-table-cell"><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
</tr>
</ng-template>
</table>
<ng-template #loadingFees>
<tr>
<td class="d-none d-md-block">
<h5 class="card-title">Low priority</h5>
<p class="card-text"><span class="skeleton-loader"></span></p>
</td>
<td>
<h5 class="card-title">Medium priority</h5>
<p class="card-text"><span class="skeleton-loader"></span></p>
</td>
<td>
<h5 class="card-title">High priority</h5>
<p class="card-text"><span class="skeleton-loader"></span></p>
</td>
</tr>
</ng-template>

10
frontend/src/app/components/fees-box/fees-box.component.scss
View File

@@ -1,9 +1,3 @@
td {
width: 33%;
}
@media (max-width: 767.98px) {
td {
width: 50%;
}
.card-title {
color: #4a68b9;
}

2
frontend/src/app/components/mempool-graph/mempool-graph.component.ts
View File

@@ -64,7 +64,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
labelInterpolationFnc: (value: number): any => {
return this.vbytesPipe.transform(value, 2);
},
offset: showLegend ? 160 : 60,
offset: showLegend ? 160 : 80,
},
plugins: [
Chartist.plugins.ctTargetLine({