"view more" links - placeholders

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

@@ -31,22 +31,22 @@
     <div class="spinner-border text-light"></div>
   </div>
   
-  <div class="mt-3" *ngIf="tableOnly || !widget">
+  <div [class]="!widget ? 'mt-3 p-2' : 'ml-4 mr-4 mt-1'" *ngIf="tableOnly">
-    <table class="table table-borderless table-sm text-center">
+    <table class="table table-borderless table-sm text-left" [class]="widget ? 'compact' : ''">
       <thead>
         <tr>
           <th class="d-none d-md-block" i18n="block.timestamp">Timestamp</th>
           <th i18n="mining.adjusted">Adjusted</th>
-          <th i18n="mining.difficulty">Difficulty</th>
+          <th i18n="mining.difficulty" class="text-right">Difficulty</th>
-          <th i18n="mining.change">Change</th>
+          <th i18n="mining.change" class="text-right">Change</th>
         </tr>
       </thead>
       <tbody *ngIf="(hashrateObservable$ | async) as data">
         <tr *ngFor="let diffChange of data.difficulty">
           <td class="d-none d-md-block">&lrm;{{ diffChange.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}</td>
           <td><app-time-since [time]="diffChange.timestamp" [fastRender]="true"></app-time-since></td>
-          <td>{{ diffChange.difficultyShorten }}</td>
+          <td class="text-right">{{ diffChange.difficultyShorten }}</td>
-          <td [style]="diffChange.change >= 0 ? 'color: #42B747' : 'color: #B74242'">{{ formatNumber(diffChange.change, locale, '1.2-2') }}%</td>
+          <td class="text-right" [style]="diffChange.change >= 0 ? 'color: #42B747' : 'color: #B74242'">{{ formatNumber(diffChange.change, locale, '1.2-2') }}%</td>
         </tr>
       </tbody>
     </table>

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

@@ -29,7 +29,7 @@
 .chart-widget {
   width: 100%;
   height: 100%;
-  max-height: 325px;
+  max-height: 293px;
 }
 
 .formRadioGroup {
@@ -48,3 +48,8 @@
     }
   }
 }
+
+.compact td {
+  padding: 0 !important;
+  margin: 0.15rem !important;
+}

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

@@ -115,7 +115,7 @@ export class HashrateChartComponent implements OnInit {
                 }
                 return {
                   availableTimespanDay: availableTimespanDay,
-                  difficulty: this.tableOnly ? tableData.slice(0, 8) : tableData
+                  difficulty: this.tableOnly ? (this.isMobile() ? tableData.slice(0, 12) : tableData.slice(0, 9)) : tableData
                 };
               }),
             );

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

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

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

@@ -20,12 +20,29 @@
     <div class="col">
       <div class="card" style="height: 385px">
         <div class="card-body">
-          <h5 class="card-title">
+          <div class="pool-distribution">
-            <a href="" [routerLink]="['/mining/pools' | relativeUrl]" i18n="mining.pool-share">
+            <div class="item">
-              Mining Pools Share (1w)
+              <h5 class="card-title" i18n="dashboard.minimum-fee|Minimum mempool fee">Blocks (1w)</h5>
-            </a>
+              <p class="card-text">
-          </h5>
+                1082
+              </p>
+            </div>
+            <div class="item">
+              <h5 class="card-title" i18n="dashboard.minimum-fee|Minimum mempool fee">Miners luck (1w)</h5>
+              <p class="card-text">
+                107.25%
+              </p>
+            </div>
+            <div class="item">
+              <h5 class="card-title" i18n="dashboard.minimum-fee|Minimum mempool fee">Miners Gini (1w)</h5>
+              <p class="card-text">
+                0.123
+              </p>
+            </div>
+          </div>
+
           <app-pool-ranking [widget]=true></app-pool-ranking>
+          <div class="mt-1"><a [routerLink]="['/mining/pools' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
         </div>
       </div>
     </div>
@@ -35,11 +52,10 @@
       <div class="card" style="height: 385px">
         <div class="card-body">
           <h5 class="card-title">
-            <a class="link" href="" [routerLink]="['/mining/hashrate' | relativeUrl]" i18n="mining.hashrate">
+            Hashrate (1y)
-              Hashrate (1y)
-            </a>
           </h5>
           <app-hashrate-chart [widget]=true></app-hashrate-chart>
+          <div class="mt-1"><a [routerLink]="['/mining/hashrate' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
         </div>
       </div>
     </div>
@@ -49,11 +65,10 @@
       <div class="card" style="height: 385px">
         <div class="card-body">
           <h5 class="card-title">
-            <a href="" [routerLink]="['/mining/hashrate/pools' | relativeUrl]" i18n="mining.pool-historical-dominance">
+            Mining Pools Dominance (1y)
-              Mining Pools Dominance (1y)
-            </a>
           </h5>
           <app-hashrate-chart-pools [widget]=true></app-hashrate-chart-pools>
+          <div class="mt-1"><a [routerLink]="['/mining/hashrate/pools' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
         </div>
       </div>
     </div>
@@ -62,11 +77,10 @@
       <div class="card" style="height: 385px">
         <div class="card-body">
           <h5 class="card-title">
-            <a href="" [routerLink]="['/mining/hashrate' | relativeUrl]" i18n="mining.pool-historical-dominance">
+            Adjusments
-              Adjusments
-            </a>
           </h5>
           <app-hashrate-chart [tableOnly]=true [widget]=true></app-hashrate-chart>
+          <div class="mt-1"><a [routerLink]="['/mining/hashrate' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
         </div>
       </div>
     </div>

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

@@ -16,6 +16,7 @@
 
 .card-title {
   font-size: 1rem;
+  color: #4a68b9;
 }
 .card-title > a {
   color: #4a68b9;
@@ -54,3 +55,55 @@
   text-align: center;
   padding-bottom: 3px;
 }
+
+.pool-distribution {
+  min-height: 56px;
+  display: block;
+  @media (min-width: 485px) {
+    display: flex;
+    flex-direction: row;
+  }
+  h5 {
+    margin-bottom: 10px;
+  }
+  .item {
+    width: 50%;
+    margin: 0px auto 10px;
+    display: inline-block;
+    @media (min-width: 485px) {
+      margin: 0px auto 10px;
+    }
+    @media (min-width: 785px) {
+      margin: 0px auto 0px;
+    }
+    &:last-child {
+      margin: 0px auto 0px;
+    }
+    &:nth-child(2) {
+      order: 2;
+      @media (min-width: 485px) {
+        order: 3;
+      }
+    }
+    &:nth-child(3) {
+      order: 3;
+      @media (min-width: 485px) {
+        order: 2;
+        display: block;
+      }
+      @media (min-width: 768px) {
+        display: none;
+      }
+      @media (min-width: 992px) {
+        display: block;
+      }
+    }
+    .card-text {
+      font-size: 18px;
+      span {
+        color: #ffffff66;
+        font-size: 12px;
+      }
+    }
+  }
+}

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

@@ -7,7 +7,10 @@
 .chart-widget {
   width: 100%;
   height: 100%;
-  max-height: 325px;
+  max-height: 270px;
+  @media (max-width: 767.98px) {
+    max-height: 200px;
+  }
 }
 
 .formRadioGroup {

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

@@ -208,6 +208,8 @@ export class PoolRankingComponent implements OnInit {
     let radius: any[] = ['20%', '80%'];
     let top: any = undefined; let bottom = undefined; let height = undefined;
     if (this.isMobile() && this.widget) {
+      top = -30;
+      height = 270;
       radius = ['10%', '50%'];
     } else if (this.isMobile() && !this.widget) {
       top = 0;
@@ -215,6 +217,8 @@ export class PoolRankingComponent implements OnInit {
       radius = ['10%', '50%'];
     } else if (this.widget) {
       radius = ['15%', '60%'];
+      top = -20;
+      height = 330;
     } else {
       top = 35;
     }