mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-02-23 14:40:38 +01:00
Code Issues Projects Releases Wiki Activity

tweak block preview (height & hash side by side)

Browse source
This commit is contained in:
Mononaut 2022-09-10 15:57:06 +00:00
parent 9a87b357fc
commit 0ac3352835
No known key found for this signature in database
GPG key ID: 61B952CAF4838F94
2 changed files with 33 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
frontend/src/app/components/block/block-preview.component.html
View file

@ -4,15 +4,19 @@
</app-preview-title>
<div class="row">
<div class="col-sm">
<div class="row d-flex justify-content-between">
<div class="title-wrapper">
<div class="row">
<div class="block-titles">
<h1 class="title">
<ng-template [ngIf]="blockHeight === 0"><ng-container i18n="@@2303359202781425764">Genesis</ng-container></ng-template>
<ng-template [ngIf]="blockHeight" i18n="shared.block-title">{{ blockHeight }}</ng-template>
</h1>
<h2 class="subtitle" *ngIf="blockHash">
{{ blockHash.slice(0,20) }}
<br>
…{{ blockHash.slice(-19) }}
</h2>
</div>
</div>
<a class="subtitle truncated" [routerLink]="['/block/' | relativeUrl, blockHash]" *ngIf="blockHash"><span class="first">{{blockHash.slice(0,-4)}}</span><span class="last-four">{{blockHash.slice(-4)}}</span></a>
<table class="table table-borderless table-striped">
<tbody>
<!-- <tr>

28
frontend/src/app/components/block/block-preview.component.scss
View file

@ -1,10 +1,34 @@
.table {
font-size: 32px;
margin-top: 6px;
margin-top: 36px;
}
.title-wrapper {
.block-titles {
margin: 0;
padding-left: 15px;
padding-right: 15px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
width: 100%;
flex-grow: 1;
.title {
flex-shrink: 0;
flex-grow: 0;
margin-right: 8px;
font-size: 62px;
}
.subtitle {
flex-shrink: 1;
font-family: Consolas,Liberation Mono,Courier New,monospace;
font-size: 31px;
overflow: hidden;
text-overflow: clip;
}
}
.chart-container {