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 @@
+
@@ -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 {