mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2024-11-20 18:32:19 +01:00
Code Issues Projects Releases Wiki Activity

Update blocks list skeleton

Browse Source
This commit is contained in:
nymkappa 2022-04-18 11:54:52 +09:00
parent 653ce3e40c
commit a2ad69beb1
No known key found for this signature in database
GPG Key ID: E155910B16E8BD04
2 changed files with 16 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,14 +19,14 @@
</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="height " [class]="widget ? 'widget' : ''">
<td [class]="widget ? 'widget' : ''">
<a [routerLink]="['/block' | relativeUrl, block.height]">{{ block.height
}}</a>
</td>
<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="23" height="23" 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>
@ -61,26 +61,26 @@
<tbody>
<tr *ngFor="let item of skeletonLines">
<td class="height" [class]="widget ? 'widget' : ''">
<span class="skeleton-loader"></span>
<span class="skeleton-loader" style="max-width: 75px"></span>
</td>
<td class="pool text-left" [class]="widget ? 'widget' : ''">
<img width="25" height="25" style="opacity: 0">
<span class="skeleton-loader"></span>
<img width="1" height="25" style="opacity: 0">
<span class="skeleton-loader" style="max-width: 125px"></span>
</td>
<td class="timestamp" *ngIf="!widget">
<span class="skeleton-loader"></span>
<span class="skeleton-loader" style="max-width: 150px"></span>
</td>
<td class="mined" *ngIf="!widget">
<span class="skeleton-loader"></span>
<span class="skeleton-loader" style="max-width: 125px"></span>
</td>
<td class="reward text-right" [class]="widget ? 'widget' : ''">
<span class="skeleton-loader"></span>
<span class="skeleton-loader" style="max-width: 75px"></span>
</td>
<td class="fees text-right" *ngIf="!widget">
<span class="skeleton-loader"></span>
<span class="skeleton-loader" style="max-width: 75px"></span>
</td>
<td class="txs text-right" [class]="widget ? 'widget' : ''">
<span class="skeleton-loader"></span>
<span class="skeleton-loader" style="max-width: 75px"></span>
</td>
<td class="size" *ngIf="!widget">
<span class="skeleton-loader"></span>

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

@ -35,6 +35,9 @@ td {
.pool {
width: 17%;
@media (max-width: 576px) {
width: 34%;
}
}
.pool.widget {
width: 40%;
@ -51,9 +54,6 @@ td {
.height {
width: 10%;
@media (max-width: 1100px) {
width: 10%;
}
}
.height.widget {
width: 20%;
@ -63,6 +63,7 @@ td {
}
.timestamp {
width: 18%;
@media (max-width: 900px) {
display: none;
}
@ -92,6 +93,7 @@ td {
}
.fees {
width: 10%;
@media (max-width: 650px) {
display: none;
}
@ -101,6 +103,7 @@ td {
}
.reward {
width: 10%;
@media (max-width: 576px) {
width: 7%;
padding-right: 30px;