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

responsive clock, fix blockchain

Browse Source
This commit is contained in:
Mononaut
2023-04-19 03:34:13 +09:00
parent b125ded0f2
commit b79dd13e55
21 changed files with 412 additions and 396 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,21 +1,21 @@
<div class="blocks-container blockchain-blocks-container" [class.time-ltr]="timeLtr" [class.tiny]="tiny"
[style.left]="static ? (offset || 0) + 'px' : null"
<div class="blocks-container blockchain-blocks-container" [class.time-ltr]="timeLtr" [class.minimal]="minimal"
[style.left]="static ? (offset || 0) + 'px' : null" [style.--block-size]="blockWidth+'px'"
*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 [attr.data-cy]="'bitcoin-block-offset-' + offset + '-index-' + i"
class="text-center bitcoin-block mined-block blockchain-blocks-offset-{{ offset }}-index-{{ i }}"
[class.offscreen]="tiny && i >= 6"
[class.offscreen]="!static && count && i >= count"
id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]"
[class.blink-bg]="isSpecial(block.height)">
<a draggable="false" [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }"
class="blockLink" [ngClass]="{'disabled': (this.stateService.blockScrolling$ | async)}">&nbsp;</a>
<div *ngIf="!tiny" [attr.data-cy]="'bitcoin-block-' + i + '-height'" class="block-height">
<div *ngIf="!minimal" [attr.data-cy]="'bitcoin-block-' + i + '-height'" class="block-height">
<a [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height
}}</a>
</div>
<div class="block-body">
<ng-container *ngIf="!tiny">
<ng-container *ngIf="!minimal">
<div *ngIf="block?.extras; else emptyfees" [attr.data-cy]="'bitcoin-block-offset=' + offset + '-index-' + i + '-fees'" class="fees">
~{{ block?.extras?.medianFee | number:feeRounding }} <ng-container
i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
@@ -82,11 +82,11 @@
</div>
<ng-template #loadingBlocksTemplate>
<div class="blocks-container" [class.time-ltr]="timeLtr">
<div class="blocks-container" [class.time-ltr]="timeLtr" [style.--block-size]="blockWidth+'px'">
<div class="flashing">
<div *ngFor="let block of emptyBlocks; let i = index; trackBy: trackByBlocksFn">
<div class="text-center bitcoin-block mined-block" id="bitcoin-block-{{ block.height }}"
[ngStyle]="emptyBlockStyles[i]"></div>
[ngStyle]="emptyBlockStyles[i]" [class.offscreen]="!static && count && i >= count"></div>
</div>
</div>
</div>

24
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
View File

@@ -1,6 +1,6 @@
.bitcoin-block {
width: 125px;
height: 125px;
width: var(--block-size);
height: var(--block-size);
}
.blockLink {
@@ -39,9 +39,11 @@
}
.blocks-container {
--block-size: 125px;
--block-offset: calc(0.32 * var(--block-size));
position: absolute;
top: 0px;
left: 40px;
left: var(--block-offset);
}
.block-body {
@@ -81,11 +83,11 @@
.bitcoin-block::after {
content: '';
width: 125px;
height: 24px;
width: var(--block-size);
height: calc(0.192 * var(--block-size));
position:absolute;
top: -24px;
left: -20px;
top: calc(-0.192 * var(--block-size));
left: calc(-0.16 * var(--block-size));
background-color: #232838;
transform:skew(40deg);
transform-origin:top;
@@ -93,11 +95,11 @@
.bitcoin-block::before {
content: '';
width: 20px;
height: 125px;
width: calc(0.16 * var(--block-size));
height: var(--block-size);
position: absolute;
top: -12px;
left: -20px;
top: calc(-0.096 * var(--block-size));
left: calc(-0.16 * var(--block-size));
background-color: #191c27;
transform: skewY(50deg);

32
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
View File

@@ -24,7 +24,8 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
@Input() count: number = 8; // number of blocks in this chunk (dynamic blocks only)
@Input() loadingTip: boolean = false;
@Input() connected: boolean = true;
@Input() tiny: boolean = false;
@Input() minimal: boolean = false;
@Input() blockWidth: number = 125;
specialBlocks = specialBlocks;
network = '';
@@ -52,6 +53,10 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
timeLtrSubscription: Subscription;
timeLtr: boolean;
blockOffset: number = 155;
dividerBlockOffset: number = 205;
blockPadding: number = 30;
gradientColors = {
'': ['#9339f4', '#105fb0'],
bisq: ['#9339f4', '#105fb0'],
@@ -119,7 +124,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
this.blockStyles = [];
if (this.blocksFilled && block.height > this.chainTip) {
this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i, i ? -155 : -205)));
this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i, i ? -this.blockOffset : -this.dividerBlockOffset)));
setTimeout(() => {
this.blockStyles = [];
this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i)));
@@ -160,6 +165,13 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
}
ngOnChanges(changes: SimpleChanges): void {
if (changes.blockWidth && this.blockWidth) {
this.blockPadding = 0.24 * this.blockWidth;
this.blockOffset = this.blockWidth + this.blockPadding;
this.dividerBlockOffset = this.blockOffset + (0.4 * this.blockWidth);
this.blockStyles = [];
this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i)));
}
if (this.static) {
const animateSlide = changes.height && (changes.height.currentValue === changes.height.previousValue + 1);
this.updateStaticBlocks(animateSlide);
@@ -192,14 +204,14 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
}
this.arrowVisible = true;
if (newBlockFromLeft) {
this.arrowLeftPx = blockindex * 155 + 30 - 205;
this.arrowLeftPx = blockindex * this.blockOffset + this.blockPadding - this.dividerBlockOffset;
setTimeout(() => {
this.arrowTransition = '2s';
this.arrowLeftPx = blockindex * 155 + 30;
this.arrowLeftPx = blockindex * this.blockOffset + this.blockPadding;
this.cd.markForCheck();
}, 50);
} else {
this.arrowLeftPx = blockindex * 155 + 30;
this.arrowLeftPx = blockindex * this.blockOffset + this.blockPadding;
if (!animate) {
setTimeout(() => {
this.arrowTransition = '2s';
@@ -246,7 +258,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
}
this.blocks = this.blocks.slice(0, this.count);
this.blockStyles = [];
this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i, animateSlide ? -155 : 0)));
this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i, animateSlide ? -this.blockOffset : 0)));
this.cd.markForCheck();
if (animateSlide) {
// animate blocks slide right
@@ -288,7 +300,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
}
return {
left: addLeft + 155 * index + 'px',
left: addLeft + this.blockOffset * index + 'px',
background: `repeating-linear-gradient(
#2d3348,
#2d3348 ${greenBackgroundHeight}%,
@@ -310,7 +322,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
const addLeft = animateEnterFrom || 0;
return {
left: addLeft + (155 * index) + 'px',
left: addLeft + (this.blockOffset * index) + 'px',
background: "#2d3348",
};
}
@@ -318,7 +330,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
getStyleForPlaceholderBlock(index: number, animateEnterFrom: number = 0) {
const addLeft = animateEnterFrom || 0;
return {
left: addLeft + (155 * index) + 'px',
left: addLeft + (this.blockOffset * index) + 'px',
};
}
@@ -326,7 +338,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
const addLeft = animateEnterFrom || 0;
return {
left: addLeft + 155 * this.emptyBlocks.indexOf(block) + 'px',
left: addLeft + this.blockOffset * this.emptyBlocks.indexOf(block) + 'px',
background: "#2d3348",
};
}