Mining dashboard layout matches main dashboard layout

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

@@ -1,4 +1,4 @@
-<div class="main-title" i18n="dashboard.difficulty-adjustment">Difficulty Adjustment</div>
+<div *ngIf="showTitle" class="main-title" i18n="dashboard.difficulty-adjustment">Difficulty Adjustment</div>
 <div class="card-wrapper">
   <div class="card">
     <div class="card-body more-padding">

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

@@ -28,8 +28,9 @@ export class DifficultyComponent implements OnInit {
   isLoadingWebSocket$: Observable<boolean>;
   difficultyEpoch$: Observable<EpochProgress>;
 
-  @Input() showProgress: boolean = true;
+  @Input() showProgress = true;
-  @Input() showHalving: boolean = false;
+  @Input() showHalving = false;
+  @Input() showTitle = true;
 
   constructor(
     public stateService: StateService,

frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss

@@ -29,7 +29,7 @@
 .chart-widget {
   width: 100%;
   height: 100%;
-  max-height: 275px;
+  max-height: 325px;
 }
 
 .formRadioGroup {

frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html

@@ -27,7 +27,7 @@
 
   <div *ngIf="hashrateObservable$ | async" [class]="!widget ? 'chart' : 'chart-widget'"
     echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
-  <div class="text-center loadingGraphs" [class]="widget ? 'widget' : ''" *ngIf="isLoading">
+  <div class="text-center loadingGraphs" *ngIf="isLoading">
     <div class="spinner-border text-light"></div>
   </div>
 

frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss

@@ -29,7 +29,7 @@
 .chart-widget {
   width: 100%;
   height: 100%;
-  max-height: 275px;
+  max-height: 325px;
 }
 
 .formRadioGroup {

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

@@ -3,26 +3,37 @@
   <div class="row row-cols-1 row-cols-md-2">
 
     <div class="col">
-      <div class="card double">
+      <div class="main-title">Placeholder</div>
+      <div class="card" style="height: 123px">
+      </div>
+    </div>
+
+    <!-- difficulty adjustment -->
+    <div class="col">
+      <div class="main-title" i18n="dashboard.difficulty-adjustment">Difficulty Adjustment</div>
+      <div class="card" style="height: 123px">
+        <app-difficulty [showTitle]="false"></app-difficulty>
+      </div>
+    </div>
+
+    <!-- pool distribution -->
+    <div class="col">
+      <div class="card" style="height: 385px">
         <div class="card-body">
-          <!-- pool distribution -->
           <h5 class="card-title">
             <a href="" [routerLink]="['/mining/pools' | relativeUrl]" i18n="mining.pool-share">
               Mining Pools Share (1w)
             </a>
           </h5>
           <app-pool-ranking [widget]=true></app-pool-ranking>
-
-          <!-- pools hashrate -->
-          <app-hashrate-chart-pools [widget]=true></app-hashrate-chart-pools>
         </div>
       </div>
     </div>
 
+    <!-- hashrate -->
     <div class="col">
-      <div class="card">
+      <div class="card" style="height: 385px">
         <div class="card-body">
-          <!-- hashrate -->
           <h5 class="card-title">
             <a class="link" href="" [routerLink]="['/mining/hashrate' | relativeUrl]" i18n="mining.hashrate">
               Hashrate (1y)
@@ -31,7 +42,22 @@
           <app-hashrate-chart [widget]=true></app-hashrate-chart>
         </div>
       </div>
-    </div>  
+    </div>
+
+    <!-- pools hashrate -->
+    <div class="col">
+      <div class="card" style="height: 385px">
+        <div class="card-body">
+          <!-- pool dominance -->
+          <h5 class="card-title">
+            <a href="" [routerLink]="['/mining/hashrate/pools' | relativeUrl]" i18n="mining.pool-historical-dominance">
+              Mining Pools Dominance (1y)
+            </a>
+          </h5>
+          <app-hashrate-chart-pools [widget]=true></app-hashrate-chart-pools>
+        </div>
+      </div>
+    </div>
 
   </div>
 </div>

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

@@ -12,10 +12,6 @@
 
 .card {
   background-color: #1d1f31;
-  height: 340px;
-}
-.card.double {
-  height: 620px;
 }
 
 .card-title {

frontend/src/app/components/pool-ranking/pool-ranking.component.html

@@ -2,7 +2,7 @@
 
   <div [class]="widget ? 'chart-widget' : 'chart'"
     echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)"></div>
-  <div class="text-center loadingGraphs" [class]="widget ? 'widget' : ''" *ngIf="isLoading">
+  <div class="text-center loadingGraphs" *ngIf="isLoading">
     <div class="spinner-border text-light"></div>
   </div>
 

frontend/src/app/components/pool-ranking/pool-ranking.component.scss

@@ -7,7 +7,7 @@
 .chart-widget {
   width: 100%;
   height: 100%;
-  max-height: 275px;
+  max-height: 325px;
 }
 
 .formRadioGroup {