Tweak to the block layout, move block height down, only show median fee
This commit is contained in:
parent
95d15bde2f
commit
70445ddfa2
@ -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"> </a>
|
<a [routerLink]="['/block/', block.id]" [state]="{ data: { block: block } }" class="blockLink"> </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>
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user