[mempool | blockchain] position changes between main/mining dashboards

frontend/src/app/components/blockchain/blockchain.component.html

@@ -1,8 +1,8 @@
-<div class="text-center" class="blockchain-wrapper">
+<div class="text-center" class="blockchain-wrapper animate" #container [class]="stateService.blockShifted ? 'move-left' : ''">
   <div class="position-container {{ network }}">
     <span>
       <app-mempool-blocks></app-mempool-blocks>
-      <app-blockchain-blocks></app-blockchain-blocks>
+      <app-blockchain-blocks [miningInfo]="miningInfo"></app-blockchain-blocks>
       <div id="divider"></div>
     </span>
   </div>

frontend/src/app/components/blockchain/blockchain.component.scss

@@ -16,7 +16,6 @@
 }
 
 .blockchain-wrapper {
-  overflow: hidden;
   height: 250px;
 
   -webkit-user-select: none; /* Safari */        
@@ -61,3 +60,13 @@
   left: -150px;
   top: 0px;
 }
+
+.animate {
+  transition: all 1s ease-in-out;
+}
+.move-left {
+  transform: translate(-40%, 0);
+	@media (max-width: 767.98px) {
+    transform: translate(-85%, 0);
+	}
+}

frontend/src/app/components/blockchain/blockchain.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy, Input, ViewChild, ElementRef } from '@angular/core';
 import { StateService } from 'src/app/services/state.service';
 
 @Component({
@@ -8,13 +8,25 @@ import { StateService } from 'src/app/services/state.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BlockchainComponent implements OnInit {
+  @Input() miningInfo: boolean = false;
+  @ViewChild('container') container: ElementRef;
   network: string;
 
   constructor(
-    private stateService: StateService,
+    public stateService: StateService,
   ) {}
 
   ngOnInit() {
     this.network = this.stateService.network;
+
+    setTimeout(() => {
+      if (this.miningInfo) {
+        this.container.nativeElement.className += ' move-left';
+        this.stateService.blockShifted = true;
+      } else if (this.stateService.blockShifted) {
+        this.container.nativeElement.className = this.container.nativeElement.className.replace(' move-left', '');
+        this.stateService.blockShifted = false;
+      }
+    }, 250);
   }
 }