mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2024-11-20 10:21:52 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #2543 from mononaut/block-preview-title-layout

Browse Source 
Adjust block preview layout
This commit is contained in:
wiz 2022-09-12 05:08:32 +09:00 committed by GitHub
commit 23efacad70
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 45 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/app/components/block/block-preview.component.html
View File

@ -4,15 +4,18 @@
</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>
<div class="blockhash" *ngIf="blockHash">
<h2 class="truncate right">{{ blockHash.slice(0,32) }}</h2>
<h2 class="truncate left">{{ blockHash.slice(32) }}</h2>
</div>
</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>

41
frontend/src/app/components/block/block-preview.component.scss
View File

@ -1,10 +1,47 @@
.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: 30px;
font-size: 64px;
}
.blockhash {
width: 0;
flex-grow: 1;
flex-shrink: 1;
font-family: Consolas,Liberation Mono,Courier New,monospace;
font-size: 32px;
text-align: right;
.truncate {
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin: 0;
&.left {
direction: rtl;
}
}
}
}
.chart-container {