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

Fix pool page skeleton

Browse Source
This commit is contained in:
nymkappa 2022-03-29 10:52:50 +09:00
parent ef49457ec6
commit 5d9e8d0177
No known key found for this signature in database
GPG Key ID: E155910B16E8BD04
2 changed files with 66 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
frontend/src/app/components/pool/pool.component.html
View File

@ -35,14 +35,14 @@
<!-- Addresses desktop --> <!-- Addresses desktop -->
<tr *ngIf="!isMobile()"> <tr *ngIf="!isMobile()">
<td class="label" i18n="mining.addresses">Addresses</td> <td class="label" i18n="mining.addresses">Addresses</td>
<td *ngIf="poolStats.pool.addresses.length else nodata"> <td *ngIf="poolStats.pool.addresses.length else nodata" style="padding-bottom: 0;">
<a [routerLink]="['/address' | relativeUrl, poolStats.pool.addresses[0]]" class="first-address"> <a [routerLink]="['/address' | relativeUrl, poolStats.pool.addresses[0]]" class="first-address">
{{ poolStats.pool.addresses[0] }} {{ poolStats.pool.addresses[0] }}
</a> </a>
<button *ngIf="poolStats.pool.addresses.length >= 2" style="transform: translateY(-3px);" <button *ngIf="poolStats.pool.addresses.length >= 2" style="transform: translateY(-3px);"
type="button" class="btn btn-outline-info btn-sm float-right" (click)="collapse.toggle()" type="button" class="btn btn-outline-info btn-sm float-right" (click)="collapse.toggle()"
[attr.aria-expanded]="!gfg" aria-controls="collapseExample"> [attr.aria-expanded]="!gfg" aria-controls="collapseExample">
<span i18n="show">Show</span> {{ poolStats.pool.addresses.length }} <span i18n="show-all">Show all</span> ({{ poolStats.pool.addresses.length }})
</button> </button>
<div #collapse="ngbCollapse" [(ngbCollapse)]="gfg"> <div #collapse="ngbCollapse" [(ngbCollapse)]="gfg">
<a *ngFor="let address of poolStats.pool.addresses | slice: 1" <a *ngFor="let address of poolStats.pool.addresses | slice: 1"
@ -60,7 +60,7 @@
<button *ngIf="poolStats.pool.addresses.length >= 2" type="button" <button *ngIf="poolStats.pool.addresses.length >= 2" type="button"
class="btn btn-outline-info btn-sm float-right small-button" (click)="collapse.toggle()" class="btn btn-outline-info btn-sm float-right small-button" (click)="collapse.toggle()"
[attr.aria-expanded]="!gfg" aria-controls="collapseExample"> [attr.aria-expanded]="!gfg" aria-controls="collapseExample">
<span i18n="show">Show</span> {{ poolStats.pool.addresses.length }} <span i18n="show-all">Show all</span> ({{ poolStats.pool.addresses.length }})
</button> </button>
<a [routerLink]="['/address' | relativeUrl, poolStats.pool.addresses[0]]"> <a [routerLink]="['/address' | relativeUrl, poolStats.pool.addresses[0]]">
{{ poolStats.pool.addresses[0] | shortenString: 40 }} {{ poolStats.pool.addresses[0] | shortenString: 40 }}
@ -223,41 +223,88 @@
<div class="col-lg-9"> <div class="col-lg-9">
<table class="table table-borderless table-striped"> <table class="table table-borderless table-striped">
<tbody> <tbody>
<tr>
<td class="label">Tags</td> <!-- Regexes desktop -->
<tr *ngIf="!isMobile()">
<td class="label" i18n="mining.tags">Tags</td>
<td> <td>
<div class="skeleton-loader"></div> <div class="skeleton-loader"></div>
</td> </td>
</tr> </tr>
<tr>
<td class="label">Addresses</td> <!-- Regexes mobile -->
<td> <tr *ngIf="isMobile()">
<div class="scrollable"> <td colspan=2>
<span class="label" i18n="mining.tags">Tags</span>
<div class="overflow-auto">
<div class="skeleton-loader"></div> <div class="skeleton-loader"></div>
</div> </div>
</td> </td>
</tr>
<!-- Addresses desktop -->
<tr *ngIf="!isMobile()">
<td class="label" i18n="mining.addresses">Addresses</td>
<td>
<div class="skeleton-loader"></div>
</td>
<ng-template #nodata> <ng-template #nodata>
<td>~</td> <td>~</td>
</ng-template> </ng-template>
</tr> </tr>
<!-- Addresses mobile -->
<tr *ngIf="isMobile()">
<td colspan=2>
<span class="label" i18n="mining.addresses">Addresses</span>
<div>
<div class="skeleton-loader"></div>
</div>
</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="col-lg-3"> <div class="col-lg-3">
<table class="table table-borderless table-striped"> <table class="table table-borderless table-striped">
<tbody> <tbody>
<tr>
<td class="label">Mined Blocks</td> <!-- Mined blocks desktop -->
<td> <tr *ngIf="!isMobile()">
<td class="label" i18n="mining.mined-blocks">Mined Blocks</td>
<td class="data">
<div class="skeleton-loader"></div> <div class="skeleton-loader"></div>
</td> </td>
</tr> </tr>
<tr> <!-- Mined blocks desktop -->
<td class="label">Empty Blocks</td> <tr *ngIf="isMobile()">
<td> <td colspan=2>
<span class="label" i18n="mining.mined-blocks">Mined Blocks</span>
<div>
<div class="skeleton-loader"></div>
</div>
</td>
</tr>
<!-- Empty blocks desktop -->
<tr *ngIf="!isMobile()">
<td class="label" i18n="mining.empty-blocks">Empty Blocks</td>
<td class="data">
<div class="skeleton-loader"></div> <div class="skeleton-loader"></div>
</td> </td>
</tr> </tr>
<!-- Empty blocks mobile -->
<tr *ngIf="isMobile()">
<td colspan="2">
<span class="label" i18n="mining.empty-blocks">Blocks</span>
<div>
<div class="skeleton-loader"></div>
</div>
</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>

7
frontend/src/app/components/pool/pool.component.scss
View File

@ -45,16 +45,17 @@ div.scrollable {
} }
.label { .label {
width: 35%; width: 30%;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
font-weight: bold; font-weight: bold;
} }
} }
.data { .data {
text-align: left; text-align: right;
padding-left: 25%; padding-left: 25%;
@media (max-width: 991px) { @media (max-width: 992px) {
text-align: left;
padding-left: 12px; padding-left: 12px;
} }
@media (max-width: 450px) { @media (max-width: 450px) {