handle many signatures

This commit is contained in:
Mononaut
2025-04-21 14:57:11 +00:00
parent 27b4dd485a
commit 773037b857
2 changed files with 29 additions and 20 deletions

View File

@@ -63,8 +63,8 @@
<fa-icon [icon]="['fas', 'lock-open']" [fixedWidth]="true"></fa-icon> <fa-icon [icon]="['fas', 'lock-open']" [fixedWidth]="true"></fa-icon>
</span> </span>
} @else { } @else {
@for (sig of tx['_sigs'][vindex]; track sig.signature; let idx = $index) { @for (sig of tx['_sigs'][vindex].slice(0, 7); track sig.signature; let idx = $index) {
@if (idx < 10) { @if (idx < 7) {
<span <span
class="sig sig-key sighash-{{sig.sighash}}" class="sig sig-key sighash-{{sig.sighash}}"
(mouseenter)="showSigInfo(i, vindex, sig)" (mouseenter)="showSigInfo(i, vindex, sig)"
@@ -76,9 +76,9 @@
</span> </span>
} }
} }
@if (tx['_sigs'][vindex].length > 10) { @if (tx['_sigs'][vindex].length > 7) {
<span class="sig sig-key sig-overflow"> <span class="sig sig-key sig-overflow">
+{{ tx['_sigs'][vindex].length - 10 }} +{{ tx['_sigs'][vindex].length - 7 }}
</span> </span>
} }
} }

View File

@@ -52,18 +52,26 @@
.sig-td:hover { .sig-td:hover {
.sig-stack { .sig-stack {
.sig-key { .sig-key {
@for $i from 1 through 10 { @for $i from 1 through 8 {
&:nth-child(#{$i}) { &:nth-child(#{$i}) {
transform: translate(#{($i - 1) * 6}px, #{($i - 1) * 6}px); transform: translate(#{($i - 1) * 6}px, #{($i - 1) * 6}px);
} }
} }
} }
.sig-overflow {
opacity: 1;
transform: translate(30px, 40px);
}
} }
} }
.sig { .sig {
cursor: pointer; cursor: pointer;
&.sig-overflow {
opacity: 0;
}
&.sighash-0 { &.sighash-0 {
--sigColor: var(--green); --sigColor: var(--green);
@@ -91,16 +99,18 @@
} }
color: var(--sigColor); color: var(--sigColor);
@for $i from 1 through 10 { &.sig-key {
&:nth-child(#{$i}) { @for $i from 1 through 8 {
transform: translate(#{($i - 1) * 3}px, #{($i - 1) * 3}px); &:nth-child(#{$i}) {
color: color-mix(in srgb, var(--sigColor) #{100 - ($i - 1) * 10} + '%', black); transform: translate(#{($i - 1) * 3}px, #{($i - 1) * 3}px);
z-index: #{10 - $i}; color: color-mix(in srgb, var(--sigColor) #{100 - ($i - 1) * 10} + '%', black);
z-index: #{10 - $i};
}
} }
} @for $i from 4 through 8 {
@for $i from 4 through 10 { &:nth-child(#{$i}) {
&:nth-child(#{$i}) { transform: translate(9px, 9px);
transform: translate(9px, 9px); }
} }
} }
@@ -131,14 +141,13 @@
// background-color: var(--tertiary); // background-color: var(--tertiary);
color: white; color: white;
border-radius: 50%; border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px; font-size: 10px;
font-weight: bold; font-weight: bold;
z-index: 1; padding: 5px;
margin-left: 10px;
margin-right: 10px;
display: block;
transition: transform 0.2s ease, opacity 0.2s ease;
} }
.mobile-bottomcol { .mobile-bottomcol {