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

Migrate card components to Angular Material 15 (#1837)

Browse Source
This commit is contained in:
Thomas Kaul 2023-04-08 17:08:30 +02:00 committed by GitHub
parent 1b7b082003
commit 84de2c0c68
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
29 changed files with 705 additions and 607 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/client/src/app/components/admin-overview/admin-overview.html
View File

@ -1,7 +1,7 @@
<div class="container">
<div class="mb-5 row">
<div class="col">
<mat-card class="mb-3">
<mat-card appearance="outlined" class="mb-3">
<mat-card-content>
<div class="d-flex my-3">
<div class="w-50" i18n>User Count</div>

2
apps/client/src/app/components/admin-overview/admin-overview.module.ts
View File

@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
import { MatCardModule } from '@angular/material/card';
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle';
import { CacheService } from '@ghostfolio/client/services/cache.service';

4
apps/client/src/app/components/home-holdings/home-holdings.html
View File

@ -9,8 +9,8 @@
</div>
<div class="row">
<div class="align-items-center col-xs-12 col-md-8 offset-md-2">
<mat-card class="p-0">
<mat-card-content>
<mat-card appearance="outlined">
<mat-card-content class="p-0">
<gf-positions
[baseCurrency]="user?.settings?.baseCurrency"
[deviceType]="deviceType"

2
apps/client/src/app/components/home-holdings/home-holdings.module.ts
View File

@ -1,7 +1,7 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
import { MatCardModule } from '@angular/material/card';
import { RouterModule } from '@angular/router';
import { GfPositionDetailDialogModule } from '@ghostfolio/client/components/position/position-detail-dialog/position-detail-dialog.module';
import { GfPositionsModule } from '@ghostfolio/client/components/positions/positions.module';

2
apps/client/src/app/components/home-summary/home-summary.html
View File

@ -2,7 +2,7 @@
<h3 class="d-none d-sm-block mb-3 text-center" i18n>Summary</h3>
<div class="row">
<div class="col-xs-12 col-md-8 offset-md-2">
<mat-card class="h-100">
<mat-card appearance="outlined">
<mat-card-content>
<gf-portfolio-summary
[baseCurrency]="user?.settings?.baseCurrency"

2
apps/client/src/app/components/home-summary/home-summary.module.ts
View File

@ -1,6 +1,6 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
import { MatCardModule } from '@angular/material/card';
import { RouterModule } from '@angular/router';
import { GfPortfolioSummaryModule } from '@ghostfolio/client/components/portfolio-summary/portfolio-summary.module';

9
apps/client/src/app/components/rules/rules.component.html
View File

@ -3,11 +3,14 @@
<div class="col">
<mat-card
*ngIf="hasPermissionToCreateOrder && rules === null"
appearance="outlined"
class="my-2 text-center"
>
<gf-no-transactions-info-indicator
[hasBorder]="false"
></gf-no-transactions-info-indicator>
<mat-card-content>
<gf-no-transactions-info-indicator
[hasBorder]="false"
></gf-no-transactions-info-indicator
></mat-card-content>
</mat-card>
<gf-rule *ngIf="rules?.length === 0" [isLoading]="true"></gf-rule>

2
apps/client/src/app/components/rules/rules.module.ts
View File

@ -1,7 +1,7 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
import { MatCardModule } from '@angular/material/card';
import { GfRuleModule } from '@ghostfolio/client/components/rule/rule.module';
import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';

2
apps/client/src/app/pages/account/account-page.html
View File

@ -6,7 +6,7 @@
</div>
<div *ngIf="user?.settings" class="mb-5 row">
<div class="col">
<mat-card class="mb-3">
<mat-card appearance="outlined" class="mb-3">
<mat-card-content>
<div
*ngIf="hasPermissionToUpdateUserSettings && user?.subscription"

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

@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
import { MatCardModule } from '@angular/material/card';
import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';

118
apps/client/src/app/pages/faq/faq-page.html
View File

@ -4,32 +4,42 @@
<h3 class="d-none d-sm-block mb-3 text-center">
Frequently Asked Questions (FAQ)
</h3>
<mat-card class="mb-3">
<mat-card-title>What is Ghostfolio?</mat-card-title>
<mat-card appearance="outlined" class="mb-3">
<mat-card-header>
<mat-card-title>What is Ghostfolio?</mat-card-title>
</mat-card-header>
<mat-card-content>
Ghostfolio is a lightweight, open source wealth management application
for individuals to keep track of their net worth. The software
empowers you to make solid, data-driven investment decisions.
</mat-card-content>
</mat-card>
<mat-card class="mb-3">
<mat-card-title
>What assets can I track with Ghostfolio?</mat-card-title
>
<mat-card appearance="outlined" class="mb-3">
<mat-card-header>
<mat-card-title
>What assets can I track with Ghostfolio?</mat-card-title
>
</mat-card-header>
<mat-card-content>
With Ghostfolio, you can keep track of various assets like stocks,
ETFs or cryptocurrencies.
</mat-card-content>
</mat-card>
<mat-card class="mb-3">
<mat-card-title>What else is included in Ghostfolio?</mat-card-title>
<mat-card appearance="outlined" class="mb-3">
<mat-card-header>
<mat-card-title
>What else is included in Ghostfolio?</mat-card-title
></mat-card-header
>
<mat-card-content>
Please find a feature overview to manage your wealth
<a [routerLink]="['/features']">here</a>.
</mat-card-content>
</mat-card>
<mat-card class="mb-3">
<mat-card-title>How do I start?</mat-card-title>
<mat-card appearance="outlined" class="mb-3">
<mat-card-header>
<mat-card-title>How do I start?</mat-card-title></mat-card-header
>
<mat-card-content>
You can sign up via the “<a [routerLink]="['/register']"
>Get Started</a
@ -41,8 +51,12 @@
or <i>Google Sign</i>. We will guide you to set up your portfolio.
</mat-card-content>
</mat-card>
<mat-card class="mb-3">
<mat-card-title>Can I use Ghostfolio anonymously?</mat-card-title>
<mat-card appearance="outlined" class="mb-3">
<mat-card-header>
<mat-card-title
>Can I use Ghostfolio anonymously?</mat-card-title
></mat-card-header
>
<mat-card-content>
Yes, the authentication systems (via security token or
<a href="../en/blog/2022/07/ghostfolio-meets-internet-identity"
@ -51,8 +65,12 @@
is no need for an e-mail address, phone number, or a username.
</mat-card-content>
</mat-card>
<mat-card class="mb-3">
<mat-card-title>How can Ghostfolio be free?</mat-card-title>
<mat-card appearance="outlined" class="mb-3">
<mat-card-header>
<mat-card-title
>How can Ghostfolio be free?</mat-card-title
></mat-card-header
>
<mat-card-content
>This project is driven by the efforts of contributors from around the
world. The
@ -64,16 +82,22 @@
investors.</mat-card-content
>
</mat-card>
<mat-card class="mb-3">
<mat-card-title>Is it really free?</mat-card-title>
<mat-card appearance="outlined" class="mb-3">
<mat-card-header>
<mat-card-title>Is it really free?</mat-card-title></mat-card-header
>
<mat-card-content
>Yes, it is! Our
<a [routerLink]="['/pricing']">pricing page</a> details everything you
get for free.</mat-card-content
>
</mat-card>
<mat-card class="mb-3">
<mat-card-title>What is Ghostfolio Premium?</mat-card-title>
<mat-card appearance="outlined" class="mb-3">
<mat-card-header>
<mat-card-title
>What is Ghostfolio Premium?</mat-card-title
></mat-card-header
>
<mat-card-content
><a [routerLink]="['/pricing']">Ghostfolio Premium</a> is a fully
managed Ghostfolio cloud offering for ambitious investors. The revenue
@ -83,8 +107,12 @@
data provider.</mat-card-content
>
</mat-card>
<mat-card class="mb-3">
<mat-card-title>Can I start with a trial version?</mat-card-title>
<mat-card appearance="outlined" class="mb-3">
<mat-card-header>
<mat-card-title
>Can I start with a trial version?</mat-card-title
></mat-card-header
>
<mat-card-content
>Yes, you can try
<a [routerLink]="['/pricing']">Ghostfolio Premium</a> by signing up
@ -93,19 +121,23 @@
time.</mat-card-content
>
</mat-card>
<mat-card class="mb-3">
<mat-card-title
>How can I get a student discount for Ghostfolio
Premium?</mat-card-title
>
<mat-card appearance="outlined" class="mb-3">
<mat-card-header>
<mat-card-title
>How can I get a student discount for Ghostfolio
Premium?</mat-card-title
>
</mat-card-header>
<mat-card-content
>Request your student discount
<a href="mailto:hi@ghostfol.io?Subject=Student Discount">here</a> with
your university e-mail address.</mat-card-content
>
</mat-card>
<mat-card class="mb-3">
<mat-card-title>Which devices are supported?</mat-card-title>
<mat-card appearance="outlined" class="mb-3">
<mat-card-header>
<mat-card-title>Which devices are supported?</mat-card-title>
</mat-card-header>
<mat-card-content
>Ghostfolio works in every modern web browser on smartphones, tablets
and desktop computers. For <i>Android</i> users, there is a dedicated
@ -116,21 +148,29 @@
>.</mat-card-content
>
</mat-card>
<mat-card *ngIf="user?.subscription?.type === 'Premium'" class="mb-3">
<mat-card-title
>I cannot find my broker in the list of platforms. What can I
do?</mat-card-title
>
<mat-card
*ngIf="user?.subscription?.type === 'Premium'"
appearance="outlined"
class="mb-3"
>
<mat-card-header>
<mat-card-title
>I cannot find my broker in the list of platforms. What can I
do?</mat-card-title
>
</mat-card-header>
<mat-card-content>
Please send an e-mail with the web address of your broker to
<a href="mailto:hi@ghostfol.io">hi@ghostfol.io</a> and we are happy to
add it.
</mat-card-content>
</mat-card>
<mat-card class="mb-3">
<mat-card-title
>Ghostfolio sounds cool, how can I get involved?</mat-card-title
>
<mat-card appearance="outlined" class="mb-3">
<mat-card-header>
<mat-card-title
>Ghostfolio sounds cool, how can I get involved?</mat-card-title
>
</mat-card-header>
<mat-card-content
>Any support for Ghostfolio is welcome. Be it with a
<a [routerLink]="['/pricing']">Ghostfolio Premium</a> subscription to
@ -165,8 +205,10 @@
>.</mat-card-content
>
</mat-card>
<mat-card class="mb-3">
<mat-card-title>Got any other questions?</mat-card-title>
<mat-card appearance="outlined" class="mb-3">
<mat-card-header>
<mat-card-title>Got any other questions?</mat-card-title>
</mat-card-header>
<mat-card-content
>Please join the Ghostfolio
<a

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

@ -1,6 +1,6 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
import { MatCardModule } from '@angular/material/card';
import { FaqPageRoutingModule } from './faq-page-routing.module';
import { FaqPageComponent } from './faq-page.component';

384
apps/client/src/app/pages/features/features-page.html
View File

@ -10,233 +10,271 @@
</div>
<div class="row">
<div class="col-xs-12 col-md-4 mb-3">
<mat-card class="d-flex flex-column h-100">
<div class="flex-grow-1">
<h4>Stocks</h4>
<p class="m-0">Keep track of your stock purchases and sales.</p>
</div>
<mat-card appearance="outlined" class="d-flex flex-column h-100">
<mat-card-content>
<div class="flex-grow-1">
<h4>Stocks</h4>
<p class="m-0">Keep track of your stock purchases and sales.</p>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-xs-12 col-md-4 mb-3">
<mat-card class="d-flex flex-column h-100">
<div class="flex-grow-1">
<h4>ETFs</h4>
<p class="m-0">
Are you into ETFs (Exchange Traded Funds)? Track your ETF
investments.
</p>
</div>
<mat-card appearance="outlined" class="d-flex flex-column h-100">
<mat-card-content>
<div class="flex-grow-1">
<h4>ETFs</h4>
<p class="m-0">
Are you into ETFs (Exchange Traded Funds)? Track your ETF
investments.
</p>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-xs-12 col-md-4 mb-3">
<mat-card class="d-flex flex-column h-100">
<div class="flex-grow-1">
<h4>Bonds</h4>
<p class="m-0">
Manage your investment in bonds and other assets with fixed
income.
</p>
</div>
<mat-card appearance="outlined" class="d-flex flex-column h-100">
<mat-card-content>
<div class="flex-grow-1">
<h4>Bonds</h4>
<p class="m-0">
Manage your investment in bonds and other assets with fixed
income.
</p>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-xs-12 col-md-4 mb-3">
<mat-card class="d-flex flex-column h-100">
<div class="flex-grow-1">
<h4>Cryptocurrencies</h4>
<p class="m-0">
Keep track of your Bitcoin and Altcoin holdings.
</p>
</div>
<mat-card appearance="outlined" class="d-flex flex-column h-100">
<mat-card-content>
<div class="flex-grow-1">
<h4>Cryptocurrencies</h4>
<p class="m-0">
Keep track of your Bitcoin and Altcoin holdings.
</p>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-xs-12 col-md-4 mb-3">
<mat-card class="d-flex flex-column h-100">
<div class="flex-grow-1">
<h4>Dividend</h4>
<p class="m-0">
Are you building a dividend portfolio? Track your dividend in
Ghostfolio.
</p>
</div>
<mat-card appearance="outlined" class="d-flex flex-column h-100">
<mat-card-content>
<div class="flex-grow-1">
<h4>Dividend</h4>
<p class="m-0">
Are you building a dividend portfolio? Track your dividend in
Ghostfolio.
</p>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-xs-12 col-md-4 mb-3">
<mat-card class="d-flex flex-column h-100">
<div class="flex-grow-1">
<h4 class="align-items-center d-flex">Wealth Items</h4>
<p class="m-0">
Track all your treasuries, be it your luxury watch or rare
trading cards.
</p>
</div>
<mat-card appearance="outlined" class="d-flex flex-column h-100">
<mat-card-content>
<div class="flex-grow-1">
<h4 class="align-items-center d-flex">Wealth Items</h4>
<p class="m-0">
Track all your treasuries, be it your luxury watch or rare
trading cards.
</p>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-xs-12 col-md-4 mb-3">
<mat-card class="d-flex flex-column h-100">
<div class="flex-grow-1">
<h4 class="align-items-center d-flex">Emergency Fund</h4>
<p class="m-0">
Define your emergency fund you are comfortable with for
difficult times.
</p>
</div>
<mat-card appearance="outlined" class="d-flex flex-column h-100">
<mat-card-content>
<div class="flex-grow-1">
<h4 class="align-items-center d-flex">Emergency Fund</h4>
<p class="m-0">
Define your emergency fund you are comfortable with for
difficult times.
</p>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-xs-12 col-md-4 mb-3">
<mat-card class="d-flex flex-column h-100">
<div class="flex-grow-1">
<h4 class="align-items-center d-flex">Import and Export</h4>
<p class="m-0">Import and export your investment activities.</p>
</div>
<mat-card appearance="outlined" class="d-flex flex-column h-100">
<mat-card-content>
<div class="flex-grow-1">
<h4 class="align-items-center d-flex">Import and Export</h4>
<p class="m-0">Import and export your investment activities.</p>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-xs-12 col-md-4 mb-3">
<mat-card class="d-flex flex-column h-100">
<div class="flex-grow-1">
<h4>Multi-Accounts</h4>
<p class="m-0">
Keep an eye on all your accounts across multiple platforms
(multi-banking).
</p>
</div>
<mat-card appearance="outlined" class="d-flex flex-column h-100">
<mat-card-content>
<div class="flex-grow-1">
<h4>Multi-Accounts</h4>
<p class="m-0">
Keep an eye on all your accounts across multiple platforms
(multi-banking).
</p>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-xs-12 col-md-4 mb-3">
<mat-card class="d-flex flex-column h-100">
<div class="flex-grow-1">
<h4 class="align-items-center d-flex">
<span>Portfolio Calculations</span>
<gf-premium-indicator
*ngIf="hasPermissionForSubscription"
class="ml-1"
></gf-premium-indicator>
</h4>
<p class="m-0">
Check the rate of return of your portfolio for
<code>Today</code>, <code>YTD</code>, <code>1Y</code>,
<code>5Y</code>, and <code>Max</code>.
</p>
</div>
<mat-card appearance="outlined" class="d-flex flex-column h-100">
<mat-card-content>
<div class="flex-grow-1">
<h4 class="align-items-center d-flex">
<span>Portfolio Calculations</span>
<gf-premium-indicator
*ngIf="hasPermissionForSubscription"
class="ml-1"
></gf-premium-indicator>
</h4>
<p class="m-0">
Check the rate of return of your portfolio for
<code>Today</code>, <code>YTD</code>, <code>1Y</code>,
<code>5Y</code>, and <code>Max</code>.
</p>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-xs-12 col-md-4 mb-3">
<mat-card class="d-flex flex-column h-100">
<div class="flex-grow-1">
<h4 class="align-items-center d-flex">
<span>Portfolio Allocations</span>
<gf-premium-indicator
*ngIf="hasPermissionForSubscription"
class="ml-1"
></gf-premium-indicator>
</h4>
<p class="m-0">
Check the allocations of your portfolio by account, asset class,
currency, region, and sector.
</p>
</div>
<mat-card appearance="outlined" class="d-flex flex-column h-100">
<mat-card-content>
<div class="flex-grow-1">
<h4 class="align-items-center d-flex">
<span>Portfolio Allocations</span>
<gf-premium-indicator
*ngIf="hasPermissionForSubscription"
class="ml-1"
></gf-premium-indicator>
</h4>
<p class="m-0">
Check the allocations of your portfolio by account, asset
class, currency, region, and sector.
</p>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-xs-12 col-md-4 mb-3">
<mat-card class="d-flex flex-column h-100">
<div class="flex-grow-1">
<h4 class="align-items-center d-flex">Dark Mode</h4>
<p class="m-0">
Ghostfolio automatically switches to a dark color theme based on
your operating system's preferences.
</p>
</div>
<mat-card appearance="outlined" class="d-flex flex-column h-100">
<mat-card-content>
<div class="flex-grow-1">
<h4 class="align-items-center d-flex">Dark Mode</h4>
<p class="m-0">
Ghostfolio automatically switches to a dark color theme based
on your operating system's preferences.
</p>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-xs-12 col-md-4 mb-3">
<mat-card class="d-flex flex-column h-100">
<div class="flex-grow-1">
<h4 class="align-items-center d-flex">Zen Mode</h4>
<p class="m-0">
Keep calm and activate Zen Mode if the markets are going crazy.
</p>
</div>
<mat-card appearance="outlined" class="d-flex flex-column h-100">
<mat-card-content>
<div class="flex-grow-1">
<h4 class="align-items-center d-flex">Zen Mode</h4>
<p class="m-0">
Keep calm and activate Zen Mode if the markets are going
crazy.
</p>
</div>
</mat-card-content>
</mat-card>
</div>
<div
*ngIf="hasPermissionForSubscription"
class="col-xs-12 col-md-4 mb-3"
>
<mat-card class="d-flex flex-column h-100">
<div class="flex-grow-1">
<h4 class="align-items-center d-flex">
<span>Market Mood</span>
<gf-premium-indicator class="ml-1"></gf-premium-indicator>
</h4>
<p class="m-0">
Check the current market mood (<a [routerLink]="['/resources']"
>Fear & Greed Index</a
>) within the app.
</p>
</div>
<mat-card appearance="outlined" class="d-flex flex-column h-100">
<mat-card-content>
<div class="flex-grow-1">
<h4 class="align-items-center d-flex">
<span>Market Mood</span>
<gf-premium-indicator class="ml-1"></gf-premium-indicator>
</h4>
<p class="m-0">
Check the current market mood (<a
[routerLink]="['/resources']"
>Fear & Greed Index</a
>) within the app.
</p>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-xs-12 col-md-4 mb-3">
<mat-card class="d-flex flex-column h-100">
<div class="flex-grow-1">
<h4 class="align-items-center d-flex">
<span>Static Analysis</span>
<gf-premium-indicator
*ngIf="hasPermissionForSubscription"
class="ml-1"
></gf-premium-indicator>
</h4>
<p class="m-0">
Identify potential risks in your portfolio with Ghostfolio
X-ray, the static portfolio analysis.
</p>
</div>
<mat-card appearance="outlined" class="d-flex flex-column h-100">
<mat-card-content>
<div class="flex-grow-1">
<h4 class="align-items-center d-flex">
<span>Static Analysis</span>
<gf-premium-indicator
*ngIf="hasPermissionForSubscription"
class="ml-1"
></gf-premium-indicator>
</h4>
<p class="m-0">
Identify potential risks in your portfolio with Ghostfolio
X-ray, the static portfolio analysis.
</p>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-xs-12 col-md-4 mb-3">
<mat-card class="d-flex flex-column h-100">
<div class="flex-grow-1">
<h4>Multi-Language</h4>
<p class="m-0">
Use Ghostfolio in multiple languages: English, Dutch, French,
German, Italian<ng-container *ngIf="false"
>, Portuguese</ng-container
>
and Spanish are currently supported.
</p>
</div>
<mat-card appearance="outlined" class="d-flex flex-column h-100">
<mat-card-content>
<div class="flex-grow-1">
<h4>Multi-Language</h4>
<p class="m-0">
Use Ghostfolio in multiple languages: English, Dutch, French,
German, Italian<ng-container *ngIf="false"
>, Portuguese</ng-container
>
and Spanish are currently supported.
</p>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-xs-12 col-md-4 mb-3">
<mat-card class="d-flex flex-column h-100">
<div class="flex-grow-1">
<h4>Community</h4>
<p class="m-0">
Join the Ghostfolio
<a
href="https://ghostfolio.slack.com"
title="Join the Ghostfolio Slack community"
>Slack channel</a
>
full of enthusiastic investors and discuss the latest market
trends.
</p>
</div>
<mat-card appearance="outlined" class="d-flex flex-column h-100">
<mat-card-content>
<div class="flex-grow-1">
<h4>Community</h4>
<p class="m-0">
Join the Ghostfolio
<a
href="https://ghostfolio.slack.com"
title="Join the Ghostfolio Slack community"
>Slack channel</a
>
full of enthusiastic investors and discuss the latest market
trends.
</p>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-xs-12 col-md-4 mb-3">
<mat-card class="d-flex flex-column h-100">
<div class="flex-grow-1">
<h4>Open Source Software</h4>
<p class="m-0">
The source code is fully available as
<a
href="https://github.com/ghostfolio/ghostfolio"
title="Find Ghostfolio on GitHub"
>open source software</a
>
(OSS) and licensed under the <i>AGPLv3 License</i>.
</p>
</div>
<mat-card appearance="outlined" class="d-flex flex-column h-100">
<mat-card-content>
<div class="flex-grow-1">
<h4>Open Source Software</h4>
<p class="m-0">
The source code is fully available as
<a
href="https://github.com/ghostfolio/ghostfolio"
title="Find Ghostfolio on GitHub"
>open source software</a
>
(OSS) and licensed under the <i>AGPLv3 License</i>.
</p>
</div>
</mat-card-content>
</mat-card>
</div>
</div>

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

@ -1,7 +1,7 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
import { MatCardModule } from '@angular/material/card';
import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
import { FeaturesPageRoutingModule } from './features-page-routing.module';

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

@ -214,22 +214,33 @@
<div class="row my-3">
<div class="col-md-4 my-2">
<mat-card>
<mat-card-title>360° View</mat-card-title>
Get the full picture of your personal finances across multiple
platforms.
<mat-card appearance="outlined">
<mat-card-header>
<mat-card-title>360° View</mat-card-title>
</mat-card-header>
<mat-card-content>
Get the full picture of your personal finances across multiple
</mat-card-content>
</mat-card>
</div>
<div class="col-md-4 my-2">
<mat-card>
<mat-card-title>Web3 Ready</mat-card-title>
Use Ghostfolio anonymously and own your financial data.
<mat-card appearance="outlined">
<mat-card-header>
<mat-card-title>Web3 Ready</mat-card-title>
</mat-card-header>
<mat-card-content>
Use Ghostfolio anonymously and own your financial data.
</mat-card-content>
</mat-card>
</div>
<div class="col-md-4 my-2">
<mat-card>
<mat-card-title>Open Source</mat-card-title>
Benefit from continuous improvements through a strong community.
<mat-card appearance="outlined">
<mat-card-header>
<mat-card-title>Open Source</mat-card-title>
</mat-card-header>
<mat-card-content>
Benefit from continuous improvements through a strong community.
</mat-card-content>
</mat-card>
</div>
</div>
@ -340,34 +351,40 @@
<p class="lead mb-3 text-center">Get started in only 3 steps</p>
</div>
<div class="col-md-4 my-2">
<mat-card class="d-flex flex-row h-100">
<div class="flex-grow-1">
<div class="font-weight-bold">Sign up anonymously*</div>
<div class="text-muted">
<small>* no e-mail address nor credit card required</small>
<mat-card appearance="outlined" class="h-100">
<mat-card-content class="d-flex flex-row">
<div class="flex-grow-1">
<div class="font-weight-bold">Sign up anonymously*</div>
<div class="text-muted">
<small>* no e-mail address nor credit card required</small>
</div>
</div>
</div>
<div class="pl-2 text-muted text-right">1</div>
<div class="pl-2 text-muted text-right">1</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-md-4 my-2">
<mat-card class="d-flex flex-row h-100">
<div class="flex-grow-1">
<div class="font-weight-bold">
Add any of your historical transactions
<mat-card appearance="outlined" class="h-100">
<mat-card-content class="d-flex flex-row">
<div class="flex-grow-1">
<div class="font-weight-bold">
Add any of your historical transactions
</div>
</div>
</div>
<div class="pl-2 text-muted text-right">2</div>
<div class="pl-2 text-muted text-right">2</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-md-4 my-2">
<mat-card class="d-flex flex-row h-100">
<div class="flex-grow-1">
<div class="font-weight-bold">
Get valuable insights of your portfolio composition
<mat-card appearance="outlined" class="h-100">
<mat-card-content class="d-flex flex-row">
<div class="flex-grow-1">
<div class="font-weight-bold">
Get valuable insights of your portfolio composition
</div>
</div>
</div>
<div class="pl-2 text-muted text-right">3</div>
<div class="pl-2 text-muted text-right">3</div>
</mat-card-content>
</mat-card>
</div>
</div>

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

@ -1,7 +1,7 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
import { MatCardModule } from '@angular/material/card';
import { RouterModule } from '@angular/router';
import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module';
import { GfLogoModule } from '@ghostfolio/ui/logo';

32
apps/client/src/app/pages/portfolio/allocations/allocations-page.html
View File

@ -12,7 +12,7 @@
</div>
<div class="row">
<div class="col">
<mat-card class="mb-3">
<mat-card appearance="outlined" class="mb-3">
<mat-card-header class="mb-2 overflow-hidden w-100">
<mat-card-title class="m-0 text-truncate" i18n
>Proportion of Net Worth</mat-card-title
@ -36,7 +36,7 @@
</div>
<div class="proportion-charts row">
<div class="col-md-4">
<mat-card class="mb-3">
<mat-card appearance="outlined" class="mb-3">
<mat-card-header class="overflow-hidden w-100">
<mat-card-title class="text-truncate" i18n>By Account</mat-card-title>
</mat-card-header>
@ -55,7 +55,7 @@
</mat-card>
</div>
<div class="col-md-4">
<mat-card class="mb-3">
<mat-card appearance="outlined" class="mb-3">
<mat-card-header class="overflow-hidden w-100">
<mat-card-title class="align-items-center d-flex text-truncate"
><span i18n>By Currency</span>
@ -78,7 +78,7 @@
</mat-card>
</div>
<div class="col-md-4">
<mat-card class="mb-3">
<mat-card appearance="outlined" class="mb-3">
<mat-card-header class="overflow-hidden w-100">
<mat-card-title class="align-items-center d-flex text-truncate"
><span i18n>By Asset Class</span
@ -101,7 +101,7 @@
</mat-card>
</div>
<div class="col-md-12 allocations-by-symbol">
<mat-card class="mb-3">
<mat-card appearance="outlined" class="mb-3">
<mat-card-header class="overflow-hidden w-100">
<mat-card-title class="align-items-center d-flex text-truncate">
<ng-container i18n>By Holding</ng-container></mat-card-title
@ -124,7 +124,7 @@
</mat-card>
</div>
<div class="col-md-4">
<mat-card class="mb-3">
<mat-card appearance="outlined" class="mb-3">
<mat-card-header class="overflow-hidden w-100">
<mat-card-title class="align-items-center d-flex text-truncate"
><span i18n>By Sector</span
@ -148,7 +148,7 @@
</mat-card>
</div>
<div class="col-md-4">
<mat-card class="mb-3">
<mat-card appearance="outlined" class="mb-3">
<mat-card-header class="overflow-hidden w-100">
<mat-card-title class="align-items-center d-flex text-truncate"
><span i18n>By Continent</span
@ -171,7 +171,7 @@
</mat-card>
</div>
<div class="col-md-4">
<mat-card class="mb-3">
<mat-card appearance="outlined" class="mb-3">
<mat-card-header class="overflow-hidden w-100">
<mat-card-title class="align-items-center d-flex text-truncate"
><span i18n>By Country</span
@ -197,7 +197,7 @@
</div>
<div class="row world-map-chart">
<div class="col-lg">
<mat-card class="mb-3">
<mat-card appearance="outlined" class="mb-3">
<mat-card-header class="overflow-hidden w-100">
<mat-card-title class="align-items-center d-flex text-truncate"
><span i18n>Regions</span
@ -208,12 +208,14 @@
></mat-card-title>
</mat-card-header>
<mat-card-content>
<gf-world-map-chart
[countries]="countries"
[format]="worldMapChartFormat"
[isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
[locale]="user?.settings?.locale"
></gf-world-map-chart>
<div class="world-map-chart-container">
<gf-world-map-chart
[countries]="countries"
[format]="worldMapChartFormat"
[isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
[locale]="user?.settings?.locale"
></gf-world-map-chart>
</div>
<div class="row">
<div class="col-xs-12 col-md-4 my-2">
<gf-value

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

@ -1,6 +1,6 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
import { MatCardModule } from '@angular/material/card';
import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module';

10
apps/client/src/app/pages/portfolio/allocations/allocations-page.scss
View File

@ -8,17 +8,17 @@
}
.world-map-chart {
.mat-card {
.mat-card-content {
.mat-mdc-card {
.world-map-chart-container {
aspect-ratio: 16 / 9;
}
}
}
.mat-card {
.mat-card-header {
.mat-mdc-card {
.mat-mdc-card-header {
::ng-deep {
.mat-card-header-text {
.mat-mdc-card-header-text {
flex: 1 1 auto;
overflow: hidden;
}

4
apps/client/src/app/pages/portfolio/analysis/analysis-page.html
View File

@ -34,7 +34,7 @@
<div class="mb-5 row">
<div class="col-md-6">
<mat-card class="mb-3">
<mat-card appearance="outlined" class="mb-3">
<mat-card-header>
<mat-card-title class="align-items-center d-flex" i18n
>Top</mat-card-title
@ -80,7 +80,7 @@
</mat-card>
</div>
<div class="col-md-6">
<mat-card class="mb-3">
<mat-card appearance="outlined" class="mb-3">
<mat-card-header>
<mat-card-title class="align-items-center d-flex" i18n
>Bottom</mat-card-title

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

@ -1,6 +1,6 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
import { MatCardModule } from '@angular/material/card';
import { GfBenchmarkComparatorModule } from '@ghostfolio/client/components/benchmark-comparator/benchmark-comparator.module';
import { GfInvestmentChartModule } from '@ghostfolio/client/components/investment-chart/investment-chart.module';
import { GfToggleModule } from '@ghostfolio/client/components/toggle/toggle.module';

596
apps/client/src/app/pages/pricing/pricing-page.html
View File

@ -29,314 +29,330 @@
</div>
<div class="row">
<div class="col-xs-12 col-lg-4 mb-3">
<mat-card class="d-flex flex-column h-100">
<div class="flex-grow-1">
<h4>Open Source</h4>
<p i18n>
For tech-savvy investors who prefer to run Ghostfolio on their
own infrastructure.
</p>
<ul class="list-unstyled mb-3">
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Unlimited Transactions</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Unlimited Accounts</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Portfolio Performance</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Portfolio Summary</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Portfolio Allocations</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Performance Benchmarks</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>FIRE Calculator</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Data Import and Export</span>
<span
class="align-items-center d-flex ml-1"
matTooltipPosition="above"
[matTooltip]="importAndExportTooltipOSS"
>
<ion-icon name="information-circle-outline"></ion-icon>
</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<a i18n [routerLink]="['/features']">and more Features...</a>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Community Support</span>
</li>
</ul>
</div>
<p i18n>Self-hosted, update manually.</p>
<p class="h5 text-right" i18n>Free</p>
<div
*ngIf="user?.subscription?.type === 'Basic'"
class="d-none d-lg-block hidden mt-3 text-center"
>
<a color="primary" mat-flat-button>&nbsp;</a>
<p class="m-0 text-muted">
<small>&nbsp;</small>
</p>
</div>
<mat-card appearance="outlined" class="h-100">
<mat-card-content class="d-flex flex-column h-100">
<div class="flex-grow-1">
<h4>Open Source</h4>
<p i18n>
For tech-savvy investors who prefer to run Ghostfolio on their
own infrastructure.
</p>
<ul class="list-unstyled mb-3">
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Unlimited Transactions</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Unlimited Accounts</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Portfolio Performance</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Portfolio Summary</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Portfolio Allocations</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Performance Benchmarks</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>FIRE Calculator</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Data Import and Export</span>
<span
class="align-items-center d-flex ml-1"
matTooltipPosition="above"
[matTooltip]="importAndExportTooltipOSS"
>
<ion-icon name="information-circle-outline"></ion-icon>
</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<a i18n [routerLink]="['/features']"
>and more Features...</a
>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Community Support</span>
</li>
</ul>
</div>
<p i18n>Self-hosted, update manually.</p>
<p class="h5 text-right" i18n>Free</p>
<div
*ngIf="user?.subscription?.type === 'Basic'"
class="d-none d-lg-block hidden mt-3 text-center"
>
<a color="primary" mat-flat-button>&nbsp;</a>
<p class="m-0 text-muted">
<small>&nbsp;</small>
</p>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-xs-12 col-lg-4 mb-3">
<mat-card
class="d-flex flex-column h-100"
appearance="outlined"
class="h-100"
[ngClass]="{ 'active': user?.subscription?.type === 'Basic' }"
>
<div class="flex-grow-1">
<div class="align-items-center d-flex mb-2">
<h4 class="flex-grow-1 m-0">Basic</h4>
<div *ngIf="user?.subscription?.type === 'Basic'">
<ion-icon class="mr-1" name="checkmark-outline"></ion-icon>
<mat-card-content class="d-flex flex-column h-100">
<div class="flex-grow-1">
<div class="align-items-center d-flex mb-2">
<h4 class="flex-grow-1 m-0">Basic</h4>
<div *ngIf="user?.subscription?.type === 'Basic'">
<ion-icon class="mr-1" name="checkmark-outline"></ion-icon>
</div>
</div>
<p i18n>
For new investors who are just getting started with trading.
</p>
<ul class="list-unstyled mb-3">
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Unlimited Transactions</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Unlimited Accounts</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Portfolio Performance</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Data Import and Export</span>
<span
class="align-items-center d-flex ml-1"
matTooltipPosition="above"
[matTooltip]="importAndExportTooltipBasic"
>
<ion-icon name="information-circle-outline"></ion-icon>
</span>
</li>
</ul>
</div>
<p i18n>
For new investors who are just getting started with trading.
</p>
<ul class="list-unstyled mb-3">
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Unlimited Transactions</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Unlimited Accounts</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Portfolio Performance</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Data Import and Export</span>
<span
class="align-items-center d-flex ml-1"
matTooltipPosition="above"
[matTooltip]="importAndExportTooltipBasic"
>
<ion-icon name="information-circle-outline"></ion-icon>
</span>
</li>
</ul>
</div>
<p i18n>Fully managed Ghostfolio cloud offering.</p>
<p class="h5 text-right" i18n>Free</p>
<div
*ngIf="user?.subscription?.type === 'Basic'"
class="d-none d-lg-block hidden mt-3 text-center"
>
<a color="primary" mat-flat-button>&nbsp;</a>
<p class="m-0 text-muted">
<small>&nbsp;</small>
</p>
</div>
<p i18n>Fully managed Ghostfolio cloud offering.</p>
<p class="h5 text-right" i18n>Free</p>
<div
*ngIf="user?.subscription?.type === 'Basic'"
class="d-none d-lg-block hidden mt-3 text-center"
>
<a color="primary" mat-flat-button>&nbsp;</a>
<p class="m-0 text-muted">
<small>&nbsp;</small>
</p>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-xs-12 col-lg-4 mb-3">
<mat-card
class="d-flex flex-column h-100"
appearance="outlined"
class="h-100"
[ngClass]="{ 'active': user?.subscription?.type === 'Premium' }"
>
<div class="flex-grow-1">
<div class="align-items-center d-flex mb-2">
<h4 class="align-items-center d-flex flex-grow-1 m-0">
<span>Premium</span>
<gf-premium-indicator
class="ml-1"
[enableLink]="false"
></gf-premium-indicator>
</h4>
<div *ngIf="user?.subscription?.type === 'Premium'">
<ion-icon class="mr-1" name="checkmark-outline"></ion-icon>
<mat-card-content class="d-flex flex-column h-100">
<div class="flex-grow-1">
<div class="align-items-center d-flex mb-2">
<h4 class="align-items-center d-flex flex-grow-1 m-0">
<span>Premium</span>
<gf-premium-indicator
class="ml-1"
[enableLink]="false"
></gf-premium-indicator>
</h4>
<div *ngIf="user?.subscription?.type === 'Premium'">
<ion-icon class="mr-1" name="checkmark-outline"></ion-icon>
</div>
</div>
<p i18n>
For ambitious investors who need the full picture of their
financial assets.
</p>
<ul class="list-unstyled mb-3">
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Unlimited Transactions</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Unlimited Accounts</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Portfolio Performance</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Portfolio Summary</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Portfolio Allocations</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Performance Benchmarks</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>FIRE Calculator</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Data Import and Export</span>
<span
class="align-items-center d-flex ml-1"
matTooltipPosition="above"
[matTooltip]="importAndExportTooltipPremium"
>
<ion-icon name="information-circle-outline"></ion-icon>
</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Professional Data Provider</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<a i18n [routerLink]="['/features']"
>and more Features...</a
>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Email and Chat Support</span>
</li>
</ul>
</div>
<p i18n>
For ambitious investors who need the full picture of their
financial assets.
<p i18n>Fully managed Ghostfolio cloud offering.</p>
<p class="h5 text-right" [hidden]="!price">
<span class="font-weight-normal">
<ng-container *ngIf="coupon"
><del class="text-muted"
>{{ baseCurrency }}&nbsp;{{ price }}</del
>&nbsp;{{ baseCurrency }}&nbsp;<strong
>{{ price - coupon }}</strong
>
</ng-container>
<ng-container *ngIf="!coupon"
>{{ baseCurrency }}&nbsp;<strong
>{{ price }}</strong
></ng-container
>&nbsp;<span>per year</span></span
>
</p>
<ul class="list-unstyled mb-3">
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Unlimited Transactions</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Unlimited Accounts</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Portfolio Performance</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Portfolio Summary</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Portfolio Allocations</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Performance Benchmarks</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>FIRE Calculator</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Data Import and Export</span>
<span
class="align-items-center d-flex ml-1"
matTooltipPosition="above"
[matTooltip]="importAndExportTooltipPremium"
>
<ion-icon name="information-circle-outline"></ion-icon>
</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Professional Data Provider</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<a i18n [routerLink]="['/features']">and more Features...</a>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1"
name="checkmark-circle-outline"
></ion-icon>
<span i18n>Email and Chat Support</span>
</li>
</ul>
</div>
<p i18n>Fully managed Ghostfolio cloud offering.</p>
<p class="h5 text-right" [hidden]="!price">
<span class="font-weight-normal">
<ng-container *ngIf="coupon"
><del class="text-muted"
>{{ baseCurrency }}&nbsp;{{ price }}</del
>&nbsp;{{ baseCurrency }}&nbsp;<strong
>{{ price - coupon }}</strong
>
</ng-container>
<ng-container *ngIf="!coupon"
>{{ baseCurrency }}&nbsp;<strong
>{{ price }}</strong
></ng-container
>&nbsp;<span>per year</span></span
<div
*ngIf="user?.subscription?.type === 'Basic'"
class="mt-3 text-center"
>
</p>
<div
*ngIf="user?.subscription?.type === 'Basic'"
class="mt-3 text-center"
>
<a color="primary" mat-flat-button [routerLink]="['/account']">
<ng-container *ngIf="user.subscription.offer === 'default'" i18n
>Upgrade Plan</ng-container
>
<ng-container *ngIf="user.subscription.offer === 'renewal'" i18n
>Renew Plan</ng-container
>
</a>
<p class="m-0 text-muted">
<small i18n>One-time payment, no auto-renewal.</small>
</p>
</div>
<a color="primary" mat-flat-button [routerLink]="['/account']">
<ng-container
*ngIf="user.subscription.offer === 'default'"
i18n
>Upgrade Plan</ng-container
>
<ng-container
*ngIf="user.subscription.offer === 'renewal'"
i18n
>Renew Plan</ng-container
>
</a>
<p class="m-0 text-muted">
<small i18n>One-time payment, no auto-renewal.</small>
</p>
</div>
</mat-card-content>
</mat-card>
</div>
</div>

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

@ -1,7 +1,7 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
import { MatCardModule } from '@angular/material/card';
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
import { RouterModule } from '@angular/router';
import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';

2
apps/client/src/app/pages/pricing/pricing-page.scss
View File

@ -13,7 +13,7 @@
}
}
.mat-card {
.mat-mdc-card {
&:hover,
&.active {
border-color: rgba(var(--palette-primary-500), 1);

22
apps/client/src/app/pages/public/public-page.html
View File

@ -9,7 +9,7 @@
</div>
<div class="proportion-charts row">
<div class="col-md-12 allocations-by-symbol">
<mat-card class="mb-3">
<mat-card appearance="outlined" class="mb-3">
<mat-card-header class="overflow-hidden w-100">
<mat-card-title class="text-truncate" i18n>Holdings</mat-card-title>
</mat-card-header>
@ -25,7 +25,7 @@
</mat-card>
</div>
<div *ngIf="portfolioPublicDetails?.hasDetails" class="col-md-4">
<mat-card class="mb-3">
<mat-card appearance="outlined" class="mb-3">
<mat-card-header class="overflow-hidden w-100">
<mat-card-title class="text-truncate" i18n>Currencies</mat-card-title>
</mat-card-header>
@ -40,7 +40,7 @@
</mat-card>
</div>
<div *ngIf="portfolioPublicDetails?.hasDetails" class="col-md-4">
<mat-card class="mb-3">
<mat-card appearance="outlined" class="mb-3">
<mat-card-header class="overflow-hidden w-100">
<mat-card-title class="text-truncate" i18n>Sectors</mat-card-title>
</mat-card-header>
@ -55,7 +55,7 @@
</mat-card>
</div>
<div *ngIf="portfolioPublicDetails?.hasDetails" class="col-md-4">
<mat-card class="mb-3">
<mat-card appearance="outlined" class="mb-3">
<mat-card-header class="overflow-hidden w-100">
<mat-card-title class="text-truncate" i18n>Continents</mat-card-title>
</mat-card-header>
@ -71,16 +71,18 @@
</div>
<div *ngIf="portfolioPublicDetails?.hasDetails" class="row world-map-chart">
<div class="col-lg">
<mat-card class="mb-3">
<mat-card appearance="outlined" class="mb-3">
<mat-card-header class="overflow-hidden w-100">
<mat-card-title class="text-truncate" i18n>Regions</mat-card-title>
</mat-card-header>
<mat-card-content>
<gf-world-map-chart
format="{0}%"
[countries]="countries"
[isInPercent]="true"
></gf-world-map-chart>
<div class="world-map-chart-container">
<gf-world-map-chart
format="{0}%"
[countries]="countries"
[isInPercent]="true"
></gf-world-map-chart>
</div>
<div class="row">
<div class="col-xs-12 col-md-4 my-2">
<gf-value

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

@ -1,7 +1,7 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
import { MatCardModule } from '@angular/material/card';
import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module';
import { GfHoldingsTableModule } from '@ghostfolio/ui/holdings-table/holdings-table.module';
import { GfPortfolioProportionChartModule } from '@ghostfolio/ui/portfolio-proportion-chart/portfolio-proportion-chart.module';

4
apps/client/src/app/pages/public/public-page.scss
View File

@ -9,8 +9,8 @@
}
.world-map-chart {
.mat-card {
.mat-card-content {
.mat-mdc-card {
.world-map-chart-container {
aspect-ratio: 16 / 9;
}
}

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

@ -1,7 +1,6 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
import { RouterModule } from '@angular/router';
import { GfLogoModule } from '@ghostfolio/ui/logo';
@ -15,7 +14,6 @@ import { ShowAccessTokenDialogModule } from './show-access-token-dialog/show-acc
CommonModule,
GfLogoModule,
MatButtonModule,
MatCardModule,
RegisterPageRoutingModule,
RouterModule,
ShowAccessTokenDialogModule

20
apps/client/src/styles.scss
View File

@ -236,15 +236,6 @@ body {
@include gf-table(true);
}
.mat-card {
background: var(--dark-background);
&:not([class*='mat-elevation-z']) {
border-color: rgba(var(--light-dividers));
box-shadow: none;
}
}
.mat-dialog-container {
background: var(--dark-background);
}
@ -374,17 +365,6 @@ ngx-skeleton-loader {
font-weight: unset;
}
.mat-card {
&:not([class*='mat-elevation-z']) {
border: 1px solid rgba(var(--dark-dividers));
box-shadow: none;
}
}
.mat-card-header-text {
margin: 0 !important;
}
.mat-mdc-button-base {
.mdc-button__label {
align-items: center;