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

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

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