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

Tweak to the block layout, move block height down, only show median fee

Browse Source
This commit is contained in:
wiz 2020-03-13 21:10:10 +09:00
parent 95d15bde2f
commit 70445ddfa2
No known key found for this signature in database
GPG Key ID: A394E332255A6173
3 changed files with 9 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
View File

@ -2,20 +2,18 @@
<div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn" > <div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn" >
<div class="text-center bitcoin-block mined-block" id="bitcoin-block-{{ block.height }}" [ngStyle]="getStyleForBlock(block)"> <div class="text-center bitcoin-block mined-block" id="bitcoin-block-{{ block.height }}" [ngStyle]="getStyleForBlock(block)">
<a [routerLink]="['/block/', block.id]" [state]="{ data: { block: block } }" class="blockLink">&nbsp;</a> <a [routerLink]="['/block/', block.id]" [state]="{ data: { block: block } }" class="blockLink">&nbsp;</a>
<div class="block-height">
<a [routerLink]="['/block/', block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a>
</div>
<div class="block-body"> <div class="block-body">
<div class="fees"> <div class="fees">
~{{ block.medianFee | ceil }} sat/vB <span class="yellow-color">~{{ block.medianFee | ceil }} sat/vB</span>
<br/>
<span class="yellow-color">{{ block.feeRange[0] | ceil }} - {{ block.feeRange[block.feeRange.length - 1] | ceil }} sat/vB</span>
</div> </div>
<div class="block-size">{{ block.size | bytes: 2 }}</div> <div class="block-size">{{ block.size | bytes: 2 }}</div>
<div class="transaction-count">{{ block.tx_count }} transactions</div> <div class="transaction-count">{{ block.tx_count }} transactions</div>
<br /><br /> <br /><br />
<div class="time-difference"><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since> ago</div> <div class="time-difference"><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since> ago</div>
</div> </div>
<div class="block-height">
<a [routerLink]="['/block/', block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a>
</div>
</div> </div>
</div> </div>
<div [hidden]="!arrowVisible" id="arrow-up" [ngStyle]="{'left': arrowLeftPx + 'px' }"></div> <div [hidden]="!arrowVisible" id="arrow-up" [ngStyle]="{'left': arrowLeftPx + 'px' }"></div>

6
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
View File

@ -41,7 +41,7 @@
} }
.fees { .fees {
font-size: 10px; font-size: 14px;
margin-top: 10px; margin-top: 10px;
margin-bottom: 2px; margin-bottom: 2px;
} }
@ -53,9 +53,9 @@
.block-height { .block-height {
position: absolute; position: absolute;
font-size: 18px; font-size: 18px;
bottom: 160px; top: 133px;
width: 100%; width: 100%;
left: -12px; left: 0px;
text-shadow: 0px 32px 3px #111; text-shadow: 0px 32px 3px #111;
z-index: 100; z-index: 100;
} }

4
frontend/src/app/components/television/television.component.scss
View File

@ -11,7 +11,7 @@
.position-container { .position-container {
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 150px; bottom: 185px;
} }
.chart-holder { .chart-holder {
@ -37,7 +37,7 @@
@media (min-width: 1920px) { @media (min-width: 1920px) {
.position-container { .position-container {
transform: scale(1.3); transform: scale(1.3);
bottom: 190px; bottom: 230px;
} }
.chart-holder { .chart-holder {
height: calc(100% - 280px); height: calc(100% - 280px);