From f5193218e5f7bd177b9e8f908cd2631f9304f87e Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Mon, 7 Feb 2022 00:08:07 +0400
Subject: [PATCH] Mobile responsiveness fixes

---
 .../asset-group/asset-group.component.html       | 13 +++++++++++--
 .../asset-group/asset-group.component.scss       | 15 +++++++++------
 .../assets-featured.component.scss               | 15 +++++++++------
 .../app/components/assets/assets.component.html  | 16 ++++++++--------
 4 files changed, 37 insertions(+), 22 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 46b3b9eae..ac0ed4327 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
@@ -1,4 +1,4 @@
-<div *ngIf="group$ | async as group">
+<div *ngIf="group$ | async as group; else loading">
   
   <div class="main-title">
     <h2>{{ group.group.name }}</h2>
@@ -14,7 +14,9 @@
   <div class="featuredBox">
     <div *ngFor="let asset of group.assets">
       <div class="card">
-        <img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + asset.asset_id + '/icon'">
+        <a [routerLink]="['/assets/asset' | relativeUrl, asset.asset_id]">
+          <img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + asset.asset_id + '/icon'">
+        </a>
         <div class="title">
           <a [routerLink]="['/assets/asset/' | relativeUrl, asset.asset_id]">{{ asset.name }}</a>
         </div>
@@ -24,3 +26,10 @@
   </div>
 
 </div>
+
+<ng-template #loading>
+  <br>
+  <div class="text-center loadingGraphs">
+    <div class="spinner-border text-light"></div>
+  </div>
+</ng-template>
\ No newline at end of file
diff --git a/frontend/src/app/components/assets/asset-group/asset-group.component.scss b/frontend/src/app/components/assets/asset-group/asset-group.component.scss
index 7a0735a24..c0b31f273 100644
--- a/frontend/src/app/components/assets/asset-group/asset-group.component.scss
+++ b/frontend/src/app/components/assets/asset-group/asset-group.component.scss
@@ -25,12 +25,17 @@
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
+  @media (max-width: 767.98px) {
+    width: 150px;
+    height: 150px;
+  }
 }
 
 .title {
   font-size: 14px;
   font-weight: bold;
   margin-top: 10px;
+  text-align: center;
 }
 
 .sub-title {
@@ -40,12 +45,10 @@
 .assetIcon {
   width: 100px;
   height: 100px;
-}
-
-.image {
-  width: 100px;
-  height: 100px;
-  align-self: center;
+  @media (max-width: 767.98px) {
+    width: 50px;
+    height: 50px;
+  }
 }
 
 .view-link {
diff --git a/frontend/src/app/components/assets/assets-featured/assets-featured.component.scss b/frontend/src/app/components/assets/assets-featured/assets-featured.component.scss
index 41be2b748..0ff049d16 100644
--- a/frontend/src/app/components/assets/assets-featured/assets-featured.component.scss
+++ b/frontend/src/app/components/assets/assets-featured/assets-featured.component.scss
@@ -13,12 +13,17 @@
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
+  @media (max-width: 767.98px) {
+    width: 150px;
+    height: 150px;
+  }
 }
 
 .title {
   font-size: 14px;
   font-weight: bold;
   margin-top: 10px;
+  text-align: center;
 }
 
 .sub-title {
@@ -29,12 +34,10 @@
 .assetIcon {
   width: 100px;
   height: 100px;
-}
-
-.image {
-  width: 100px;
-  height: 100px;
-  align-self: center;
+  @media (max-width: 767.98px) {
+    width: 50px;
+    height: 50px;
+  }
 }
 
 .view-link {
diff --git a/frontend/src/app/components/assets/assets.component.html b/frontend/src/app/components/assets/assets.component.html
index 677e25058..d5accc9d7 100644
--- a/frontend/src/app/components/assets/assets.component.html
+++ b/frontend/src/app/components/assets/assets.component.html
@@ -3,15 +3,15 @@
     <thead>
       <th class="td-name" i18n="Asset name header">Name</th>
       <th i18n="Asset ticker header">Ticker</th>
-      <th class="d-none d-md-block" i18n="Asset Issuer Domain header">Issuer domain</th>
-      <th i18n="Asset ID header">Asset ID</th>
+      <th class="d-none d-md-table-cell" i18n="Asset Issuer Domain header">Issuer domain</th>
+      <th class="d-none d-lg-table-cell" i18n="Asset ID header">Asset ID</th>
     </thead>
     <tbody>
       <tr *ngFor="let asset of filteredAssets; trackBy: trackByAsset">
         <td class="td-name"><a [routerLink]="['/assets/asset/' | relativeUrl, asset.asset_id]">{{ asset.name }}</a></td>
         <td>{{ asset.ticker }}</td>
-        <td class="d-none d-md-block">{{ asset.entity && asset.entity.domain }}</td>
-        <td><a [routerLink]="['/assets/asset/' | relativeUrl, asset.asset_id]">{{ asset.asset_id | shortenString : 13 }}</a> <app-clipboard class="d-none d-sm-inline-block" [text]="asset.asset_id"></app-clipboard></td>
+        <td class="d-none d-md-table-cell">{{ asset.entity && asset.entity.domain }}</td>
+        <td class="d-none d-lg-table-cell"><a [routerLink]="['/assets/asset/' | relativeUrl, asset.asset_id]">{{ asset.asset_id | shortenString : 13 }}</a> <app-clipboard class="d-none d-sm-inline-block" [text]="asset.asset_id"></app-clipboard></td>
       </tr>
     </tbody>
   </table>
@@ -28,15 +28,15 @@
     <thead>
       <th i18n="Asset name header">Name</th>
       <th i18n="Asset ticker header">Ticker</th>
-      <th class="d-none d-md-block" i18n="Asset Issuer Domain header">Issuer domain</th>
-      <th i18n="Asset ID header">Asset ID</th>
+      <th class="d-none d-md-table-cell" i18n="Asset Issuer Domain header">Issuer domain</th>
+      <th class="d-none d-lg-table-cell" i18n="Asset ID header">Asset ID</th>
     </thead>
     <tbody>
       <tr *ngFor="let dummy of [0,0,0,0,0,0,0,0,0,0]">
         <td><span class="skeleton-loader"></span></td>
         <td><span class="skeleton-loader"></span></td>
-        <td class="d-none d-md-block"><span class="skeleton-loader"></span></td>
-        <td><span class="skeleton-loader"></span></td>
+        <td class="d-none d-md-table-cell"><span class="skeleton-loader"></span></td>
+        <td class="d-none d-lg-table-cell"><span class="skeleton-loader"></span></td>
       </tr>
     </tbody>
   </table>