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

21
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,15 +50,16 @@
</ng-container> </ng-container>
</div> </div>
</div> </div>
<div class="toggle-wrapper" *ngIf="rows.length > rowLimit && rowLimit !== 0"> </div>
<button class="btn btn-sm btn-primary graph-toggle" (click)="toggleTimeline(true);" *ngIf="!timelineExpanded; else collapseBtn"> <div [class.fade-out]="!timelineExpanded && rows.length > rowLimit"></div>
<span i18n="show-all">Show all</span> <div class="toggle-wrapper" *ngIf="rows.length > rowLimit && rowLimit !== 0">
(<ng-container *ngTemplateOutlet="xRemaining; context: {$implicit: rows.length - rowLimit}"></ng-container>) <button class="btn btn-sm btn-primary graph-toggle" (click)="toggleTimeline(true);" *ngIf="!timelineExpanded; else collapseBtn">
</button> <span i18n="show-all">Show all</span>
<ng-template #collapseBtn> (<ng-container *ngTemplateOutlet="xRemaining; context: {$implicit: rows.length - rowLimit}"></ng-container>)
<button class="btn btn-sm btn-primary graph-toggle" (click)="toggleTimeline(false);"><span i18n="show-less">Show less</span></button> </button>
</ng-template> <ng-template #collapseBtn>
</div> <button class="btn btn-sm btn-primary graph-toggle" (click)="toggleTimeline(false);"><span i18n="show-less">Show less</span></button>
</ng-template>
</div> </div>
<ng-template #nodeSpacer> <ng-template #nodeSpacer>

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

@ -30,31 +30,32 @@
overflow-x: auto; overflow-x: auto;
-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;
} }
}
.toggle-wrapper { .fade-out {
position: relative;
&::before {
content: '';
position: absolute;
width: 100%; width: 100%;
text-align: center; height: 70px;
margin: 1.25em 0 0; top: -70px;
background: linear-gradient(to bottom, rgba(36, 39, 62, 0) 0%, rgba(36, 39, 62, 1) 100%);
z-index: 1;
} }
} }
.toggle-wrapper {
width: 100%;
text-align: center;
margin: 1.25em 0 0;
}
.intervals, .nodes { .intervals, .nodes {
min-width: 100%; min-width: 100%;
display: flex; display: flex;