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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 138 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/cypress/integration/bisq/bisq.spec.ts
View File

@ -48,4 +48,18 @@ describe('Bisq', () => {
});
});
it('shows blocks pagination with 5 pages (desktop)', () => {
cy.viewport(760, 800);
cy.visit('/bisq/transactions');
// 5 pages + 4 buttons = 9 buttons
cy.get('.pagination-container ul.pagination').first().children().should('have.length', 9);
});
it('shows blocks pagination with 3 pages (mobile)', () => {
cy.viewport(669, 800);
cy.visit('/bisq/blocks');
// 3 pages + 4 buttons = 7 buttons
cy.get('.pagination-container ul.pagination').first().children().should('have.length', 7);
});
});

22
frontend/cypress/integration/mainnet/mainnet.spec.ts
View File

@ -76,17 +76,17 @@ describe('Mainnet', () => {
cy.get('#details').should('not.be.visible');
});
});
it('shows blocks with no pagination', () => {
cy.viewport('iphone-6');
cy.visit('/block/00000000000000000001ba40caf1ad4cec0ceb77692662315c151953bfd7c4c4');
cy.get('h2').invoke('text').should('equal', '19 transactions');
cy.get('ul.pagination').first().children().should('have.length', 5);
cy.get('.block-tx-title h2').invoke('text').should('equal', '19 transactions');
cy.get('.pagination-container ul.pagination').first().children().should('have.length', 6);
});
it('supports pagination on the block screen', () => {
// 41 txs
cy.visit('/block/00000000000000000009f9b7b0f63ad50053ad12ec3b7f5ca951332f134f83d8');
cy.get('.header-bg.box > a').invoke('text').then((text1) => {
cy.get('.pagination-container a').invoke('text').then((text1) => {
cy.get('.active + li').first().click().then(() => {
cy.get('.header-bg.box > a').invoke('text').then((text2) => {
expect(text1).not.to.eq(text2);
@ -94,5 +94,19 @@ describe('Mainnet', () => {
});
});
});
it('shows blocks pagination with 5 pages (desktop)', () => {
cy.viewport(760, 800);
cy.visit('/block/000000000000000000049281946d26fcba7d99fdabc1feac524bc3a7003d69b3');
// 5 pages + 4 buttons = 9 buttons
cy.get('.pagination-container ul.pagination').first().children().should('have.length', 9);
});
it('shows blocks pagination with 3 pages (mobile)', () => {
cy.viewport(669, 800);
cy.visit('/block/000000000000000000049281946d26fcba7d99fdabc1feac524bc3a7003d69b3');
// 3 pages + 4 buttons = 7 buttons
cy.get('.pagination-container ul.pagination').first().children().should('have.length', 7);
});
});
});

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

21
frontend/src/styles.scss
View File

@ -672,3 +672,24 @@ th {
}
}
}
.pagination-container {
display: inline-block;
width: 100%;
justify-content: space-between;
background: #1d1f31;
margin: 0;
@media (min-width: 550px) {
width: auto;
}
ul {
justify-content: space-evenly !important;
margin: 0;
@media (min-width: 400px) {
width: auto;
padding-left: 5px;
}
}
}