mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-02-23 14:40:38 +01:00
Code Issues Projects Releases Wiki Activity

Add simplified tracker blockchain component

Browse source
This commit is contained in:
Mononaut 2024-04-13 08:04:58 +00:00
parent 786ec7fff1
commit 61a308cbc6
No known key found for this signature in database
GPG key ID: A3F058E41374C04E
5 changed files with 20 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
View file

@ -124,13 +124,13 @@
#arrow-up {
position: relative;
left: 30px;
top: 140px;
left: calc(var(--block-size) * 0.6);
top: calc(var(--block-size) * 1.12);
width: 0;
height: 0;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-bottom: 35px solid #FFF;
border-left: calc(var(--block-size) * 0.3) solid transparent;
border-right: calc(var(--block-size) * 0.3) solid transparent;
border-bottom: calc(var(--block-size) * 0.3) solid #FFF;
}
.flashing {

2
frontend/src/app/components/clockchain/clockchain.component.ts
View file

@ -11,7 +11,7 @@ import { StateService } from '../../services/state.service';
export class ClockchainComponent implements OnInit, OnChanges, OnDestroy {
@Input() width: number = 300;
@Input() height: number = 60;
@Input() mode: 'mempool' | 'mined';
@Input() mode: 'mempool' | 'mined' | 'none';
@Input() index: number = 0;
mempoolBlocks: number = 3;

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

@ -51,7 +51,7 @@
</div>
</ng-template>
</div>
<div *ngIf="arrowVisible" id="arrow-up" [ngStyle]="{'right': rightPosition + 75 + 'px', transition: transition }" [class.blink]="txPosition?.accelerated"></div>
<div *ngIf="arrowVisible" id="arrow-up" [ngStyle]="{'right': rightPosition + (blockWidth * 0.3) + containerOffset + 'px', transition: transition }" [class.blink]="txPosition?.accelerated"></div>
</div>
</ng-container>

10
frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
View file

@ -113,13 +113,13 @@
#arrow-up {
position: relative;
right: 75px;
top: 140px;
right: calc(var(--block-size) * 0.6);
top: calc(var(--block-size) * 1.12);
width: 0;
height: 0;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-bottom: 35px solid #FFF;
border-left: calc(var(--block-size) * 0.3) solid transparent;
border-right: calc(var(--block-size) * 0.3) solid transparent;
border-bottom: calc(var(--block-size) * 0.3) solid #FFF;
}
.blockLink {

9
frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
View file

@ -70,6 +70,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
tabHidden = false;
feeRounding = '1.0-0';
maxArrowPosition = 0;
rightPosition = 0;
transition = 'background 2s, right 2s, transform 1s';
@ -326,6 +327,11 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
if (blocks.length) {
blocks[blocks.length - 1].isStack = blocks[blocks.length - 1].blockVSize > this.stateService.blockVSize;
}
if (this.count) {
this.maxArrowPosition = (Math.min(blocks.length, this.count) * (this.blockWidth + this.blockPadding)) - this.blockPadding;
} else {
this.maxArrowPosition = (Math.min(blocks.length, blocksAmount) * (this.blockWidth + this.blockPadding)) - this.blockPadding;
}
return blocks;
}
@ -386,7 +392,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
} else if (this.markIndex > -1) {
clearTimeout(this.resetTransitionTimeout);
this.transition = 'inherit';
this.rightPosition = this.markIndex * (this.blockWidth + this.blockPadding) + 0.5 * this.blockWidth;
this.rightPosition = Math.min(this.maxArrowPosition, this.markIndex * (this.blockWidth + this.blockPadding) + 0.5 * this.blockWidth);
this.arrowVisible = true;
this.resetTransitionTimeout = window.setTimeout(() => {
@ -436,6 +442,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
}
}
}
this.rightPosition = Math.min(this.maxArrowPosition, this.rightPosition);
}
mountEmptyBlocks() {