From ff4c097c4812f5afeda5c5faef35303a6ddf75ec Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Sun, 6 Feb 2022 04:44:40 +0400
Subject: [PATCH] Mobile layout fixes.

---
 .../asset-group/asset-group.component.html    |  2 +-
 .../assets-featured.component.html            |  8 +++--
 .../assets-nav/assets-nav.component.html      | 34 ++++++++++---------
 .../assets-nav/assets-nav.component.scss      | 15 ++++++++
 .../components/assets/assets.component.html   |  2 +-
 .../app/components/assets/assets.component.ts |  2 ++
 6 files changed, 43 insertions(+), 20 deletions(-)

diff --git a/frontend/src/app/components/assets/asset-group/asset-group.component.html b/frontend/src/app/components/assets/asset-group/asset-group.component.html
index a6858b76f..64fe182e9 100644
--- a/frontend/src/app/components/assets/asset-group/asset-group.component.html
+++ b/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>
diff --git a/frontend/src/app/components/assets/assets-featured/assets-featured.component.html b/frontend/src/app/components/assets/assets-featured/assets-featured.component.html
index 937ca8113..f94157766 100644
--- a/frontend/src/app/components/assets/assets-featured/assets-featured.component.html
+++ b/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">
-        <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>
diff --git a/frontend/src/app/components/assets/assets-nav/assets-nav.component.html b/frontend/src/app/components/assets/assets-nav/assets-nav.component.html
index 73d391254..c543e1893 100644
--- a/frontend/src/app/components/assets/assets-nav/assets-nav.component.html
+++ b/frontend/src/app/components/assets/assets-nav/assets-nav.component.html
@@ -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>
 
diff --git a/frontend/src/app/components/assets/assets-nav/assets-nav.component.scss b/frontend/src/app/components/assets/assets-nav/assets-nav.component.scss
index 530ed7bdf..21ab756d9 100644
--- a/frontend/src/app/components/assets/assets-nav/assets-nav.component.scss
+++ b/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;
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/assets/assets.component.html b/frontend/src/app/components/assets/assets.component.html
index ec9ac079f..677e25058 100644
--- a/frontend/src/app/components/assets/assets.component.html
+++ b/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>
 
diff --git a/frontend/src/app/components/assets/assets.component.ts b/frontend/src/app/components/assets/assets.component.ts
index b6a8a8f1b..e85248dd6 100644
--- a/frontend/src/app/components/assets/assets.component.ts
+++ b/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[];