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

Fade out the bottom of collapsed rbf history

Browse Source
This commit is contained in:
natsee 2023-12-19 14:40:37 +01:00
parent 75b3bc6249
commit 7f488f5b01
No known key found for this signature in database
GPG Key ID: 233CF3150A89BED8
2 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
<div class="rbf-timeline box" [class.mined]="replacements.mined"> <div class="rbf-timeline box" [class.mined]="replacements.mined">
<div class="timeline-wrapper"> <div class="timeline-wrapper">
<div class="timeline" *ngFor="let timeline of rows; let j = index"> <div class="timeline" *ngFor="let timeline of rows; let j = index" [class.fade-out]="!timelineExpanded && j === rowLimit - 1">
<div class="intervals" *ngIf="j < rowLimit || timelineExpanded"> <div class="intervals" *ngIf="j < rowLimit || timelineExpanded">
<ng-container *ngFor="let cell of timeline; let i = index;"> <ng-container *ngFor="let cell of timeline; let i = index;">
<div class="node-spacer"></div> <div class="node-spacer"></div>
@ -37,7 +37,7 @@
</ng-container> </ng-container>
<ng-template #nonNode> <ng-template #nonNode>
<ng-container [ngSwitch]="cell.connector"> <ng-container [ngSwitch]="cell.connector">
<div class="connector" [class.fullrbf]="cell.fullRbf" *ngSwitchCase="'pipe'"><div class="pipe" [class.fullrbf]="cell.fullRbf"></div></div> <div class="connector" [class.fullrbf]="cell.fullRbf" *ngSwitchCase="'pipe'"><div class="pipe" [class.fullrbf]="cell.fullRbf" [class.last-pipe]="!timelineExpanded && j === rowLimit - 1"></div></div>
<div class="connector" *ngSwitchCase="'corner'"><div class="corner" [class.fullrbf]="cell.fullRbf"></div></div> <div class="connector" *ngSwitchCase="'corner'"><div class="corner" [class.fullrbf]="cell.fullRbf"></div></div>
<div class="node-spacer" *ngSwitchDefault></div> <div class="node-spacer" *ngSwitchDefault></div>
</ng-container> </ng-container>

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

@ -31,6 +31,19 @@
-ms-overflow-style: none; -ms-overflow-style: none;
scrollbar-width: none; scrollbar-width: none;
.fade-out {
position: relative;
&::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(36, 39, 62, 0) 0%, rgba(36, 39, 62, 1) 100%);
z-index: 1;
}
}
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
} }
@ -197,6 +210,10 @@
&.fullrbf { &.fullrbf {
border-right: solid 10px #1bd8f4; border-right: solid 10px #1bd8f4;
} }
&.last-pipe {
height: 150px;
bottom: -42px;
}
} }
.corner { .corner {