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

Merge pull request #1553 from mempool/nymkappa/bufix/blocks-list-skeleton

Browse Source 
Update blocks list skeleton
This commit is contained in:
wiz 2022-04-24 04:03:19 +00:00 committed by GitHub
commit e15abe6851
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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> </thead>
<tbody *ngIf="blocks$ | async as blocks; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''"> <tbody *ngIf="blocks$ | async as blocks; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
<tr *ngFor="let block of blocks; let i= index; trackBy: trackByBlock"> <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 [routerLink]="['/block' | relativeUrl, block.height]">{{ block.height
}}</a> }}</a>
</td> </td>
<td class="pool text-left" [class]="widget ? 'widget' : ''"> <td class="pool text-left" [class]="widget ? 'widget' : ''">
<div class="tooltip-custom"> <div class="tooltip-custom">
<a class="clear-link" [routerLink]="['/mining/pool' | relativeUrl, block.extras.pool.slug]"> <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'"> onError="this.src = './resources/mining-pools/default.svg'">
<span class="pool-name">{{ block.extras.pool.name }}</span> <span class="pool-name">{{ block.extras.pool.name }}</span>
</a> </a>
@ -61,26 +61,26 @@
<tbody> <tbody>
<tr *ngFor="let item of skeletonLines"> <tr *ngFor="let item of skeletonLines">
<td class="height" [class]="widget ? 'widget' : ''"> <td class="height" [class]="widget ? 'widget' : ''">
<span class="skeleton-loader"></span> <span class="skeleton-loader" style="max-width: 75px"></span>
</td> </td>
<td class="pool text-left" [class]="widget ? 'widget' : ''"> <td class="pool text-left" [class]="widget ? 'widget' : ''">
<img width="25" height="25" style="opacity: 0"> <img width="1" height="25" style="opacity: 0">
<span class="skeleton-loader"></span> <span class="skeleton-loader" style="max-width: 125px"></span>
</td> </td>
<td class="timestamp" *ngIf="!widget"> <td class="timestamp" *ngIf="!widget">
<span class="skeleton-loader"></span> <span class="skeleton-loader" style="max-width: 150px"></span>
</td> </td>
<td class="mined" *ngIf="!widget"> <td class="mined" *ngIf="!widget">
<span class="skeleton-loader"></span> <span class="skeleton-loader" style="max-width: 125px"></span>
</td> </td>
<td class="reward text-right" [class]="widget ? 'widget' : ''"> <td class="reward text-right" [class]="widget ? 'widget' : ''">
<span class="skeleton-loader"></span> <span class="skeleton-loader" style="max-width: 75px"></span>
</td> </td>
<td class="fees text-right" *ngIf="!widget"> <td class="fees text-right" *ngIf="!widget">
<span class="skeleton-loader"></span> <span class="skeleton-loader" style="max-width: 75px"></span>
</td> </td>
<td class="txs text-right" [class]="widget ? 'widget' : ''"> <td class="txs text-right" [class]="widget ? 'widget' : ''">
<span class="skeleton-loader"></span> <span class="skeleton-loader" style="max-width: 75px"></span>
</td> </td>
<td class="size" *ngIf="!widget"> <td class="size" *ngIf="!widget">
<span class="skeleton-loader"></span> <span class="skeleton-loader"></span>

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

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