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

Polish dashboards second widgets line

Browse Source
This commit is contained in:
nymkappa 2022-05-12 17:05:31 +02:00
parent 0b0b37b5aa
commit e59637128e
No known key found for this signature in database
GPG Key ID: E155910B16E8BD04
12 changed files with 42 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,7 +8,7 @@
<div style="min-height: 295px">
<table class="table table-borderless">
<thead>
<th class="height" [class]="widget ? 'widget' : ''" i18n="latest-blocks.height">Height</th>
<th class="height text-left" [class]="widget ? 'widget' : ''" i18n="latest-blocks.height">Height</th>
<th class="pool text-left" [class]="widget ? 'widget' : ''" i18n="mining.pool-name">
Pool</th>
<th class="timestamp" i18n="latest-blocks.timestamp" *ngIf="!widget">Timestamp</th>
@ -21,7 +21,7 @@
</thead>
<tbody *ngIf="blocks$ | async as blocks; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
<tr *ngFor="let block of blocks; let i= index; trackBy: trackByBlock">
<td [class]="widget ? 'widget' : ''">
<td class="text-left" [class]="widget ? 'widget' : ''">
<a [routerLink]="['/block' | relativeUrl, block.height]">{{ block.height
}}</a>
</td>
@ -62,7 +62,7 @@
<ng-template #skeleton>
<tbody>
<tr *ngFor="let item of skeletonLines">
<td class="height" [class]="widget ? 'widget' : ''">
<td class="height text-left" [class]="widget ? 'widget' : ''">
<span class="skeleton-loader" style="max-width: 75px"></span>
</td>
<td class="pool text-left" [class]="widget ? 'widget' : ''">

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

@ -11,13 +11,10 @@
max-width: 100%;
}
td {
padding-top: 0.7rem !important;
tr, td, th {
border: 0px;
padding-top: 0.65rem !important;
padding-bottom: 0.7rem !important;
@media (max-width: 376px) {
padding-top: 0.73rem !important;
padding-bottom: 0.73rem !important;
}
}
.clear-link {
@ -41,7 +38,7 @@ td {
}
.pool.widget {
width: 40%;
padding-left: 30px;
padding-left: 24px;
@media (max-width: 376px) {
width: 60%;
}
@ -56,7 +53,7 @@ td {
width: 10%;
}
.height.widget {
width: 20%;
width: 15%;
@media (max-width: 576px) {
width: 10%;
}

6
frontend/src/app/components/blocks-list/blocks-list.component.ts
View File

@ -39,7 +39,7 @@ export class BlocksList implements OnInit {
this.websocketService.want(['blocks']);
}
this.skeletonLines = this.widget === true ? [...Array(5).keys()] : [...Array(15).keys()];
this.skeletonLines = this.widget === true ? [...Array(6).keys()] : [...Array(15).keys()];
this.paginationMaxSize = window.matchMedia('(max-width: 670px)').matches ? 3 : 5;
this.blocks$ = combineLatest([
@ -61,7 +61,7 @@ export class BlocksList implements OnInit {
block.extras.pool.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg';
}
if (this.widget) {
return blocks.slice(0, 5);
return blocks.slice(0, 6);
}
return blocks;
}),
@ -85,7 +85,7 @@ export class BlocksList implements OnInit {
blocks[1][0].extras.pool.logo = `./resources/mining-pools/` +
blocks[1][0].extras.pool.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg';
acc.unshift(blocks[1][0]);
acc = acc.slice(0, this.widget ? 5 : 15);
acc = acc.slice(0, this.widget ? 6 : 15);
return acc;
}, [])
);

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

@ -22,7 +22,7 @@
</tr>
</tbody>
<tbody *ngIf="isLoading">
<tr *ngFor="let item of [1,2,3,4,5]">
<tr *ngFor="let item of [1,2,3,4,5,6]">
<td class="d-none d-md-block w-75"><span class="skeleton-loader"></span></td>
<td class="text-left"><span class="skeleton-loader w-75"></span></td>
<td class="text-right"><span class="skeleton-loader w-75"></span></td>

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

@ -2,10 +2,15 @@
width: 100%;
text-align: left;
table-layout:fixed;
tr, td, th {
tr, th {
border: 0px;
padding-top: 0.65rem !important;
padding-bottom: 0.7rem !important;
}
td {
border: 0px;
padding-top: 0.71rem !important;
padding-bottom: 0.75rem !important;
width: 25%;
@media (max-width: 376px) {
padding: 0.85rem;

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

@ -54,7 +54,7 @@ export class DifficultyAdjustmentsTable implements OnInit {
return {
availableTimespanDay: availableTimespanDay,
difficulty: tableData.slice(0, 5),
difficulty: tableData.slice(0, 6),
};
}),
);

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

@ -52,7 +52,7 @@
.chart-widget {
width: 100%;
height: 100%;
max-height: 270px;
height: 240px;
}
.formRadioGroup {

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

@ -11,7 +11,7 @@
<span style="font-size: xx-small" i18n="mining.144-blocks">(144 blocks)</span>
</div>
<div class="card-wrapper">
<div class="card" style="height: 123px">
<div class="card">
<div class="card-body more-padding">
<app-reward-stats></app-reward-stats>
</div>
@ -22,15 +22,13 @@
<!-- difficulty adjustment -->
<div class="col">
<div class="main-title" i18n="dashboard.difficulty-adjustment">Difficulty Adjustment</div>
<div class="card" style="height: 123px">
<app-difficulty [showTitle]="false" [showProgress]="false" [showHalving]="true"></app-difficulty>
</div>
</div>
<!-- pool distribution -->
<div class="col">
<div class="card">
<div class="card-body">
<div class="col" style="margin-bottom: 1.47rem">
<div class="card graph-card">
<div class="card-body pl-2 pr-2">
<app-pool-ranking [widget]=true></app-pool-ranking>
<div class="mt-1"><a [routerLink]="['/graphs/mining/pools' | relativeUrl]" i18n="dashboard.view-more">View more
&raquo;</a></div>
@ -39,9 +37,9 @@
</div>
<!-- hashrate -->
<div class="col">
<div class="col" style="margin-bottom: 1.47rem">
<div class="card">
<div class="card-body">
<div class="card-body pl-lg-3 pr-lg-3 pl-2 pr-2">
<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
&raquo;</a></div>

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

@ -14,6 +14,13 @@
background-color: #1d1f31;
}
.graph-card {
height: 100%;
@media (min-width: 992px) {
height: 385px;
}
}
.card-title {
font-size: 1rem;
color: #4a68b9;
@ -22,9 +29,6 @@
color: #4a68b9;
}
.card-body {
padding: 1.25rem 1rem 0.75rem 1rem;
}
.card-body.pool-ranking {
padding: 1.25rem 0.25rem 0.75rem 0.25rem;
}

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

@ -27,7 +27,7 @@
.chart-widget {
width: 100%;
height: 100%;
max-height: 270px;
height: 240px;
@media (max-width: 485px) {
max-height: 200px;
}

4
frontend/src/app/dashboard/dashboard.component.html
View File

@ -121,7 +121,7 @@
<td *ngIf="!stateService.env.MINING_DASHBOARD" class="table-cell-mined" ><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since></td>
<td *ngIf="stateService.env.MINING_DASHBOARD" class="table-cell-mined pl-lg-4">
<a class="clear-link" [routerLink]="[('/mining/pool/' + block.extras.pool.slug) | relativeUrl]">
<img width="20" height="20" src="{{ block.extras.pool['logo'] }}"
<img width="22" height="22" src="{{ block.extras.pool['logo'] }}"
onError="this.src = './resources/mining-pools/default.svg'">
<span class="pool-name">{{ block.extras.pool.name }}</span>
</a>
@ -136,7 +136,7 @@
</tr>
</tbody>
</table>
<div class=""><a href="" [routerLink]="[(stateService.env.MINING_DASHBOARD ? '/mining/blocks' : '/blocks') | relativeUrl]" i18n="dashboard.view-all">View all &raquo;</a></div>
<div class=""><a href="" [routerLink]="[(stateService.env.MINING_DASHBOARD ? '/mining/blocks' : '/blocks') | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
</div>
</div>
</div>

7
frontend/src/app/dashboard/dashboard.component.scss
View File

@ -134,6 +134,8 @@
table-layout:fixed;
tr, td, th {
border: 0px;
padding-top: 0.71rem !important;
padding-bottom: 0.75rem !important;
}
td {
overflow:hidden;
@ -182,17 +184,16 @@
text-align: left;
tr, td, th {
border: 0px;
padding-top: 0.65rem !important;
padding-bottom: 0.7rem !important;
}
.table-cell-height {
width: 15%;
}
.table-cell-mined {
width: 35%;
text-align: right;
@media (min-width: 376px) {
text-align: left;
}
}
.table-cell-transaction-count {
display: none;
text-align: right;