[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);
   }
 }

frontend/src/app/components/mining-dashboard/mining-dashboard.component.html

@@ -1,13 +1,10 @@
-<div class="container-xl dashboard-container">
+<!-- lastest blocks -->
+<div id="blockchain-container" class="fade-border" dir="ltr" #blockchainContainer>
+  <app-blockchain [miningInfo]=true></app-blockchain>
+</div>
+
+<div class="container-xl">
   
-  <!-- lastest blocks -->
-  <div class="text-center" class="blockchain-wrapper fade-border">
-    <div class="position-container">
-      <span>
-        <app-blockchain-blocks [miningInfo]="true"></app-blockchain-blocks>
-      </span>
-    </div>
-  </div>
 
   <div class="row row-cols-1 row-cols-md-2 mt-3">
 

frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss

@@ -29,22 +29,19 @@
   }
 }
 
-.blockchain-wrapper {
+#blockchain-container {
   position: relative;
-  overflow: hidden;
+  overflow-x: scroll;
-  height: 250px;
+  overflow-y: hidden;
-
+  scrollbar-width: none;
-  -webkit-user-select: none; /* Safari */        
+  -ms-overflow-style: none;
-  -moz-user-select: none; /* Firefox */
-  -ms-user-select: none; /* IE10+/Edge */
-  user-select: none; /* Standard */
 }
 
-.position-container {
+#blockchain-container::-webkit-scrollbar {
-  position: absolute;
+  display: none;
-  top: 75px;
 }
 
 .fade-border {
-  -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent);
+  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 80%, transparent 100%)
 }
+  

frontend/src/app/services/state.service.ts

@@ -100,6 +100,7 @@ export class StateService {
   keyNavigation$ = new Subject<KeyboardEvent>();
 
   blockScrolling$: Subject<boolean> = new Subject<boolean>();
+  public blockShifted: boolean = false;
 
   constructor(
     @Inject(PLATFORM_ID) private platformId: any,