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

Fix fade out on RBF history

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

5
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" [class.fade-out]="!timelineExpanded && j === rowLimit - 1"> <div class="timeline" *ngFor="let timeline of rows; let j = index">
<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>
@ -50,6 +50,8 @@
</ng-container> </ng-container>
</div> </div>
</div> </div>
</div>
<div [class.fade-out]="!timelineExpanded && rows.length > rowLimit"></div>
<div class="toggle-wrapper" *ngIf="rows.length > rowLimit && rowLimit !== 0"> <div class="toggle-wrapper" *ngIf="rows.length > rowLimit && rowLimit !== 0">
<button class="btn btn-sm btn-primary graph-toggle" (click)="toggleTimeline(true);" *ngIf="!timelineExpanded; else collapseBtn"> <button class="btn btn-sm btn-primary graph-toggle" (click)="toggleTimeline(true);" *ngIf="!timelineExpanded; else collapseBtn">
<span i18n="show-all">Show all</span> <span i18n="show-all">Show all</span>
@ -59,7 +61,6 @@
<button class="btn btn-sm btn-primary graph-toggle" (click)="toggleTimeline(false);"><span i18n="show-less">Show less</span></button> <button class="btn btn-sm btn-primary graph-toggle" (click)="toggleTimeline(false);"><span i18n="show-less">Show less</span></button>
</ng-template> </ng-template>
</div> </div>
</div>
<ng-template #nodeSpacer> <ng-template #nodeSpacer>
<div class="node-spacer"></div> <div class="node-spacer"></div>

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

@ -31,6 +31,11 @@
-ms-overflow-style: none; -ms-overflow-style: none;
scrollbar-width: none; scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
.fade-out { .fade-out {
position: relative; position: relative;
@ -38,22 +43,18 @@
content: ''; content: '';
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 70px;
top: -70px;
background: linear-gradient(to bottom, rgba(36, 39, 62, 0) 0%, rgba(36, 39, 62, 1) 100%); background: linear-gradient(to bottom, rgba(36, 39, 62, 0) 0%, rgba(36, 39, 62, 1) 100%);
z-index: 1; z-index: 1;
} }
} }
&::-webkit-scrollbar {
display: none;
}
.toggle-wrapper { .toggle-wrapper {
width: 100%; width: 100%;
text-align: center; text-align: center;
margin: 1.25em 0 0; margin: 1.25em 0 0;
} }
}
.intervals, .nodes { .intervals, .nodes {
min-width: 100%; min-width: 100%;