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

Fix pagination responsive layout. (#590)

Browse Source 
* Fix pagination responsive css.

* Fix css title block transaction alignment.

* Add pagination responsive layout to bisq tx page.

* Add pagination responsive  to bisq blocks page.

* Fix pagination css - bisq txs page.

* Add e2e tests for bisq and mainnet pagination.
This commit is contained in:
Miguel Medeiros
2021-07-05 16:28:56 -03:00
committed by GitHub
parent 5197a15e31
commit 1e9f131a2a
14 changed files with 138 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
<div class="container-xl">
<div class="container-xl" (window:resize)="onResize($event)">
<div class="title-block" id="block">
<h1><ng-template [ngIf]="blockHeight === 0" i18n="block.genesis">Genesis </ng-template><ng-template [ngIf]="blockHeight" i18n="block.block">Block <a [routerLink]="['/block/' | relativeUrl, blockHash]">{{ blockHeight }}</a></ng-template></h1>
@@ -125,22 +125,21 @@
<button type="button" class="btn btn-outline-info btn-sm" (click)="toggleShowDetails()" i18n="transaction.details|Transaction Details">Details</button>
</div>
<br>
<h2 class="float-left">
<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="float-right" [collectionSize]="block.tx_count" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true"></ngb-pagination>
<div 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>
</div>
<div class="clearfix"></div>
<app-transactions-list [transactions]="transactions"></app-transactions-list>
<ng-template [ngIf]="isLoadingTransactions">
<div class="text-center mb-4">
<div class="text-center mb-4 mt-3">
<div class="header-bg box" style="padding: 10px; margin-bottom: 10px;">
<span class="skeleton-loader"></span>
@@ -167,8 +166,7 @@
</div>
</ng-template>
<ngb-pagination class="float-right" [collectionSize]="block.tx_count" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true"></ngb-pagination>
<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>
</ng-template>

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

@@ -71,4 +71,29 @@ h1 {
.details-table td:first-child {
white-space: pre-wrap;
}
}
.block-tx-title {
margin-top: -1.5rem;
display: block;
text-align: right;
@media (min-width: 550px) {
margin-top: 1rem;
}
h2 {
width: auto;
display: inline-block;
float: left;
margin: 0;
line-height: 1.6;
padding-right: 10px;
top: -10px;
position: relative;
@media (min-width: 550px) {
top: 0px;
}
@media (min-width: 768px) {
line-height: 1;
}
}
}

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

@@ -46,7 +46,7 @@ export class BlockComponent implements OnInit, OnDestroy {
ngOnInit() {
this.websocketService.want(['blocks', 'mempool-blocks']);
this.paginationMaxSize = window.matchMedia('(max-width: 700px)').matches ? 3 : 5;
this.paginationMaxSize = window.matchMedia('(max-width: 670px)').matches ? 3 : 5;
this.network = this.stateService.network;
this.itemsPerPage = this.stateService.env.ITEMS_PER_PAGE;
@@ -216,4 +216,8 @@ export class BlockComponent implements OnInit, OnDestroy {
}
return this.block && this.block.height > 681393 && (new Date().getTime() / 1000) < 1628640000;
}
onResize(event: any) {
this.paginationMaxSize = event.target.innerWidth < 670 ? 3 : 5;
}
}

2
frontend/src/app/components/transactions-list/transactions-list.component.html
View File

@@ -1,5 +1,5 @@
<ng-container *ngFor="let tx of transactions; let i = index; trackBy: trackByFn">
<div *ngIf="!transactionPage" class="header-bg box" style="padding: 10px; margin-bottom: 10px;">
<div *ngIf="!transactionPage" class="header-bg box tx-page-container">
<a class="float-left" [routerLink]="['/tx/' | relativeUrl, tx.txid]" [state]="{ data: tx }">
<span style="float: left;" class="d-block d-md-none">{{ tx.txid | shortenString : 16 }}</span>
<span style="float: left;" class="d-none d-md-block">{{ tx.txid }}</span>

6
frontend/src/app/components/transactions-list/transactions-list.component.scss
View File

@@ -132,3 +132,9 @@
.fiat {
margin-left: 10px;
}
.tx-page-container {
padding: 10px;
margin-bottom: 10px;
margin-top: 10px;
}