mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-03-03 09:39:17 +01:00
Code Issues Projects Releases Wiki Activity

Responsiveness fixes.

Browse source
This commit is contained in:
softsimon 2020-07-19 13:46:30 +07:00
parent cfb60c0bad
commit fbb8185c82
No known key found for this signature in database
GPG key ID: 488D7DCFB5A430D7
8 changed files with 40 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/proxy.conf.json
View file

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

2
frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.html
View file

@ -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>

9
frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.ts
View file

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

6
frontend/src/app/bisq/bisq-transaction-details/bisq-transaction-details.component.html
View file

@ -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>

11
frontend/src/app/bisq/bisq-transaction-details/bisq-transaction-details.component.scss
View file

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

9
frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.html
View file

@ -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>

11
frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.ts
View file

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

2
frontend/src/styles.scss
View file

@ -171,7 +171,7 @@ body {
}
.table-striped tbody tr:nth-of-type(odd) {
background-color: #181b2d !important;
background-color: #181b2d;
}
.bordertop {