Feature/optimize accounts table for mobile (#271)

* Optimize accounts table

* Update changelog

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

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>
+    <th
-    <td *matCellDef="let element" class="px-1" mat-cell>
+      *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>
+    <th *matHeaderCellDef class="px-1 text-right" mat-header-cell>
-      Transactions
+      <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>
+    <th *matHeaderCellDef class="px-1 text-right" i18n mat-header-cell>
-    <td *matCellDef="let element" class="text-right" mat-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"

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"