Fix timeline tooltip on mobile

frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.html

@@ -1,11 +1,11 @@
 <div
   #tooltip
-  *ngIf="accelerationInfo && tooltipPosition !== null"
   class="acceleration-tooltip"
-  [style.left]="tooltipPosition.x + 'px'"
+  [style.visibility]="accelerationInfo ? 'visible' : 'hidden'"
-  [style.top]="tooltipPosition.y + 'px'"
+  [style.left]="tooltipPosition?.x + 'px'"
+  [style.top]="tooltipPosition?.y + 'px'"
 >
-  <table>
+  <table *ngIf="accelerationInfo">
     <tbody>
       <tr>
         <td class="label" i18n="transaction.status|Transaction Status">Status</td>
@@ -52,8 +52,7 @@
               class="pool-logo" 
               [style.opacity]="accelerationInfo?.minedByPoolUniqueId && pool !== accelerationInfo?.minedByPoolUniqueId ? '0.3' : '1'"
               [src]="'/resources/mining-pools/' + accelerationInfo.poolsData[pool].slug + '.svg'" 
-              onError="this.src = '/resources/mining-pools/default.svg'" 
+              onError="this.src = '/resources/mining-pools/default.svg'">
-              [alt]="'Logo of ' + pool.name + ' mining pool'">
             <br *ngIf="i % 6 === 5">
           </ng-container>
         </td>

frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, ViewChild, Input, OnChanges } from '@angular/core';
+import { Component, ElementRef, ViewChild, Input, OnChanges, HostListener } from '@angular/core';
 
 @Component({
   selector: 'app-acceleration-timeline-tooltip',
@@ -10,6 +10,7 @@ export class AccelerationTimelineTooltipComponent implements OnChanges {
   @Input() cursorPosition: { x: number, y: number };
 
   tooltipPosition: any = null;
+  yScroll = window.scrollY;
 
   @ViewChild('tooltip') tooltipElement: ElementRef<HTMLCanvasElement>;
 
@@ -21,6 +22,9 @@ export class AccelerationTimelineTooltipComponent implements OnChanges {
       let y = changes.cursorPosition.currentValue.y + 20;
       if (this.tooltipElement) {
         const elementBounds = this.tooltipElement.nativeElement.getBoundingClientRect();
+        if (this.accelerationInfo?.status !== 'seen') {
+          elementBounds.width = 370; // ugly hack to handle varying width due to pools logo loading
+        }
         if ((x + elementBounds.width) > (window.innerWidth - 10)) {
           x = Math.max(0, window.innerWidth - elementBounds.width - 10);
         }
@@ -35,4 +39,12 @@ export class AccelerationTimelineTooltipComponent implements OnChanges {
   hasPoolsData(): boolean {
     return Object.keys(this.accelerationInfo.poolsData).length > 0;
   }
+
+  @HostListener('window:scroll', ['$event'])
+  onWindowScroll(): void {
+    if (this.tooltipPosition) {
+      this.tooltipPosition.y = this.tooltipPosition.y - (window.scrollY - this.yScroll);
+    }
+    this.yScroll = window.scrollY;
+  }
 }

frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html

@@ -58,8 +58,8 @@
       <div class="nodes">
         <div class="node" [id]="'first-seen'">
           <div class="seen-to-acc right"></div>
-          <div class="shape-border hovering" (pointerover)="onHover($event, 'seen');" (pointerout)="onBlur($event);">
+          <div class="shape-border hovering">
-            <div class="shape"></div>
+            <div id="step" class="shape" (pointerover)="onHover($event, 'seen');"></div>
           </div>
           <div class="status"><span class="badge badge-primary" i18n="transaction.first-seen|Transaction first seen">First seen</span></div>
           <div class="time">
@@ -80,8 +80,8 @@
           } @else {
           <div class="seen-to-acc right"></div>
           }
-          <div  class="shape-border hovering" (pointerover)="onHover($event, 'accelerated');" (pointerout)="onBlur($event);">
+          <div class="shape-border hovering">
-            <div class="shape"></div>
+            <div id="step" class="shape" (pointerover)="onHover($event, 'accelerated');"></div>
             @if (!tx.status.confirmed) {
             <div class="connector down loading"></div>
             }
@@ -113,11 +113,8 @@
           } @else {
           <div class="seen-to-acc left"></div>
           }
-          <div class="shape-border" 
+          <div class="shape-border" [ngClass]="{'waiting': !tx.status.confirmed, 'hovering': tx.status.confirmed}">
-              [ngClass]="{'waiting': !tx.status.confirmed, 'hovering': tx.status.confirmed}"
+            <div id="step" class="shape" (pointerover)="onHover($event, tx.status.confirmed ? 'mined' : null)" ></div>
-              (pointerover)="onHover($event, tx.status.confirmed ? 'mined' : null)" 
-              (pointerout)="onBlur($event);">
-            <div class="shape"></div>
           </div>
           @if (tx.status.confirmed) {
           <div class="status"><span class="badge badge-success" i18n="transaction.rbf.mined">Mined</span></div>

frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.ts

@@ -74,6 +74,7 @@ export class AccelerationTimelineComponent implements OnInit, OnChanges {
   }
   
   onHover(event, status: string): void {
+    this.tooltipPosition = { x: event.clientX, y: event.clientY };
     if (status === 'seen') {
       this.hoverInfo = {
         status,
@@ -102,12 +103,19 @@ export class AccelerationTimelineComponent implements OnInit, OnChanges {
     }
   }
 
-  onBlur(event): void {
-    this.hoverInfo = null;
-  }
-
   @HostListener('pointermove', ['$event'])
   onPointerMove(event) {
-    this.tooltipPosition = { x: event.clientX, y: event.clientY };
+    if (event.target.id === 'step') {
+      this.tooltipPosition = { x: event.clientX, y: event.clientY };
+    } else {
+      this.hoverInfo = null;
+    }
+  }
+
+  @HostListener('document:click', ['$event'])
+  clickAway(event) {
+    if (event.target.id !== 'step') {
+      this.hoverInfo = null;
+    }
   }
 }