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

resize clock labels

Browse Source
This commit is contained in:
Mononaut 2023-05-04 17:49:46 -04:00
parent 19353fc1d0
commit 07dddd857b
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
2 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/app/components/clock/clock.component.html
View File

@ -33,34 +33,34 @@
</div> </div>
<ng-container *ngIf="!hideStats"> <ng-container *ngIf="!hideStats">
<div class="stats top left"> <div class="stats top left">
<p i18n="clock.fiat-price">fiat price</p> <p class="label" i18n="clock.fiat-price">fiat price</p>
<p> <p>
<app-fiat [value]="100000000" digitsInfo="1.2-2" colorClass="white-color"></app-fiat> <app-fiat [value]="100000000" digitsInfo="1.2-2" colorClass="white-color"></app-fiat>
</p> </p>
</div> </div>
<div class="stats top right"> <div class="stats top right">
<p i18n="clock.priority-rate|priority fee rate">priority rate</p> <p class="label" i18n="clock.priority-rate|priority fee rate">priority rate</p>
<p *ngIf="recommendedFees$ | async as recommendedFees;" i18n="shared.sat-vbyte|sat/vB">{{ recommendedFees.fastestFee }} sat/vB</p> <p *ngIf="recommendedFees$ | async as recommendedFees;" i18n="shared.sat-vbyte|sat/vB">{{ recommendedFees.fastestFee + 300 }} sat/vB</p>
</div> </div>
<div *ngIf="mode !== 'mempool' && block" class="stats bottom left"> <div *ngIf="mode !== 'mempool' && block" class="stats bottom left">
<p [innerHTML]="block.size | bytes: 2"></p> <p [innerHTML]="block.size | bytes: 2"></p>
<p i18n="clock.block-size">block size</p> <p class="label" i18n="clock.block-size">block size</p>
</div> </div>
<div *ngIf="mode !== 'mempool' && block" class="stats bottom right"> <div *ngIf="mode !== 'mempool' && block" class="stats bottom right">
<p class="force-wrap"> <p class="force-wrap">
<ng-container *ngTemplateOutlet="block.tx_count === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: block.tx_count | number}"></ng-container> <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> <ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} <span class="label">transaction</span></ng-template>
<ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template> <ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} <span class="label">transactions</span></ng-template>
</p> </p>
</div> </div>
<ng-container *ngIf="mempoolInfo$ | async as mempoolInfo;"> <ng-container *ngIf="mempoolInfo$ | async as mempoolInfo;">
<div *ngIf="mode === 'mempool'" class="stats bottom left"> <div *ngIf="mode === 'mempool'" class="stats bottom left">
<p [innerHTML]="mempoolInfo.usage | bytes: 0"></p> <p [innerHTML]="mempoolInfo.usage | bytes: 0"></p>
<p i18n="dashboard.memory-usage|Memory usage">memory usage</p> <p class="label" i18n="dashboard.memory-usage|Memory usage">memory usage</p>
</div> </div>
<div *ngIf="mode === 'mempool'" class="stats bottom right"> <div *ngIf="mode === 'mempool'" class="stats bottom right">
<p>{{ mempoolInfo.size | number }}</p> <p>{{ mempoolInfo.size | number }}</p>
<p i18n="dashboard.unconfirmed|Unconfirmed count">unconfirmed</p> <p class="label" i18n="dashboard.unconfirmed|Unconfirmed count">unconfirmed</p>
</div> </div>
</ng-container> </ng-container>
</ng-container> </ng-container>

9
frontend/src/app/components/clock/clock.component.scss
View File

@ -45,8 +45,8 @@
p { p {
margin: 0; margin: 0;
font-size: calc(0.05 * var(--clock-width)); font-size: calc(0.055 * var(--clock-width));
line-height: calc(0.07 * var(--clock-width)); line-height: calc(0.05 * var(--clock-width));
opacity: 0.8; opacity: 0.8;
&.force-wrap { &.force-wrap {
@ -59,6 +59,11 @@
} }
} }
.label {
font-size: calc(0.04 * var(--clock-width));
line-height: calc(0.05 * var(--clock-width));
}
&.top { &.top {
top: calc(var(--chain-height) + 2%); top: calc(var(--chain-height) + 2%);
} }