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="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">
<ng-container *ngFor="let cell of timeline; let i = index;">
<div class="node-spacer"></div>
@ -37,7 +37,7 @@
</ng-container>
<ng-template #nonNode>
<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="node-spacer" *ngSwitchDefault></div>
</ng-container>

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

@ -31,6 +31,19 @@
-ms-overflow-style: 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 {
display: none;
}
@ -197,6 +210,10 @@
&.fullrbf {
border-right: solid 10px #1bd8f4;
}
&.last-pipe {
height: 150px;
bottom: -42px;
}
}
.corner {