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

migrate old text truncation implementations to new component

Browse Source
This commit is contained in:
Mononaut
2023-01-05 11:01:46 -06:00
parent 920b1e1425
commit ad57df34d2
18 changed files with 117 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/transaction/transaction-preview.component.html
View File

@@ -4,7 +4,7 @@
</app-preview-title>
<div class="row d-flex justify-content-between full-width-row">
<div class="title-wrapper">
<h1 class="title truncated"><span class="first">{{txId.slice(0,-4)}}</span><span class="last-four">{{txId.slice(-4)}}</span></h1>
<h1 class="title truncated"><app-truncate [text]="txId"></app-truncate></h1>
</div>
<div *ngIf="network !== 'liquid' && network !== 'liquidtestnet'" class="features">
<app-tx-features [tx]="tx"></app-tx-features>

33
frontend/src/app/components/transaction/transaction.component.html
View File

@@ -4,20 +4,19 @@
<div *ngIf="rbfTransaction" class="alert alert-mempool" role="alert">
<span i18n="transaction.rbf.replacement|RBF replacement">This transaction has been replaced by:</span>
<a class="alert-link" [routerLink]="['/tx/' | relativeUrl, rbfTransaction.txid]">
<span class="d-inline d-lg-none">{{ rbfTransaction.txid | shortenString : 24 }}</span>
<span class="d-none d-lg-inline">{{ rbfTransaction.txid }}</span>
<app-truncate [text]="rbfTransaction.txid" [lastChars]="12"></app-truncate>
</a>
</div>
<ng-container *ngIf="!rbfTransaction || rbfTransaction?.size">
<h1 i18n="shared.transaction">Transaction</h1>
<span class="tx-link float-left">
<a [routerLink]="['/tx/' | relativeUrl, txId]">
<span class="d-inline d-lg-none">{{ txId | shortenString : 24 }}</span>
<span class="d-none d-lg-inline">{{ txId }}</span>
<span class="tx-link">
<a [routerLink]="['/tx/' | relativeUrl, txId]" class="txid">
<app-truncate [text]="txId" [lastChars]="12">
<app-clipboard [text]="txId"></app-clipboard>
</app-truncate>
</a>
<app-clipboard [text]="txId"></app-clipboard>
</span>
<div class="container-buttons">
@@ -144,12 +143,12 @@
<br>
<h2 class="text-left">CPFP <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true" size="xs"></fa-icon></h2>
<div class="box">
<table class="table table-borderless table-striped">
<div class="box cpfp-details">
<table class="table table-fixed table-borderless table-striped">
<thead>
<tr>
<th i18n="transactions-list.vout.scriptpubkey-type">Type</th>
<th i18n="dashboard.latest-transactions.txid">TXID</th>
<th class="txids" i18n="dashboard.latest-transactions.txid">TXID</th>
<th class="d-none d-lg-table-cell" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</th>
<th i18n="transaction.fee-rate|Transaction fee rate">Fee rate</th>
<th class="d-none d-lg-table-cell"></th>
@@ -160,8 +159,7 @@
<tr *ngFor="let cpfpTx of cpfpInfo.descendants">
<td><span class="badge badge-primary" i18n="transaction.descendant|Descendant">Descendant</span></td>
<td><a [routerLink]="['/tx' | relativeUrl, cpfpTx.txid]">
<span class="d-inline d-lg-none">{{ cpfpTx.txid | shortenString : 8 }}</span>
<span class="d-none d-lg-inline">{{ cpfpTx.txid }}</span>
<app-truncate [text]="cpfpTx.txid"></app-truncate>
</a>
</td>
<td class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight / 4 | vbytes: 2"></td>
@@ -172,10 +170,9 @@
<ng-template [ngIf]="cpfpInfo?.bestDescendant">
<tr>
<td><span class="badge badge-success" i18n="transaction.descendant|Descendant">Descendant</span></td>
<td>
<td class="txids">
<a [routerLink]="['/tx' | relativeUrl, cpfpInfo.bestDescendant.txid]">
<span class="d-inline d-lg-none">{{ cpfpInfo.bestDescendant.txid | shortenString : 8 }}</span>
<span class="d-none d-lg-inline">{{ cpfpInfo.bestDescendant.txid }}</span>
<app-truncate [text]="cpfpInfo.bestDescendant.txid"></app-truncate>
</a>
</td>
<td class="d-none d-lg-table-cell" [innerHTML]="cpfpInfo.bestDescendant.weight / 4 | vbytes: 2"></td>
@@ -186,9 +183,9 @@
<ng-template [ngIf]="cpfpInfo?.ancestors?.length">
<tr *ngFor="let cpfpTx of cpfpInfo.ancestors">
<td><span class="badge badge-primary" i18n="transaction.ancestor|Transaction Ancestor">Ancestor</span></td>
<td><a [routerLink]="['/tx' | relativeUrl, cpfpTx.txid]">
<span class="d-inline d-lg-none">{{ cpfpTx.txid | shortenString : 8 }}</span>
<span class="d-none d-lg-inline">{{ cpfpTx.txid }}</span>
<td class="txids">
<a [routerLink]="['/tx' | relativeUrl, cpfpTx.txid]">
<app-truncate [text]="cpfpTx.txid"></app-truncate>
</a>
</td>
<td class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight / 4 | vbytes: 2"></td>

27
frontend/src/app/components/transaction/transaction.component.scss
View File

@@ -19,22 +19,33 @@
}
}
.tx-link {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: baseline;
width: 0;
max-width: 100%;
overflow: hidden;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 8px;
display: inline-block;
width: 100%;
flex-shrink: 0;
@media (min-width: 651px) {
display: flex;
width: auto;
flex-grow: 1;
margin-bottom: 0px;
margin-right: 1em;
top: 1px;
position: relative;
}
@media (max-width: 650px) {
width: 100%;
order: 3;
}
.txid {
width: 200px;
min-width: 200px;
flex-grow: 1;
}
}
.td-width {
@@ -188,4 +199,10 @@
margin-left: 8px;
}
}
}
.cpfp-details {
.txids {
width: 60%;
}
}