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 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>
 | 
			
		||||
      <div class="block-height">
 | 
			
		||||
        <a [routerLink]="['/block/', block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="block-body">
 | 
			
		||||
        <div class="fees">
 | 
			
		||||
          ~{{ block.medianFee | ceil }} sat/vB
 | 
			
		||||
          <br/>
 | 
			
		||||
          <span class="yellow-color">{{ block.feeRange[0] | ceil }} - {{ block.feeRange[block.feeRange.length - 1] | ceil }} sat/vB</span>
 | 
			
		||||
          <span class="yellow-color">~{{ block.medianFee | ceil }} sat/vB</span>
 | 
			
		||||
        </div>
 | 
			
		||||
        <div class="block-size">{{ block.size | bytes: 2 }}</div>
 | 
			
		||||
        <div class="transaction-count">{{ block.tx_count }} transactions</div>
 | 
			
		||||
        <br /><br />
 | 
			
		||||
        <div class="time-difference"><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since> ago</div>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="block-height">
 | 
			
		||||
        <a [routerLink]="['/block/', block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
  <div [hidden]="!arrowVisible" id="arrow-up" [ngStyle]="{'left': arrowLeftPx + 'px' }"></div>
 | 
			
		||||
 | 
			
		||||
@ -41,7 +41,7 @@
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.fees {
 | 
			
		||||
  font-size: 10px;
 | 
			
		||||
  font-size: 14px;
 | 
			
		||||
  margin-top: 10px;
 | 
			
		||||
  margin-bottom: 2px;
 | 
			
		||||
}
 | 
			
		||||
@ -53,9 +53,9 @@
 | 
			
		||||
.block-height {
 | 
			
		||||
  position: absolute;
 | 
			
		||||
  font-size: 18px;
 | 
			
		||||
  bottom: 160px;
 | 
			
		||||
  top: 133px;
 | 
			
		||||
  width: 100%;
 | 
			
		||||
  left: -12px;
 | 
			
		||||
  left: 0px;
 | 
			
		||||
  text-shadow: 0px 32px 3px #111;
 | 
			
		||||
  z-index: 100;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -11,7 +11,7 @@
 | 
			
		||||
.position-container {
 | 
			
		||||
  position: absolute;
 | 
			
		||||
  left: 50%;
 | 
			
		||||
  bottom: 150px;
 | 
			
		||||
  bottom: 185px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.chart-holder {
 | 
			
		||||
@ -37,7 +37,7 @@
 | 
			
		||||
@media (min-width: 1920px) {
 | 
			
		||||
  .position-container {
 | 
			
		||||
    transform: scale(1.3);
 | 
			
		||||
    bottom: 190px;
 | 
			
		||||
    bottom: 230px;
 | 
			
		||||
  }
 | 
			
		||||
  .chart-holder {
 | 
			
		||||
    height: calc(100% - 280px);
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user