Create basic layout for mining dashboard page - Show miner in blocks

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

@@ -0,0 +1,36 @@
+<div class="container-xl dashboard-container">
+  
+  <!-- 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">
+
+    <!-- pool distribution -->
+    <div class="col">
+      <div class="card">
+        <div class="card-body">
+          <app-pool-ranking [widget]=true></app-pool-ranking>
+          <div class=""><a href="" [routerLink]="['/mining/pools' | relativeUrl]" i18n="dashboard.view-more">View more
+              &raquo;</a></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- difficulty -->
+    <div class="col">
+      <div class="card">
+        <div class="card-body">
+          <app-difficulty [showProgress]=false [showHalving]=true></app-difficulty>
+          Imagine more stuff down there
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>

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

@@ -0,0 +1,50 @@
+.dashboard-container {
+  padding-bottom: 60px;
+  text-align: center;
+  margin-top: 0.5rem;
+  @media (min-width: 992px) {
+    padding-bottom: 0px;
+  }
+  .col {
+    margin-bottom: 1.5rem;
+  }
+}
+
+.card {
+  background-color: #1d1f31;
+  height: 100%;
+}
+
+.card-wrapper {
+  .card {
+    height: auto !important;
+  }
+  .card-body {
+    display: flex;
+    flex: inherit;
+    text-align: center;
+    flex-direction: column;
+    justify-content: space-around;
+    padding: 22px 20px;
+  }
+}
+
+.blockchain-wrapper {
+  position: relative;
+  overflow: hidden;
+  height: 250px;
+
+  -webkit-user-select: none; /* Safari */        
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* IE10+/Edge */
+  user-select: none; /* Standard */
+}
+
+.position-container {
+  position: absolute;
+  top: 75px;
+}
+
+.fade-border {
+  -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent);
+}

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

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-mining-dashboard',
+  templateUrl: './mining-dashboard.component.html',
+  styleUrls: ['./mining-dashboard.component.scss']
+})
+export class MiningDashboardComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}