mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2024-12-29 09:44:26 +01:00
Code Issues Projects Releases Wiki Activity

Fix pool detail page on Firefox

Browse Source
This commit is contained in:
nymkappa 2022-03-09 16:30:45 +01:00
parent 192c61f9cb
commit 7957ca8f94
No known key found for this signature in database
GPG Key ID: E155910B16E8BD04
5 changed files with 55 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/components/pool-ranking/pool-ranking.component.ts
View File

@ -264,8 +264,8 @@ export class PoolRankingComponent implements OnInit {
fontSize: 14, fontSize: 14,
}, },
itemStyle: { itemStyle: {
borderRadius: 2, borderRadius: 1,
borderWidth: 2, borderWidth: 1,
borderColor: '#000', borderColor: '#000',
}, },
emphasis: { emphasis: {

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

@ -2,45 +2,50 @@
<div *ngIf="poolStats$ | async as poolStats; else loadingMain"> <div *ngIf="poolStats$ | async as poolStats; else loadingMain">
<h1 class="m-0 mb-2"> <h1 class="m-0 mb-2">
<img width="50" height="50" src="{{ poolStats['logo'] }}" onError="this.src = './resources/mining-pools/default.svg'" <img width="50" height="50" src="{{ poolStats['logo'] }}"
class="mr-3"> onError="this.src = './resources/mining-pools/default.svg'" class="mr-3">
{{ poolStats.pool.name }} {{ poolStats.pool.name }}
</h1> </h1>
<div class="box"> <div class="box">
<div class="row"> <div class="row">
<div class="col-lg-9"> <div class="col-lg-7">
<table class="table table-borderless table-striped" style="table-layout: fixed;"> <table class="table table-borderless table-striped" style="table-layout: fixed;">
<tbody> <tbody>
<tr> <tr>
<td class="col-4 col-lg-3">Addresses</td> <td class="label">Tags</td>
<td class="text-truncate">
<div class="scrollable">
{{ poolStats.pool.regexes }}
</div>
</td>
</tr>
<tr>
<td class="label">Addresses</td>
<td class="text-truncate" *ngIf="poolStats.pool.addresses.length else noaddress"> <td class="text-truncate" *ngIf="poolStats.pool.addresses.length else noaddress">
<div class="scrollable"> <div class="scrollable">
<a *ngFor="let address of poolStats.pool.addresses" <a *ngFor="let address of poolStats.pool.addresses"
[routerLink]="['/address' | relativeUrl, address]">{{ address }}<br></a> [routerLink]="['/address' | relativeUrl, address]">{{
address }}<br></a>
</div> </div>
</td> </td>
<ng-template #noaddress> <ng-template #noaddress>
<td>~</td> <td>~</td>
</ng-template> </ng-template>
</tr> </tr>
<tr>
<td class="col-4 col-lg-3">Coinbase Tags</td>
<td class="text-truncate">{{ poolStats.pool.regexes }}</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="col-lg-3"> <div class="col-lg-5">
<table class="table table-borderless table-striped"> <table class="table table-borderless table-striped">
<tbody> <tbody>
<tr> <tr>
<td class="col-4 col-lg-8">Mined Blocks</td> <td class="label">Mined Blocks</td>
<td class="text-left">{{ poolStats.blockCount }}</td> <td class="data">{{ formatNumber(poolStats.blockCount, this.locale, '1.0-0') }}</td>
</tr> </tr>
<tr> <tr>
<td class="col-4 col-lg-8">Empty Blocks</td> <td class="label">Empty Blocks</td>
<td class="text-left">{{ poolStats.emptyBlocks }}</td> <td class="data">{{ formatNumber(poolStats.emptyBlocks, this.locale, '1.0-0') }}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -54,14 +59,17 @@
<div class="spinner-border text-light"></div> <div class="spinner-border text-light"></div>
</div> </div>
<table *ngIf="blocks$ | async as blocks" class="table table-borderless" [alwaysCallback]="true" infiniteScroll [infiniteScrollDistance]="1.5" <table *ngIf="blocks$ | async as blocks" class="table table-borderless" [alwaysCallback]="true" infiniteScroll
[infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50" (scrolled)="loadMore()"> [infiniteScrollDistance]="1.5" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50"
(scrolled)="loadMore()">
<thead> <thead>
<th style="width: 15%;" i18n="latest-blocks.height">Height</th> <th style="width: 15%;" i18n="latest-blocks.height">Height</th>
<th class="d-none d-md-block" style="width: 20%;" i18n="latest-blocks.timestamp">Timestamp</th> <th class="d-none d-md-block" style="width: 20%;" i18n="latest-blocks.timestamp">Timestamp</th>
<th style="width: 20%;" i18n="latest-blocks.mined">Mined</th> <th style="width: 20%;" i18n="latest-blocks.mined">Mined</th>
<th class="text-right" style="width: 10%; padding-right: 30px" i18n="latest-blocks.reward">Reward</th> <th class="text-right" style="width: 10%; padding-right: 30px" i18n="latest-blocks.reward">Reward</th>
<th class="d-none d-lg-block text-right" style="width: 15%; padding-right: 40px" i18n="latest-blocks.transactions">Transactions</th> <th class="d-none d-lg-block text-right" style="width: 15%; padding-right: 40px"
i18n="latest-blocks.transactions">
Transactions</th>
<th style="width: 20%;" i18n="latest-blocks.size">Size</th> <th style="width: 20%;" i18n="latest-blocks.size">Size</th>
</thead> </thead>
<tbody> <tbody>
@ -113,7 +121,9 @@
</tr> </tr>
<tr> <tr>
<td class="col-4 col-lg-3">Coinbase Tags</td> <td class="col-4 col-lg-3">Coinbase Tags</td>
<td class="text-truncate"><div class="skeleton-loader"></div></td> <td class="text-truncate">
<div class="skeleton-loader"></div>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -123,11 +133,15 @@
<tbody> <tbody>
<tr> <tr>
<td class="col-4 col-lg-8">Mined Blocks</td> <td class="col-4 col-lg-8">Mined Blocks</td>
<td class="text-left"><div class="skeleton-loader"></div></td> <td class="text-left">
<div class="skeleton-loader"></div>
</td>
</tr> </tr>
<tr> <tr>
<td class="col-4 col-lg-8">Empty Blocks</td> <td class="col-4 col-lg-8">Empty Blocks</td>
<td class="text-left"><div class="skeleton-loader"></div></td> <td class="text-left">
<div class="skeleton-loader"></div>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

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

@ -36,7 +36,7 @@ div.scrollable {
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow: auto; overflow: auto;
max-height: 100px; max-height: 75px;
} }
.skeleton-loader { .skeleton-loader {
@ -48,3 +48,19 @@ div.scrollable {
margin: 0px auto; margin: 0px auto;
max-width: 900px; max-width: 900px;
} }
.box {
padding-bottom: 0px;
}
.label {
max-width: 50px;
width: 30%;
}
.data {
text-align: center;
@media (max-width: 767.98px) {
text-align: right;
}
}

1
frontend/src/app/components/pool/pool.component.ts
View File

@ -27,6 +27,7 @@ export class PoolComponent implements OnInit {
@Input() right: number | string = 45; @Input() right: number | string = 45;
@Input() left: number | string = 75; @Input() left: number | string = 75;
formatNumber = formatNumber;
poolStats$: Observable<PoolStat>; poolStats$: Observable<PoolStat>;
blocks$: Observable<BlockExtended[]>; blocks$: Observable<BlockExtended[]>;
isLoading = true; isLoading = true;

2
frontend/src/app/interfaces/node-api.interface.ts
View File

@ -90,7 +90,7 @@ export interface PoolInfo {
export interface PoolStat { export interface PoolStat {
pool: PoolInfo; pool: PoolInfo;
blockCount: number; blockCount: number;
emptyBlocks: BlockExtended[]; emptyBlocks: number;
} }
export interface BlockExtension { export interface BlockExtension {