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' : ''">
<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">

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

@ -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) {
padding-left: 40px;
@media (max-width: 376px) {
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">
<table class="table latest-transactions">
<table class="table latest-adjustments">
<thead>
<tr>
<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%;
text-align: left;
table-layout:fixed;
@ -7,34 +7,8 @@
}
td {
width: 25%;
}
.table-cell-satoshis {
display: none;
text-align: right;
@media (min-width: 576px) {
display: table-cell;
@media (max-width: 376px) {
padding: 0.85rem;
}
@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>
</div>
<div [class]="!widget ? 'chart' : 'chart-widget'"
echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
<div [class]="!widget ? 'chart' : 'chart-widget'" echarts [initOpts]="chartInitOptions" [options]="chartOptions">
</div>
<div class="text-center loadingGraphs" *ngIf="isLoading">
<div class="spinner-border text-light"></div>
</div>

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

@ -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);
};
@media (max-width: 575px) {
height: calc(100% - 260px);
height: 100%;
padding-bottom: 100px;
};
}
@ -93,17 +92,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) {

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

@ -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: {

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="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">

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

@ -20,19 +20,18 @@
.full-container {
padding: 0px 15px;
width: 100%;
height: calc(100% - 140px);
@media (max-width: 991px) {
height: calc(100% - 190px);
};
@media (max-width: 575px) {
height: calc(100% - 235px);
min-height: 500px;
height: calc(100% - 150px);
@media (max-width: 992px) {
height: 100%;
padding-bottom: 100px;
};
}
.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%;

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: {
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: {

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

@ -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>

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

@ -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>

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

@ -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) {

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

@ -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: {