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

FIX unify the units css. (#499)

Browse Source 
* FIX unify the units css.
* Fix units css font-size.
This commit is contained in:
Miguel Medeiros 2021-05-18 11:20:17 -03:00 committed by GitHub
parent 3ffa60db1f
commit 5cd2cfa097
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 66 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/bisq/bisq-block/bisq-block.component.html
View File

@ -22,7 +22,7 @@
<td>
{{ block.time | date:'yyyy-MM-dd HH:mm' }}
<div class="lg-inline">
<i>(<app-time-since [time]="block.time / 1000" [fastRender]="true"></app-time-since>)</i>
<i class="symbol">(<app-time-since [time]="block.time / 1000" [fastRender]="true"></app-time-since>)</i>
</div>
</td>
</tr>

5
frontend/src/app/bisq/bisq-market/bisq-market.component.scss
View File

@ -32,11 +32,6 @@
}
}
.symbol {
color: #ffffff66;
font-size: 11px;
}
.table-container {
overflow: scroll;
-ms-overflow-style: none;

6
frontend/src/app/bisq/bisq-trades/bisq-trades.component.scss
View File

@ -1,9 +1,3 @@
.symbol {
color: #ffffff66;
font-size: 11px;
}
.table-container {
overflow: scroll;
-ms-overflow-style: none;

2
frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html
View File

@ -30,7 +30,7 @@
<td>
{{ bisqTx.time | date:'yyyy-MM-dd HH:mm' }}
<div class="lg-inline">
<i>(<app-time-since [time]="bisqTx.time / 1000" [fastRender]="true"></app-time-since>)</i>
<i class="symbol">(<app-time-since [time]="bisqTx.time / 1000" [fastRender]="true"></app-time-since>)</i>
</div>
</td>
</tr>

6
frontend/src/app/components/block/block.component.html
View File

@ -23,17 +23,17 @@
<td>
{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
<div class="lg-inline">
<i>(<app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since>)</i>
<i class="symbol">(<app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since>)</i>
</div>
</td>
</tr>
<tr>
<td i18n="block.size">Size</td>
<td>{{ block.size | bytes: 2 }}</td>
<td [innerHTML]="block.size | bytes: 2"></td>
</tr>
<tr>
<td i18n="block.weight">Weight</td>
<td>{{ block.weight | wuBytes: 2 }}</td>
<td [innerHTML]="block.weight | wuBytes: 2"></td>
</tr>
</tbody>
</table>

2
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
View File

@ -12,7 +12,7 @@
<div class="fee-span">
{{ block.feeRange[1] | number:'1.0-0' }} - {{ block.feeRange[block.feeRange.length - 1] | number:'1.0-0' }} <ng-container i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
</div>
<div class="block-size">&lrm;{{ block.size | bytes: 2 }}</div>
<div class="block-size" [innerHTML]="block.size | bytes: 2">&lrm;</div>
<div class="transaction-count">
<ng-container *ngTemplateOutlet="block.tx_count === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: block.tx_count | number}"></ng-container>
<ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>

2
frontend/src/app/components/latest-blocks/latest-blocks.component.html
View File

@ -21,7 +21,7 @@
<td>
<div class="progress">
<div class="progress-bar progress-mempool {{ network$ | async }}" role="progressbar" [ngStyle]="{'width': (block.weight / 4000000)*100 + '%' }"></div>
<div class="progress-text">{{ block.size | bytes: 2 }}</div>
<div class="progress-text" [innerHTML]="block.size | bytes: 2"></div>
</div>
</td>
</tr>

4
frontend/src/app/components/mempool-block/mempool-block.component.html
View File

@ -18,7 +18,7 @@
</tr>
<tr>
<td i18n="mempool-block.fee-span">Fee span</td>
<td><span class="yellow-color">{{ mempoolBlock.feeRange[0] | number:'1.0-0' }} - {{ mempoolBlock.feeRange[mempoolBlock.feeRange.length - 1] | number:'1.0-0' }} <span class="symbol yellow-color" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></span></td>
<td><span class="yellow-color">{{ mempoolBlock.feeRange[0] | number:'1.0-0' }} - {{ mempoolBlock.feeRange[mempoolBlock.feeRange.length - 1] | number:'1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></span></td>
</tr>
<tr>
<td i18n="mempool-block.total-fees">Total fees</td>
@ -33,7 +33,7 @@
<td>
<div class="progress">
<div class="progress-bar progress-mempool {{ (network$ | async) }}" role="progressbar" [ngStyle]="{'width': (mempoolBlock.blockVSize / 1000000) * 100 + '%' }"></div>
<div class="progress-text">{{ mempoolBlock.blockSize | bytes: 2 }}</div>
<div class="progress-text" [innerHTML]="mempoolBlock.blockSize | bytes: 2"></div>
</div>
</td>
</tr>

2
frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
View File

@ -10,7 +10,7 @@
<div class="fee-span">
{{ projectedBlock.feeRange[0] | number:'1.0-0' }} - {{ projectedBlock.feeRange[projectedBlock.feeRange.length - 1] | number:'1.0-0' }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
</div>
<div class="block-size">&lrm;{{ projectedBlock.blockSize | bytes: 2 }}</div>
<div class="block-size" [innerHTML]="projectedBlock.blockSize | bytes: 2">&lrm;</div>
<div class="transaction-count">
<ng-container *ngTemplateOutlet="projectedBlock.nTx === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: projectedBlock.nTx | number}"></ng-container>
<ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>

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

@ -71,7 +71,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
offset: this.offsetX,
},
axisY: {
labelInterpolationFnc: (value: number): any => this.vbytesPipe.transform(value, 2),
labelInterpolationFnc: (value: number): any => this.vbytesPipe.transform(value, 2, 'vB', 'MvB', true),
offset: this.showLegend ? 160 : 60,
},
plugins: this.inverted ? [Chartist.plugins.ctTargetLine({ value: 1000000 })] : []

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

@ -50,7 +50,7 @@
<td>
{{ tx.status.block_time * 1000 | date:'yyyy-MM-dd HH:mm' }}
<div class="lg-inline">
<i>(<app-time-since [time]="tx.status.block_time" [fastRender]="true"></app-time-since>)</i>
<i class="symbol">(<app-time-since [time]="tx.status.block_time" [fastRender]="true"></app-time-since>)</i>
</div>
</td>
</tr>
@ -115,10 +115,10 @@
</ng-template>
<ng-template #belowBlockLimit>
<ng-template [ngIf]="network === 'liquid'" [ngIfElse]="timeEstimateDefault">
<ng-container *ngTemplateOutlet="1 * txInBlockIndex + 1 === 1 ? nextBlockEta : nextBlockEtaPlural; context:{ $implicit: 1 * txInBlockIndex + 1 }"></ng-container>&nbsp;<i>(<ng-container *ngTemplateOutlet="txInBlockIndex === 0 ? blocksSingular : blocksPlural; context: {$implicit: txInBlockIndex + 1 }"></ng-container>)</i>
<ng-container *ngTemplateOutlet="1 * txInBlockIndex + 1 === 1 ? nextBlockEta : nextBlockEtaPlural; context:{ $implicit: 1 * txInBlockIndex + 1 }"></ng-container>&nbsp;<i><span class="symbol">(<ng-container *ngTemplateOutlet="txInBlockIndex === 0 ? blocksSingular : blocksPlural; context: {$implicit: txInBlockIndex + 1 }"></ng-container>)</span></i>
</ng-template>
<ng-template #timeEstimateDefault>
<ng-container *ngTemplateOutlet="nextBlockEtaPlural; context:{ $implicit: 10 * txInBlockIndex + 10 }"></ng-container>&nbsp;<i>(<ng-container *ngTemplateOutlet="txInBlockIndex === 0 ? blocksSingular : blocksPlural; context: {$implicit: txInBlockIndex + 1 }"></ng-container>)</i>
<ng-container *ngTemplateOutlet="nextBlockEtaPlural; context:{ $implicit: 10 * txInBlockIndex + 10 }"></ng-container>&nbsp;<i><span class="symbol">(<ng-container *ngTemplateOutlet="txInBlockIndex === 0 ? blocksSingular : blocksPlural; context: {$implicit: txInBlockIndex + 1 }"></ng-container>)</span></i>
</ng-template>
</ng-template>
</ng-template>
@ -161,11 +161,11 @@
<td><span class="badge badge-success" i18n="transaction.descendant|Descendant">Descendant</span></td>
<td>
<a [routerLink]="['/tx' | relativeUrl, cpfpInfo.bestDescendant.txid]">
<span class="d-inline d-lg-none">{{ cpfpInfo.bestDescendant.txid | shortenString : 10 }}</span>
<span class="d-inline d-lg-none">{{ cpfpInfo.bestDescendant.txid | shortenString : 8 }}</span>
<span class="d-none d-lg-inline">{{ cpfpInfo.bestDescendant.txid }}</span>
</a>
</td>
<td class="d-none d-lg-table-cell">{{ cpfpInfo.bestDescendant.weight / 4 | vbytes: 2 }}</td>
<td class="d-none d-lg-table-cell" [innerHTML]="cpfpInfo.bestDescendant.weight / 4 | vbytes: 2"></td>
<td>{{ cpfpInfo.bestDescendant.fee / (cpfpInfo.bestDescendant.weight / 4) | number : '1.1-1' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
<td class="d-none d-lg-table-cell"><fa-icon class="arrow-green" [icon]="['fas', 'angle-double-up']" [fixedWidth]="true"></fa-icon></td>
</tr>
@ -174,11 +174,11 @@
<tr *ngFor="let cpfpTx of cpfpInfo.ancestors">
<td><span class="badge badge-primary" i18n="transaction.ancestor|Transaction Ancestor">Ancestor</span></td>
<td><a [routerLink]="['/tx' | relativeUrl, cpfpTx.txid]">
<span class="d-inline d-lg-none">{{ cpfpTx.txid | shortenString : 10 }}</span>
<span class="d-inline d-lg-none">{{ cpfpTx.txid | shortenString : 8 }}</span>
<span class="d-none d-lg-inline">{{ cpfpTx.txid }}</span>
</a>
</td>
<td class="d-none d-lg-table-cell">{{ cpfpTx.weight / 4 | vbytes: 2 }}</td>
<td class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight / 4 | vbytes: 2"></td>
<td>{{ cpfpTx.fee / (cpfpTx.weight / 4) | number : '1.1-1' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
<td class="d-none d-lg-table-cell"><fa-icon *ngIf="roundToOneDecimal(cpfpTx) < roundToOneDecimal(tx)" class="arrow-red" [icon]="['fas', 'angle-double-down']" [fixedWidth]="true"></fa-icon></td>
</tr>
@ -204,15 +204,15 @@
<tbody>
<tr>
<td i18n="transaction.size|Transaction Size">Size</td>
<td>{{ tx.size | bytes: 2 }}</td>
<td [innerHTML]="tx.size | bytes: 2"></td>
</tr>
<tr>
<td i18n="transaction.vsize|Transaction Virtual Size">Virtual size</td>
<td>{{ tx.weight / 4 | vbytes: 2 }}</td>
<td [innerHTML]="tx.weight / 4 | vbytes: 2"></td>
</tr>
<tr>
<td i18n="transaction.weight|Transaction Weight">Weight</td>
<td>{{ tx.weight | wuBytes: 2 }}</td>
<td [innerHTML]="tx.weight | wuBytes: 2"></td>
</tr>
</tbody>
</table>
@ -342,11 +342,13 @@
<tr *ngIf="cpfpInfo && (cpfpInfo.bestDescendant || cpfpInfo.ancestors.length)">
<td i18n="transaction.effective-fee-rate|Effective transaction fee rate">Effective fee rate</td>
<td>
{{ tx.effectiveFeePerVsize | number : '1.1-1' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
<ng-template [ngIf]="tx.status.confirmed">
<app-tx-fee-rating class="d-none d-lg-inline ml-2" *ngIf="tx.fee" [tx]="tx"></app-tx-fee-rating>
</ng-template>
<button type="button" class="btn btn-outline-info btn-sm btn-small-height ml-2 float-right" (click)="showCpfpDetails = !showCpfpDetails">CPFP <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon></button>
<div class="effective-fee-container">
{{ tx.effectiveFeePerVsize | number : '1.1-1' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
<ng-template [ngIf]="tx.status.confirmed">
<app-tx-fee-rating class="d-none d-lg-inline ml-2" *ngIf="tx.fee" [tx]="tx"></app-tx-fee-rating>
</ng-template>
</div>
<button type="button" class="btn btn-outline-info btn-sm btn-small-height float-right" (click)="showCpfpDetails = !showCpfpDetails">CPFP <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon></button>
</td>
</tr>
</tbody>

11
frontend/src/app/components/transaction/transaction.component.scss
View File

@ -110,6 +110,10 @@ h1{
.table {
tr td {
padding: 0.75rem 0.5rem;
@media (min-width: 576px) {
padding: 0.75rem 0.75rem;
}
&:last-child {
text-align: right;
@media (min-width: 768px) {
@ -120,4 +124,11 @@ h1{
display: block;
}
}
}
.effective-fee-container{
display: block;
@media (min-width: 768px){
display: inline-block;
}
}

6
frontend/src/app/dashboard/dashboard.component.html
View File

@ -88,7 +88,7 @@
<td class="table-cell-size">
<div class="progress">
<div class="progress-bar progress-mempool {{ network$ | async }}" role="progressbar" [ngStyle]="{'width': (block.weight / 4000000)*100 + '%' }">&nbsp;</div>
<div class="progress-text">{{ block.size | bytes: 2 }}</div>
<div class="progress-text" [innerHTML]="block.size | bytes: 2"></div>
</div>
</td>
</tr>
@ -114,7 +114,7 @@
<td class="table-cell-txid"><a [routerLink]="['/tx' | relativeUrl, transaction.txid]">{{ transaction.txid | shortenString : 10 }}</a></td>
<td class="table-cell-satoshis"><app-amount [satoshis]="transaction.value" digitsInfo="1.8-8" [noFiat]="true"></app-amount></td>
<td class="table-cell-fiat" *ngIf="(network$ | async) === ''" ><app-fiat [value]="transaction.value" digitsInfo="1.0-0"></app-fiat></td>
<td class="table-cell-fees">{{ transaction.fee / transaction.vsize | number : '1.1-1' }} <span class="fiat" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
<td class="table-cell-fees">{{ transaction.fee / transaction.vsize | number : '1.1-1' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
</tr>
</tbody>
</table>
@ -175,7 +175,7 @@
<div class="card-text" *ngIf="mempoolInfoData.value; else loadingsmall">
<div class="progress">
<div class="progress-bar {{ mempoolInfoData.value.mempoolSizeProgress }}" role="progressbar" [ngStyle]="{'width': (mempoolInfoData.value.memPoolInfo.usage / mempoolInfoData.value.memPoolInfo.maxmempool * 100) + '%' }">&nbsp;</div>
<div class="progress-text">{{ mempoolInfoData.value.memPoolInfo.usage | bytes }} / {{ mempoolInfoData.value.memPoolInfo.maxmempool | bytes }}</div>
<div class="progress-text"><span [innerHTML]="mempoolInfoData.value.memPoolInfo.usage | bytes"></span> / <span [innerHTML]="mempoolInfoData.value.memPoolInfo.maxmempool | bytes"></span></div>
</div>
</div>
</div>

6
frontend/src/app/dashboard/dashboard.component.scss
View File

@ -3,12 +3,6 @@
@media (min-width: 992px) {
padding-bottom: 0px;
}
.table {
.fiat{
color: #ffffff66;
font-size: 10px;
}
}
}
.card {

2
frontend/src/app/shared/pipes/bytes-pipe/bytes.pipe.ts
View File

@ -53,7 +53,7 @@ export class BytesPipe implements PipeTransform {
}
static formatResult(result: number, unit: string): string {
return `${result} ${unit}`;
return `${result} <span class="symbol">${unit}</span>`;
}
static calculateResult(format: { max: number, prev?: ByteUnit }, bytes: number) {

13
frontend/src/app/shared/pipes/bytes-pipe/vbytes.pipe.ts
View File

@ -17,7 +17,7 @@ export class VbytesPipe implements PipeTransform {
'TvB': {max: Number.MAX_SAFE_INTEGER, prev: 'GvB'}
};
transform(input: any, decimal: number = 0, from: ByteUnit = 'vB', to?: ByteUnit): any {
transform(input: any, decimal: number = 0, from: ByteUnit = 'vB', to?: ByteUnit, plainText?: boolean): any {
if (!(isNumberFinite(input) &&
isNumberFinite(decimal) &&
@ -38,7 +38,7 @@ export class VbytesPipe implements PipeTransform {
const result = toDecimal(VbytesPipe.calculateResult(format, bytes), decimal);
return VbytesPipe.formatResult(result, to);
return VbytesPipe.formatResult(result, to, plainText);
}
for (const key in VbytesPipe.formats) {
@ -47,13 +47,16 @@ export class VbytesPipe implements PipeTransform {
const result = toDecimal(VbytesPipe.calculateResult(format, bytes), decimal);
return VbytesPipe.formatResult(result, key);
return VbytesPipe.formatResult(result, key, plainText);
}
}
}
static formatResult(result: number, unit: string): string {
return `${result} ${unit}`;
static formatResult(result: number, unit: string, plainText: boolean): string {
if(plainText){
return `${result} ${unit}`;
}
return `${result} <span class="symbol">${unit}</span>`;
}
static calculateResult(format: { max: number, prev?: ByteUnit }, bytes: number) {

2
frontend/src/app/shared/pipes/bytes-pipe/wubytes.pipe.ts
View File

@ -53,7 +53,7 @@ export class WuBytesPipe implements PipeTransform {
}
static formatResult(result: number, unit: string): string {
return `${result} ${unit}`;
return `${result} <span class="symbol">${unit}</span>`;
}
static calculateResult(format: { max: number, prev?: ByteUnit }, bytes: number) {

15
frontend/src/styles.scss
View File

@ -168,7 +168,20 @@ body {
.symbol {
color: #ffffff66;
font-size: 11px;
font-size: 12px;
}
.progress-text {
span {
color: #fff !important;
}
}
.block-size, .blocks-container {
span {
font-size: 16px;
color: #fff !important;
}
}
.break-all {