mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-02-24 22:58:30 +01:00
Code Issues Projects Releases Wiki Activity

Fix pool page skeleton

Browse source
This commit is contained in:
nymkappa 2022-03-16 20:10:01 +01:00
parent 96dc3fb24a
commit dfff57d204
No known key found for this signature in database
GPG key ID: E155910B16E8BD04
2 changed files with 21 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
frontend/src/app/components/pool/pool.component.html
View file

@ -9,7 +9,7 @@
<div class="box"> <div class="box">
<div class="row"> <div class="row">
<div class="col-lg-7"> <div class="col-lg-9">
<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>
@ -36,7 +36,7 @@
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="col-lg-5"> <div class="col-lg-3">
<table class="table table-borderless table-striped"> <table class="table table-borderless table-striped">
<tbody> <tbody>
<tr> <tr>
@ -115,16 +115,15 @@
<td class="height"> <td class="height">
<span class="skeleton-loader"></span> <span class="skeleton-loader"></span>
</td> </td>
<td class="pool text-left">
<img width="0" height="25" style="opacity: 0">
<span class="skeleton-loader"></span>
</td>
<td class="timestamp"> <td class="timestamp">
<span class="skeleton-loader"></span> <span class="skeleton-loader"></span>
</td> </td>
<td class="mined"> <td class="mined">
<span class="skeleton-loader"></span> <span class="skeleton-loader"></span>
</td> </td>
<td class="coinbase">
<span class="skeleton-loader"></span>
</td>
<td class="reward text-right"> <td class="reward text-right">
<span class="skeleton-loader"></span> <span class="skeleton-loader"></span>
</td> </td>
@ -134,7 +133,7 @@
<td class="txs text-right"> <td class="txs text-right">
<span class="skeleton-loader"></span> <span class="skeleton-loader"></span>
</td> </td>
<td class="size"> <td class="size text-right">
<span class="skeleton-loader"></span> <span class="skeleton-loader"></span>
</td> </td>
</tr> </tr>
@ -146,10 +145,10 @@
<ng-template #loadingMain> <ng-template #loadingMain>
<div> <div>
<h1 class="m-0 mb-2"> <div style="display:flex">
<img width="50" height="50" src="./resources/mining-pools/default.svg" class="mr-3"> <img width="50" height="50" src="./resources/mining-pools/default.svg" class="mr-3 mb-3">
<div class="skeleton-loader"></div> <h1 class="m-0 pt-1 pt-md-0"><div class="skeleton-loader"></div></h1>
</h1> </div>
<div class="box"> <div class="box">
<div class="row"> <div class="row">
@ -157,7 +156,13 @@
<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="skeleton-loader"></div>
</td>
</tr>
<tr>
<td class="label">Addresses</td>
<td class="text-truncate"> <td class="text-truncate">
<div class="scrollable"> <div class="scrollable">
<div class="skeleton-loader"></div> <div class="skeleton-loader"></div>
@ -167,12 +172,6 @@
<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">
<div class="skeleton-loader"></div>
</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
@ -180,14 +179,14 @@
<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"> <td class="text-truncate">
<div class="skeleton-loader"></div> <div class="skeleton-loader"></div>
</td> </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"> <td class="text-truncate">
<div class="skeleton-loader"></div> <div class="skeleton-loader"></div>
</td> </td>
</tr> </tr>

6
frontend/src/app/components/pool/pool.component.scss
View file

@ -40,17 +40,11 @@ div.scrollable {
max-height: 75px; max-height: 75px;
} }
.skeleton-loader {
width: 100%;
max-width: 90px;
}
.box { .box {
padding-bottom: 5px; padding-bottom: 5px;
} }
.label { .label {
max-width: 50px;
width: 30%; width: 30%;
} }