mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2024-12-29 01:34:28 +01:00
Code Issues Projects Releases Wiki Activity

Mobile responsiveness fixes

Browse Source
This commit is contained in:
softsimon 2022-02-07 00:08:07 +04:00
parent cd88692d3d
commit f5193218e5
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
4 changed files with 37 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
<div *ngIf="group$ | async as group"> <div *ngIf="group$ | async as group; else loading">
<div class="main-title"> <div class="main-title">
<h2>{{ group.group.name }}</h2> <h2>{{ group.group.name }}</h2>
@ -14,7 +14,9 @@
<div class="featuredBox"> <div class="featuredBox">
<div *ngFor="let asset of group.assets"> <div *ngFor="let asset of group.assets">
<div class="card"> <div class="card">
<a [routerLink]="['/assets/asset' | relativeUrl, asset.asset_id]">
<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'">
</a>
<div class="title"> <div class="title">
<a [routerLink]="['/assets/asset/' | relativeUrl, asset.asset_id]">{{ asset.name }}</a> <a [routerLink]="['/assets/asset/' | relativeUrl, asset.asset_id]">{{ asset.name }}</a>
</div> </div>
@ -24,3 +26,10 @@
</div> </div>
</div> </div>
<ng-template #loading>
<br>
<div class="text-center loadingGraphs">
<div class="spinner-border text-light"></div>
</div>
</ng-template>

13
frontend/src/app/components/assets/asset-group/asset-group.component.scss
View File

@ -25,12 +25,17 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
@media (max-width: 767.98px) {
width: 150px;
height: 150px;
}
} }
.title { .title {
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
margin-top: 10px; margin-top: 10px;
text-align: center;
} }
.sub-title { .sub-title {
@ -40,12 +45,10 @@
.assetIcon { .assetIcon {
width: 100px; width: 100px;
height: 100px; height: 100px;
@media (max-width: 767.98px) {
width: 50px;
height: 50px;
} }
.image {
width: 100px;
height: 100px;
align-self: center;
} }
.view-link { .view-link {

13
frontend/src/app/components/assets/assets-featured/assets-featured.component.scss
View File

@ -13,12 +13,17 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
@media (max-width: 767.98px) {
width: 150px;
height: 150px;
}
} }
.title { .title {
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
margin-top: 10px; margin-top: 10px;
text-align: center;
} }
.sub-title { .sub-title {
@ -29,12 +34,10 @@
.assetIcon { .assetIcon {
width: 100px; width: 100px;
height: 100px; height: 100px;
@media (max-width: 767.98px) {
width: 50px;
height: 50px;
} }
.image {
width: 100px;
height: 100px;
align-self: center;
} }
.view-link { .view-link {

16
frontend/src/app/components/assets/assets.component.html
View File

@ -3,15 +3,15 @@
<thead> <thead>
<th class="td-name" i18n="Asset name header">Name</th> <th class="td-name" i18n="Asset name header">Name</th>
<th i18n="Asset ticker header">Ticker</th> <th i18n="Asset ticker header">Ticker</th>
<th class="d-none d-md-block" i18n="Asset Issuer Domain header">Issuer domain</th> <th class="d-none d-md-table-cell" i18n="Asset Issuer Domain header">Issuer domain</th>
<th i18n="Asset ID header">Asset ID</th> <th class="d-none d-lg-table-cell" i18n="Asset ID header">Asset ID</th>
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let asset of filteredAssets; trackBy: trackByAsset"> <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 class="td-name"><a [routerLink]="['/assets/asset/' | relativeUrl, asset.asset_id]">{{ asset.name }}</a></td>
<td>{{ asset.ticker }}</td> <td>{{ asset.ticker }}</td>
<td class="d-none d-md-block">{{ asset.entity && asset.entity.domain }}</td> <td class="d-none d-md-table-cell">{{ 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-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> </tr>
</tbody> </tbody>
</table> </table>
@ -28,15 +28,15 @@
<thead> <thead>
<th i18n="Asset name header">Name</th> <th i18n="Asset name header">Name</th>
<th i18n="Asset ticker header">Ticker</th> <th i18n="Asset ticker header">Ticker</th>
<th class="d-none d-md-block" i18n="Asset Issuer Domain header">Issuer domain</th> <th class="d-none d-md-table-cell" i18n="Asset Issuer Domain header">Issuer domain</th>
<th i18n="Asset ID header">Asset ID</th> <th class="d-none d-lg-table-cell" i18n="Asset ID header">Asset ID</th>
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let dummy of [0,0,0,0,0,0,0,0,0,0]"> <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><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 class="d-none d-md-table-cell"><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td> <td class="d-none d-lg-table-cell"><span class="skeleton-loader"></span></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>