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 5d0d3db764
commit 8488d40bf7
14 changed files with 138 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.html
View File

@@ -1,4 +1,4 @@
<div class="container-xl">
<div class="container-xl" (window:resize)="onResize($event)">
<h1 style="float: left;" i18n="Bisq blocks header">BSQ Blocks</h1>
<br>
@@ -26,9 +26,7 @@
</div>
<br>
<div class="pagination">
<ngb-pagination *ngIf="blocks.value" [size]="paginationSize" [collectionSize]="blocks.value[1]" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true"></ngb-pagination>
</div>
<ngb-pagination *ngIf="blocks.value" class="pagination-container" [size]="paginationSize" [collectionSize]="blocks.value[1]" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true" [ellipses]="false"></ngb-pagination>
</ng-container>
</div>

12
frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.scss
View File

@@ -1,3 +1,11 @@
.pagination {
overflow: hidden;
.pagination-container {
float: none;
margin-bottom: 200px;
@media(min-width: 400px){
float: right;
}
}
.container-xl {
padding-bottom: 110px;
}

8
frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.ts
View File

@@ -23,7 +23,7 @@ export class BisqBlocksComponent implements OnInit {
isLoading = true;
// @ts-ignore
paginationSize: 'sm' | 'lg' = 'md';
paginationMaxSize = 4;
paginationMaxSize = 5;
constructor(
private websocketService: WebsocketService,
@@ -38,7 +38,7 @@ export class BisqBlocksComponent implements OnInit {
this.seoService.setTitle($localize`:@@8a7b4bd44c0ac71b2e72de0398b303257f7d2f54:Blocks`);
this.itemsPerPage = Math.max(Math.round(this.contentSpace / this.fiveItemsPxSize) * 5, 10);
this.loadingItems = Array(this.itemsPerPage);
if (document.body.clientWidth < 768) {
if (document.body.clientWidth < 670) {
this.paginationSize = 'sm';
this.paginationMaxSize = 3;
}
@@ -83,4 +83,8 @@ export class BisqBlocksComponent implements OnInit {
queryParamsHandling: 'merge',
});
}
onResize(event: any) {
this.paginationMaxSize = event.target.innerWidth < 670 ? 3 : 5;
}
}

6
frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.html
View File

@@ -1,4 +1,4 @@
<div class="container-xl">
<div class="container-xl" (window:resize)="onResize($event)">
<h1 style="float: left;" i18n>BSQ Transactions</h1>
<div class="d-block float-right">
@@ -44,9 +44,7 @@
</table>
<br>
<div class="pagination">
<ngb-pagination *ngIf="transactions.value" [size]="paginationSize" [collectionSize]="transactions.value[1]" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true"></ngb-pagination>
</div>
<ngb-pagination class="pagination-container" *ngIf="transactions.value" [collectionSize]="transactions.value[1]" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true" [ellipses]="false"></ngb-pagination>
</ng-container>
</div>

13
frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.scss
View File

@@ -8,8 +8,11 @@ label {
left: inherit;
}
.pagination {
overflow: hidden;
.pagination-container {
float: none;
@media(min-width: 400px){
float: right;
}
}
h1{
@@ -17,4 +20,10 @@ h1{
@media(min-width: 375px){
font-size: 2rem;
}
}
.container-xl {
padding-bottom: 60px;
@media(min-width: 400px){
padding-bottom: 100px;
}
}

8
frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.ts
View File

@@ -60,7 +60,7 @@ export class BisqTransactionsComponent implements OnInit {
// @ts-ignore
paginationSize: 'sm' | 'lg' = 'md';
paginationMaxSize = 4;
paginationMaxSize = 5;
txTypes = ['ASSET_LISTING_FEE', 'BLIND_VOTE', 'COMPENSATION_REQUEST', 'GENESIS', 'LOCKUP', 'PAY_TRADE_FEE',
'PROOF_OF_BURN', 'PROPOSAL', 'REIMBURSEMENT_REQUEST', 'TRANSFER_BSQ', 'UNLOCK', 'VOTE_REVEAL', 'IRREGULAR'];
@@ -85,7 +85,7 @@ export class BisqTransactionsComponent implements OnInit {
this.loadingItems = Array(this.itemsPerPage);
if (document.body.clientWidth < 768) {
if (document.body.clientWidth < 670) {
this.paginationSize = 'sm';
this.paginationMaxSize = 3;
}
@@ -168,4 +168,8 @@ export class BisqTransactionsComponent implements OnInit {
trackByFn(index: number) {
return index;
}
onResize(event: any) {
this.paginationMaxSize = event.target.innerWidth < 670 ? 3 : 5;
}
}

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