Fix window tab scroll

everoddandeven · Dec 28, 2024 · bc882b0 · bc882b0
1 parent a09c5b4
commit bc882b0
Show file tree

Hide file tree

Showing 15 changed files with 79 additions and 14 deletions.
diff --git a/src/app/pages/about/about.component.html b/src/app/pages/about/about.component.html
@@ -11,7 +11,7 @@ <h1 class="h2">About</h1>
   </div>
 </div>
 
-<div class="tab-content" id="pills-tabContent">
+<div class="tab-content tab-grow" id="pills-tabContent">
   <div class="tab-pane fade show active" id="pills-overview" role="tabpanel" aria-labelledby="pills-overview-tab" tabindex="0">
     <div class="container mt-5">
       <div class="card shadow-lg border-0">

diff --git a/src/app/pages/bans/bans.component.html b/src/app/pages/bans/bans.component.html
@@ -11,7 +11,7 @@ <h1 class="h2">Bans</h1>
   </div>
 </div>
 
-<div [hidden]="!daemonRunning || daemonStopping" class="tab-content" id="pills-tabContent">
+<div [hidden]="!daemonRunning || daemonStopping" class="tab-content tab-grow" id="pills-tabContent">
   <div class="tab-pane fade show active" id="pills-overview" role="tabpanel" aria-labelledby="pills-overview-tab" tabindex="0">
     <h4 class="mb-3">List of banned IPs</h4>
     <table

diff --git a/src/app/pages/base-page/base-page.component.ts b/src/app/pages/base-page/base-page.component.ts
@@ -16,7 +16,15 @@ export abstract class BasePageComponent implements AfterContentInit, OnDestroy {
 
   protected subscriptions: Subscription[] = [];
 
-  constructor(private navbarService: NavbarService) { }
+  private readonly mResizeHandler: (event: Event) => void = (event: Event) => setTimeout(() => this.updateTableContentHeight(), 100);
+
+  constructor(private navbarService: NavbarService) {
+    this.subscriptions.push(this.navbarService.onDaemonStatusChanged.subscribe((running) => {
+      if (running) setTimeout(() => this.updateTableContentHeight(), 100);
+    }));
+
+    window.addEventListener('resize', this.mResizeHandler);
+   }
 
   protected setLinks(links: NavbarLink[] = []): void {
     this._links = links;
@@ -169,14 +177,62 @@ export abstract class BasePageComponent implements AfterContentInit, OnDestroy {
 
   public ngAfterContentInit(): void {
     this.navbarService.setLinks(this._links);
+
+    setTimeout(() => this.updateTableContentHeight(), 100);
   }
 
   public ngOnDestroy(): void {
     if (this.subscriptions.length == 0) return;
 
     this.subscriptions.forEach((sub: Subscription) => sub.unsubscribe());
     this.subscriptions = [];
+
+    window.removeEventListener('resize', this.mResizeHandler);
 
     this.destroyTables();
   }
+
+  public updateTableContentHeight(): void {
+    if (!visualViewport) {
+      return;
+    }
+
+    const viewHeight = visualViewport?.height;
+
+    if (!viewHeight) {
+      return;
+    }
+
+    console.log(`view height: ${viewHeight}`);
+
+    const elements = document.getElementsByClassName('tab-content tab-grow');
+
+    if (!elements || elements.length === 0) {
+      return;
+    }
+
+    const offset = 35;
+    const tab = elements[0] as HTMLElement;
+    const rect = tab.getBoundingClientRect();
+    const left = viewHeight - rect.bottom;
+    const currentHeight = tab.clientHeight;
+    let newHeight: number;
+
+    if (left > 0) {
+      if (left < offset) {
+        newHeight = parseInt(`${currentHeight}`);
+      }
+      else {
+        const offsetLeft = left - offset;
+        newHeight = parseInt(`${ currentHeight + offsetLeft }`);
+      }
+    }
+    else {
+      newHeight = currentHeight + left - offset;
+    }
+
+    tab.style.height = `${newHeight}px`;
+
+    console.log(`old height: ${currentHeight}, left: ${left} new height: ${newHeight}`);
+  }
 }
diff --git a/src/app/pages/blockchain/blockchain.component.html b/src/app/pages/blockchain/blockchain.component.html
@@ -11,7 +11,7 @@ <h1 class="h2">Blockchain</h1>
       </ul>
     </div>
 </div>
-<div *ngIf="daemonRunning && !daemonStopping && !daemonStarting" class="tab-content" id="pills-tabContent">
+<div *ngIf="daemonRunning && !daemonStopping && !daemonStarting" class="tab-content tab-grow" id="pills-tabContent">
 
   <div class="tab-pane fade show active" id="pills-block-queue" role="tabpanel" aria-labelledby="pills-block-queue-tab" tabindex="0">
     <h4 class="mb-3">Overview of current block set queue</h4>

diff --git a/src/app/pages/detail/detail.component.html b/src/app/pages/detail/detail.component.html
@@ -33,7 +33,7 @@ <h4><i class="bi bi-exclamation-triangle m-2"></i></h4>&nbsp;&nbsp;
   </div>
 </div>
 
-<div *ngIf="daemonRunning && !stoppingDaemon" class="tab-content" id="pills-tabContent">
+<div *ngIf="daemonRunning && !stoppingDaemon" class="tab-content tab-grow" id="pills-tabContent">
   <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">
     <div class="row d-flex justify-content-center">
 

diff --git a/src/app/pages/logs/logs.component.html b/src/app/pages/logs/logs.component.html
@@ -10,7 +10,7 @@ <h1 class="h2">Logs</h1>
     </ul>
   </div>
 </div>
-<div class="tab-content" id="pills-tabContent">
+<div class="tab-content tab-grow" id="pills-tabContent">
 
   <div class="tab-pane fade show active" id="pills-overview" role="tabpanel" aria-labelledby="pills-overview-tab" tabindex="0">
     <div *ngIf="lines.length === 0" class="h-100 p-5 text-bg-dark rounded-3 m-4 text-center">

diff --git a/src/app/pages/mining/mining.component.html b/src/app/pages/mining/mining.component.html
@@ -11,7 +11,7 @@ <h1 class="h2">Mining</h1>
   </div>
 </div>
 
-<div *ngIf="daemonRunning && !daemonStopping" class="tab-content" id="pills-tabContent">
+<div *ngIf="daemonRunning && !daemonStopping" class="tab-content tab-grow" id="pills-tabContent">
   <div class="tab-pane fade show active" id="pills-mining-status" role="tabpanel" aria-labelledby="pills-mining-status-tab" tabindex="0">
     <div *ngIf="coreBusy" class="alert alert-danger d-flex align-items-center justify-content-center text-center" role="alert">
       <h4><i class="bi bi-exclamation-triangle m-2"></i></h4>&nbsp;&nbsp;

diff --git a/src/app/pages/network/network.component.html b/src/app/pages/network/network.component.html
@@ -11,7 +11,7 @@ <h1 class="h2">Network</h1>
   </div>
 </div>
 
-<div *ngIf="daemonRunning && !daemonStopping" class="tab-content" id="pills-tabContent">
+<div *ngIf="daemonRunning && !daemonStopping" class="tab-content tab-grow" id="pills-tabContent">
 
   <div class="tab-pane fade show active" id="pills-net-stats" role="tabpanel" aria-labelledby="pills-net-stats-tab" tabindex="0">
     <h2><i class="bi bi-cloud-arrow-down m-4"></i> Download ({{ currentNetStats.totalGigaBytesIn.toFixed(2) }} GB)</h2>

diff --git a/src/app/pages/outputs/outputs.component.html b/src/app/pages/outputs/outputs.component.html
@@ -10,7 +10,7 @@ <h1 class="h2">Outputs</h1>
       </ul>
     </div>
 </div>
-<div *ngIf="daemonRunning && !daemonStopping && !daemonRestarting" class="tab-content" id="pills-tabContent">
+<div *ngIf="daemonRunning && !daemonStopping && !daemonRestarting" class="tab-content tab-grow" id="pills-tabContent">
 
   <div class="tab-pane fade show active" id="pills-outputs-get-outs" role="tabpanel" aria-labelledby="pills-outputs-get-outs-tab" tabindex="0">
     <h4 class="mb-3">Get outputs</h4>

diff --git a/src/app/pages/peers/peers.component.html b/src/app/pages/peers/peers.component.html
@@ -11,7 +11,7 @@ <h1 class="h2">Peers</h1>
   </div>
 </div>
 
-<div *ngIf="daemonRunning && !daemonStopping" class="tab-content" id="pills-tabContent">
+<div *ngIf="daemonRunning && !daemonStopping" class="tab-content tab-grow" id="pills-tabContent">
   <div class="tab-pane fade show active" id="pills-peer-list" role="tabpanel" aria-labelledby="pills-peer-list-tab" tabindex="0">
     <h4 class="mb-3">List of known peers</h4>
     <div class="m-3">

diff --git a/src/app/pages/settings/settings.component.html b/src/app/pages/settings/settings.component.html
@@ -13,7 +13,7 @@ <h1 class="h2">Settings</h1>
   </div>
 </div>
 
-<div *ngIf="!loading" class="tab-content" id="pills-settings-tabContent">
+<div *ngIf="!loading" class="tab-content tab-grow" id="pills-settings-tabContent">
   <div *ngIf="savingChangesError !== ''" class="alert alert-danger d-flex align-items-center justify-content-center text-center" role="alert">
     <h4><i class="bi bi-exclamation-triangle m-2"></i></h4>&nbsp;&nbsp;
     <div>

diff --git a/src/app/pages/transactions/transactions.component.html b/src/app/pages/transactions/transactions.component.html
@@ -11,7 +11,7 @@ <h1 class="h2">Transactions</h1>
   </div>
 </div>
 
-<div *ngIf="daemonRunning && !daemonStopping" class="tab-content" id="pills-tabContent">
+<div *ngIf="daemonRunning && !daemonStopping" class="tab-content tab-grow" id="pills-tabContent">
 
   <div class="tab-pane fade show active" id="pills-tx-pool" role="tabpanel" aria-labelledby="pills-tx-pool-tab" tabindex="0">
     <h4 class="mb-3">Information about valid transactions seen by the node but not yet mined into a block, as well as spent key image information for the txpool in the node's memory</h4>

diff --git a/src/app/pages/version/version.component.html b/src/app/pages/version/version.component.html
@@ -11,7 +11,7 @@ <h1 class="h2">Version</h1>
   </div>
 </div>
 
-<div class="tab-content" id="pills-tabContent">
+<div class="tab-content tab-grow" id="pills-tabContent">
   <div class="tab-pane fade show active" id="pills-monero" role="tabpanel" aria-labelledby="pills-monero-tab" tabindex="0">
     <div *ngIf="upgradeError !== ''" class="alert alert-danger d-flex align-items-center justify-content-center text-center" role="alert">
       <h4><i class="bi bi-exclamation-triangle m-2"></i></h4>&nbsp;&nbsp;

diff --git a/src/app/shared/components/navbar/navbar.service.ts b/src/app/shared/components/navbar/navbar.service.ts
@@ -1,4 +1,4 @@
-import { Injectable, NgZone } from '@angular/core';
+import { EventEmitter, Injectable, NgZone } from '@angular/core';
 import { NavbarLink } from './navbar.model';
 import { DaemonService } from '../../../core/services';
 
@@ -13,6 +13,10 @@ export class NavbarService {
     return this._navbarLinks;
   }
 
+  public get onDaemonStatusChanged(): EventEmitter<boolean> {
+    return this.daemonService.onDaemonStatusChanged;
+  }
+
   constructor(private daemonService: DaemonService, private zone: NgZone) {
     this.daemonService.onDaemonStatusChanged.subscribe((running: boolean) => {
       this.daemonRunning = running;

diff --git a/src/styles.scss b/src/styles.scss
@@ -9,6 +9,11 @@ $primary: #ff5733;
   height: 1rem;
 }
 
+.tab-grow {
+  overflow: hidden;
+  overflow-y: auto;
+}
+
 /*
  * Sidebar
  */