mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-03-13 11:36:07 +01:00
Code Issues Projects Releases Wiki Activity

Mobile layout fixes.

Browse source
This commit is contained in:
softsimon 2022-02-06 04:44:40 +04:00
parent 91082f27e7
commit ff4c097c48
No known key found for this signature in database
GPG key ID: 488D7DCFB5A430D7
6 changed files with 43 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/components/assets/asset-group/asset-group.component.html
View file

@ -16,7 +16,7 @@
<div class="card">
<img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + asset.asset_id + '/icon'">
<div class="title">
<a [routerLink]="['/assets/asset/', group.asset_id]">{{ asset.name }}</a>
<a [routerLink]="['/assets/asset/', asset.asset_id]">{{ asset.name }}</a>
</div>
<div class="ticker">{{ asset.ticker }}</div>
</div>

8
frontend/src/app/components/assets/assets-featured/assets-featured.component.html
View file

@ -3,12 +3,16 @@
<div *ngFor="let group of featured">
<div class="card">
<ng-template [ngIf]="group.assets" [ngIfElse]="singleAsset">
<img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + group.assets[0] + '/icon'">
<a [routerLink]="['/assets/asset-group', group.id]">
<img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + group.assets[0] + '/icon'">
</a>
<div class="title"><a [routerLink]="['/assets/asset-group', group.id]">{{ group.name }}</a></div>
<div class="sub-title">Group of {{ group.assets.length | number }} assets</div>
</ng-template>
<ng-template #singleAsset>
<img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + group.asset + '/icon'">
<a [routerLink]="['/assets/asset/', group.asset]">
<img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + group.asset + '/icon'">
</a>
<div class="title">
<a [routerLink]="['/assets/asset/', group.asset]">{{ group.name }}</a>
</div>

34
frontend/src/app/components/assets/assets-nav/assets-nav.component.html
View file

@ -3,24 +3,26 @@
<h1 i18n="Assets page header">Assets</h1>
</div>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" [routerLink]="['/assets/featured']" routerLinkActive="active">Featured</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="['/assets/all']" routerLinkActive="active">All</a>
</li>
</ul>
<div class="nav-container">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" [routerLink]="['/assets/featured']" routerLinkActive="active">Featured</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="['/assets/all']" routerLinkActive="active">All</a>
</li>
</ul>
<form [formGroup]="searchForm" class="form-inline">
<div class="input-group mb-2">
<input #instance="ngbTypeahead" [ngbTypeahead]="typeaheadSearchFn" [resultFormatter]="formatterFn" (selectItem)="itemSelected()" (focus)="focus$.next($any($event).target.value)" (click)="click$.next($any($event).target.value)" formControlName="searchText" type="text" class="form-control" i18n-placeholder="Search Assets Placeholder Text" placeholder="Search asset">
<div class="input-group-append">
<button [disabled]="!searchForm.get('searchText')?.value.length" class="btn btn-secondary" type="button" (click)="searchForm.get('searchText')?.setValue('');" autocomplete="off" i18n="Search Clear Button">Clear</button>
<form [formGroup]="searchForm">
<div class="input-group mb-2">
<input #instance="ngbTypeahead" [ngbTypeahead]="typeaheadSearchFn" [resultFormatter]="formatterFn" (selectItem)="itemSelected()" (focus)="focus$.next($any($event).target.value)" (click)="click$.next($any($event).target.value)" formControlName="searchText" type="text" class="form-control" i18n-placeholder="Search Assets Placeholder Text" placeholder="Search asset">
<div class="input-group-append">
<button [disabled]="!searchForm.get('searchText')?.value.length" class="btn btn-secondary" type="button" (click)="searchForm.get('searchText')?.setValue('');" autocomplete="off" i18n="Search Clear Button">Clear</button>
</div>
</div>
</div>
</form>
</form>
</div>
<div class="clearfix"></div>

15
frontend/src/app/components/assets/assets-nav/assets-nav.component.scss
View file

@ -6,4 +6,19 @@ ul {
form {
float: right;
width: 300px;
@media (max-width: 767.98px) {
width: 90%;
margin-bottom: 15px;
}
}
@media (max-width: 767.98px) {
.nav-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: auto;
}
}

2
frontend/src/app/components/assets/assets.component.html
View file

@ -18,7 +18,7 @@
<br>
<ngb-pagination [collectionSize]="assets.length" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="5" [boundaryLinks]="true"></ngb-pagination>
<ngb-pagination [collectionSize]="assets.length" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true" [ellipses]="ellipses"></ngb-pagination>
</ng-container>

2
frontend/src/app/components/assets/assets.component.ts
View file

@ -17,6 +17,8 @@ import { StateService } from 'src/app/services/state.service';
})
export class AssetsComponent implements OnInit {
nativeAssetId = this.stateService.network === 'liquidtestnet' ? environment.nativeTestAssetId : environment.nativeAssetId;
paginationMaxSize = window.matchMedia('(max-width: 670px)').matches ? 4 : 6;
ellipses = window.matchMedia('(max-width: 670px)').matches ? false : true;
assets: AssetExtended[];
assetsCache: AssetExtended[];