diff --git a/frontend/src/app/components/eight-blocks/eight-blocks.component.html b/frontend/src/app/components/eight-blocks/eight-blocks.component.html index 6a3bbb7c0..cc4b7a734 100644 --- a/frontend/src/app/components/eight-blocks/eight-blocks.component.html +++ b/frontend/src/app/components/eight-blocks/eight-blocks.component.html @@ -16,10 +16,12 @@ >

{{ blockInfo[i].height }}

-

{{ blockInfo[i].hash }}

-

{{ blockInfo[i].time }}

-

{{ blockInfo[i].count }}

-

{{ blockInfo[i].size }}

+

{{ blockInfo[i].id.slice(0, 32) }}
{{ blockInfo[i].id.slice(32) }}

+

{{ blockInfo[i].timeString }}

+

{{ blockInfo[i].tx_count }} transactions

+

{{ blockInfo[i].extras.medianFee | feeRounding }} sat/vB

+

{{ blockInfo[i].size | bytes: 2 : 'B' : 'MB' : true }}

+

Mined by {{ blockInfo[i].extras.pool.name || 'Unknown' }}

diff --git a/frontend/src/app/components/eight-blocks/eight-blocks.component.scss b/frontend/src/app/components/eight-blocks/eight-blocks.component.scss index bee7d7151..8b7825e8b 100644 --- a/frontend/src/app/components/eight-blocks/eight-blocks.component.scss +++ b/frontend/src/app/components/eight-blocks/eight-blocks.component.scss @@ -21,30 +21,37 @@ .info { position: absolute; - left: 10%; - top: 10%; - right: 10%; - bottom: 10%; - height: 80%; - width: 80%; - overflow: hidden; - font-size: calc(var(--block-width) * 0.04); + left: 5%; + top: 5%; + right: 5%; + bottom: 5%; + height: 90%; + width: 90%; + font-size: calc(var(--block-width) * 0.03); + text-shadow: 0 0 calc(var(--block-width) * 0.05) black; h1 { - font-size: 4em; - margin-bottom: 0.1em; + font-size: 3em; + line-height: 1; + margin-bottom: calc(var(--block-width) * 0.03); } h2 { - font-size: 2.5em; - margin-bottom: 0.1em; + font-size: 1.5em; + line-height: 1; + margin-bottom: calc(var(--block-width) * 0.03); } .hash { font-family: monospace; word-wrap: break-word; - font-size: 1em; - margin-bottom: 0.1em; + font-size: 1.2em; + line-height: 1; + margin-bottom: calc(var(--block-width) * 0.03); } } } + + .block-container { + overflow: hidden; + } } \ No newline at end of file diff --git a/frontend/src/app/components/eight-blocks/eight-blocks.component.ts b/frontend/src/app/components/eight-blocks/eight-blocks.component.ts index 0027a3e7f..63be271d3 100644 --- a/frontend/src/app/components/eight-blocks/eight-blocks.component.ts +++ b/frontend/src/app/components/eight-blocks/eight-blocks.component.ts @@ -26,6 +26,10 @@ function bestFitResolution(min, max, n): number { return best; } +interface BlockInfo extends BlockExtended { + timeString: string; +} + @Component({ selector: 'app-eight-blocks', templateUrl: './eight-blocks.component.html', @@ -70,7 +74,7 @@ export class EightBlocksComponent implements OnInit, OnDestroy { testShiftTimeout: number; showInfo: boolean = true; - blockInfo: { [key: string]: string}[] = []; + blockInfo: BlockInfo[] = []; wrapperStyle = { '--block-width': '1080px', @@ -213,11 +217,8 @@ export class EightBlocksComponent implements OnInit, OnDestroy { setTimeout(() => { this.blockInfo = blocks.map(block => { return { - height: `${block.height}`, - hash: block.id, - time: (new Date(block.timestamp * 1000)).toLocaleTimeString(), - count: `${block.tx_count} txs`, - size: `${this.bytesPipe.transform(block.size, 2, 'B', 'MB', true)}`, + ...block, + timeString: (new Date(block.timestamp * 1000)).toLocaleTimeString(), }; }); this.showInfo = true;