mirror of
https://github.com/mempool/mempool.git
synced 2025-02-24 14:50:52 +01:00
Pool addresses collapse - Cleanup mobile layout
This commit is contained in:
nymkappa
parent
8114ffe1c8
commit
ef49457ec6
3 changed files with 106 additions and 31 deletions
|
|
@ -9,44 +9,104 @@
|
|||
|
||||
<div class="box">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-lg-9">
|
||||
<table class="table table-borderless table-striped" style="table-layout: fixed;">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="label">Tags</td>
|
||||
<td class="text-truncate" *ngIf="poolStats.pool.regexes.length else nodata">
|
||||
<div class="scrollable">
|
||||
|
||||
<!-- Regexes desktop -->
|
||||
<tr *ngIf="!isMobile()">
|
||||
<td class="label" i18n="mining.tags">Tags</td>
|
||||
<td *ngIf="poolStats.pool.regexes.length else nodata">
|
||||
{{ poolStats.pool.regexes }}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Regexes mobile -->
|
||||
<tr *ngIf="isMobile()">
|
||||
<td colspan=2>
|
||||
<span i18n="mining.tags" class="label">Tags</span>
|
||||
<div *ngIf="poolStats.pool.regexes.length else nodata" class="overflow-auto">
|
||||
{{ poolStats.pool.regexes }}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">Addresses</td>
|
||||
<td class="text-truncate" *ngIf="poolStats.pool.addresses.length else nodata">
|
||||
<div class="scrollable">
|
||||
<a *ngFor="let address of poolStats.pool.addresses"
|
||||
|
||||
<!-- Addresses desktop -->
|
||||
<tr *ngIf="!isMobile()">
|
||||
<td class="label" i18n="mining.addresses">Addresses</td>
|
||||
<td *ngIf="poolStats.pool.addresses.length else nodata">
|
||||
<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 }}
|
||||
</button>
|
||||
<div #collapse="ngbCollapse" [(ngbCollapse)]="gfg">
|
||||
<a *ngFor="let address of poolStats.pool.addresses | slice: 1"
|
||||
[routerLink]="['/address' | relativeUrl, address]">{{
|
||||
address }}<br></a>
|
||||
</div>
|
||||
</td>
|
||||
<ng-template #nodata>
|
||||
<td class="right-mobile">~</td>
|
||||
</ng-template>
|
||||
</tr>
|
||||
|
||||
<!-- Addresses mobile -->
|
||||
<tr *ngIf="isMobile()">
|
||||
<td colspan=2>
|
||||
<span class="label" i18n="mining.addresses">Addresses</span>
|
||||
<div *ngIf="poolStats.pool.addresses.length else nodatamobile">
|
||||
<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 }}
|
||||
</button>
|
||||
<a [routerLink]="['/address' | relativeUrl, poolStats.pool.addresses[0]]">
|
||||
{{ poolStats.pool.addresses[0] | shortenString: 40 }}
|
||||
</a>
|
||||
<div #collapse="ngbCollapse" [(ngbCollapse)]="gfg" style="width: 100%">
|
||||
<a *ngFor="let address of poolStats.pool.addresses | slice: 1"
|
||||
[routerLink]="['/address' | relativeUrl, address]">{{
|
||||
address | shortenString: 40 }}<br></a>
|
||||
</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>
|
||||
|
||||
<!-- Mined blocks desktop -->
|
||||
<tr *ngIf="!isMobile()">
|
||||
<td class="label" i18n="mining.mined-blocks">Mined Blocks</td>
|
||||
<td class="data">{{ formatNumber(poolStats.blockCount, this.locale, '1.0-0') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">Empty Blocks</td>
|
||||
<!-- Mined blocks desktop -->
|
||||
<tr *ngIf="isMobile()">
|
||||
<td colspan=2>
|
||||
<span class="label" i18n="mining.mined-blocks">Mined Blocks</span>
|
||||
<div>{{ formatNumber(poolStats.blockCount, this.locale, '1.0-0') }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Empty blocks desktop -->
|
||||
<tr *ngIf="!isMobile()">
|
||||
<td class="label" i18n="mining.empty-blocks">Empty Blocks</td>
|
||||
<td class="data">{{ formatNumber(poolStats.emptyBlocks, this.locale, '1.0-0') }}</td>
|
||||
</tr>
|
||||
<!-- Empty blocks mobile -->
|
||||
<tr *ngIf="isMobile()">
|
||||
<td colspan="2">
|
||||
<span class="label" i18n="mining.empty-blocks">Blocks</span>
|
||||
<div>{{ formatNumber(poolStats.emptyBlocks, this.locale, '1.0-0') }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -54,14 +114,20 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<ng-template #nodata>
|
||||
<td>~</td>
|
||||
</ng-template>
|
||||
<ng-template #nodatamobile>
|
||||
<div>~</div>
|
||||
</ng-template>
|
||||
|
||||
<div class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
|
||||
<div class="text-center loadingGraphs" *ngIf="isLoading">
|
||||
<div class="spinner-border text-light"></div>
|
||||
</div>
|
||||
|
||||
<table class="table table-borderless" [alwaysCallback]="true" infiniteScroll
|
||||
[infiniteScrollDistance]="1.5" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50"
|
||||
(scrolled)="loadMore()">
|
||||
<table class="table table-borderless" [alwaysCallback]="true" infiniteScroll [infiniteScrollDistance]="1.5"
|
||||
[infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50" (scrolled)="loadMore()">
|
||||
<thead>
|
||||
<th class="height" i18n="latest-blocks.height">Height</th>
|
||||
<th class="timestamp" i18n="latest-blocks.timestamp">Timestamp</th>
|
||||
|
|
@ -147,7 +213,9 @@
|
|||
<div>
|
||||
<div class="mb-3" style="display:flex; position: relative">
|
||||
<div class="skeleton-loader mr-3" style="width: 50px; height: 50px"></div>
|
||||
<h1 class="m-0 pt-1 pt-md-0"><div class="skeleton-loader" style="position: absolute; top: 32%; width: 150px; height: 20px"></div></h1>
|
||||
<h1 class="m-0 pt-1 pt-md-0">
|
||||
<div class="skeleton-loader" style="position: absolute; top: 32%; width: 150px; height: 20px"></div>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
|
|
@ -157,13 +225,13 @@
|
|||
<tbody>
|
||||
<tr>
|
||||
<td class="label">Tags</td>
|
||||
<td class="text-truncate">
|
||||
<td>
|
||||
<div class="skeleton-loader"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">Addresses</td>
|
||||
<td class="text-truncate">
|
||||
<td>
|
||||
<div class="scrollable">
|
||||
<div class="skeleton-loader"></div>
|
||||
</div>
|
||||
|
|
@ -176,17 +244,17 @@
|
|||
</table>
|
||||
</div>
|
||||
<div class="col-lg-3">
|
||||
<table class="table table-borderless table-striped" >
|
||||
<table class="table table-borderless table-striped">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="label">Mined Blocks</td>
|
||||
<td class="text-truncate">
|
||||
<td>
|
||||
<div class="skeleton-loader"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">Empty Blocks</td>
|
||||
<td class="text-truncate">
|
||||
<td>
|
||||
<div class="skeleton-loader"></div>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
|||
|
|
@ -46,6 +46,9 @@ div.scrollable {
|
|||
|
||||
.label {
|
||||
width: 35%;
|
||||
@media (max-width: 767.98px) {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.data {
|
||||
|
|
@ -132,12 +135,6 @@ div.scrollable {
|
|||
text-align: left;
|
||||
}
|
||||
|
||||
.right-mobile {
|
||||
@media (max-width: 450px) {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.skeleton-loader {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
|
@ -151,3 +148,11 @@ div.scrollable {
|
|||
top: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
.small-button {
|
||||
height: 20px;
|
||||
transform: translateY(-20px);
|
||||
font-size: 10px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
|
@ -19,6 +19,8 @@ export class PoolComponent implements OnInit {
|
|||
@Input() right: number | string = 45;
|
||||
@Input() left: number | string = 75;
|
||||
|
||||
gfg = true;
|
||||
|
||||
formatNumber = formatNumber;
|
||||
poolStats$: Observable<PoolStat>;
|
||||
blocks$: Observable<BlockExtended[]>;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue