Fix some mobile UI issues on mining dashboard

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"
-      (chartInit)="onChartInit($event)"></div>
+    <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 10px;
-    }
-    @media (min-width: 785px) {
-      margin: 0px auto 0px;
-    }
-    &:last-child {
-      margin: 0px auto 0px;
-    }
+    margin: 0px auto 20px;
     &: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: {