Bugfix/fix horizontal overflow in activities table (#676)

* Fix horizontal overflow in tables * Update changelog
2022-02-06 15:45:39 +01:00
parent 65bfe52db4
commit bed3e5aae2
25 changed files with 403 additions and 364 deletions
--- a/apps/client/src/app/pages/about/about-page.component.ts
+++ b/apps/client/src/app/pages/about/about-page.component.ts
@@ -11,7 +11,7 @@ import { takeUntil } from 'rxjs/operators';
 import { environment } from '../../../environments/environment';

@Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
  selector: 'gf-about-page',
  styleUrls: ['./about-page.scss'],
  templateUrl: './about-page.html'
--- a/apps/client/src/app/pages/about/changelog/changelog-page.component.ts
+++ b/apps/client/src/app/pages/about/changelog/changelog-page.component.ts
@@ -2,7 +2,7 @@ import { Component, OnDestroy } from '@angular/core';
 import { Subject } from 'rxjs';

@Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
  selector: 'gf-changelog-page',
  styleUrls: ['./changelog-page.scss'],
  templateUrl: './changelog-page.html'
--- a/apps/client/src/app/pages/account/account-page.component.ts
+++ b/apps/client/src/app/pages/account/account-page.component.ts
@@ -31,7 +31,7 @@ import { catchError, switchMap, takeUntil } from 'rxjs/operators';
 import { CreateOrUpdateAccessDialog } from './create-or-update-access-dialog/create-or-update-access-dialog.component';

@Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
  selector: 'gf-account-page',
  styleUrls: ['./account-page.scss'],
  templateUrl: './account-page.html'
--- a/apps/client/src/app/pages/accounts/accounts-page.component.ts
+++ b/apps/client/src/app/pages/accounts/accounts-page.component.ts
@@ -16,7 +16,7 @@ import { takeUntil } from 'rxjs/operators';
 import { CreateOrUpdateAccountDialog } from './create-or-update-account-dialog/create-or-update-account-dialog.component';

@Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
  selector: 'gf-accounts-page',
  styleUrls: ['./accounts-page.scss'],
  templateUrl: './accounts-page.html'
--- a/apps/client/src/app/pages/accounts/accounts-page.html
+++ b/apps/client/src/app/pages/accounts/accounts-page.html
@@ -1,19 +1,21 @@
 <div class="container">
-  <div class="row mb-3">
+  <div class="row">
    <div class="col">
      <h3 class="d-flex justify-content-center mb-3" i18n>Accounts</h3>
-      <gf-accounts-table
-        [accounts]="accounts"
-        [baseCurrency]="user?.settings?.baseCurrency"
-        [deviceType]="deviceType"
-        [locale]="user?.settings?.locale"
-        [showActions]="!hasImpersonationId && hasPermissionToDeleteAccount && !user.settings.isRestrictedView"
-        [totalBalance]="totalBalance"
-        [totalValue]="totalValue"
-        [transactionCount]="transactionCount"
-        (accountDeleted)="onDeleteAccount($event)"
-        (accountToUpdate)="onUpdateAccount($event)"
-      ></gf-accounts-table>
+      <div class="accounts">
+        <gf-accounts-table
+          [accounts]="accounts"
+          [baseCurrency]="user?.settings?.baseCurrency"
+          [deviceType]="deviceType"
+          [locale]="user?.settings?.locale"
+          [showActions]="!hasImpersonationId && hasPermissionToDeleteAccount && !user.settings.isRestrictedView"
+          [totalBalance]="totalBalance"
+          [totalValue]="totalValue"
+          [transactionCount]="transactionCount"
+          (accountDeleted)="onDeleteAccount($event)"
+          (accountToUpdate)="onUpdateAccount($event)"
+        ></gf-accounts-table>
+      </div>
    </div>
  </div>

--- a/apps/client/src/app/pages/accounts/accounts-page.scss
+++ b/apps/client/src/app/pages/accounts/accounts-page.scss
@@ -1,6 +1,10 @@
 :host {
  display: block;

+  .accounts {
+    overflow-x: auto;
+  }
+
  .fab-container {
    position: fixed;
    right: 2rem;
--- a/apps/client/src/app/pages/blog/2021/07/hallo-ghostfolio/hallo-ghostfolio-page.component.ts
+++ b/apps/client/src/app/pages/blog/2021/07/hallo-ghostfolio/hallo-ghostfolio-page.component.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';

@Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
  selector: 'gf-hallo-ghostfolio-page',
  styleUrls: ['./hallo-ghostfolio-page.scss'],
  templateUrl: './hallo-ghostfolio-page.html'
--- a/apps/client/src/app/pages/blog/2021/07/hello-ghostfolio/hello-ghostfolio-page.component.ts
+++ b/apps/client/src/app/pages/blog/2021/07/hello-ghostfolio/hello-ghostfolio-page.component.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';

@Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
  selector: 'gf-hello-ghostfolio-page',
  styleUrls: ['./hello-ghostfolio-page.scss'],
  templateUrl: './hello-ghostfolio-page.html'
--- a/apps/client/src/app/pages/blog/2022/01/first-months-in-open-source/first-months-in-open-source-page.component.ts
+++ b/apps/client/src/app/pages/blog/2022/01/first-months-in-open-source/first-months-in-open-source-page.component.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';

@Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
  selector: 'gf-first-months-in-open-source-page',
  styleUrls: ['./first-months-in-open-source-page.scss'],
  templateUrl: './first-months-in-open-source-page.html'
--- a/apps/client/src/app/pages/blog/blog-page.component.ts
+++ b/apps/client/src/app/pages/blog/blog-page.component.ts
@@ -2,7 +2,7 @@ import { Component, OnDestroy } from '@angular/core';
 import { Subject } from 'rxjs';

@Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
  selector: 'gf-blog-page',
  styleUrls: ['./blog-page.scss'],
  templateUrl: './blog-page.html'
--- a/apps/client/src/app/pages/landing/landing-page.component.ts
+++ b/apps/client/src/app/pages/landing/landing-page.component.ts
@@ -6,7 +6,7 @@ import { format } from 'date-fns';
 import { Subject } from 'rxjs';

@Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
  selector: 'gf-landing-page',
  styleUrls: ['./landing-page.scss'],
  templateUrl: './landing-page.html'
--- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts
@@ -20,7 +20,7 @@ import { Subject, Subscription } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';

@Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
  selector: 'gf-allocations-page',
  styleUrls: ['./allocations-page.scss'],
  templateUrl: './allocations-page.html'
--- a/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts
@@ -11,7 +11,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';

@Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
  selector: 'gf-analysis-page',
  styleUrls: ['./analysis-page.scss'],
  templateUrl: './analysis-page.html'
--- a/apps/client/src/app/pages/portfolio/portfolio-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/portfolio-page.component.ts
@@ -7,7 +7,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';

@Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
  selector: 'gf-portfolio-page',
  styleUrls: ['./portfolio-page.scss'],
  templateUrl: './portfolio-page.html'
--- a/apps/client/src/app/pages/portfolio/report/report-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/report/report-page.component.ts
@@ -7,7 +7,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';

@Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
  selector: 'gf-report-page',
  styleUrls: ['./report-page.scss'],
  templateUrl: './report-page.html'
--- a/apps/client/src/app/pages/portfolio/transactions/transactions-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/transactions/transactions-page.component.ts
@@ -24,7 +24,7 @@ import { CreateOrUpdateTransactionDialog } from './create-or-update-transaction-
 import { ImportTransactionDialog } from './import-transaction-dialog/import-transaction-dialog.component';

@Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
  selector: 'gf-transactions-page',
  styleUrls: ['./transactions-page.scss'],
  templateUrl: './transactions-page.html'
--- a/apps/client/src/app/pages/pricing/pricing-page.component.ts
+++ b/apps/client/src/app/pages/pricing/pricing-page.component.ts
@@ -7,7 +7,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';

@Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
  selector: 'gf-pricing-page',
  styleUrls: ['./pricing-page.scss'],
  templateUrl: './pricing-page.html'
--- a/apps/client/src/app/pages/public/public-page.component.ts
+++ b/apps/client/src/app/pages/public/public-page.component.ts
@@ -13,7 +13,7 @@ import { EMPTY, Subject } from 'rxjs';
 import { catchError, takeUntil } from 'rxjs/operators';

@Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
  selector: 'gf-public-page',
  styleUrls: ['./public-page.scss'],
  templateUrl: './public-page.html'
--- a/apps/client/src/app/pages/register/register-page.component.ts
+++ b/apps/client/src/app/pages/register/register-page.component.ts
@@ -14,7 +14,7 @@ import { takeUntil } from 'rxjs/operators';
 import { ShowAccessTokenDialog } from './show-access-token-dialog/show-access-token-dialog.component';

@Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
  selector: 'gf-register-page',
  styleUrls: ['./register-page.scss'],
  templateUrl: './register-page.html'
--- a/apps/client/src/app/pages/resources/resources-page.component.ts
+++ b/apps/client/src/app/pages/resources/resources-page.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Subject } from 'rxjs';

@Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
  selector: 'gf-resources-page',
  styleUrls: ['./resources-page.scss'],
  templateUrl: './resources-page.html'
--- a/apps/client/src/app/pages/webauthn/webauthn-page.component.ts
+++ b/apps/client/src/app/pages/webauthn/webauthn-page.component.ts
@@ -6,7 +6,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';

@Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
  selector: 'gf-webauthn-page',
  styleUrls: ['./webauthn-page.scss'],
  templateUrl: './webauthn-page.html'
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@@ -164,6 +164,10 @@ ngx-skeleton-loader {
  min-width: unset !important;
 }

+.page {
+  padding-bottom: 5rem;
+}
+
 .svgMap-tooltip {
  border-bottom: none;