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

change rbf tooltip to standard two-column table design

Browse Source
This commit is contained in:
Mononaut 2023-03-05 03:22:42 -06:00
parent 7e9cfa0858
commit f95da34fd1
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
2 changed files with 23 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.html
View File

@ -5,25 +5,33 @@
[style.left]="tooltipPosition.x + 'px'" [style.left]="tooltipPosition.x + 'px'"
[style.top]="tooltipPosition.y + 'px'" [style.top]="tooltipPosition.y + 'px'"
> >
<span class="txid">{{ rbfInfo.tx.txid | shortenString : 24 }}</span> <table>
<table class="table table-borderless table-striped">
<tbody> <tbody>
<tr> <tr>
<td i18n="transaction.first-seen|Transaction first seen">First seen</td> <td class="td-width" i18n="shared.transaction">Transaction</td>
<td>
<a [routerLink]="['/tx/' | relativeUrl, rbfInfo.tx.txid]">{{ rbfInfo.tx.txid | shortenString : 16}}</a>
</td>
</tr>
<tr>
<td class="td-width" i18n="transaction.first-seen|Transaction first seen">First seen</td>
<td><i><app-time kind="since" [time]="rbfInfo.time" [fastRender]="true"></app-time></i></td> <td><i><app-time kind="since" [time]="rbfInfo.time" [fastRender]="true"></app-time></i></td>
</tr> </tr>
<tr> <tr>
<td i18n="transaction.fee|Transaction fee">Fee</td> <td class="td-width" i18n="transaction.fee|Transaction fee">Fee</td>
<td>{{ rbfInfo.tx.fee | number }} <span class="symbol" i18n="shared.sat|sat">sat</span></td> <td>{{ rbfInfo.tx.fee | number }} <span class="symbol" i18n="shared.sat|sat">sat</span></td>
</tr> </tr>
<tr> <tr>
<td i18n="transaction.vsize|Transaction Virtual Size">Virtual size</td> <td class="td-width" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</td>
<td [innerHTML]="'&lrm;' + (rbfInfo.tx.vsize | vbytes: 2)"></td> <td [innerHTML]="'&lrm;' + (rbfInfo.tx.vsize | vbytes: 2)"></td>
</tr> </tr>
<tr> <tr>
<td class="td-width" i18n="transaction.status|Transaction Status">Status</td>
<td>
<span *ngIf="rbfInfo.tx.rbf; else rbfDisabled" class="badge badge-success" i18n="rbfInfo-features.tag.rbf|RBF">RBF</span> <span *ngIf="rbfInfo.tx.rbf; else rbfDisabled" class="badge badge-success" i18n="rbfInfo-features.tag.rbf|RBF">RBF</span>
<ng-template #rbfDisabled><span class="badge badge-danger mr-1"><del i18n="rbfInfo-features.tag.rbf|RBF">RBF</del></span></ng-template> <ng-template #rbfDisabled><span class="badge badge-danger mr-1"><del i18n="rbfInfo-features.tag.rbf|RBF">RBF</del></span></ng-template>
<span *ngIf="rbfInfo.tx.mined" class="badge badge-success" i18n="transaction.rbf.mined">Mined</span> <span *ngIf="rbfInfo.tx.mined" class="badge badge-success" i18n="transaction.rbf.mined">Mined</span>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

21
frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.scss
View File

@ -5,23 +5,12 @@
border-radius: 4px; border-radius: 4px;
box-shadow: 1px 1px 10px rgba(0,0,0,0.5); box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
color: #b1b1b1; color: #b1b1b1;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 10px 15px; padding: 10px 15px;
text-align: left; text-align: left;
pointer-events: none; pointer-events: none;
max-width: 300px;
p {
margin: 0;
white-space: nowrap;
}
table tr td {
padding: 0;
&:last-child {
text-align: right;
}
}
.badge { .badge {
margin-right: 1em; margin-right: 1em;
@ -30,3 +19,7 @@
} }
} }
} }
.td-width {
padding-right: 10px;
}