From 9851cce382dafc5bed77c4f6a2a4090cce274148 Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 22 May 2021 13:45:50 +0200
Subject: [PATCH] Feature/hide footer on mobile (#113)

* Hide footer on mobile

* Improve about text

* Update changelog
---
 CHANGELOG.md                                    |  6 ++++++
 apps/client/src/app/app.component.html          |  5 ++++-
 apps/client/src/app/app.component.ts            |  5 +++++
 apps/client/src/app/pages/about/about-page.html | 13 ++++++-------
 4 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 57bc34b7..febb5857 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+
+- Hid footer on mobile (except on landing page)
+
 ## 1.6.0 - 22.05.2021
 
 ### Added
diff --git a/apps/client/src/app/app.component.html b/apps/client/src/app/app.component.html
index c0c5d9b5..75c8d49c 100644
--- a/apps/client/src/app/app.component.html
+++ b/apps/client/src/app/app.component.html
@@ -25,7 +25,10 @@
   <router-outlet></router-outlet>
 </main>
 
-<footer class="footer d-flex justify-content-center position-absolute w-100">
+<footer
+  *ngIf="currentRoute === 'start' || deviceType !== 'mobile'"
+  class="footer d-flex justify-content-center position-absolute w-100"
+>
   <div class="container text-center">
     <div>
       © {{ currentYear }} <a href="https://ghostfol.io">Ghostfolio</a>
diff --git a/apps/client/src/app/app.component.ts b/apps/client/src/app/app.component.ts
index 6e27af9b..039277d1 100644
--- a/apps/client/src/app/app.component.ts
+++ b/apps/client/src/app/app.component.ts
@@ -10,6 +10,7 @@ import { primaryColorHex, secondaryColorHex } from '@ghostfolio/common/config';
 import { InfoItem, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { MaterialCssVarsService } from 'angular-material-css-vars';
+import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
 
@@ -27,6 +28,7 @@ export class AppComponent implements OnDestroy, OnInit {
   public canCreateAccount: boolean;
   public currentRoute: string;
   public currentYear = new Date().getFullYear();
+  public deviceType: string;
   public info: InfoItem;
   public isLoggedIn = false;
   public user: User;
@@ -37,6 +39,7 @@ export class AppComponent implements OnDestroy, OnInit {
   public constructor(
     private cd: ChangeDetectorRef,
     private dataService: DataService,
+    private deviceService: DeviceDetectorService,
     private materialCssVarsService: MaterialCssVarsService,
     private router: Router,
     private tokenStorageService: TokenStorageService
@@ -46,6 +49,8 @@ export class AppComponent implements OnDestroy, OnInit {
   }
 
   public ngOnInit() {
+    this.deviceType = this.deviceService.getDeviceInfo().deviceType;
+
     this.dataService.fetchInfo().subscribe((info) => {
       this.info = info;
     });
diff --git a/apps/client/src/app/pages/about/about-page.html b/apps/client/src/app/pages/about/about-page.html
index ce50b053..bbfe62d1 100644
--- a/apps/client/src/app/pages/about/about-page.html
+++ b/apps/client/src/app/pages/about/about-page.html
@@ -5,15 +5,14 @@
       <mat-card class="mb-3">
         <mat-card-content>
           <p>
-            <strong>Ghostfolio</strong> ({{ version }}) is open source software
-            which empowers busy folks to have a sharp look of their financial
-            assets and to make solid, data-driven investment decisions by
-            evaluating automated static portfolio analysis rules. The project
-            has been initiated by
+            <strong>Ghostfolio</strong> is open source software which empowers
+            busy folks to have a sharp look of their financial assets and to
+            make solid, data-driven investment decisions by evaluating automated
+            static portfolio analysis rules. The project has been initiated by
             <a href="https://dotsilver.ch">Thomas Kaul</a>.
             <ng-container *ngIf="lastPublish">
-              This instance has been last published on {{ lastPublish
-              }}.</ng-container
+              This instance is running Ghostfolio {{ version }} and has been
+              last published on {{ lastPublish }}.</ng-container
             >
           </p>
           <p>