Merge pull request #2973 from mempool/mononaut/back-to-tip

Add button to scroll back to tip of blockchain

frontend/src/app/components/start/start.component.html

@@ -8,12 +8,17 @@
 
 <div *ngIf="countdown > 0" class="warning-label">{{ eventName }} in {{ countdown | number }} block{{ countdown === 1 ? '' : 's' }}!</div>
 
-<div id="blockchain-container" [dir]="timeLtr ? 'rtl' : 'ltr'" #blockchainContainer
-  (mousedown)="onMouseDown($event)"
-  (dragstart)="onDragStart($event)"
-  (scroll)="onScroll($event)"
->
-  <app-blockchain [pageIndex]="pageIndex" [pages]="pages" [blocksPerPage]="blocksPerPage" [minScrollWidth]="minScrollWidth"></app-blockchain>
+<div class="blockchain-wrapper" [class.time-ltr]="timeLtr" [class.time-rtl]="!timeLtr">
+  <div id="blockchain-container" [dir]="timeLtr ? 'rtl' : 'ltr'" #blockchainContainer
+    (mousedown)="onMouseDown($event)"
+    (dragstart)="onDragStart($event)"
+    (scroll)="onScroll($event)"
+  >
+    <app-blockchain [pageIndex]="pageIndex" [pages]="pages" [blocksPerPage]="blocksPerPage" [minScrollWidth]="minScrollWidth"></app-blockchain>
+  </div>
+  <div class="reset-scroll" [class.hidden]="pageIndex === 0" (click)="resetScroll()">
+    <fa-icon [icon]="['fas', 'circle-left']" [fixedWidth]="true" i18n-title="blocks.return-to-tip" title="Return to tip"></fa-icon>
+  </div>
 </div>
 
 <router-outlet></router-outlet>

frontend/src/app/components/start/start.component.scss

@@ -12,6 +12,43 @@
   display: none;
 }
 
+.blockchain-wrapper {
+  position: relative;
+
+  .reset-scroll {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 50px;
+    z-index: 10;
+    cursor: pointer;
+    opacity: 0.8;
+    transition: opacity 500ms;
+    background: radial-gradient(#1d1f31 0%, transparent 50%);
+
+    &:hover {
+      opacity: 1;
+      transition: opacity 300ms;
+    }
+
+    &.hidden {
+      opacity: 0;
+      cursor: inherit;
+      pointer-events: none;
+      transition: opacity 500ms;
+    }
+  }
+
+  &.time-ltr .reset-scroll{
+    right: 10px;
+    transform: translateY(-50%) rotateZ(180deg);
+  }
+
+  &.time-rtl .reset-scroll {
+    left: 10px;
+  }
+}
+
 .warning-label {
   position: relative;
   text-align: center;

frontend/src/app/components/start/start.component.ts

@@ -250,6 +250,10 @@ export class StartComponent implements OnInit, OnDestroy {
     };
   }
 
+  resetScroll(): void {
+    this.scrollToBlock(this.chainTip);
+  }
+
   getPageIndexOf(height: number): number {
     const delta = this.chainTip - 8 - height;
     return Math.max(0, Math.floor(delta / this.blocksPerPage) + 1);