sudacode/ghostfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Feature/improve landing page (#442)

Browse Source 
* Add intro screen

* Update changelog
This commit is contained in:
Thomas Kaul 2021-10-30 10:46:54 +02:00 committed by GitHub
parent 442df9d6f8
commit a864c617b9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 42 additions and 265 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
CHANGELOG.md
View File

@ -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
- Improved the landing page
## 1.65.0 - 25.10.2021
### Added

2
apps/client/src/app/app.component.html
View File

@ -1,6 +1,6 @@
<header>
<gf-header
class="position-fixed px-2 w-100"
class="position-fixed w-100"
[currentRoute]="currentRoute"
[info]="info"
[user]="user"

13
apps/client/src/app/components/header/header.component.html
View File

@ -1,6 +1,10 @@
<mat-toolbar class="p-0">
<mat-toolbar class="px-2">
<ng-container *ngIf="user">
<a [routerLink]="['/']" class="no-min-width px-2" mat-button>
<a
[routerLink]="['/']"
class="align-items-center d-flex h-100 mx-2 no-min-width px-2 rounded-0"
mat-button
>
<gf-logo></gf-logo>
</a>
<span class="spacer"></span>
@ -221,12 +225,11 @@
</ng-container>
<ng-container *ngIf="user === null">
<a
*ngIf="currentRoute && currentRoute !== 'start'"
class="mx-2 no-min-width px-2"
class="align-items-center d-flex h-100 mx-2 no-min-width px-2 rounded-0"
mat-button
[routerLink]="['/']"
>
<gf-logo></gf-logo>
<gf-logo [hideName]="!currentRoute || currentRoute === 'start'"></gf-logo>
</a>
<span class="spacer"></span>
<a

220
apps/client/src/app/pages/landing/landing-page.component.ts
View File

@ -1,8 +1,7 @@
import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { DataService } from '@ghostfolio/client/services/data.service';
import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';
import { LineChartItem } from '@ghostfolio/ui/line-chart/interfaces/line-chart.interface';
import { format } from 'date-fns';
import { Subject } from 'rxjs';
@ -15,7 +14,6 @@ import { Subject } from 'rxjs';
export class LandingPageComponent implements OnDestroy, OnInit {
public currentYear = format(new Date(), 'yyyy');
public demoAuthToken: string;
public historicalDataItems: LineChartItem[];
private unsubscribeSubject = new Subject<void>();
@ -23,7 +21,6 @@ export class LandingPageComponent implements OnDestroy, OnInit {
* @constructor
*/
public constructor(
private changeDetectorRef: ChangeDetectorRef,
private dataService: DataService,
private router: Router,
private tokenStorageService: TokenStorageService
@ -36,221 +33,6 @@ export class LandingPageComponent implements OnDestroy, OnInit {
const { demoAuthToken } = this.dataService.fetchInfo();
this.demoAuthToken = demoAuthToken;
this.initializeLineChart();
}
public initializeLineChart() {
this.historicalDataItems = [
{
date: '2017-01-01',
value: 2561.60376
},
{
date: '2017-02-01',
value: 2261.60376
},
{
date: '2017-03-01',
value: 2268.68157074
},
{
date: '2017-04-01',
value: 2525.2942
},
{
date: '2017-05-01',
value: 2929.3595107399997
},
{
date: '2017-06-01',
value: 3088.5172438900004
},
{
date: '2017-07-01',
value: 3281.2490946300004
},
{
date: '2017-08-01',
value: 4714.57822537
},
{
date: '2017-09-01',
value: 5717.262455259565
},
{
date: '2017-10-01',
value: 5338.742482334544
},
{
date: '2017-11-01',
value: 6361.263771554509
},
{
date: '2017-12-01',
value: 8373.260491904595
},
{
date: '2018-01-01',
value: 9783.208968191562
},
{
date: '2018-02-01',
value: 7841.2667100173
},
{
date: '2018-03-01',
value: 8582.133039380678
},
{
date: '2018-04-01',
value: 5901.8362986766715
},
{
date: '2018-05-01',
value: 7367.392976151925
},
{
date: '2018-06-01',
value: 6490.164314049853
},
{
date: '2018-07-01',
value: 6365.351621654618
},
{
date: '2018-08-01',
value: 6614.532706931272
},
{
date: '2018-09-01',
value: 6402.052882414409
},
{
date: '2018-10-01',
value: 15270.327917651943
},
{
date: '2018-11-01',
value: 13929.833891940816
},
{
date: '2018-12-01',
value: 12995.832254431414
},
{
date: '2019-01-01',
value: 11792.447013828998
},
{
date: '2019-02-01',
value: 11988.224284346446
},
{
date: '2019-03-01',
value: 13536.39667099519
},
{
date: '2019-04-01',
value: 14301.83740090022
},
{
date: '2019-05-01',
value: 14902.994910520581
},
{
date: '2019-06-01',
value: 15373.418326284132
},
{
date: '2019-07-01',
value: 17545.70705465703
},
{
date: '2019-08-01',
value: 17206.28500223782
},
{
date: '2019-09-01',
value: 17782.445200108898
},
{
date: '2019-10-01',
value: 17050.25875252655
},
{
date: '2019-11-01',
value: 18517.053521416237
},
{
date: '2019-12-01',
value: 17850.649021651363
},
{
date: '2020-01-01',
value: 18817.269786559067
},
{
date: '2020-02-01',
value: 22769.842312027653
},
{
date: '2020-03-01',
value: 23065.56002316582
},
{
date: '2020-04-01',
value: 19738.122641884733
},
{
date: '2020-05-01',
value: 25112.281463810643
},
{
date: '2020-06-01',
value: 28753.054132147452
},
{
date: '2020-07-01',
value: 32207.62827031543
},
{
date: '2020-08-01',
value: 37837.88816828611
},
{
date: '2020-09-01',
value: 50018.740185519295
},
{
date: '2020-10-01',
value: 46593.322295801525
},
{
date: '2020-11-01',
value: 44440.18743231742
},
{
date: '2020-12-01',
value: 57582.23077536893
},
{
date: '2021-01-01',
value: 68823.02446077733
},
{
date: '2021-02-01',
value: 64516.42092139593
},
{
date: '2021-03-01',
value: 82465.97581106682
},
{
date: '2021-03-18',
value: 86666.03082624623
}
];
}
public setToken(aToken: string) {

34
apps/client/src/app/pages/landing/landing-page.html
View File

@ -1,14 +1,13 @@
<div class="intro-container mb-5">
<div class="intro-inner-container mx-auto">
<div class="h-100 intro w-100"></div>
</div>
</div>
<div class="container">
<div class="row">
<div
class="
align-items-center
d-flex
flex-column
justify-content-center
mb-4
w-100
"
class="align-items-center d-flex flex-column justify-content-center w-100"
>
<gf-logo size="large"></gf-logo>
<p class="lead m-0">Wealth Management Software</p>
@ -16,15 +15,7 @@
</div>
<div class="button-container row">
<div
class="
align-items-center
col
d-flex
justify-content-center
position-relative
"
>
<div class="align-items-center col d-flex justify-content-center">
<div class="py-5 text-center">
<a
class="d-inline-block"
@ -46,15 +37,6 @@
<span i18n>Live Demo</span>
</button>
</div>
<gf-line-chart
class="position-absolute"
symbol="Performance"
[historicalDataItems]="historicalDataItems"
[showGradient]="true"
[showLoader]="false"
[showXAxis]="false"
[showYAxis]="false"
></gf-line-chart>
</div>
</div>

2
apps/client/src/app/pages/landing/landing-page.module.ts
View File

@ -2,7 +2,6 @@ import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { RouterModule } from '@angular/router';
import { GfLineChartModule } from '@ghostfolio/ui/line-chart/line-chart.module';
import { GfLogoModule } from '@ghostfolio/ui/logo';
import { LandingPageRoutingModule } from './landing-page-routing.module';
@ -13,7 +12,6 @@ import { LandingPageComponent } from './landing-page.component';
exports: [],
imports: [
CommonModule,
GfLineChartModule,
GfLogoModule,
LandingPageRoutingModule,
MatButtonModule,

28
apps/client/src/app/pages/landing/landing-page.scss
View File

@ -2,17 +2,6 @@
display: block;
.button-container {
aspect-ratio: 16 / 9;
gf-line-chart {
bottom: 0;
left: 0;
opacity: 0.67;
right: 0;
top: 0;
z-index: -1;
}
.mat-stroked-button {
background-color: var(--light-background);
}
@ -23,6 +12,23 @@
height: 2.5rem;
}
}
.intro-container {
background-color: #ffffff;
margin-top: -5rem;
.intro-inner-container {
aspect-ratio: 16 / 9;
max-height: 66vh;
.intro {
background-image: url('/assets/intro.jpg');
background-position: top left;
background-repeat: no-repeat;
background-size: contain;
}
}
}
}
:host-context(.is-dark-theme) {

BIN
apps/client/src/assets/intro.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 140 KiB

2
libs/ui/src/lib/logo/logo.component.scss
View File

@ -5,7 +5,7 @@
}
.name {
font-weight: 500;
font-weight: 600;
}
}