From e88b889fdd39109c9e2e169dee7262e45884ba2e Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 8 Aug 2021 09:24:47 +0200
Subject: [PATCH] Feature/optimize accounts table for mobile (#271)
* Optimize accounts table
* Update changelog
---
CHANGELOG.md | 1 +
.../accounts-table.component.html | 34 ++++++++++++++-----
.../transactions-table.component.html | 4 +--
3 files changed, 27 insertions(+), 12 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 149ac3ce1..efd1cda0e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Hid the pagination of tabs
- Improved the support for future transactions (drafts)
+- Optimized the accounts table for mobile
- Upgraded `chart.js` from version `3.3.2` to `3.5.0`
### Todo
diff --git a/apps/client/src/app/components/accounts-table/accounts-table.component.html b/apps/client/src/app/components/accounts-table/accounts-table.component.html
index 34205e231..1eafb997f 100644
--- a/apps/client/src/app/components/accounts-table/accounts-table.component.html
+++ b/apps/client/src/app/components/accounts-table/accounts-table.component.html
@@ -2,7 +2,13 @@
<ng-container matColumnDef="account">
<th *matHeaderCellDef class="px-1" i18n mat-header-cell>Name</th>
<td *matCellDef="let element" class="px-1" mat-cell>
- {{ element.name }}
+ <gf-symbol-icon
+ *ngIf="element.Platform?.url"
+ class="d-inline d-sm-none mr-1"
+ [tooltip]="element.Platform?.name"
+ [url]="element.Platform?.url"
+ ></gf-symbol-icon>
+ <span>{{ element.name }}</span>
<span
*ngIf="element.isDefault"
class="d-lg-inline-block d-none text-muted"
@@ -12,13 +18,20 @@
</ng-container>
<ng-container matColumnDef="platform">
- <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Platform</th>
- <td *matCellDef="let element" class="px-1" mat-cell>
+ <th
+ *matHeaderCellDef
+ class="d-none d-lg-table-cell px-1"
+ i18n
+ mat-header-cell
+ >
+ Platform
+ </th>
+ <td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell>
<div class="d-flex">
<gf-symbol-icon
*ngIf="element.Platform?.url"
class="mr-1"
- [tooltip]=""
+ [tooltip]="element.Platform?.name"
[url]="element.Platform?.url"
></gf-symbol-icon>
<span>{{ element.Platform?.name }}</span>
@@ -27,17 +40,20 @@
</ng-container>
<ng-container matColumnDef="transactions">
- <th *matHeaderCellDef class="text-right" i18n mat-header-cell>
- Transactions
+ <th *matHeaderCellDef class="px-1 text-right" mat-header-cell>
+ <span class="d-block d-sm-none">#</span>
+ <span class="d-none d-sm-block" i18n>Transactions</span>
</th>
- <td *matCellDef="let element" class="text-right" mat-cell>
+ <td *matCellDef="let element" class="px-1 text-right" mat-cell>
{{ element.Order?.length }}
</td>
</ng-container>
<ng-container matColumnDef="balance">
- <th *matHeaderCellDef class="text-right" i18n mat-header-cell>Balance</th>
- <td *matCellDef="let element" class="text-right" mat-cell>
+ <th *matHeaderCellDef class="px-1 text-right" i18n mat-header-cell>
+ Balance
+ </th>
+ <td *matCellDef="let element" class="px-1 text-right" mat-cell>
<gf-value
class="d-inline-block justify-content-end"
[currency]="element.currency"
diff --git a/apps/client/src/app/components/transactions-table/transactions-table.component.html b/apps/client/src/app/components/transactions-table/transactions-table.component.html
index 2fdee853d..2b742526d 100644
--- a/apps/client/src/app/components/transactions-table/transactions-table.component.html
+++ b/apps/client/src/app/components/transactions-table/transactions-table.component.html
@@ -46,9 +46,7 @@
class="d-none d-lg-table-cell px-1 text-right"
i18n
mat-header-cell
- >
- #
- </th>
+ ></th>
<td
*matCellDef="let element; let i = index"
class="d-none d-lg-table-cell px-1 text-right"