From 38aee1a89704403aaeb45be4c61f9c3a89c86104 Mon Sep 17 00:00:00 2001
From: Miguel Medeiros <miguel@miguelmedeiros.com.br>
Date: Fri, 16 Jul 2021 09:33:22 -0300
Subject: [PATCH] UI/UX - Scroll by clicking on the pagination button. (#613)

* Add scrollIntoView when click on pagination.

* Add padding top.

* Fix access DOM from ViewChild.

* Fix scrolling position.

* Fix chrome and firefox compatibility.
---
 .../app/components/block/block.component.html |  8 +++----
 .../app/components/block/block.component.scss | 24 +++++++++++++++----
 .../app/components/block/block.component.ts   |  6 +++--
 3 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/frontend/src/app/components/block/block.component.html b/frontend/src/app/components/block/block.component.html
index a07ad3e04..b26922bef 100644
--- a/frontend/src/app/components/block/block.component.html
+++ b/frontend/src/app/components/block/block.component.html
@@ -122,17 +122,17 @@
     </div>
 
     <div class="text-right mt-3">
-      <button type="button" class="btn btn-outline-info btn-sm" (click)="toggleShowDetails()" i18n="transaction.details|Transaction Details">Details</button>
+      <button type="button" class="btn btn-outline-info btn-sm btn-details" (click)="toggleShowDetails()" i18n="transaction.details|Transaction Details">Details</button>
     </div>
 
-    <div class="block-tx-title">
+    <div #blockTxTitle id="block-tx-title" class="block-tx-title">
       <h2>
         <ng-container *ngTemplateOutlet="block.tx_count === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: block.tx_count | number}"></ng-container>
         <ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
         <ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>
       </h2>
 
-      <ngb-pagination class="pagination-container" [collectionSize]="block.tx_count" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true" [ellipses]="false"></ngb-pagination>
+      <ngb-pagination class="pagination-container" [collectionSize]="block.tx_count" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page, blockTxTitle)" [maxSize]="paginationMaxSize" [boundaryLinks]="true" [ellipses]="false"></ngb-pagination>
     </div>
     <div class="clearfix"></div>
 
@@ -166,7 +166,7 @@
         
       </div>
     </ng-template>
-    <ngb-pagination class="pagination-container float-right" [collectionSize]="block.tx_count" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true" [ellipses]="false"></ngb-pagination>
+    <ngb-pagination class="pagination-container float-right" [collectionSize]="block.tx_count" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page, blockTxTitle)" [maxSize]="paginationMaxSize" [boundaryLinks]="true" [ellipses]="false"></ngb-pagination>
 
   </ng-template>
 
diff --git a/frontend/src/app/components/block/block.component.scss b/frontend/src/app/components/block/block.component.scss
index b5bae22f1..9813b0293 100644
--- a/frontend/src/app/components/block/block.component.scss
+++ b/frontend/src/app/components/block/block.component.scss
@@ -73,26 +73,40 @@ h1 {
 	}
 }
 
+.btn-details {
+  position: relative;
+  top: 7px;
+  @media (min-width: 550px) {
+    top: 0px;
+  }
+}
+
 .block-tx-title {
-  margin-top: -1.5rem;
+  padding-top: 10px;
   display: block;
   text-align: right;
+  margin-top: -30px;
   @media (min-width: 550px) {
-    margin-top: 1rem;
+    margin-top: 0px;
+    padding-top: 10px;
   }
   h2 {
-    width: auto;
     display: inline-block;
     float: left;
-    margin: 0;
     line-height: 1.6;
+    margin: 0;
+    margin-bottom: -15px;
     padding-right: 10px;
-    top: -10px;
+    padding-top: 15px;
     position: relative;
+    top: -22px;
+    width: auto;
     @media (min-width: 550px) {
+      padding-top: 0px;
       top: 0px;
     }
     @media (min-width: 768px) {
+      padding-top: 5px;
       line-height: 1;
     }
   }
diff --git a/frontend/src/app/components/block/block.component.ts b/frontend/src/app/components/block/block.component.ts
index fedf17c46..38ebc43a1 100644
--- a/frontend/src/app/components/block/block.component.ts
+++ b/frontend/src/app/components/block/block.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';
 import { Location } from '@angular/common';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { ElectrsApiService } from '../../services/electrs-api.service';
@@ -173,15 +173,17 @@ export class BlockComponent implements OnInit, OnDestroy {
     }
   }
 
-  pageChange(page: number) {
+  pageChange(page: number, target: HTMLElement) {
     const start = (page - 1) * this.itemsPerPage;
     this.isLoadingTransactions = true;
     this.transactions = null;
+    target.scrollIntoView(); // works for chrome
 
     this.electrsApiService.getBlockTransactions$(this.block.id, start)
      .subscribe((transactions) => {
         this.transactions = transactions;
         this.isLoadingTransactions = false;
+        target.scrollIntoView(); // works for firefox
       });
   }