From 4ab6a1a0711420e190542cafceeabef991a71aeb Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Wed, 13 Oct 2021 11:51:33 +0200
Subject: [PATCH] Feature/harmonize page layouts (#417)

* Harmonize page layouts

* Update changelog
---
 CHANGELOG.md                                                 | 4 ++++
 apps/client/src/app/app.component.html                       | 5 ++++-
 apps/client/src/app/pages/about/about-page.component.ts      | 5 +++--
 apps/client/src/app/pages/account/account-page.component.ts  | 5 +++--
 .../client/src/app/pages/accounts/accounts-page.component.ts | 5 +++--
 apps/client/src/app/pages/admin/admin-page.component.ts      | 5 +++--
 .../07/hallo-ghostfolio/hallo-ghostfolio-page.component.ts   | 2 ++
 .../blog/2021/07/hallo-ghostfolio/hallo-ghostfolio-page.html | 2 +-
 .../blog/2021/07/hallo-ghostfolio/hallo-ghostfolio-page.scss | 3 +++
 .../07/hello-ghostfolio/hello-ghostfolio-page.component.ts   | 2 ++
 .../blog/2021/07/hello-ghostfolio/hello-ghostfolio-page.html | 2 +-
 .../blog/2021/07/hello-ghostfolio/hello-ghostfolio-page.scss | 3 +++
 apps/client/src/app/pages/home/home-page.component.ts        | 4 ++--
 apps/client/src/app/pages/landing/landing-page.component.ts  | 5 +++--
 .../portfolio/allocations/allocations-page.component.ts      | 5 +++--
 .../app/pages/portfolio/analysis/analysis-page.component.ts  | 5 +++--
 .../src/app/pages/portfolio/portfolio-page.component.ts      | 5 +++--
 .../src/app/pages/portfolio/report/report-page.component.ts  | 5 +++--
 .../portfolio/transactions/transactions-page.component.ts    | 5 +++--
 apps/client/src/app/pages/pricing/pricing-page.component.ts  | 5 +++--
 .../client/src/app/pages/register/register-page.component.ts | 5 +++--
 .../src/app/pages/resources/resources-page.component.ts      | 5 +++--
 .../client/src/app/pages/webauthn/webauthn-page.component.ts | 5 +++--
 apps/client/src/app/pages/webauthn/webauthn-page.scss        | 3 +++
 24 files changed, 67 insertions(+), 33 deletions(-)
 create mode 100644 apps/client/src/app/pages/blog/2021/07/hallo-ghostfolio/hallo-ghostfolio-page.scss
 create mode 100644 apps/client/src/app/pages/blog/2021/07/hello-ghostfolio/hello-ghostfolio-page.scss

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 94ce70534..04239e234 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - Maximum number of orders
   - Data provider service returns data for the `dataSource` / `symbol` pair
 
+### Changed
+
+- Harmonized the page layouts
+
 ### Fixed
 
 - Fixed the broken line charts showing value labels
diff --git a/apps/client/src/app/app.component.html b/apps/client/src/app/app.component.html
index ff2cedabd..156ad4eea 100644
--- a/apps/client/src/app/app.component.html
+++ b/apps/client/src/app/app.component.html
@@ -28,7 +28,10 @@
   <router-outlet></router-outlet>
 </main>
 
-<footer *ngIf="!user" class="footer d-flex justify-content-center w-100">
+<footer
+  *ngIf="currentRoute === 'start'"
+  class="footer d-flex justify-content-center w-100"
+>
   <div class="container text-center">
     <div>
       © {{ currentYear }} <a href="https://ghostfol.io">Ghostfolio</a>
diff --git a/apps/client/src/app/pages/about/about-page.component.ts b/apps/client/src/app/pages/about/about-page.component.ts
index 8fe70607c..2abc6ec8a 100644
--- a/apps/client/src/app/pages/about/about-page.component.ts
+++ b/apps/client/src/app/pages/about/about-page.component.ts
@@ -11,9 +11,10 @@ import { takeUntil } from 'rxjs/operators';
 import { environment } from '../../../environments/environment';
 
 @Component({
+  host: { class: 'mb-5' },
   selector: 'gf-about-page',
-  templateUrl: './about-page.html',
-  styleUrls: ['./about-page.scss']
+  styleUrls: ['./about-page.scss'],
+  templateUrl: './about-page.html'
 })
 export class AboutPageComponent implements OnDestroy, OnInit {
   public baseCurrency = baseCurrency;
diff --git a/apps/client/src/app/pages/account/account-page.component.ts b/apps/client/src/app/pages/account/account-page.component.ts
index 764b8e1b0..3d941250b 100644
--- a/apps/client/src/app/pages/account/account-page.component.ts
+++ b/apps/client/src/app/pages/account/account-page.component.ts
@@ -20,9 +20,10 @@ import { EMPTY, Subject } from 'rxjs';
 import { catchError, switchMap, takeUntil } from 'rxjs/operators';
 
 @Component({
+  host: { class: 'mb-5' },
   selector: 'gf-account-page',
-  templateUrl: './account-page.html',
-  styleUrls: ['./account-page.scss']
+  styleUrls: ['./account-page.scss'],
+  templateUrl: './account-page.html'
 })
 export class AccountPageComponent implements OnDestroy, OnInit {
   @ViewChild('toggleSignInWithFingerprintEnabledElement')
diff --git a/apps/client/src/app/pages/accounts/accounts-page.component.ts b/apps/client/src/app/pages/accounts/accounts-page.component.ts
index 4f1bffcec..711a8f858 100644
--- a/apps/client/src/app/pages/accounts/accounts-page.component.ts
+++ b/apps/client/src/app/pages/accounts/accounts-page.component.ts
@@ -16,9 +16,10 @@ import { takeUntil } from 'rxjs/operators';
 import { CreateOrUpdateAccountDialog } from './create-or-update-account-dialog/create-or-update-account-dialog.component';
 
 @Component({
+  host: { class: 'mb-5' },
   selector: 'gf-accounts-page',
-  templateUrl: './accounts-page.html',
-  styleUrls: ['./accounts-page.scss']
+  styleUrls: ['./accounts-page.scss'],
+  templateUrl: './accounts-page.html'
 })
 export class AccountsPageComponent implements OnDestroy, OnInit {
   public accounts: AccountModel[];
diff --git a/apps/client/src/app/pages/admin/admin-page.component.ts b/apps/client/src/app/pages/admin/admin-page.component.ts
index 9e0097561..662405840 100644
--- a/apps/client/src/app/pages/admin/admin-page.component.ts
+++ b/apps/client/src/app/pages/admin/admin-page.component.ts
@@ -15,9 +15,10 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
+  host: { class: 'mb-5' },
   selector: 'gf-admin-page',
-  templateUrl: './admin-page.html',
-  styleUrls: ['./admin-page.scss']
+  styleUrls: ['./admin-page.scss'],
+  templateUrl: './admin-page.html'
 })
 export class AdminPageComponent implements OnDestroy, OnInit {
   public dataGatheringInProgress: boolean;
diff --git 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
index 8a2163374..f5282bc2c 100644
--- 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,9 @@
 import { Component } from '@angular/core';
 
 @Component({
+  host: { class: 'mb-5' },
   selector: 'gf-hallo-ghostfolio-page',
+  styleUrls: ['./hallo-ghostfolio-page.scss'],
   templateUrl: './hallo-ghostfolio-page.html'
 })
 export class HalloGhostfolioPageComponent {}
diff --git a/apps/client/src/app/pages/blog/2021/07/hallo-ghostfolio/hallo-ghostfolio-page.html b/apps/client/src/app/pages/blog/2021/07/hallo-ghostfolio/hallo-ghostfolio-page.html
index 5d2b50aa9..cea9ae9da 100644
--- a/apps/client/src/app/pages/blog/2021/07/hallo-ghostfolio/hallo-ghostfolio-page.html
+++ b/apps/client/src/app/pages/blog/2021/07/hallo-ghostfolio/hallo-ghostfolio-page.html
@@ -139,7 +139,7 @@
             Thomas von Ghostfolio
           </p>
         </section>
-        <section class="my-5">
+        <section class="mb-4">
           <ul class="list-inline">
             <li class="h5">
               <span class="badge badge-light font-weight-normal mr-2"
diff --git a/apps/client/src/app/pages/blog/2021/07/hallo-ghostfolio/hallo-ghostfolio-page.scss b/apps/client/src/app/pages/blog/2021/07/hallo-ghostfolio/hallo-ghostfolio-page.scss
new file mode 100644
index 000000000..5d4e87f30
--- /dev/null
+++ b/apps/client/src/app/pages/blog/2021/07/hallo-ghostfolio/hallo-ghostfolio-page.scss
@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}
diff --git 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
index 8d5240fd3..1a5cd413a 100644
--- 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,9 @@
 import { Component } from '@angular/core';
 
 @Component({
+  host: { class: 'mb-5' },
   selector: 'gf-hello-ghostfolio-page',
+  styleUrls: ['./hello-ghostfolio-page.scss'],
   templateUrl: './hello-ghostfolio-page.html'
 })
 export class HelloGhostfolioPageComponent {}
diff --git a/apps/client/src/app/pages/blog/2021/07/hello-ghostfolio/hello-ghostfolio-page.html b/apps/client/src/app/pages/blog/2021/07/hello-ghostfolio/hello-ghostfolio-page.html
index 75938f92c..d83deb55b 100644
--- a/apps/client/src/app/pages/blog/2021/07/hello-ghostfolio/hello-ghostfolio-page.html
+++ b/apps/client/src/app/pages/blog/2021/07/hello-ghostfolio/hello-ghostfolio-page.html
@@ -134,7 +134,7 @@
             Thomas from Ghostfolio
           </p>
         </section>
-        <section class="my-5">
+        <section class="mb-4">
           <ul class="list-inline">
             <li class="h5">
               <span class="badge badge-light font-weight-normal mr-2"
diff --git a/apps/client/src/app/pages/blog/2021/07/hello-ghostfolio/hello-ghostfolio-page.scss b/apps/client/src/app/pages/blog/2021/07/hello-ghostfolio/hello-ghostfolio-page.scss
new file mode 100644
index 000000000..5d4e87f30
--- /dev/null
+++ b/apps/client/src/app/pages/blog/2021/07/hello-ghostfolio/hello-ghostfolio-page.scss
@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}
diff --git a/apps/client/src/app/pages/home/home-page.component.ts b/apps/client/src/app/pages/home/home-page.component.ts
index 3789c8d8a..f31502a7a 100644
--- a/apps/client/src/app/pages/home/home-page.component.ts
+++ b/apps/client/src/app/pages/home/home-page.component.ts
@@ -36,8 +36,8 @@ import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'gf-home-page',
-  templateUrl: './home-page.html',
-  styleUrls: ['./home-page.scss']
+  styleUrls: ['./home-page.scss'],
+  templateUrl: './home-page.html'
 })
 export class HomePageComponent implements OnDestroy, OnInit {
   @HostBinding('class.with-create-account-container') get isDemo() {
diff --git a/apps/client/src/app/pages/landing/landing-page.component.ts b/apps/client/src/app/pages/landing/landing-page.component.ts
index 4875afe97..7ebca0f62 100644
--- a/apps/client/src/app/pages/landing/landing-page.component.ts
+++ b/apps/client/src/app/pages/landing/landing-page.component.ts
@@ -7,9 +7,10 @@ import { format } from 'date-fns';
 import { Subject } from 'rxjs';
 
 @Component({
+  host: { class: 'mb-5' },
   selector: 'gf-landing-page',
-  templateUrl: './landing-page.html',
-  styleUrls: ['./landing-page.scss']
+  styleUrls: ['./landing-page.scss'],
+  templateUrl: './landing-page.html'
 })
 export class LandingPageComponent implements OnDestroy, OnInit {
   public currentYear = format(new Date(), 'yyyy');
diff --git a/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts b/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts
index de29311a2..ac816e8a4 100644
--- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts
@@ -15,9 +15,10 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
+  host: { class: 'mb-5' },
   selector: 'gf-allocations-page',
-  templateUrl: './allocations-page.html',
-  styleUrls: ['./allocations-page.scss']
+  styleUrls: ['./allocations-page.scss'],
+  templateUrl: './allocations-page.html'
 })
 export class AllocationsPageComponent implements OnDestroy, OnInit {
   public accounts: {
diff --git a/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts b/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts
index 187683930..7c5158e19 100644
--- a/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts
@@ -10,9 +10,10 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
+  host: { class: 'mb-5' },
   selector: 'gf-analysis-page',
-  templateUrl: './analysis-page.html',
-  styleUrls: ['./analysis-page.scss']
+  styleUrls: ['./analysis-page.scss'],
+  templateUrl: './analysis-page.html'
 })
 export class AnalysisPageComponent implements OnDestroy, OnInit {
   public accounts: {
diff --git a/apps/client/src/app/pages/portfolio/portfolio-page.component.ts b/apps/client/src/app/pages/portfolio/portfolio-page.component.ts
index 526d1c81b..a29472190 100644
--- a/apps/client/src/app/pages/portfolio/portfolio-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/portfolio-page.component.ts
@@ -7,9 +7,10 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
+  host: { class: 'mb-5' },
   selector: 'gf-portfolio-page',
-  templateUrl: './portfolio-page.html',
-  styleUrls: ['./portfolio-page.scss']
+  styleUrls: ['./portfolio-page.scss'],
+  templateUrl: './portfolio-page.html'
 })
 export class PortfolioPageComponent implements OnDestroy, OnInit {
   public hasPermissionForSubscription: boolean;
diff --git a/apps/client/src/app/pages/portfolio/report/report-page.component.ts b/apps/client/src/app/pages/portfolio/report/report-page.component.ts
index 776a6076b..c4a1ce2fb 100644
--- a/apps/client/src/app/pages/portfolio/report/report-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/report/report-page.component.ts
@@ -5,9 +5,10 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
+  host: { class: 'mb-5' },
   selector: 'gf-report-page',
-  templateUrl: './report-page.html',
-  styleUrls: ['./report-page.scss']
+  styleUrls: ['./report-page.scss'],
+  templateUrl: './report-page.html'
 })
 export class ReportPageComponent implements OnDestroy, OnInit {
   public accountClusterRiskRules: PortfolioReportRule[];
diff --git a/apps/client/src/app/pages/portfolio/transactions/transactions-page.component.ts b/apps/client/src/app/pages/portfolio/transactions/transactions-page.component.ts
index f6cda59c0..337948d14 100644
--- a/apps/client/src/app/pages/portfolio/transactions/transactions-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/transactions/transactions-page.component.ts
@@ -19,9 +19,10 @@ import { CreateOrUpdateTransactionDialog } from './create-or-update-transaction-
 import { ImportTransactionDialog } from './import-transaction-dialog/import-transaction-dialog.component';
 
 @Component({
+  host: { class: 'mb-5' },
   selector: 'gf-transactions-page',
-  templateUrl: './transactions-page.html',
-  styleUrls: ['./transactions-page.scss']
+  styleUrls: ['./transactions-page.scss'],
+  templateUrl: './transactions-page.html'
 })
 export class TransactionsPageComponent implements OnDestroy, OnInit {
   public defaultAccountId: string;
diff --git a/apps/client/src/app/pages/pricing/pricing-page.component.ts b/apps/client/src/app/pages/pricing/pricing-page.component.ts
index 386683f0e..1124b674b 100644
--- a/apps/client/src/app/pages/pricing/pricing-page.component.ts
+++ b/apps/client/src/app/pages/pricing/pricing-page.component.ts
@@ -7,9 +7,10 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
+  host: { class: 'mb-5' },
   selector: 'gf-pricing-page',
-  templateUrl: './pricing-page.html',
-  styleUrls: ['./pricing-page.scss']
+  styleUrls: ['./pricing-page.scss'],
+  templateUrl: './pricing-page.html'
 })
 export class PricingPageComponent implements OnDestroy, OnInit {
   public baseCurrency = baseCurrency;
diff --git a/apps/client/src/app/pages/register/register-page.component.ts b/apps/client/src/app/pages/register/register-page.component.ts
index dc612a523..d0f2040b1 100644
--- a/apps/client/src/app/pages/register/register-page.component.ts
+++ b/apps/client/src/app/pages/register/register-page.component.ts
@@ -12,9 +12,10 @@ import { takeUntil } from 'rxjs/operators';
 import { ShowAccessTokenDialog } from './show-access-token-dialog/show-access-token-dialog.component';
 
 @Component({
+  host: { class: 'mb-5' },
   selector: 'gf-register-page',
-  templateUrl: './register-page.html',
-  styleUrls: ['./register-page.scss']
+  styleUrls: ['./register-page.scss'],
+  templateUrl: './register-page.html'
 })
 export class RegisterPageComponent implements OnDestroy, OnInit {
   public currentYear = format(new Date(), 'yyyy');
diff --git a/apps/client/src/app/pages/resources/resources-page.component.ts b/apps/client/src/app/pages/resources/resources-page.component.ts
index 97dce5d81..71bc3e314 100644
--- a/apps/client/src/app/pages/resources/resources-page.component.ts
+++ b/apps/client/src/app/pages/resources/resources-page.component.ts
@@ -2,9 +2,10 @@ import { Component, OnInit } from '@angular/core';
 import { Subject } from 'rxjs';
 
 @Component({
+  host: { class: 'mb-5' },
   selector: 'gf-resources-page',
-  templateUrl: './resources-page.html',
-  styleUrls: ['./resources-page.scss']
+  styleUrls: ['./resources-page.scss'],
+  templateUrl: './resources-page.html'
 })
 export class ResourcesPageComponent implements OnInit {
   private unsubscribeSubject = new Subject<void>();
diff --git a/apps/client/src/app/pages/webauthn/webauthn-page.component.ts b/apps/client/src/app/pages/webauthn/webauthn-page.component.ts
index 838db5209..3a63eed50 100644
--- a/apps/client/src/app/pages/webauthn/webauthn-page.component.ts
+++ b/apps/client/src/app/pages/webauthn/webauthn-page.component.ts
@@ -6,9 +6,10 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
+  host: { class: 'mb-5' },
   selector: 'gf-webauthn-page',
-  templateUrl: './webauthn-page.html',
-  styleUrls: ['./webauthn-page.scss']
+  styleUrls: ['./webauthn-page.scss'],
+  templateUrl: './webauthn-page.html'
 })
 export class WebauthnPageComponent implements OnDestroy, OnInit {
   public hasError = false;
diff --git a/apps/client/src/app/pages/webauthn/webauthn-page.scss b/apps/client/src/app/pages/webauthn/webauthn-page.scss
index e69de29bb..5d4e87f30 100644
--- a/apps/client/src/app/pages/webauthn/webauthn-page.scss
+++ b/apps/client/src/app/pages/webauthn/webauthn-page.scss
@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}