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

better frontend handling for very large witnesses

Browse Source
This commit is contained in:
Mononaut 2023-01-23 10:59:53 -06:00
parent 47d2a6d5c7
commit a8b162387b
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
2 changed files with 59 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/app/components/transactions-list/transactions-list.component.html
View File

@ -94,7 +94,7 @@
</tr>
<tr *ngIf="(showDetails$ | async) === true">
<td colspan="3" class="details-container" >
<table class="table table-striped table-borderless details-table mb-3">
<table class="table table-striped table-fixed table-borderless details-table mb-3">
<tbody>
<ng-template [ngIf]="vin.scriptsig">
<tr>
@ -106,9 +106,23 @@
<td style="text-align: left;">{{ vin.scriptsig }}</td>
</tr>
</ng-template>
<tr *ngIf="vin.witness">
<tr *ngIf="vin.witness" class="vin-witness">
<td i18n="transactions-list.witness">Witness</td>
<td style="text-align: left;">{{ vin.witness.join(' ') }}</td>
<td style="text-align: left;">
<ng-container *ngFor="let witness of vin.witness; index as i">
<input type="checkbox" [id]="'tx' + vindex + 'witness' + i" style="display: none;">
<p class="witness-item" [class.accordioned]="witness.length > 1000">
{{ witness }}
</p>
<div class="witness-toggle" *ngIf="witness.length > 1000">
<span class="ellipsis">...</span>
<label [for]="'tx' + vindex + 'witness' + i" class="btn btn-sm btn-primary mt-2">
<span class="show-all" i18n="show-all">Show all</span>
<span class="show-less" i18n="show-less">Show less</span>
</label>
</div>
</ng-container>
</td>
</tr>
<tr *ngIf="vin.inner_redeemscript_asm">
<td i18n="transactions-list.p2sh-redeem-script">P2SH redeem script</td>

45
frontend/src/app/components/transactions-list/transactions-list.component.scss
View File

@ -105,9 +105,7 @@ td.amount {
&:first-child {
color: #ffffff66;
white-space: pre-wrap;
@media (min-width: 476px) {
white-space: nowrap;
}
width: 150px;
}
&:nth-child(2) {
word-break: break-all;
@ -152,4 +150,45 @@ h2 {
width: 0;
flex-grow: 1;
margin-inline-end: 2em;
}
.vin-witness {
.witness-item.accordioned {
max-height: 300px;
overflow: hidden;
}
input:checked + .witness-item.accordioned {
max-height: none;
}
.witness-toggle {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 1em;
.show-all {
display: inline;
}
.show-less {
display: none;
}
.ellipsis {
visibility: visible;
}
}
input:checked ~ .witness-toggle {
.show-all {
display: none;
}
.show-less {
display: inline;
}
.ellipsis {
visibility: hidden;
}
}
}