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

convert to CSS variables

Browse Source
This commit is contained in:
natsoni
2024-04-04 15:36:24 +09:00
parent b74fbee069
commit ee92f6639a
84 changed files with 317 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/src/app/components/difficulty/difficulty.component.html
View File

@@ -101,6 +101,47 @@
</div>
<div class="symbol">
<span i18n="difficulty-box.new-subsidy">New subsidy</span>
<div class="item">
<h5 class="card-title" i18n="difficulty-box.remaining">Remaining</h5>
<div class="card-text">
<ng-container *ngTemplateOutlet="epochData.remainingBlocks === 1 ? blocksSingular : blocksPlural; context: {$implicit: epochData.remainingBlocks }"></ng-container>
<ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>
<ng-template #blocksSingular let-i i18n="shared.block">{{ i }} <span class="shared-block">block</span></ng-template>
</div>
<div class="symbol"><app-time-until [time]="epochData.estimatedRetargetDate" [fastRender]="true"></app-time-until></div>
</div>
<div class="item">
<h5 class="card-title" i18n="difficulty-box.estimate">Estimate</h5>
<div *ngIf="epochData.remainingBlocks < 1870; else recentlyAdjusted" class="card-text" [ngStyle]="{'color': epochData.colorAdjustments}">
<span *ngIf="epochData.change > 0; else arrowDownDifficulty" >
<fa-icon class="retarget-sign" [icon]="['fas', 'caret-up']" [fixedWidth]="true"></fa-icon>
</span>
<ng-template #arrowDownDifficulty >
<fa-icon class="retarget-sign" [icon]="['fas', 'caret-down']" [fixedWidth]="true"></fa-icon>
</ng-template>
{{ epochData.change | absolute | number: '1.2-2' }}
<span class="symbol">%</span>
</div>
<ng-template #recentlyAdjusted>
<div class="card-text">&#8212;</div>
</ng-template>
<div class="symbol">
<span i18n="difficulty-box.previous">Previous</span>:
<span [ngStyle]="{'color': epochData.colorPreviousAdjustments}">
<span *ngIf="epochData.previousRetarget > 0; else arrowDownPreviousDifficulty" >
<fa-icon class="previous-retarget-sign" [icon]="['fas', 'caret-up']" [fixedWidth]="true"></fa-icon>
</span>
<ng-template #arrowDownPreviousDifficulty >
<fa-icon class="previous-retarget-sign" [icon]="['fas', 'caret-down']" [fixedWidth]="true"></fa-icon>
</ng-template>
{{ epochData.previousRetarget | absolute | number: '1.2-2' }} </span> %
</div>
</div>
<div class="item" *ngIf="showProgress">
<h5 class="card-title" i18n="difficulty-box.current-period">Current Period</h5>
<div class="card-text">{{ epochData.progress | number: '1.2-2' }} <span class="symbol">%</span></div>
<div class="progress small-bar">
<div class="progress-bar" role="progressbar" style="width: 15%; background-color: var(--primary)" [ngStyle]="{'width': epochData.base}">&nbsp;</div>
</div>
</div>
<div class="item">

6
frontend/src/app/components/difficulty/difficulty.component.scss
View File

@@ -10,7 +10,7 @@
justify-content: space-around;
height: 50.5px;
.shared-block {
color: #ffffff66;
color: var(--transparent-fg);
font-size: 12px;
}
.item {
@@ -91,7 +91,7 @@
}
.card {
background-color: #1d1f31;
background-color: var(--bg);
height: 100%;
}
@@ -103,7 +103,7 @@
.progress {
display: inline-flex;
width: 100%;
background-color: #2d3348;
background-color: var(--secondary);
height: 1.1rem;
max-width: 180px;
}

14
frontend/src/app/components/difficulty/difficulty.component.ts
View File

@@ -82,24 +82,24 @@ export class DifficultyComponent implements OnInit {
.pipe(
map(([blocks, da]) => {
const maxHeight = blocks.reduce((max, block) => Math.max(max, block.height), 0);
let colorAdjustments = '#ffffff66';
let colorAdjustments = 'var(--transparent-fg)';
if (da.difficultyChange > 0) {
colorAdjustments = '#3bcc49';
colorAdjustments = 'var(--green)';
}
if (da.difficultyChange < 0) {
colorAdjustments = '#dc3545';
colorAdjustments = 'var(--red)';
}
let colorPreviousAdjustments = '#dc3545';
let colorPreviousAdjustments = 'var(--red)';
if (da.previousRetarget) {
if (da.previousRetarget >= 0) {
colorPreviousAdjustments = '#3bcc49';
colorPreviousAdjustments = 'var(--green)';
}
if (da.previousRetarget === 0) {
colorPreviousAdjustments = '#ffffff66';
colorPreviousAdjustments = 'var(--transparent-fg)';
}
} else {
colorPreviousAdjustments = '#ffffff66';
colorPreviousAdjustments = 'var(--transparent-fg)';
}
const blocksUntilHalving = 210000 - (maxHeight % 210000);