machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #873 from MiguelMedeiros/fix-height-title-components

Browse Source 
UI/UX: Fix height inconsistencies between components.
This commit is contained in:
softsimon
2021-10-29 12:14:26 +04:00
committed by GitHub
parent 44343c045d 873f214245
commit e2ea25bac4
14 changed files with 360 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/app/components/address/address.component.html
View File

@@ -1,13 +1,14 @@
<div class="container-xl">
<h1 i18n="shared.address">Address</h1>
<div class="tx-link">
<a [routerLink]="['/address/' | relativeUrl, addressString]" >
<span class="d-inline d-lg-none">{{ addressString | shortenString : 18 }}</span>
<span class="d-none d-lg-inline">{{ addressString }}</span>
</a>
<app-clipboard [text]="addressString"></app-clipboard>
<div class="title-address">
<h1 i18n="shared.address">Address</h1>
<div class="tx-link">
<a [routerLink]="['/address/' | relativeUrl, addressString]" >
<span class="d-inline d-lg-none">{{ addressString | shortenString : 18 }}</span>
<span class="d-none d-lg-inline">{{ addressString }}</span>
</a>
<app-clipboard [text]="addressString"></app-clipboard>
</div>
</div>
<br>
<div class="clearfix"></div>
@@ -50,12 +51,13 @@
</div>
<br>
<h2>
<ng-template [ngIf]="!transactions?.length">&nbsp;</ng-template>
<ng-template i18n="X of X Address Transaction" [ngIf]="transactions?.length === 1">{{ (transactions?.length | number) || '?' }} of {{ txCount | number }} transaction</ng-template>
<ng-template i18n="X of X Address Transactions (Plural)" [ngIf]="transactions?.length > 1">{{ (transactions?.length | number) || '?' }} of {{ txCount | number }} transactions</ng-template>
</h2>
<div class="title-tx">
<h2>
<ng-template [ngIf]="!transactions?.length">&nbsp;</ng-template>
<ng-template i18n="X of X Address Transaction" [ngIf]="transactions?.length === 1">{{ (transactions?.length | number) || '?' }} of {{ txCount | number }} transaction</ng-template>
<ng-template i18n="X of X Address Transactions (Plural)" [ngIf]="transactions?.length > 1">{{ (transactions?.length | number) || '?' }} of {{ txCount | number }} transactions</ng-template>
</h2>
</div>
<app-transactions-list [transactions]="transactions" [showConfirmations]="true" (loadMore)="loadMore()"></app-transactions-list>

29
frontend/src/app/components/address/address.component.scss
View File

@@ -35,17 +35,22 @@
h1 {
margin: 0px;
padding: 0px;
margin-right: 10px;
font-size: 1.9rem;
@media (min-width: 576px) {
font-size: 2rem;
float: left;
margin-right: 10px;
}
@media (min-width: 768px) {
font-size: 2.5rem;
}
}
.address-link {
line-height: 56px;
line-height: 56px;
margin-left: 0px;
top: -2px;
position: relative;
position: relative;
@media (min-width: 768px) {
line-height: 69px;
}
@@ -69,10 +74,20 @@ h1 {
.tx-link {
display: block;
width: 100%;
top: 14px;
height: 100%;
top: 9px;
position: relative;
@media (min-width: 576px) {
top: 11px;
}
@media (min-width: 768px) {
top: 20px;
top: 17px;
}
}
}
.title-tx {
h2 {
line-height: 1;
margin-bottom: 10px;
}
}