Responsiveness fixes.

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": {

frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.html

@@ -25,7 +25,7 @@
 
   <br>
 
-  <ngb-pagination [collectionSize]="totalCount" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="5" [boundaryLinks]="true"></ngb-pagination>
+  <ngb-pagination [size]="paginationSize" [collectionSize]="totalCount" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true"></ngb-pagination>
 
 </div>
 

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<number>();
 
@@ -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;

frontend/src/app/bisq/bisq-transaction-details/bisq-transaction-details.component.html

@@ -4,7 +4,7 @@
       <table class="table table-borderless table-striped">
         <tbody>
           <tr>
-            <td>Inputs</td>
+            <td class="td-width">Inputs</td>
             <td>{{ totalInput / 100 | number: '1.2-2' }} BSQ</td>
           </tr>
           <tr>
@@ -20,9 +20,9 @@
     </div>
     <div class="col-sm">
       <table class="table table-borderless table-striped">
-        <tbody>
+        <tbody class="mobile-even">
           <tr>
-            <td>Type</td>
+            <td class="td-width">Type</td>
             <td><app-bisq-icon class="mr-1" [txType]="tx.txType"></app-bisq-icon> {{ tx.txTypeDisplayString }}</td>
           </tr>
           <tr>

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

frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.html

@@ -4,11 +4,10 @@
 
   <div class="clearfix"></div>
 
-  <div class="table-responsive-sm">
     <table class="table table-borderless table-striped">
       <thead>
         <th style="width: 20%;">Transaction</th>
-        <th style="width: 20%;">Type</th>
+        <th class="d-none d-sm-block" style="width: 20%;">Type</th>
         <th style="width: 20%;">Amount</th>
         <th style="width: 20%;">Confirmed</th>
         <th class="d-none d-md-block" style="width: 20%;">Height</th>
@@ -16,11 +15,12 @@
       <tbody *ngIf="!isLoading; else loadingTmpl">
         <tr *ngFor="let tx of transactions; trackBy: trackByFn">
           <td><a [routerLink]="['/tx/' | relativeUrl, tx.id]" [state]="{ data: tx }">{{ tx.id | slice : 0 : 8 }}</a></td>
-          <td>
+          <td class="d-none d-md-block">
             <app-bisq-icon class="mr-1" [txType]="tx.txType"></app-bisq-icon>
             <span class="d-none d-md-inline"> {{ tx.txTypeDisplayString }}</span>
           </td>
           <td>
+            <app-bisq-icon class="d-inline d-sm-none mr-1" [txType]="tx.txType"></app-bisq-icon>
             <ng-template [ngIf]="tx.txType === 'PAY_TRADE_FEE'" [ngIfElse]="defaultTxType">
               {{ tx.burntFee / 100 | number: '1.2-2' }}<span class="d-none d-md-inline"> BSQ</span>
             </ng-template>
@@ -33,11 +33,10 @@
         </tr> 
       </tbody>
     </table>
-  </div>
 
   <br>
 
-  <ngb-pagination [collectionSize]="totalCount" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="5" [boundaryLinks]="true"></ngb-pagination>
+  <ngb-pagination [size]="paginationSize" [collectionSize]="totalCount" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true"></ngb-pagination>
 
 </div>
 

frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.ts

@@ -21,6 +21,10 @@ export class BisqTransactionsComponent implements OnInit {
   loadingItems: number[];
   pageSubject$ = new Subject<number>();
 
+  // @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;

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 {