mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-02-25 07:07:36 +01:00
Code Issues Projects Releases Wiki Activity

align block arrows & reposition selected block pool tag

Browse source
This commit is contained in:
Mononaut 2024-07-10 08:15:29 +00:00
parent a530b70f9f
commit e054e1d5a3
No known key found for this signature in database
GPG key ID: A3F058E41374C04E
5 changed files with 29 additions and 11 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

@ -60,11 +60,12 @@
</ng-container> </ng-container>
</div> </div>
<div class="animated" *ngIf="block.extras?.pool != undefined && showPools"> <div class="animated" *ngIf="block.extras?.pool != undefined && showPools">
<a [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-pool'" class="badge" [routerLink]="[('/mining/pool/' + block.extras.pool.slug) | relativeUrl]"> <a [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-pool'" class="badge" [class.animate]="animatePoolTag" [class.selectedBlock]="markHeight === block.height" [routerLink]="[('/mining/pool/' + block.extras.pool.slug) | relativeUrl]">
<img class="pool-logo" [src]="'/resources/mining-pools/' + block.extras.pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + block.extras.pool.name + ' mining pool'"> <img class="pool-logo" [src]="'/resources/mining-pools/' + block.extras.pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + block.extras.pool.name + ' mining pool'">
{{ block.extras.pool.name}} {{ block.extras.pool.name}}
</a> </a>
</div> </div>
<div [class.arrow-visible]="markHeight === block.height" id="arrow-up"></div>
</div> </div>
</ng-container> </ng-container>
<ng-template #placeholderBlock> <ng-template #placeholderBlock>
@ -85,8 +86,6 @@
</ng-container> </ng-container>
</ng-template> </ng-template>
</div> </div>
<div [hidden]="!arrowVisible" id="arrow-up" [style.transition]="arrowTransition"
[ngStyle]="{'left': arrowLeftPx + 8 + 'px' }"></div>
</div> </div>
<ng-template #loadingBlocksTemplate> <ng-template #loadingBlocksTemplate>

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

@ -123,14 +123,20 @@
} }
#arrow-up { #arrow-up {
position: relative; position: absolute;
left: calc(var(--block-size) * 0.6); left: calc(var(--block-size) * 0.3);
top: calc(var(--block-size) * 1.28); top: calc(var(--block-size) * 1);
width: 0; width: 0;
height: 0; height: 0;
border-left: calc(var(--block-size) * 0.2) solid transparent; border-left: calc(var(--block-size) * 0.2) solid transparent;
border-right: calc(var(--block-size) * 0.2) solid transparent; border-right: calc(var(--block-size) * 0.2) solid transparent;
border-bottom: calc(var(--block-size) * 0.2) solid var(--fg); border-bottom: calc(var(--block-size) * 0.2) solid var(--fg);
opacity: 0;
transition: opacity 500ms;
&.arrow-visible {
opacity: 1;
}
} }
.flashing { .flashing {
@ -158,6 +164,14 @@
top: 15px; top: 15px;
z-index: 101; z-index: 101;
color: #FFF; color: #FFF;
&.animate {
transition: transform 500ms;
}
&.selectedBlock {
transform: translateY(20px);
}
} }
.pool-logo { .pool-logo {

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

@ -5,6 +5,7 @@ import { specialBlocks } from '../../app.constants';
import { BlockExtended } from '../../interfaces/node-api.interface'; import { BlockExtended } from '../../interfaces/node-api.interface';
import { Location } from '@angular/common'; import { Location } from '@angular/common';
import { CacheService } from '../../services/cache.service'; import { CacheService } from '../../services/cache.service';
import { nextTick } from 'process';
interface BlockchainBlock extends BlockExtended { interface BlockchainBlock extends BlockExtended {
placeholder?: boolean; placeholder?: boolean;
@ -58,6 +59,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
arrowLeftPx = 30; arrowLeftPx = 30;
blocksFilled = false; blocksFilled = false;
arrowTransition = '1s'; arrowTransition = '1s';
animatePoolTag = false;
timeLtrSubscription: Subscription; timeLtrSubscription: Subscription;
timeLtr: boolean; timeLtr: boolean;
@ -186,6 +188,9 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
.subscribe((state) => { .subscribe((state) => {
this.markHeight = undefined; this.markHeight = undefined;
if (state.blockHeight !== undefined) { if (state.blockHeight !== undefined) {
nextTick(() => {
this.animatePoolTag = true;
});
this.markHeight = state.blockHeight; this.markHeight = state.blockHeight;
} }
this.moveArrowToPosition(false); this.moveArrowToPosition(false);

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

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

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

@ -114,12 +114,12 @@
#arrow-up { #arrow-up {
position: relative; position: relative;
right: calc(var(--block-size) * 0.6); right: calc(var(--block-size) * 0.6);
top: calc(var(--block-size) * 1.20); top: calc(var(--block-size) * 1);
width: 0; width: 0;
height: 0; height: 0;
border-left: calc(var(--block-size) * 0.3) solid transparent; border-left: calc(var(--block-size) * 0.2) solid transparent;
border-right: calc(var(--block-size) * 0.3) solid transparent; border-right: calc(var(--block-size) * 0.2) solid transparent;
border-bottom: calc(var(--block-size) * 0.3) solid var(--fg); border-bottom: calc(var(--block-size) * 0.2) solid var(--fg);
} }
.blockLink { .blockLink {