mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-03-03 17:47:01 +01:00
Code Issues Projects Releases Wiki Activity

clock selected block arrow

Browse source
This commit is contained in:
Mononaut 2023-05-04 17:50:27 -04:00
parent 07dddd857b
commit 9671259f5c
No known key found for this signature in database
GPG key ID: A3F058E41374C04E
10 changed files with 41 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
View file

@ -3,6 +3,11 @@
*ngIf="static || (loadingBlocks$ | async) === false; else loadingBlocksTemplate">
<div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn">
<ng-container *ngIf="connected && block && !block.loading && !block.placeholder; else placeholderBlock">
<div
*ngIf="minimal && spotlight < 0 && chainTip + spotlight + 1 === block.height"
class="spotlight-bottom"
[style.left]="blockStyles[i].left"
></div>
<div [attr.data-cy]="'bitcoin-block-offset-' + offset + '-index-' + i"
class="text-center bitcoin-block mined-block blockchain-blocks-offset-{{ offset }}-index-{{ i }}"
[class.offscreen]="!static && count && i >= count"

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

@ -175,3 +175,15 @@
transform: scaleX(-1);
}
}
.spotlight-bottom {
position: absolute;
width: calc(0.6 * var(--block-size));
height: calc(0.25 * var(--block-size));
border-left: solid calc(0.3 * var(--block-size)) transparent;
border-bottom: solid calc(0.3 * var(--block-size)) white;
border-right: solid calc(0.3 * var(--block-size)) transparent;
transform: translate(calc(0.2 * var(--block-size)), calc(1.1 * var(--block-size)));
border-radius: 2px;
z-index: -1;
}

1
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
View file

@ -26,6 +26,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
@Input() connected: boolean = true;
@Input() minimal: boolean = false;
@Input() blockWidth: number = 125;
@Input() spotlight: number = 0;
specialBlocks = specialBlocks;
network = '';

2
frontend/src/app/components/clock/clock.component.html
View file

@ -1,7 +1,7 @@
<div class="clock-wrapper" [style]="wrapperStyle">
<div class="clockchain-bar" [style.height]="chainHeight + 'px'">
<div class="clockchain">
<app-clockchain [width]="chainWidth" [height]="chainHeight"></app-clockchain>
<app-clockchain [width]="chainWidth" [height]="chainHeight" [mode]="mode"></app-clockchain>
</div>
</div>
<div class="clock-face">

2
frontend/src/app/components/clock/clock.component.scss
View file

@ -23,7 +23,7 @@
width: 100%;
height: 15.625%;
z-index: 2;
overflow: hidden;
// overflow: hidden;
// background: #1d1f31;
// box-shadow: 0 0 15px #000;
}

4
frontend/src/app/components/clockchain/clockchain.component.html
View file

@ -5,8 +5,8 @@
<div class="position-container" [ngClass]="network ? network : ''" [style.top]="(height / 3) + 'px'">
<span>
<div class="blocks-wrapper">
<app-mempool-blocks [minimal]="true" [count]="mempoolBlocks" [blockWidth]="blockWidth"></app-mempool-blocks>
<app-blockchain-blocks [minimal]="true" [count]="blockchainBlocks" [blockWidth]="blockWidth"></app-blockchain-blocks>
<app-mempool-blocks [minimal]="true" [count]="mempoolBlocks" [blockWidth]="blockWidth" [spotlight]="mode === 'mempool' ? 1 : 0"></app-mempool-blocks>
<app-blockchain-blocks [minimal]="true" [count]="blockchainBlocks" [blockWidth]="blockWidth" [spotlight]="mode === 'block' ? -1 : 0"></app-blockchain-blocks>
</div>
<div class="divider" [style.top]="-(height / 6) + 'px'">
<svg

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

@ -11,6 +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' | 'block';
mempoolBlocks: number = 3;
blockchainBlocks: number = 6;

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

@ -2,6 +2,11 @@
<div class="mempool-blocks-container" [class.time-ltr]="timeLtr" [style.--block-size]="blockWidth+'px'" *ngIf="(difficultyAdjustments$ | async) as da;">
<div class="flashing">
<ng-template ngFor let-projectedBlock [ngForOf]="mempoolBlocks$ | async" let-i="index" [ngForTrackBy]="trackByFn">
<div
*ngIf="minimal && spotlight > 0 && spotlight === i + 1"
class="spotlight-bottom"
[style.right]="mempoolBlockStyles[i].right"
></div>
<div @blockEntryTrigger [@.disabled]="i > 0 || !animateEntry" [attr.data-cy]="'mempool-block-' + i" class="bitcoin-block text-center mempool-block" [class.hide-block]="count && i >= count" id="mempool-block-{{ i }}" [ngStyle]="mempoolBlockStyles[i]" [class.blink-bg]="projectedBlock.blink">
<a draggable="false" [routerLink]="['/mempool-block/' | relativeUrl, i]"
class="blockLink" [ngClass]="{'disabled': (this.stateService.blockScrolling$ | async)}">&nbsp;</a>

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

@ -158,3 +158,15 @@
transform: translateX(70px);
}
}
.spotlight-bottom {
position: absolute;
width: calc(0.6 * var(--block-size));
height: calc(0.25 * var(--block-size));
border-left: solid calc(0.3 * var(--block-size)) transparent;
border-bottom: solid calc(0.3 * var(--block-size)) white;
border-right: solid calc(0.3 * var(--block-size)) transparent;
transform: translate(calc(-0.2 * var(--block-size)), calc(1.1 * var(--block-size)));
border-radius: 2px;
z-index: -1;
}

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

@ -27,6 +27,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
@Input() minimal: boolean = false;
@Input() blockWidth: number = 125;
@Input() count: number = null;
@Input() spotlight: number = 0;
specialBlocks = specialBlocks;
mempoolBlocks: MempoolBlock[] = [];