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