mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2024-12-27 16:54:28 +01:00
Code Issues Projects Releases Wiki Activity

"view more" links - placeholders

Browse Source
This commit is contained in:
nymkappa 2022-03-05 17:21:11 +01:00
parent cf4336eb2e
commit f9e361a9c0
No known key found for this signature in database
GPG Key ID: E155910B16E8BD04
8 changed files with 103 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,22 +31,22 @@
<div class="spinner-border text-light"></div>
</div>
<div class="mt-3" *ngIf="tableOnly || !widget">
<table class="table table-borderless table-sm text-center">
<div [class]="!widget ? 'mt-3 p-2' : 'ml-4 mr-4 mt-1'" *ngIf="tableOnly">
<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.change">Change</th>
<th i18n="mining.difficulty" class="text-right">Difficulty</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 [style]="diffChange.change >= 0 ? 'color: #42B747' : 'color: #B74242'">{{ formatNumber(diffChange.change, locale, '1.2-2') }}%</td>
<td class="text-right">{{ diffChange.difficultyShorten }}</td>
<td class="text-right" [style]="diffChange.change >= 0 ? 'color: #42B747' : 'color: #B74242'">{{ formatNumber(diffChange.change, locale, '1.2-2') }}%</td>
</tr>
</tbody>
</table>

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

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

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

@ -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
};
}),
);

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

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

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

@ -20,12 +20,29 @@
<div class="col">
<div class="card" style="height: 385px">
<div class="card-body">
<h5 class="card-title">
<a href="" [routerLink]="['/mining/pools' | relativeUrl]" i18n="mining.pool-share">
Mining Pools Share (1w)
</a>
</h5>
<div class="pool-distribution">
<div class="item">
<h5 class="card-title" i18n="dashboard.minimum-fee|Minimum mempool fee">Blocks (1w)</h5>
<p class="card-text">
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)
</a>
Hashrate (1y)
</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)
</a>
Mining Pools Dominance (1y)
</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
</a>
Adjusments
</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>

53
frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
View File

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

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

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

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

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