Fix some mobile UI issues on mining dashboard

frontend/src/app/components/blocks-list/blocks-list.component.html

@@ -26,7 +26,7 @@
           <td class="pool text-left" [class]="widget ? 'widget' : ''">
             <div class="tooltip-custom">
               <a class="clear-link" [routerLink]="['/mining/pool' | relativeUrl, block.extras.pool.slug]">
-                <img width="25" height="25" src="{{ block.extras.pool['logo'] }}"
+                <img width="23" height="23" src="{{ block.extras.pool['logo'] }}"
                   onError="this.src = './resources/mining-pools/default.svg'">
                 <span class="pool-name">{{ block.extras.pool.name }}</span>
               </a>
@@ -64,7 +64,7 @@
               <span class="skeleton-loader"></span>
             </td>
             <td class="pool text-left" [class]="widget ? 'widget' : ''">
-              <img width="0" height="25" style="opacity: 0">
+              <img width="25" height="25" style="opacity: 0">
               <span class="skeleton-loader"></span>
             </td>
             <td class="timestamp" *ngIf="!widget">
@@ -96,4 +96,4 @@
     </ngb-pagination>
   </div>
   
-</div>
+</div>

frontend/src/app/components/blocks-list/blocks-list.component.scss

@@ -14,6 +14,10 @@
 td {
   padding-top: 0.7rem !important;
   padding-bottom: 0.7rem !important;
+  @media (max-width: 376px) {
+    padding-top: 0.73rem !important;
+    padding-bottom: 0.73rem !important;
+    }
 }
 
 .clear-link {
@@ -35,8 +39,7 @@ td {
 .pool.widget {
   width: 40%;
   padding-left: 30px;
-  @media (max-width: 576px) {
+  @media (max-width: 376px) {
-    padding-left: 40px;
     width: 60%;
   }
 }

frontend/src/app/components/difficulty-adjustments-table/difficulty-adjustments-table.component.html

@@ -1,5 +1,5 @@
 <div style="min-height: 295px">
-  <table class="table latest-transactions">
+  <table class="table latest-adjustments">
     <thead>
       <tr>
         <th class="d-none d-md-block" i18n="block.height">Height</th>

frontend/src/app/components/difficulty-adjustments-table/difficulty-adjustments-table.component.scss

@@ -1,4 +1,4 @@
-.latest-transactions {
+.latest-adjustments {
   width: 100%;
   text-align: left;
   table-layout:fixed;
@@ -7,34 +7,8 @@
   }
   td {
     width: 25%;
-  }
+    @media (max-width: 376px) {
-  .table-cell-satoshis {
+      padding: 0.85rem;
-    display: none;
-    text-align: right;
-    @media (min-width: 576px) {
-      display: table-cell;
     }
-    @media (min-width: 768px) {
-      display: none;
-    }
-    @media (min-width: 1100px) {
-      display: table-cell;
-    }
-  }
-  .table-cell-fiat {
-    display: none;
-    text-align: right;
-    @media (min-width: 485px) {
-      display: table-cell;
-    }
-    @media (min-width: 768px) {
-      display: none;
-    }
-    @media (min-width: 992px) {
-      display: table-cell;
-    }
-  }
-  .table-cell-fees {
-    text-align: right;
   }
 }

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

@@ -44,12 +44,12 @@
     </form>
   </div>
 
-  <div [class]="!widget ? 'chart' : 'chart-widget'"
+  <div [class]="!widget ? 'chart' : 'chart-widget'" echarts [initOpts]="chartInitOptions" [options]="chartOptions">
-    echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
+  </div>
   <div class="text-center loadingGraphs" *ngIf="isLoading">
     <div class="spinner-border text-light"></div>
   </div>
-  
+
 </div>
 
 <ng-template #loadingStats>

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

@@ -20,12 +20,11 @@
 .full-container {
   padding: 0px 15px;
   width: 100%;
-  height: calc(100% - 170px);
+  min-height: 500px;
+  height: calc(100% - 150px);
   @media (max-width: 992px) {
-    height: calc(100% - 220px);
+    height: 100%;
-  };
+    padding-bottom: 100px;
-  @media (max-width: 575px) {
-    height: calc(100% - 260px);
   };
 }
 
@@ -93,17 +92,8 @@
   }
   .item {
     width: 50%;
-    margin: 0px auto 10px;
     display: inline-block;
-    @media (min-width: 485px) {
+    margin: 0px auto 20px;
-      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) {

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

@@ -155,10 +155,10 @@ export class HashrateChartComponent implements OnInit {
         '#D81B60',
       ],
       grid: {
-        top: 30,
+        top: 20,
+        bottom: this.widget ? 30 : 70,
         right: this.right,
         left: this.left,
-        bottom: this.widget ? 30 : this.isMobile() ? 90 : 60,
       },
       tooltip: {
         show: !this.isMobile() || !this.widget,
@@ -174,7 +174,7 @@ export class HashrateChartComponent implements OnInit {
           align: 'left',
         },
         borderColor: '#000',
-        formatter: function (ticks) {
+        formatter: (ticks) => {
           let hashrateString = '';
           let difficultyString = '';
           let hashratePowerOfTen: any = selectPowerOfTen(1);
@@ -205,7 +205,7 @@ export class HashrateChartComponent implements OnInit {
             <span>${hashrateString}</span><br>
             <span>${difficultyString}</span>
           `;
-        }.bind(this)
+        }
       },
       xAxis: data.hashrates.length === 0 ? undefined : {
         type: 'time',
@@ -239,7 +239,7 @@ export class HashrateChartComponent implements OnInit {
       },
       yAxis: data.hashrates.length === 0 ? undefined : [
         {
-          min: function (value) {
+          min: (value) => {
             return value.min * 0.9;
           },
           type: 'value',
@@ -256,7 +256,7 @@ export class HashrateChartComponent implements OnInit {
           }
         },
         {
-          min: function (value) {
+          min: (value) => {
             return value.min * 0.9;
           },
           type: 'value',
@@ -266,7 +266,7 @@ export class HashrateChartComponent implements OnInit {
             formatter: (val) => {
               const selectedPowerOfTen: any = selectPowerOfTen(val);
               const newVal = Math.round(val / selectedPowerOfTen.divider);
-              return `${newVal} ${selectedPowerOfTen.unit}`
+              return `${newVal} ${selectedPowerOfTen.unit}`;
             }
           },
           splitLine: {
@@ -310,7 +310,6 @@ export class HashrateChartComponent implements OnInit {
         type: 'slider',
         brushSelect: false,
         realtime: true,
-        bottom: this.isMobile() ? 30 : 0,
         left: 20,
         right: 15,
         selectedDataBackground: {

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

@@ -1,6 +1,6 @@
 <div [class]="widget === false ? 'full-container' : ''">
 
-  <div class="card-header" [style]="widget ? 'display:none' : ''">
+  <div class="card-header  mb-0 mb-md-4" [style]="widget ? 'display:none' : ''">
     <span *ngIf="!widget" i18n="mining.pools-dominance">Mining pools dominance</span>
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as hashrates">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">

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

@@ -20,19 +20,18 @@
 .full-container {
   padding: 0px 15px;
   width: 100%;
-  height: calc(100% - 140px);
+  min-height: 500px;
-  @media (max-width: 991px) {
+  height: calc(100% - 150px);
-    height: calc(100% - 190px);
+  @media (max-width: 992px) {
-  };
+    height: 100%;
-  @media (max-width: 575px) {
+    padding-bottom: 100px;
-    height: calc(100% - 235px);
   };
 }
 
 .chart {
   width: 100%;
   height: 100%;
-  padding-bottom: 25px;
+  padding-bottom: 20px;
   padding-right: 10px;
   @media (max-width: 992px) {
     padding-bottom: 25px;
@@ -43,12 +42,6 @@
   @media (max-width: 767px) {
     padding-bottom: 50px;
   }
-  @media (max-width: 629px) {
-    padding-bottom: 85px;
-  }
-  @media (max-width: 567px) {
-    padding-bottom: 85px;
-  }
 }
 .chart-widget {
   width: 100%;

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

@@ -155,7 +155,7 @@ export class HashrateChartPoolsComponent implements OnInit {
       grid: {
         right: this.right,
         left: this.left,
-        bottom: this.widget ? 30 : 60,
+        bottom: this.widget ? 30 : 70,
         top: this.widget || this.isMobile() ? 10 : 50,
       },
       tooltip: {
@@ -218,7 +218,6 @@ export class HashrateChartPoolsComponent implements OnInit {
         type: 'slider',
         brushSelect: false,
         realtime: true,
-        bottom: 0,
         left: 20,
         right: 15,
         selectedDataBackground: {

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

@@ -27,7 +27,7 @@
 
     <!-- pool distribution -->
     <div class="col">
-      <div class="card" style="height: 385px">
+      <div class="card">
         <div class="card-body">
           <app-pool-ranking [widget]=true></app-pool-ranking>
           <div class="mt-1"><a [routerLink]="['/graphs/mining/pools' | relativeUrl]" i18n="dashboard.view-more">View more
@@ -38,7 +38,7 @@
 
     <!-- hashrate -->
     <div class="col">
-      <div class="card" style="height: 385px">
+      <div class="card">
         <div class="card-body">
           <app-hashrate-chart [widget]=true></app-hashrate-chart>
           <div class="mt-1"><a [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]" i18n="dashboard.view-more">View more
@@ -49,7 +49,7 @@
 
     <!-- Latest blocks -->
     <div class="col">
-      <div class="card" style="height: 385px">
+      <div class="card">
         <div class="card-body">
           <h5 class="card-title">
             Latest blocks
@@ -63,13 +63,13 @@
 
     <!-- Difficult adjustments -->
     <div class="col">
-      <div class="card" style="height: 385px">
+      <div class="card">
         <div class="card-body">
           <h5 class="card-title">
             Adjustments
           </h5>
           <app-difficulty-adjustments-table></app-difficulty-adjustments-table>
-          <div class="mt-1"><a [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]" i18n="dashboard.view-more">View more
+          <div><a [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]" i18n="dashboard.view-more">View more
               &raquo;</a></div>
         </div>
       </div>

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

@@ -63,8 +63,12 @@
   </div>
 
   <div [class]="!widget ? 'bottom-padding' : 'pb-0'" class="container pb-lg-0">
-    <div [class]="widget ? 'chart-widget' : 'chart'" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+    <div>
-      (chartInit)="onChartInit($event)"></div>
+      <div [class]="widget ? 'chart-widget' : 'chart'" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+        (chartInit)="onChartInit($event)">
+      </div>
+    </div>
+
     <div class="text-center loadingGraphs" *ngIf="isLoading">
       <div class="spinner-border text-light"></div>
     </div>
@@ -129,4 +133,4 @@
       </p>
     </div>
   </div>
-</ng-template>
+</ng-template>

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

@@ -28,7 +28,7 @@
   width: 100%;
   height: 100%;
   max-height: 270px;
-  @media (max-width: 767.98px) {
+  @media (max-width: 485px) {
     max-height: 200px;
   }
 }
@@ -93,17 +93,8 @@
   }
   .item {
     width: 50%;
-    margin: 0px auto 10px;
     display: inline-block;
-    @media (min-width: 485px) {
+    margin: 0px auto 20px;
-      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) {

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

@@ -201,30 +201,6 @@ export class PoolRankingComponent implements OnInit {
   }
 
   prepareChartOptions(miningStats) {
-    let network = this.stateService.network;
-    if (network === '') {
-      network = 'bitcoin';
-    }
-    network = network.charAt(0).toUpperCase() + network.slice(1);
-
-    let radius: any[] = ['20%', '80%'];
-    let top: number = 0; let height = undefined;
-    if (this.isMobile() && this.widget) {
-      top = -30;
-      height = 270;
-      radius = ['10%', '50%'];
-    } else if (this.isMobile() && !this.widget) {
-      top = -40;
-      height = 300;
-      radius = ['10%', '50%'];
-    } else if (this.widget) {
-      radius = ['15%', '60%'];
-      top = -20;
-      height = 330;
-    } else {
-      top = 0;
-    }
-
     this.chartOptions = {
       animation: false,
       color: chartColors,
@@ -237,11 +213,9 @@ export class PoolRankingComponent implements OnInit {
       series: [
         {
           minShowLabelAngle: 3.6,
-          top: top,
-          height: height,
           name: 'Mining pool',
           type: 'pie',
-          radius: radius,
+          radius: ['20%', '80%'],
           data: this.generatePoolsChartSerieData(miningStats),
           labelLine: {
             lineStyle: {