machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI/UX - Scroll by clicking on the pagination button. (#613)

Browse Source 
* Add scrollIntoView when click on pagination.

* Add padding top.

* Fix access DOM from ViewChild.

* Fix scrolling position.

* Fix chrome and firefox compatibility.
This commit is contained in:
Miguel Medeiros 2021-07-16 09:33:22 -03:00 committed by GitHub
parent 52aea12f22
commit 38aee1a897
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/app/components/block/block.component.html
View File

@ -122,17 +122,17 @@
</div> </div>
<div class="text-right mt-3"> <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>
<div class="block-tx-title"> <div #blockTxTitle id="block-tx-title" class="block-tx-title">
<h2> <h2>
<ng-container *ngTemplateOutlet="block.tx_count === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: block.tx_count | number}"></ng-container> <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 #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> <ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>
</h2> </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>
<div class="clearfix"></div> <div class="clearfix"></div>
@ -166,7 +166,7 @@
</div> </div>
</ng-template> </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> </ng-template>

24
frontend/src/app/components/block/block.component.scss
View File

@ -73,26 +73,40 @@ h1 {
} }
} }
.btn-details {
position: relative;
top: 7px;
@media (min-width: 550px) {
top: 0px;
}
}
.block-tx-title { .block-tx-title {
margin-top: -1.5rem; padding-top: 10px;
display: block; display: block;
text-align: right; text-align: right;
margin-top: -30px;
@media (min-width: 550px) { @media (min-width: 550px) {
margin-top: 1rem; margin-top: 0px;
padding-top: 10px;
} }
h2 { h2 {
width: auto;
display: inline-block; display: inline-block;
float: left; float: left;
margin: 0;
line-height: 1.6; line-height: 1.6;
margin: 0;
margin-bottom: -15px;
padding-right: 10px; padding-right: 10px;
top: -10px; padding-top: 15px;
position: relative; position: relative;
top: -22px;
width: auto;
@media (min-width: 550px) { @media (min-width: 550px) {
padding-top: 0px;
top: 0px; top: 0px;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
padding-top: 5px;
line-height: 1; line-height: 1;
} }
} }

6
frontend/src/app/components/block/block.component.ts
View File

@ -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 { Location } from '@angular/common';
import { ActivatedRoute, ParamMap, Router } from '@angular/router'; import { ActivatedRoute, ParamMap, Router } from '@angular/router';
import { ElectrsApiService } from '../../services/electrs-api.service'; 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; const start = (page - 1) * this.itemsPerPage;
this.isLoadingTransactions = true; this.isLoadingTransactions = true;
this.transactions = null; this.transactions = null;
target.scrollIntoView(); // works for chrome
this.electrsApiService.getBlockTransactions$(this.block.id, start) this.electrsApiService.getBlockTransactions$(this.block.id, start)
.subscribe((transactions) => { .subscribe((transactions) => {
this.transactions = transactions; this.transactions = transactions;
this.isLoadingTransactions = false; this.isLoadingTransactions = false;
target.scrollIntoView(); // works for firefox
}); });
} }