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 d3c37be263
commit 584c3a43a5
12 changed files with 42 additions and 37 deletions
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;
}, [])
);