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

Add match rate to blocks list page

Browse Source
This commit is contained in:
Mononaut 2022-10-28 10:33:15 -06:00
parent f3eb403c17
commit b657eb4e7d
No known key found for this signature in database
GPG Key ID: 61B952CAF4838F94
3 changed files with 81 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/app/components/blocks-list/blocks-list.component.html
View File

@ -14,6 +14,8 @@
i18n-ngbTooltip="mining.pool-name" ngbTooltip="Pool" placement="bottom" #miningpool [disableTooltip]="!isEllipsisActive(miningpool)">Pool</th>
<th class="timestamp" i18n="latest-blocks.timestamp" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">Timestamp</th>
<th class="mined" i18n="latest-blocks.mined" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">Mined</th>
<th *ngIf="indexingAvailable" class="health text-left" i18n="latest-blocks.health" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}"
i18n-ngbTooltip="latest-blocks.health" ngbTooltip="Health" placement="bottom" #health [disableTooltip]="!isEllipsisActive(health)">Health</th>
<th *ngIf="indexingAvailable" class="reward text-right" i18n="latest-blocks.reward" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}"
i18n-ngbTooltip="latest-blocks.reward" ngbTooltip="Reward" placement="bottom" #reward [disableTooltip]="!isEllipsisActive(reward)">Reward</th>
<th *ngIf="indexingAvailable && !widget" class="fees text-right" i18n="latest-blocks.fees" [class]="indexingAvailable ? '' : 'legacy'">Fees</th>
@ -37,12 +39,30 @@
<span *ngIf="!widget" class="tooltiptext badge badge-secondary scriptmessage">{{ block.extras.coinbaseRaw | hex2ascii }}</span>
</div>
</td>
<td class="timestamp" *ngIf="!widget">
<td class="timestamp" *ngIf="!widget" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
&lrm;{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
</td>
<td class="mined" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">
<app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since>
</td>
<td *ngIf="indexingAvailable" class="health text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
<a *ngIf="block.extras?.matchRate != null" class="clear-link" [routerLink]="['/block-audit/' | relativeUrl, block.id]">
<div class="progress progress-health">
<div class="progress-bar progress-bar-health" role="progressbar"
[ngStyle]="{'width': (100 - (block.extras?.matchRate || 0)) + '%' }"></div>
<div class="progress-text">
<span>{{ block.extras.matchRate }}%</span>
</div>
</div>
</a>
<div *ngIf="block.extras?.matchRate == null" class="progress progress-health">
<div class="progress-bar progress-bar-health" role="progressbar"
[ngStyle]="{'width': '100%' }"></div>
<div class="progress-text">
<span>~</span>
</div>
</div>
</td>
<td *ngIf="indexingAvailable" class="reward text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
<app-amount [satoshis]="block.extras.reward" [noFiat]="true" digitsInfo="1.2-2"></app-amount>
</td>
@ -77,6 +97,9 @@
<td class="mined" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">
<span class="skeleton-loader" style="max-width: 125px"></span>
</td>
<td *ngIf="indexingAvailable" class="health text-left" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
<span class="skeleton-loader" style="max-width: 75px"></span>
</td>
<td *ngIf="indexingAvailable" class="reward text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
<span class="skeleton-loader" style="max-width: 75px"></span>
</td>

56
frontend/src/app/components/blocks-list/blocks-list.component.scss
View File

@ -63,7 +63,7 @@ tr, td, th {
}
.height {
width: 10%;
width: 8%;
}
.height.widget {
width: 15%;
@ -77,12 +77,18 @@ tr, td, th {
.timestamp {
width: 18%;
@media (max-width: 900px) {
@media (max-width: 1100px) {
display: none;
}
}
.timestamp.legacy {
width: 20%;
@media (max-width: 1100px) {
display: table-cell;
}
@media (max-width: 850px) {
display: none;
}
}
.mined {
@ -93,6 +99,10 @@ tr, td, th {
}
.mined.legacy {
width: 15%;
@media (max-width: 1000px) {
padding-right: 20px;
width: 20%;
}
@media (max-width: 576px) {
display: table-cell;
}
@ -100,6 +110,7 @@ tr, td, th {
.txs {
padding-right: 40px;
width: 8%;
@media (max-width: 1100px) {
padding-right: 10px;
}
@ -113,17 +124,21 @@ tr, td, th {
}
.txs.widget {
padding-right: 0;
display: none;
@media (max-width: 650px) {
display: none;
}
}
.txs.legacy {
padding-right: 80px;
width: 10%;
width: 18%;
display: table-cell;
@media (max-width: 1000px) {
padding-right: 20px;
}
}
.fees {
width: 10%;
width: 8%;
@media (max-width: 650px) {
display: none;
}
@ -133,7 +148,7 @@ tr, td, th {
}
.reward {
width: 10%;
width: 8%;
@media (max-width: 576px) {
width: 7%;
padding-right: 30px;
@ -152,8 +167,11 @@ tr, td, th {
}
.size {
width: 12%;
width: 10%;
@media (max-width: 1000px) {
width: 13%;
}
@media (max-width: 950px) {
width: 15%;
}
@media (max-width: 650px) {
@ -164,12 +182,34 @@ tr, td, th {
}
}
.size.legacy {
width: 20%;
width: 30%;
@media (max-width: 576px) {
display: table-cell;
}
}
.health {
width: 10%;
@media (max-width: 1000px) {
width: 13%;
}
@media (max-width: 950px) {
display: none;
}
}
.health.widget {
width: 25%;
@media (max-width: 1000px) {
display: none;
}
@media (max-width: 767px) {
display: table-cell;
}
@media (max-width: 500px) {
display: none;
}
}
/* Tooltip text */
.tooltip-custom {
position: relative;

9
frontend/src/styles.scss
View File

@ -668,6 +668,15 @@ h1, h2, h3 {
background-color: #2e324e;
}
.progress.progress-health {
background: repeating-linear-gradient(to right, #2d3348, #2d3348 0%, #105fb0 0%, #1a9436 100%);
justify-content: flex-end;
}
.progress-bar.progress-bar-health {
background: #2d3348;
}
.mt-2-5, .my-2-5 {
margin-top: 0.75rem !important;
}