Harmonize page layouts

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>

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;

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')

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[];

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;

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 {}

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"

apps/client/src/app/pages/blog/2021/07/hallo-ghostfolio/hallo-ghostfolio-page.scss

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

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 {}

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"

apps/client/src/app/pages/blog/2021/07/hello-ghostfolio/hello-ghostfolio-page.scss

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

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() {

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');

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: {

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: {

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;

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[];

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;

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;

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');

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>();

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;

apps/client/src/app/pages/webauthn/webauthn-page.scss

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}