machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1401 from mempool/nymkappa/bugfix/mobile-ui-mining-dashboard

Browse Source 
Fix some mobile UI issues on mining dashboard
This commit is contained in:
softsimon 2022-04-02 23:02:05 +04:00 committed by GitHub
commit c9d4f90c15
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 50 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/components/blocks-list/blocks-list.component.html
View File

@ -26,7 +26,7 @@
<td class="pool text-left" [class]="widget ? 'widget' : ''"> <td class="pool text-left" [class]="widget ? 'widget' : ''">
<div class="tooltip-custom"> <div class="tooltip-custom">
<a class="clear-link" [routerLink]="['/mining/pool' | relativeUrl, block.extras.pool.slug]"> <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'"> onError="this.src = './resources/mining-pools/default.svg'">
<span class="pool-name">{{ block.extras.pool.name }}</span> <span class="pool-name">{{ block.extras.pool.name }}</span>
</a> </a>
@ -64,7 +64,7 @@
<span class="skeleton-loader"></span> <span class="skeleton-loader"></span>
</td> </td>
<td class="pool text-left" [class]="widget ? 'widget' : ''"> <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> <span class="skeleton-loader"></span>
</td> </td>
<td class="timestamp" *ngIf="!widget"> <td class="timestamp" *ngIf="!widget">

7
frontend/src/app/components/blocks-list/blocks-list.component.scss
View File

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

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

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

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

@ -1,4 +1,4 @@
.latest-transactions { .latest-adjustments {
width: 100%; width: 100%;
text-align: left; text-align: left;
table-layout:fixed; table-layout:fixed;
@ -7,34 +7,8 @@
} }
td { td {
width: 25%; 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;
}
} }

4
frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
View File

@ -44,8 +44,8 @@
</form> </form>
</div> </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="text-center loadingGraphs" *ngIf="isLoading">
<div class="spinner-border text-light"></div> <div class="spinner-border text-light"></div>
</div> </div>

20
frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
View File

@ -20,12 +20,11 @@
.full-container { .full-container {
padding: 0px 15px; padding: 0px 15px;
width: 100%; width: 100%;
height: calc(100% - 170px); min-height: 500px;
height: calc(100% - 150px);
@media (max-width: 992px) { @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 { .item {
width: 50%; width: 50%;
margin: 0px auto 10px;
display: inline-block; 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) { &:nth-child(2) {
order: 2; order: 2;
@media (min-width: 485px) { @media (min-width: 485px) {

15
frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
View File

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

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

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

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

@ -20,19 +20,18 @@
.full-container { .full-container {
padding: 0px 15px; padding: 0px 15px;
width: 100%; 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 { .chart {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding-bottom: 25px; padding-bottom: 20px;
padding-right: 10px; padding-right: 10px;
@media (max-width: 992px) { @media (max-width: 992px) {
padding-bottom: 25px; padding-bottom: 25px;
@ -43,12 +42,6 @@
@media (max-width: 767px) { @media (max-width: 767px) {
padding-bottom: 50px; padding-bottom: 50px;
} }
@media (max-width: 629px) {
padding-bottom: 85px;
}
@media (max-width: 567px) {
padding-bottom: 85px;
}
} }
.chart-widget { .chart-widget {
width: 100%; width: 100%;

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

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

10
frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
View File

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

6
frontend/src/app/components/pool-ranking/pool-ranking.component.html
View File

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

13
frontend/src/app/components/pool-ranking/pool-ranking.component.scss
View File

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

28
frontend/src/app/components/pool-ranking/pool-ranking.component.ts
View File

@ -201,30 +201,6 @@ export class PoolRankingComponent implements OnInit {
} }
prepareChartOptions(miningStats) { 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 = { this.chartOptions = {
animation: false, animation: false,
color: chartColors, color: chartColors,
@ -237,11 +213,9 @@ export class PoolRankingComponent implements OnInit {
series: [ series: [
{ {
minShowLabelAngle: 3.6, minShowLabelAngle: 3.6,
top: top,
height: height,
name: 'Mining pool', name: 'Mining pool',
type: 'pie', type: 'pie',
radius: radius, radius: ['20%', '80%'],
data: this.generatePoolsChartSerieData(miningStats), data: this.generatePoolsChartSerieData(miningStats),
labelLine: { labelLine: {
lineStyle: { lineStyle: {