Mobile layout fixes.

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

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

frontend/src/app/components/assets/assets-featured/assets-featured.component.html

@@ -3,12 +3,16 @@
   <div *ngFor="let group of featured">
     <div class="card">
       <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'">
+        </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>
+        <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>

frontend/src/app/components/assets/assets-nav/assets-nav.component.html

@@ -3,6 +3,7 @@
     <h1 i18n="Assets page header">Assets</h1>
   </div>
 
+  <div class="nav-container">
     <ul class="nav nav-pills">
       <li class="nav-item">
         <a class="nav-link" [routerLink]="['/assets/featured']" routerLinkActive="active">Featured</a>
@@ -13,7 +14,7 @@
       </li>
     </ul>
 
-  <form [formGroup]="searchForm" class="form-inline">
+    <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">
@@ -21,6 +22,7 @@
         </div>
       </div>
     </form>
+</div>
 
   <div class="clearfix"></div>
 

frontend/src/app/components/assets/assets-nav/assets-nav.component.scss

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

frontend/src/app/components/assets/assets.component.html

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

frontend/src/app/components/assets/assets.component.ts

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