diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html index a60e1db0a..c8b4cdf29 100644 --- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html +++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html @@ -60,11 +60,12 @@
- + {{ block.extras.pool.name}}
+
@@ -85,8 +86,6 @@ -
diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss index b8de4f2ca..40a13aa67 100644 --- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss +++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss @@ -123,14 +123,20 @@ } #arrow-up { - position: relative; - left: calc(var(--block-size) * 0.6); - top: calc(var(--block-size) * 1.28); + position: absolute; + left: calc(var(--block-size) * 0.3); + top: calc(var(--block-size) * 1); width: 0; height: 0; border-left: 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); + opacity: 0; + transition: opacity 500ms; + + &.arrow-visible { + opacity: 1; + } } .flashing { @@ -158,6 +164,14 @@ top: 15px; z-index: 101; color: #FFF; + + &.animate { + transition: transform 500ms; + } + + &.selectedBlock { + transform: translateY(20px); + } } .pool-logo { diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts index 1a7598079..71504050c 100644 --- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts +++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts @@ -5,6 +5,7 @@ import { specialBlocks } from '../../app.constants'; import { BlockExtended } from '../../interfaces/node-api.interface'; import { Location } from '@angular/common'; import { CacheService } from '../../services/cache.service'; +import { nextTick } from 'process'; interface BlockchainBlock extends BlockExtended { placeholder?: boolean; @@ -58,6 +59,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy { arrowLeftPx = 30; blocksFilled = false; arrowTransition = '1s'; + animatePoolTag = false; timeLtrSubscription: Subscription; timeLtr: boolean; @@ -186,6 +188,9 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy { .subscribe((state) => { this.markHeight = undefined; if (state.blockHeight !== undefined) { + nextTick(() => { + this.animatePoolTag = true; + }); this.markHeight = state.blockHeight; } this.moveArrowToPosition(false); diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html index 24f229598..65f531a22 100644 --- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html +++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html @@ -51,7 +51,7 @@ -
+
diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss index 2e829b21e..2bf150739 100644 --- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss +++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss @@ -114,12 +114,12 @@ #arrow-up { position: relative; right: calc(var(--block-size) * 0.6); - top: calc(var(--block-size) * 1.20); + top: calc(var(--block-size) * 1); width: 0; height: 0; - 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 var(--fg); + border-left: 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); } .blockLink {