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

Merge pull request #2706 from mononaut/fix-tx-preview-alignment

Browse Source 
Fix tx preview alignment
This commit is contained in:
wiz 2022-11-22 16:44:10 +09:00 committed by GitHub
commit 92dbba64e6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 44 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -41,24 +41,20 @@
</div> </div>
<div class="overlaid"> <div class="overlaid">
<ng-container [ngSwitch]="extraData"> <ng-container [ngSwitch]="extraData">
<table class="opreturns" *ngSwitchCase="'coinbase'"> <div class="opreturns" *ngSwitchCase="'coinbase'">
<tbody> <div class="opreturn-row">
<tr> <span class="label">Coinbase</span>
<td class="label">Coinbase</td> <span class="message">{{ tx.vin[0].scriptsig | hex2ascii }}</span>
<td class="message">{{ tx.vin[0].scriptsig | hex2ascii }}</td> </div>
</tr> </div>
</tbody> <div class="opreturns" *ngSwitchCase="'opreturn'">
</table>
<table class="opreturns" *ngSwitchCase="'opreturn'">
<tbody>
<ng-container *ngFor="let vout of opReturns.slice(0,3)"> <ng-container *ngFor="let vout of opReturns.slice(0,3)">
<tr> <div class="opreturn-row">
<td class="label">OP_RETURN</td> <span class="label">OP_RETURN</span>
<td *ngIf="vout.scriptpubkey_asm !== 'OP_RETURN'" class="message">{{ vout.scriptpubkey_asm | hex2ascii }}</td> <span *ngIf="vout.scriptpubkey_asm !== 'OP_RETURN'" class="message">{{ vout.scriptpubkey_asm | hex2ascii }}</span>
</tr> </div>
</ng-container> </ng-container>
</tbody> </div>
</table>
</ng-container> </ng-container>
</div> </div>
</div> </div>

42
frontend/src/app/components/transaction/transaction-preview.component.scss
View File

@ -29,6 +29,8 @@
.features { .features {
font-size: 24px; font-size: 24px;
margin-left: 1em; margin-left: 1em;
margin-top: 0.5em;
margin-right: -4px;
} }
.top-data { .top-data {
@ -60,6 +62,15 @@
} }
} }
.top-data .field {
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
.tx-link { .tx-link {
display: inline; display: inline;
font-size: 28px; font-size: 28px;
@ -92,26 +103,37 @@
max-width: 90%; max-width: 90%;
margin: auto; margin: auto;
overflow: hidden; overflow: hidden;
display: flex;
flex-direction: row;
justify-content: center;
.opreturns { .opreturns {
display: inline-block;
width: auto; width: auto;
max-width: 100%;
margin: auto; margin: auto;
table-layout: auto; table-layout: auto;
background: #2d3348af; background: #2d3348af;
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-top-right-radius: 5px; border-top-right-radius: 5px;
td { .opreturn-row {
padding: 10px 10px; width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-start;
padding: 0 10px;
}
&.message { .label {
overflow: hidden; margin-right: 1em;
display: inline-block; }
vertical-align: bottom;
text-overflow: ellipsis; .message {
white-space: nowrap; flex-shrink: 1;
text-align: left; white-space: nowrap;
} overflow: hidden;
text-overflow: ellipsis;
} }
} }
} }