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 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>

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 {
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;
}
}

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 { 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
});
}