From fbb8185c8255876915fe5a4aaed16ec7d65796de Mon Sep 17 00:00:00 2001 From: softsimon Date: Sun, 19 Jul 2020 13:46:30 +0700 Subject: [PATCH] Responsiveness fixes. --- frontend/proxy.conf.json | 4 ++-- .../app/bisq/bisq-blocks/bisq-blocks.component.html | 2 +- .../src/app/bisq/bisq-blocks/bisq-blocks.component.ts | 9 ++++++++- .../bisq-transaction-details.component.html | 6 +++--- .../bisq-transaction-details.component.scss | 11 +++++++++++ .../bisq-transactions.component.html | 9 ++++----- .../bisq-transactions/bisq-transactions.component.ts | 11 ++++++++++- frontend/src/styles.scss | 2 +- 8 files changed, 40 insertions(+), 14 deletions(-) diff --git a/frontend/proxy.conf.json b/frontend/proxy.conf.json index efaddaba2..2e161a18d 100644 --- a/frontend/proxy.conf.json +++ b/frontend/proxy.conf.json @@ -8,11 +8,11 @@ "secure": false, "ws": true }, - "/api/bisq": { + "/bisq/api": { "target": "http://localhost:8999/", "secure": false, "pathRewrite": { - "^/api/bisq": "/api/v1/bisq" + "^/bisq/api": "/api/v1/bisq" } }, "/api": { 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 3c331876f..48deff2da 100644 --- a/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.html +++ b/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.html @@ -25,7 +25,7 @@
- + 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 d84158d33..2c1631de7 100644 --- a/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.ts +++ b/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.ts @@ -19,6 +19,9 @@ export class BisqBlocksComponent implements OnInit { fiveItemsPxSize = 250; loadingItems: number[]; isLoading = true; + // @ts-ignore + paginationSize: 'sm' | 'lg' = 'md'; + paginationMaxSize = 10; pageSubject$ = new Subject(); @@ -31,11 +34,15 @@ export class BisqBlocksComponent implements OnInit { this.seoService.setTitle('Blocks', true); this.itemsPerPage = Math.max(Math.round(this.contentSpace / this.fiveItemsPxSize) * 5, 10); this.loadingItems = Array(this.itemsPerPage); + if (document.body.clientWidth < 768) { + this.paginationSize = 'sm'; + this.paginationMaxSize = 3; + } this.pageSubject$ .pipe( tap(() => this.isLoading = true), - switchMap((page) => this.bisqApiService.listBlocks$((page - 1) * 10, this.itemsPerPage)) + switchMap((page) => this.bisqApiService.listBlocks$((page - 1) * this.itemsPerPage, this.itemsPerPage)) ) .subscribe((response) => { this.isLoading = false; diff --git a/frontend/src/app/bisq/bisq-transaction-details/bisq-transaction-details.component.html b/frontend/src/app/bisq/bisq-transaction-details/bisq-transaction-details.component.html index 9f9d83673..fd605fb8d 100644 --- a/frontend/src/app/bisq/bisq-transaction-details/bisq-transaction-details.component.html +++ b/frontend/src/app/bisq/bisq-transaction-details/bisq-transaction-details.component.html @@ -4,7 +4,7 @@ - + @@ -20,9 +20,9 @@
InputsInputs {{ totalInput / 100 | number: '1.2-2' }} BSQ
- + - + diff --git a/frontend/src/app/bisq/bisq-transaction-details/bisq-transaction-details.component.scss b/frontend/src/app/bisq/bisq-transaction-details/bisq-transaction-details.component.scss index e69de29bb..ee64d3473 100644 --- a/frontend/src/app/bisq/bisq-transaction-details/bisq-transaction-details.component.scss +++ b/frontend/src/app/bisq/bisq-transaction-details/bisq-transaction-details.component.scss @@ -0,0 +1,11 @@ +@media (max-width: 767.98px) { + .td-width { + width: 150px; + } + .mobile-even tr:nth-of-type(even) { + background-color: #181b2d; + } + .mobile-even tr:nth-of-type(odd) { + background-color: inherit; + } +} \ No newline at end of file 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 08c6b682c..a04ab9173 100644 --- a/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.html +++ b/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.html @@ -4,11 +4,10 @@
-
TypeType {{ tx.txTypeDisplayString }}
- + @@ -16,11 +15,12 @@ -
TransactionTypeType Amount Confirmed Height
{{ tx.id | slice : 0 : 8 }} + {{ tx.txTypeDisplayString }} + {{ tx.burntFee / 100 | number: '1.2-2' }} BSQ @@ -33,11 +33,10 @@
-
- + 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 0acc55f24..96977ce51 100644 --- a/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.ts +++ b/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.ts @@ -21,6 +21,10 @@ export class BisqTransactionsComponent implements OnInit { loadingItems: number[]; pageSubject$ = new Subject(); + // @ts-ignore + paginationSize: 'sm' | 'lg' = 'md'; + paginationMaxSize = 10; + constructor( private bisqApiService: BisqApiService, private seoService: SeoService, @@ -32,10 +36,15 @@ export class BisqTransactionsComponent implements OnInit { this.itemsPerPage = Math.max(Math.round(this.contentSpace / this.fiveItemsPxSize) * 5, 10); this.loadingItems = Array(this.itemsPerPage); + if (document.body.clientWidth < 768) { + this.paginationSize = 'sm'; + this.paginationMaxSize = 3; + } + this.pageSubject$ .pipe( tap(() => this.isLoading = true), - switchMap((page) => this.bisqApiService.listTransactions$((page - 1) * 10, this.itemsPerPage)) + switchMap((page) => this.bisqApiService.listTransactions$((page - 1) * this.itemsPerPage, this.itemsPerPage)) ) .subscribe((response) => { this.isLoading = false; diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 6ce12a3cf..c3f830a1e 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -171,7 +171,7 @@ body { } .table-striped tbody tr:nth-of-type(odd) { - background-color: #181b2d !important; + background-color: #181b2d; } .bordertop {