diff --git a/frontend/cypress/integration/bisq/bisq.spec.ts b/frontend/cypress/integration/bisq/bisq.spec.ts index 6cc9ad910..1fe579e49 100644 --- a/frontend/cypress/integration/bisq/bisq.spec.ts +++ b/frontend/cypress/integration/bisq/bisq.spec.ts @@ -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); + }); + }); diff --git a/frontend/cypress/integration/mainnet/mainnet.spec.ts b/frontend/cypress/integration/mainnet/mainnet.spec.ts index a9b112514..060a3f293 100644 --- a/frontend/cypress/integration/mainnet/mainnet.spec.ts +++ b/frontend/cypress/integration/mainnet/mainnet.spec.ts @@ -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); + }); }); }); diff --git a/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.html b/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.html index e7dc382c1..9fbd6ad1b 100644 --- a/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.html +++ b/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.html @@ -1,4 +1,4 @@ -
+

BSQ Blocks


@@ -26,9 +26,7 @@

- +
diff --git a/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.scss b/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.scss index 478fa4c6d..3bae38e56 100644 --- a/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.scss +++ b/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.scss @@ -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; } \ No newline at end of file diff --git a/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.ts b/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.ts index c52326fdf..1e805188b 100644 --- a/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.ts +++ b/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.ts @@ -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; + } } diff --git a/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.html b/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.html index 43053bc30..f85c29a9b 100644 --- a/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.html +++ b/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.html @@ -1,4 +1,4 @@ -
+

BSQ Transactions

@@ -44,9 +44,7 @@
- +
diff --git a/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.scss b/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.scss index e631cfce4..72d305d08 100644 --- a/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.scss +++ b/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.scss @@ -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; + } } \ No newline at end of file diff --git a/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.ts b/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.ts index ab4637e9c..5962ac856 100644 --- a/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.ts +++ b/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.ts @@ -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; + } } diff --git a/frontend/src/app/components/block/block.component.html b/frontend/src/app/components/block/block.component.html index b808019da..a07ad3e04 100644 --- a/frontend/src/app/components/block/block.component.html +++ b/frontend/src/app/components/block/block.component.html @@ -1,4 +1,4 @@ -
+

Genesis Block {{ blockHeight }}

@@ -125,22 +125,21 @@
-
- -

- - {{ i }} transaction - {{ i }} transactions -

- - +
+

+ + {{ i }} transaction + {{ i }} transactions +

+ +
-
+
@@ -167,8 +166,7 @@
- - + diff --git a/frontend/src/app/components/block/block.component.scss b/frontend/src/app/components/block/block.component.scss index 6b92de4c4..b5bae22f1 100644 --- a/frontend/src/app/components/block/block.component.scss +++ b/frontend/src/app/components/block/block.component.scss @@ -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; + } + } } \ No newline at end of file diff --git a/frontend/src/app/components/block/block.component.ts b/frontend/src/app/components/block/block.component.ts index 26a69b7eb..fedf17c46 100644 --- a/frontend/src/app/components/block/block.component.ts +++ b/frontend/src/app/components/block/block.component.ts @@ -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; + } } diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.html b/frontend/src/app/components/transactions-list/transactions-list.component.html index 533c389c3..03ab90afd 100644 --- a/frontend/src/app/components/transactions-list/transactions-list.component.html +++ b/frontend/src/app/components/transactions-list/transactions-list.component.html @@ -1,5 +1,5 @@ -
+
{{ tx.txid | shortenString : 16 }} {{ tx.txid }} diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.scss b/frontend/src/app/components/transactions-list/transactions-list.component.scss index f2ac4c47f..fd95e3759 100644 --- a/frontend/src/app/components/transactions-list/transactions-list.component.scss +++ b/frontend/src/app/components/transactions-list/transactions-list.component.scss @@ -132,3 +132,9 @@ .fiat { margin-left: 10px; } + +.tx-page-container { + padding: 10px; + margin-bottom: 10px; + margin-top: 10px; +} \ No newline at end of file diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index b33dd78da..4d1d5072c 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -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; + } + } +} \ No newline at end of file