From 7f488f5b01048dce6552a69c72daa42e3147dbe9 Mon Sep 17 00:00:00 2001
From: natsee <nat.coisne@gmail.com>
Date: Tue, 19 Dec 2023 14:40:37 +0100
Subject: [PATCH] Fade out the bottom of collapsed rbf history

---
 .../rbf-timeline/rbf-timeline.component.html    |  4 ++--
 .../rbf-timeline/rbf-timeline.component.scss    | 17 +++++++++++++++++
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.html b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.html
index 8a750e624..9ff35d669 100644
--- a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.html
+++ b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.html
@@ -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>
diff --git a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss
index 8afc3f026..c0b38b59d 100644
--- a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss
+++ b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss
@@ -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 {