mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-03-15 12:20:28 +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"> <div class="card">
<img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + asset.asset_id + '/icon'"> <img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + asset.asset_id + '/icon'">
<div class="title"> <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>
<div class="ticker">{{ asset.ticker }}</div> <div class="ticker">{{ asset.ticker }}</div>
</div> </div>

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

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

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

@ -3,6 +3,7 @@
<h1 i18n="Assets page header">Assets</h1> <h1 i18n="Assets page header">Assets</h1>
</div> </div>
<div class="nav-container">
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" [routerLink]="['/assets/featured']" routerLinkActive="active">Featured</a> <a class="nav-link" [routerLink]="['/assets/featured']" routerLinkActive="active">Featured</a>
@ -13,7 +14,7 @@
</li> </li>
</ul> </ul>
<form [formGroup]="searchForm" class="form-inline"> <form [formGroup]="searchForm">
<div class="input-group mb-2"> <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"> <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"> <div class="input-group-append">
@ -21,6 +22,7 @@
</div> </div>
</div> </div>
</form> </form>
</div>
<div class="clearfix"></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 { form {
float: right; 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> <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> </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 { export class AssetsComponent implements OnInit {
nativeAssetId = this.stateService.network === 'liquidtestnet' ? environment.nativeTestAssetId : environment.nativeAssetId; 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[]; assets: AssetExtended[];
assetsCache: AssetExtended[]; assetsCache: AssetExtended[];