topaLE
/
ghostfolio
mirror of https://github.com/ghostfolio/ghostfolio
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Migrate card components to Angular Material 15 (#1837)

pull/1839/head
Thomas Kaul 3 years ago
committed by GitHub
parent
1b7b082003
commit
84de2c0c68
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
29 changed files with 716 additions and 618 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      apps/client/src/app/components/admin-overview/admin-overview.html
  2. 2
      apps/client/src/app/components/admin-overview/admin-overview.module.ts
  3. 4
      apps/client/src/app/components/home-holdings/home-holdings.html
  4. 2
      apps/client/src/app/components/home-holdings/home-holdings.module.ts
  5. 2
      apps/client/src/app/components/home-summary/home-summary.html
  6. 2
      apps/client/src/app/components/home-summary/home-summary.module.ts
  7. 9
      apps/client/src/app/components/rules/rules.component.html
  8. 2
      apps/client/src/app/components/rules/rules.module.ts
  9. 2
      apps/client/src/app/pages/account/account-page.html
  10. 2
      apps/client/src/app/pages/account/account-page.module.ts
  11. 118
      apps/client/src/app/pages/faq/faq-page.html
  12. 2
      apps/client/src/app/pages/faq/faq-page.module.ts
  13. 408
      apps/client/src/app/pages/features/features-page.html
  14. 2
      apps/client/src/app/pages/features/features-page.module.ts
  15. 75
      apps/client/src/app/pages/landing/landing-page.html
  16. 2
      apps/client/src/app/pages/landing/landing-page.module.ts
  17. 32
      apps/client/src/app/pages/portfolio/allocations/allocations-page.html
  18. 2
      apps/client/src/app/pages/portfolio/allocations/allocations-page.module.ts
  19. 10
      apps/client/src/app/pages/portfolio/allocations/allocations-page.scss
  20. 4
      apps/client/src/app/pages/portfolio/analysis/analysis-page.html
  21. 2
      apps/client/src/app/pages/portfolio/analysis/analysis-page.module.ts
  22. 594
      apps/client/src/app/pages/pricing/pricing-page.html
  23. 2
      apps/client/src/app/pages/pricing/pricing-page.module.ts
  24. 2
      apps/client/src/app/pages/pricing/pricing-page.scss
  25. 22
      apps/client/src/app/pages/public/public-page.html
  26. 2
      apps/client/src/app/pages/public/public-page.module.ts
  27. 4
      apps/client/src/app/pages/public/public-page.scss
  28. 2
      apps/client/src/app/pages/register/register-page.module.ts
  29. 20
      apps/client/src/styles.scss

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

@ -1,7 +1,7 @@
<div class="container"> <div class="container">
<div class="mb-5 row"> <div class="mb-5 row">
<div class="col"> <div class="col">
<mat-card class="mb-3"> <mat-card appearance="outlined" class="mb-3">
<mat-card-content> <mat-card-content>
<div class="d-flex my-3"> <div class="d-flex my-3">
<div class="w-50" i18n>User Count</div> <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 { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button'; 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 { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle'; import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle';
import { CacheService } from '@ghostfolio/client/services/cache.service'; 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>
<div class="row"> <div class="row">
<div class="align-items-center col-xs-12 col-md-8 offset-md-2"> <div class="align-items-center col-xs-12 col-md-8 offset-md-2">
<mat-card class="p-0"> <mat-card appearance="outlined">
<mat-card-content> <mat-card-content class="p-0">
<gf-positions <gf-positions
[baseCurrency]="user?.settings?.baseCurrency" [baseCurrency]="user?.settings?.baseCurrency"
[deviceType]="deviceType" [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 { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button'; 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 { RouterModule } from '@angular/router';
import { GfPositionDetailDialogModule } from '@ghostfolio/client/components/position/position-detail-dialog/position-detail-dialog.module'; import { GfPositionDetailDialogModule } from '@ghostfolio/client/components/position/position-detail-dialog/position-detail-dialog.module';
import { GfPositionsModule } from '@ghostfolio/client/components/positions/positions.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> <h3 class="d-none d-sm-block mb-3 text-center" i18n>Summary</h3>
<div class="row"> <div class="row">
<div class="col-xs-12 col-md-8 offset-md-2"> <div class="col-xs-12 col-md-8 offset-md-2">
<mat-card class="h-100"> <mat-card appearance="outlined">
<mat-card-content> <mat-card-content>
<gf-portfolio-summary <gf-portfolio-summary
[baseCurrency]="user?.settings?.baseCurrency" [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 { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; 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 { RouterModule } from '@angular/router';
import { GfPortfolioSummaryModule } from '@ghostfolio/client/components/portfolio-summary/portfolio-summary.module'; 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"> <div class="col">
<mat-card <mat-card
*ngIf="hasPermissionToCreateOrder && rules === null" *ngIf="hasPermissionToCreateOrder && rules === null"
appearance="outlined"
class="my-2 text-center" class="my-2 text-center"
> >
<gf-no-transactions-info-indicator <mat-card-content>
[hasBorder]="false" <gf-no-transactions-info-indicator
></gf-no-transactions-info-indicator> [hasBorder]="false"
></gf-no-transactions-info-indicator
></mat-card-content>
</mat-card> </mat-card>
<gf-rule *ngIf="rules?.length === 0" [isLoading]="true"></gf-rule> <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 { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button'; 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 { GfRuleModule } from '@ghostfolio/client/components/rule/rule.module';
import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info'; 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>
<div *ngIf="user?.settings" class="mb-5 row"> <div *ngIf="user?.settings" class="mb-5 row">
<div class="col"> <div class="col">
<mat-card class="mb-3"> <mat-card appearance="outlined" class="mb-3">
<mat-card-content> <mat-card-content>
<div <div
*ngIf="hasPermissionToUpdateUserSettings && user?.subscription" *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 { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button'; 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 { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field'; import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select'; 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"> <h3 class="d-none d-sm-block mb-3 text-center">
Frequently Asked Questions (FAQ) Frequently Asked Questions (FAQ)
</h3> </h3>
<mat-card class="mb-3"> <mat-card appearance="outlined" class="mb-3">
<mat-card-title>What is Ghostfolio?</mat-card-title> <mat-card-header>
<mat-card-title>What is Ghostfolio?</mat-card-title>
</mat-card-header>
<mat-card-content> <mat-card-content>
Ghostfolio is a lightweight, open source wealth management application Ghostfolio is a lightweight, open source wealth management application
for individuals to keep track of their net worth. The software for individuals to keep track of their net worth. The software
empowers you to make solid, data-driven investment decisions. empowers you to make solid, data-driven investment decisions.
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card class="mb-3"> <mat-card appearance="outlined" class="mb-3">
<mat-card-title <mat-card-header>
>What assets can I track with Ghostfolio?</mat-card-title <mat-card-title
> >What assets can I track with Ghostfolio?</mat-card-title
>
</mat-card-header>
<mat-card-content> <mat-card-content>
With Ghostfolio, you can keep track of various assets like stocks, With Ghostfolio, you can keep track of various assets like stocks,
ETFs or cryptocurrencies. ETFs or cryptocurrencies.
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card class="mb-3"> <mat-card appearance="outlined" class="mb-3">
<mat-card-title>What else is included in Ghostfolio?</mat-card-title> <mat-card-header>
<mat-card-title
>What else is included in Ghostfolio?</mat-card-title
></mat-card-header
>
<mat-card-content> <mat-card-content>
Please find a feature overview to manage your wealth Please find a feature overview to manage your wealth
<a [routerLink]="['/features']">here</a>. <a [routerLink]="['/features']">here</a>.
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card class="mb-3"> <mat-card appearance="outlined" class="mb-3">
<mat-card-title>How do I start?</mat-card-title> <mat-card-header>
<mat-card-title>How do I start?</mat-card-title></mat-card-header
>
<mat-card-content> <mat-card-content>
You can sign up via the “<a [routerLink]="['/register']" You can sign up via the “<a [routerLink]="['/register']"
>Get Started</a >Get Started</a
@ -41,8 +51,12 @@
or <i>Google Sign</i>. We will guide you to set up your portfolio. or <i>Google Sign</i>. We will guide you to set up your portfolio.
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card class="mb-3"> <mat-card appearance="outlined" class="mb-3">
<mat-card-title>Can I use Ghostfolio anonymously?</mat-card-title> <mat-card-header>
<mat-card-title
>Can I use Ghostfolio anonymously?</mat-card-title
></mat-card-header
>
<mat-card-content> <mat-card-content>
Yes, the authentication systems (via security token or Yes, the authentication systems (via security token or
<a href="../en/blog/2022/07/ghostfolio-meets-internet-identity" <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. is no need for an e-mail address, phone number, or a username.
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card class="mb-3"> <mat-card appearance="outlined" class="mb-3">
<mat-card-title>How can Ghostfolio be free?</mat-card-title> <mat-card-header>
<mat-card-title
>How can Ghostfolio be free?</mat-card-title
></mat-card-header
>
<mat-card-content <mat-card-content
>This project is driven by the efforts of contributors from around the >This project is driven by the efforts of contributors from around the
world. The world. The
@ -64,16 +82,22 @@
investors.</mat-card-content investors.</mat-card-content
> >
</mat-card> </mat-card>
<mat-card class="mb-3"> <mat-card appearance="outlined" class="mb-3">
<mat-card-title>Is it really free?</mat-card-title> <mat-card-header>
<mat-card-title>Is it really free?</mat-card-title></mat-card-header
>
<mat-card-content <mat-card-content
>Yes, it is! Our >Yes, it is! Our
<a [routerLink]="['/pricing']">pricing page</a> details everything you <a [routerLink]="['/pricing']">pricing page</a> details everything you
get for free.</mat-card-content get for free.</mat-card-content
> >
</mat-card> </mat-card>
<mat-card class="mb-3"> <mat-card appearance="outlined" class="mb-3">
<mat-card-title>What is Ghostfolio Premium?</mat-card-title> <mat-card-header>
<mat-card-title
>What is Ghostfolio Premium?</mat-card-title
></mat-card-header
>
<mat-card-content <mat-card-content
><a [routerLink]="['/pricing']">Ghostfolio Premium</a> is a fully ><a [routerLink]="['/pricing']">Ghostfolio Premium</a> is a fully
managed Ghostfolio cloud offering for ambitious investors. The revenue managed Ghostfolio cloud offering for ambitious investors. The revenue
@ -83,8 +107,12 @@
data provider.</mat-card-content data provider.</mat-card-content
> >
</mat-card> </mat-card>
<mat-card class="mb-3"> <mat-card appearance="outlined" class="mb-3">
<mat-card-title>Can I start with a trial version?</mat-card-title> <mat-card-header>
<mat-card-title
>Can I start with a trial version?</mat-card-title
></mat-card-header
>
<mat-card-content <mat-card-content
>Yes, you can try >Yes, you can try
<a [routerLink]="['/pricing']">Ghostfolio Premium</a> by signing up <a [routerLink]="['/pricing']">Ghostfolio Premium</a> by signing up
@ -93,19 +121,23 @@
time.</mat-card-content time.</mat-card-content
> >
</mat-card> </mat-card>
<mat-card class="mb-3"> <mat-card appearance="outlined" class="mb-3">
<mat-card-title <mat-card-header>
>How can I get a student discount for Ghostfolio <mat-card-title
Premium?</mat-card-title >How can I get a student discount for Ghostfolio
> Premium?</mat-card-title
>
</mat-card-header>
<mat-card-content <mat-card-content
>Request your student discount >Request your student discount
<a href="mailto:hi@ghostfol.io?Subject=Student Discount">here</a> with <a href="mailto:hi@ghostfol.io?Subject=Student Discount">here</a> with
your university e-mail address.</mat-card-content your university e-mail address.</mat-card-content
> >
</mat-card> </mat-card>
<mat-card class="mb-3"> <mat-card appearance="outlined" class="mb-3">
<mat-card-title>Which devices are supported?</mat-card-title> <mat-card-header>
<mat-card-title>Which devices are supported?</mat-card-title>
</mat-card-header>
<mat-card-content <mat-card-content
>Ghostfolio works in every modern web browser on smartphones, tablets >Ghostfolio works in every modern web browser on smartphones, tablets
and desktop computers. For <i>Android</i> users, there is a dedicated and desktop computers. For <i>Android</i> users, there is a dedicated
@ -116,21 +148,29 @@
>.</mat-card-content >.</mat-card-content
> >
</mat-card> </mat-card>
<mat-card *ngIf="user?.subscription?.type === 'Premium'" class="mb-3"> <mat-card
<mat-card-title *ngIf="user?.subscription?.type === 'Premium'"
>I cannot find my broker in the list of platforms. What can I appearance="outlined"
do?</mat-card-title 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> <mat-card-content>
Please send an e-mail with the web address of your broker to 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 <a href="mailto:hi@ghostfol.io">hi@ghostfol.io</a> and we are happy to
add it. add it.
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card class="mb-3"> <mat-card appearance="outlined" class="mb-3">
<mat-card-title <mat-card-header>
>Ghostfolio sounds cool, how can I get involved?</mat-card-title <mat-card-title
> >Ghostfolio sounds cool, how can I get involved?</mat-card-title
>
</mat-card-header>
<mat-card-content <mat-card-content
>Any support for Ghostfolio is welcome. Be it with a >Any support for Ghostfolio is welcome. Be it with a
<a [routerLink]="['/pricing']">Ghostfolio Premium</a> subscription to <a [routerLink]="['/pricing']">Ghostfolio Premium</a> subscription to
@ -165,8 +205,10 @@
>.</mat-card-content >.</mat-card-content
> >
</mat-card> </mat-card>
<mat-card class="mb-3"> <mat-card appearance="outlined" class="mb-3">
<mat-card-title>Got any other questions?</mat-card-title> <mat-card-header>
<mat-card-title>Got any other questions?</mat-card-title>
</mat-card-header>
<mat-card-content <mat-card-content
>Please join the Ghostfolio >Please join the Ghostfolio
<a <a

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

@ -1,6 +1,6 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; 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 { FaqPageRoutingModule } from './faq-page-routing.module';
import { FaqPageComponent } from './faq-page.component'; import { FaqPageComponent } from './faq-page.component';

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

@ -10,233 +10,271 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-xs-12 col-md-4 mb-3"> <div class="col-xs-12 col-md-4 mb-3">
<mat-card class="d-flex flex-column h-100"> <mat-card appearance="outlined" class="d-flex flex-column h-100">
<div class="flex-grow-1"> <mat-card-content>
<h4>Stocks</h4> <div class="flex-grow-1">
<p class="m-0">Keep track of your stock purchases and sales.</p> <h4>Stocks</h4>
</div> <p class="m-0">Keep track of your stock purchases and sales.</p>
</div>
</mat-card-content>
</mat-card> </mat-card>
</div> </div>
<div class="col-xs-12 col-md-4 mb-3"> <div class="col-xs-12 col-md-4 mb-3">
<mat-card class="d-flex flex-column h-100"> <mat-card appearance="outlined" class="d-flex flex-column h-100">
<div class="flex-grow-1"> <mat-card-content>
<h4>ETFs</h4> <div class="flex-grow-1">
<p class="m-0"> <h4>ETFs</h4>
Are you into ETFs (Exchange Traded Funds)? Track your ETF <p class="m-0">
investments. Are you into ETFs (Exchange Traded Funds)? Track your ETF
</p> investments.
</div> </p>
</div>
</mat-card-content>
</mat-card> </mat-card>
</div> </div>
<div class="col-xs-12 col-md-4 mb-3"> <div class="col-xs-12 col-md-4 mb-3">
<mat-card class="d-flex flex-column h-100"> <mat-card appearance="outlined" class="d-flex flex-column h-100">
<div class="flex-grow-1"> <mat-card-content>
<h4>Bonds</h4> <div class="flex-grow-1">
<p class="m-0"> <h4>Bonds</h4>
Manage your investment in bonds and other assets with fixed <p class="m-0">
income. Manage your investment in bonds and other assets with fixed
</p> income.
</div> </p>
</div>
</mat-card-content>
</mat-card> </mat-card>
</div> </div>
<div class="col-xs-12 col-md-4 mb-3"> <div class="col-xs-12 col-md-4 mb-3">
<mat-card class="d-flex flex-column h-100"> <mat-card appearance="outlined" class="d-flex flex-column h-100">
<div class="flex-grow-1"> <mat-card-content>
<h4>Cryptocurrencies</h4> <div class="flex-grow-1">
<p class="m-0"> <h4>Cryptocurrencies</h4>
Keep track of your Bitcoin and Altcoin holdings. <p class="m-0">
</p> Keep track of your Bitcoin and Altcoin holdings.
</div> </p>
</div>
</mat-card-content>
</mat-card> </mat-card>
</div> </div>
<div class="col-xs-12 col-md-4 mb-3"> <div class="col-xs-12 col-md-4 mb-3">
<mat-card class="d-flex flex-column h-100"> <mat-card appearance="outlined" class="d-flex flex-column h-100">
<div class="flex-grow-1"> <mat-card-content>
<h4>Dividend</h4> <div class="flex-grow-1">
<p class="m-0"> <h4>Dividend</h4>
Are you building a dividend portfolio? Track your dividend in <p class="m-0">
Ghostfolio. Are you building a dividend portfolio? Track your dividend in
</p> Ghostfolio.
</div> </p>
</div>
</mat-card-content>
</mat-card> </mat-card>
</div> </div>
<div class="col-xs-12 col-md-4 mb-3"> <div class="col-xs-12 col-md-4 mb-3">
<mat-card class="d-flex flex-column h-100"> <mat-card appearance="outlined" class="d-flex flex-column h-100">
<div class="flex-grow-1"> <mat-card-content>
<h4 class="align-items-center d-flex">Wealth Items</h4> <div class="flex-grow-1">
<p class="m-0"> <h4 class="align-items-center d-flex">Wealth Items</h4>
Track all your treasuries, be it your luxury watch or rare <p class="m-0">
trading cards. Track all your treasuries, be it your luxury watch or rare
</p> trading cards.
</div> </p>
</div>
</mat-card-content>
</mat-card> </mat-card>
</div> </div>
<div class="col-xs-12 col-md-4 mb-3"> <div class="col-xs-12 col-md-4 mb-3">
<mat-card class="d-flex flex-column h-100"> <mat-card appearance="outlined" class="d-flex flex-column h-100">
<div class="flex-grow-1"> <mat-card-content>
<h4 class="align-items-center d-flex">Emergency Fund</h4> <div class="flex-grow-1">
<p class="m-0"> <h4 class="align-items-center d-flex">Emergency Fund</h4>
Define your emergency fund you are comfortable with for <p class="m-0">
difficult times. Define your emergency fund you are comfortable with for
</p> difficult times.
</div> </p>
</div>
</mat-card-content>
</mat-card> </mat-card>
</div> </div>
<div class="col-xs-12 col-md-4 mb-3"> <div class="col-xs-12 col-md-4 mb-3">
<mat-card class="d-flex flex-column h-100"> <mat-card appearance="outlined" class="d-flex flex-column h-100">
<div class="flex-grow-1"> <mat-card-content>
<h4 class="align-items-center d-flex">Import and Export</h4> <div class="flex-grow-1">
<p class="m-0">Import and export your investment activities.</p> <h4 class="align-items-center d-flex">Import and Export</h4>
</div> <p class="m-0">Import and export your investment activities.</p>
</div>
</mat-card-content>
</mat-card> </mat-card>
</div> </div>
<div class="col-xs-12 col-md-4 mb-3"> <div class="col-xs-12 col-md-4 mb-3">
<mat-card class="d-flex flex-column h-100"> <mat-card appearance="outlined" class="d-flex flex-column h-100">
<div class="flex-grow-1"> <mat-card-content>
<h4>Multi-Accounts</h4> <div class="flex-grow-1">
<p class="m-0"> <h4>Multi-Accounts</h4>
Keep an eye on all your accounts across multiple platforms <p class="m-0">
(multi-banking). Keep an eye on all your accounts across multiple platforms
</p> (multi-banking).
</div> </p>
</div>
</mat-card-content>
</mat-card> </mat-card>
</div> </div>
<div class="col-xs-12 col-md-4 mb-3"> <div class="col-xs-12 col-md-4 mb-3">
<mat-card class="d-flex flex-column h-100"> <mat-card appearance="outlined" class="d-flex flex-column h-100">
<div class="flex-grow-1"> <mat-card-content>
<h4 class="align-items-center d-flex"> <div class="flex-grow-1">
<span>Portfolio Calculations</span> <h4 class="align-items-center d-flex">
<gf-premium-indicator <span>Portfolio Calculations</span>
*ngIf="hasPermissionForSubscription" <gf-premium-indicator
class="ml-1" *ngIf="hasPermissionForSubscription"
></gf-premium-indicator> class="ml-1"
</h4> ></gf-premium-indicator>
<p class="m-0"> </h4>
Check the rate of return of your portfolio for <p class="m-0">
<code>Today</code>, <code>YTD</code>, <code>1Y</code>, Check the rate of return of your portfolio for
<code>5Y</code>, and <code>Max</code>. <code>Today</code>, <code>YTD</code>, <code>1Y</code>,
</p> <code>5Y</code>, and <code>Max</code>.
</div> </p>
</div>
</mat-card-content>
</mat-card> </mat-card>
</div> </div>
<div class="col-xs-12 col-md-4 mb-3"> <div class="col-xs-12 col-md-4 mb-3">
<mat-card class="d-flex flex-column h-100"> <mat-card appearance="outlined" class="d-flex flex-column h-100">
<div class="flex-grow-1"> <mat-card-content>
<h4 class="align-items-center d-flex"> <div class="flex-grow-1">
<span>Portfolio Allocations</span> <h4 class="align-items-center d-flex">
<gf-premium-indicator <span>Portfolio Allocations</span>
*ngIf="hasPermissionForSubscription" <gf-premium-indicator
class="ml-1" *ngIf="hasPermissionForSubscription"
></gf-premium-indicator> class="ml-1"
</h4> ></gf-premium-indicator>
<p class="m-0"> </h4>
Check the allocations of your portfolio by account, asset class, <p class="m-0">
currency, region, and sector. Check the allocations of your portfolio by account, asset
</p> class, currency, region, and sector.
</div> </p>
</div>
</mat-card-content>
</mat-card> </mat-card>
</div> </div>
<div class="col-xs-12 col-md-4 mb-3"> <div class="col-xs-12 col-md-4 mb-3">
<mat-card class="d-flex flex-column h-100"> <mat-card appearance="outlined" class="d-flex flex-column h-100">
<div class="flex-grow-1"> <mat-card-content>
<h4 class="align-items-center d-flex">Dark Mode</h4> <div class="flex-grow-1">
<p class="m-0"> <h4 class="align-items-center d-flex">Dark Mode</h4>
Ghostfolio automatically switches to a dark color theme based on <p class="m-0">
your operating system's preferences. Ghostfolio automatically switches to a dark color theme based
</p> on your operating system's preferences.
</div> </p>
</div>
</mat-card-content>
</mat-card> </mat-card>
</div> </div>
<div class="col-xs-12 col-md-4 mb-3"> <div class="col-xs-12 col-md-4 mb-3">
<mat-card class="d-flex flex-column h-100"> <mat-card appearance="outlined" class="d-flex flex-column h-100">
<div class="flex-grow-1"> <mat-card-content>
<h4 class="align-items-center d-flex">Zen Mode</h4> <div class="flex-grow-1">
<p class="m-0"> <h4 class="align-items-center d-flex">Zen Mode</h4>
Keep calm and activate Zen Mode if the markets are going crazy. <p class="m-0">
</p> Keep calm and activate Zen Mode if the markets are going
</div> crazy.
</p>
</div>
</mat-card-content>
</mat-card> </mat-card>
</div> </div>
<div <div
*ngIf="hasPermissionForSubscription" *ngIf="hasPermissionForSubscription"
class="col-xs-12 col-md-4 mb-3" class="col-xs-12 col-md-4 mb-3"
> >
<mat-card class="d-flex flex-column h-100"> <mat-card appearance="outlined" class="d-flex flex-column h-100">
<div class="flex-grow-1"> <mat-card-content>
<h4 class="align-items-center d-flex"> <div class="flex-grow-1">
<span>Market Mood</span> <h4 class="align-items-center d-flex">
<gf-premium-indicator class="ml-1"></gf-premium-indicator> <span>Market Mood</span>
</h4> <gf-premium-indicator class="ml-1"></gf-premium-indicator>
<p class="m-0"> </h4>
Check the current market mood (<a [routerLink]="['/resources']" <p class="m-0">
>Fear & Greed Index</a Check the current market mood (<a
>) within the app. [routerLink]="['/resources']"
</p> >Fear & Greed Index</a
</div> >) within the app.
</mat-card> </p>
</div> </div>
<div class="col-xs-12 col-md-4 mb-3"> </mat-card-content>
<mat-card class="d-flex flex-column h-100"> </mat-card>
<div class="flex-grow-1"> </div>
<h4 class="align-items-center d-flex"> <div class="col-xs-12 col-md-4 mb-3">
<span>Static Analysis</span> <mat-card appearance="outlined" class="d-flex flex-column h-100">
<gf-premium-indicator <mat-card-content>
*ngIf="hasPermissionForSubscription" <div class="flex-grow-1">
class="ml-1" <h4 class="align-items-center d-flex">
></gf-premium-indicator> <span>Static Analysis</span>
</h4> <gf-premium-indicator
<p class="m-0"> *ngIf="hasPermissionForSubscription"
Identify potential risks in your portfolio with Ghostfolio class="ml-1"
X-ray, the static portfolio analysis. ></gf-premium-indicator>
</p> </h4>
</div> <p class="m-0">
</mat-card> Identify potential risks in your portfolio with Ghostfolio
</div> X-ray, the static portfolio analysis.
<div class="col-xs-12 col-md-4 mb-3"> </p>
<mat-card class="d-flex flex-column h-100"> </div>
<div class="flex-grow-1"> </mat-card-content>
<h4>Multi-Language</h4> </mat-card>
<p class="m-0"> </div>
Use Ghostfolio in multiple languages: English, Dutch, French, <div class="col-xs-12 col-md-4 mb-3">
German, Italian<ng-container *ngIf="false" <mat-card appearance="outlined" class="d-flex flex-column h-100">
>, Portuguese</ng-container <mat-card-content>
> <div class="flex-grow-1">
and Spanish are currently supported. <h4>Multi-Language</h4>
</p> <p class="m-0">
</div> Use Ghostfolio in multiple languages: English, Dutch, French,
</mat-card> German, Italian<ng-container *ngIf="false"
</div> >, Portuguese</ng-container
<div class="col-xs-12 col-md-4 mb-3"> >
<mat-card class="d-flex flex-column h-100"> and Spanish are currently supported.
<div class="flex-grow-1"> </p>
<h4>Community</h4> </div>
<p class="m-0"> </mat-card-content>
Join the Ghostfolio </mat-card>
<a </div>
href="https://ghostfolio.slack.com" <div class="col-xs-12 col-md-4 mb-3">
title="Join the Ghostfolio Slack community" <mat-card appearance="outlined" class="d-flex flex-column h-100">
>Slack channel</a <mat-card-content>
> <div class="flex-grow-1">
full of enthusiastic investors and discuss the latest market <h4>Community</h4>
trends. <p class="m-0">
</p> Join the Ghostfolio
</div> <a
</mat-card> href="https://ghostfolio.slack.com"
</div> title="Join the Ghostfolio Slack community"
<div class="col-xs-12 col-md-4 mb-3"> >Slack channel</a
<mat-card class="d-flex flex-column h-100"> >
<div class="flex-grow-1"> full of enthusiastic investors and discuss the latest market
<h4>Open Source Software</h4> trends.
<p class="m-0"> </p>
The source code is fully available as </div>
<a </mat-card-content>
href="https://github.com/ghostfolio/ghostfolio" </mat-card>
title="Find Ghostfolio on GitHub" </div>
>open source software</a <div class="col-xs-12 col-md-4 mb-3">
> <mat-card appearance="outlined" class="d-flex flex-column h-100">
(OSS) and licensed under the <i>AGPLv3 License</i>. <mat-card-content>
</p> <div class="flex-grow-1">
</div> <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> </mat-card>
</div> </div>
</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 { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button'; 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 { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
import { FeaturesPageRoutingModule } from './features-page-routing.module'; 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="row my-3">
<div class="col-md-4 my-2"> <div class="col-md-4 my-2">
<mat-card> <mat-card appearance="outlined">
<mat-card-title>360° View</mat-card-title> <mat-card-header>
Get the full picture of your personal finances across multiple <mat-card-title>360° View</mat-card-title>
platforms. </mat-card-header>
<mat-card-content>
Get the full picture of your personal finances across multiple
</mat-card-content>
</mat-card> </mat-card>
</div> </div>
<div class="col-md-4 my-2"> <div class="col-md-4 my-2">
<mat-card> <mat-card appearance="outlined">
<mat-card-title>Web3 Ready</mat-card-title> <mat-card-header>
Use Ghostfolio anonymously and own your financial data. <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> </mat-card>
</div> </div>
<div class="col-md-4 my-2"> <div class="col-md-4 my-2">
<mat-card> <mat-card appearance="outlined">
<mat-card-title>Open Source</mat-card-title> <mat-card-header>
Benefit from continuous improvements through a strong community. <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> </mat-card>
</div> </div>
</div> </div>
@ -340,34 +351,40 @@
<p class="lead mb-3 text-center">Get started in only 3 steps</p> <p class="lead mb-3 text-center">Get started in only 3 steps</p>
</div> </div>
<div class="col-md-4 my-2"> <div class="col-md-4 my-2">
<mat-card class="d-flex flex-row h-100"> <mat-card appearance="outlined" class="h-100">
<div class="flex-grow-1"> <mat-card-content class="d-flex flex-row">
<div class="font-weight-bold">Sign up anonymously*</div> <div class="flex-grow-1">
<div class="text-muted"> <div class="font-weight-bold">Sign up anonymously*</div>
<small>* no e-mail address nor credit card required</small> <div class="text-muted">
<small>* no e-mail address nor credit card required</small>
</div>
</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> </mat-card>
</div> </div>
<div class="col-md-4 my-2"> <div class="col-md-4 my-2">
<mat-card class="d-flex flex-row h-100"> <mat-card appearance="outlined" class="h-100">
<div class="flex-grow-1"> <mat-card-content class="d-flex flex-row">
<div class="font-weight-bold"> <div class="flex-grow-1">
Add any of your historical transactions <div class="font-weight-bold">
Add any of your historical transactions
</div>
</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> </mat-card>
</div> </div>
<div class="col-md-4 my-2"> <div class="col-md-4 my-2">
<mat-card class="d-flex flex-row h-100"> <mat-card appearance="outlined" class="h-100">
<div class="flex-grow-1"> <mat-card-content class="d-flex flex-row">
<div class="font-weight-bold"> <div class="flex-grow-1">
Get valuable insights of your portfolio composition <div class="font-weight-bold">
Get valuable insights of your portfolio composition
</div>
</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> </mat-card>
</div> </div>
</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 { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button'; 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 { RouterModule } from '@angular/router';
import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module'; import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module';
import { GfLogoModule } from '@ghostfolio/ui/logo'; 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>
<div class="row"> <div class="row">
<div class="col"> <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-header class="mb-2 overflow-hidden w-100">
<mat-card-title class="m-0 text-truncate" i18n <mat-card-title class="m-0 text-truncate" i18n
>Proportion of Net Worth</mat-card-title >Proportion of Net Worth</mat-card-title
@ -36,7 +36,7 @@
</div> </div>
<div class="proportion-charts row"> <div class="proportion-charts row">
<div class="col-md-4"> <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-header class="overflow-hidden w-100">
<mat-card-title class="text-truncate" i18n>By Account</mat-card-title> <mat-card-title class="text-truncate" i18n>By Account</mat-card-title>
</mat-card-header> </mat-card-header>
@ -55,7 +55,7 @@
</mat-card> </mat-card>
</div> </div>
<div class="col-md-4"> <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-header class="overflow-hidden w-100">
<mat-card-title class="align-items-center d-flex text-truncate" <mat-card-title class="align-items-center d-flex text-truncate"
><span i18n>By Currency</span> ><span i18n>By Currency</span>
@ -78,7 +78,7 @@
</mat-card> </mat-card>
</div> </div>
<div class="col-md-4"> <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-header class="overflow-hidden w-100">
<mat-card-title class="align-items-center d-flex text-truncate" <mat-card-title class="align-items-center d-flex text-truncate"
><span i18n>By Asset Class</span ><span i18n>By Asset Class</span
@ -101,7 +101,7 @@
</mat-card> </mat-card>
</div> </div>
<div class="col-md-12 allocations-by-symbol"> <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-header class="overflow-hidden w-100">
<mat-card-title class="align-items-center d-flex text-truncate"> <mat-card-title class="align-items-center d-flex text-truncate">
<ng-container i18n>By Holding</ng-container></mat-card-title <ng-container i18n>By Holding</ng-container></mat-card-title
@ -124,7 +124,7 @@
</mat-card> </mat-card>
</div> </div>
<div class="col-md-4"> <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-header class="overflow-hidden w-100">
<mat-card-title class="align-items-center d-flex text-truncate" <mat-card-title class="align-items-center d-flex text-truncate"
><span i18n>By Sector</span ><span i18n>By Sector</span
@ -148,7 +148,7 @@
</mat-card> </mat-card>
</div> </div>
<div class="col-md-4"> <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-header class="overflow-hidden w-100">
<mat-card-title class="align-items-center d-flex text-truncate" <mat-card-title class="align-items-center d-flex text-truncate"
><span i18n>By Continent</span ><span i18n>By Continent</span
@ -171,7 +171,7 @@
</mat-card> </mat-card>
</div> </div>
<div class="col-md-4"> <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-header class="overflow-hidden w-100">
<mat-card-title class="align-items-center d-flex text-truncate" <mat-card-title class="align-items-center d-flex text-truncate"
><span i18n>By Country</span ><span i18n>By Country</span
@ -197,7 +197,7 @@
</div> </div>
<div class="row world-map-chart"> <div class="row world-map-chart">
<div class="col-lg"> <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-header class="overflow-hidden w-100">
<mat-card-title class="align-items-center d-flex text-truncate" <mat-card-title class="align-items-center d-flex text-truncate"
><span i18n>Regions</span ><span i18n>Regions</span
@ -208,12 +208,14 @@
></mat-card-title> ></mat-card-title>
</mat-card-header> </mat-card-header>
<mat-card-content> <mat-card-content>
<gf-world-map-chart <div class="world-map-chart-container">
[countries]="countries" <gf-world-map-chart
[format]="worldMapChartFormat" [countries]="countries"
[isInPercent]="hasImpersonationId || user.settings.isRestrictedView" [format]="worldMapChartFormat"
[locale]="user?.settings?.locale" [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
></gf-world-map-chart> [locale]="user?.settings?.locale"
></gf-world-map-chart>
</div>
<div class="row"> <div class="row">
<div class="col-xs-12 col-md-4 my-2"> <div class="col-xs-12 col-md-4 my-2">
<gf-value <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 { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; 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 { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
import { MatProgressBarModule } from '@angular/material/progress-bar'; import { MatProgressBarModule } from '@angular/material/progress-bar';
import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module'; 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 { .world-map-chart {
.mat-card { .mat-mdc-card {
.mat-card-content { .world-map-chart-container {
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;
} }
} }
} }
.mat-card { .mat-mdc-card {
.mat-card-header { .mat-mdc-card-header {
::ng-deep { ::ng-deep {
.mat-card-header-text { .mat-mdc-card-header-text {
flex: 1 1 auto; flex: 1 1 auto;
overflow: hidden; 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="mb-5 row">
<div class="col-md-6"> <div class="col-md-6">
<mat-card class="mb-3"> <mat-card appearance="outlined" class="mb-3">
<mat-card-header> <mat-card-header>
<mat-card-title class="align-items-center d-flex" i18n <mat-card-title class="align-items-center d-flex" i18n
>Top</mat-card-title >Top</mat-card-title
@ -80,7 +80,7 @@
</mat-card> </mat-card>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<mat-card class="mb-3"> <mat-card appearance="outlined" class="mb-3">
<mat-card-header> <mat-card-header>
<mat-card-title class="align-items-center d-flex" i18n <mat-card-title class="align-items-center d-flex" i18n
>Bottom</mat-card-title >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 { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; 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 { GfBenchmarkComparatorModule } from '@ghostfolio/client/components/benchmark-comparator/benchmark-comparator.module';
import { GfInvestmentChartModule } from '@ghostfolio/client/components/investment-chart/investment-chart.module'; import { GfInvestmentChartModule } from '@ghostfolio/client/components/investment-chart/investment-chart.module';
import { GfToggleModule } from '@ghostfolio/client/components/toggle/toggle.module'; import { GfToggleModule } from '@ghostfolio/client/components/toggle/toggle.module';

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

@ -29,314 +29,330 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-xs-12 col-lg-4 mb-3"> <div class="col-xs-12 col-lg-4 mb-3">
<mat-card class="d-flex flex-column h-100"> <mat-card appearance="outlined" class="h-100">
<div class="flex-grow-1"> <mat-card-content class="d-flex flex-column h-100">
<h4>Open Source</h4> <div class="flex-grow-1">
<p i18n> <h4>Open Source</h4>
For tech-savvy investors who prefer to run Ghostfolio on their <p i18n>
own infrastructure. For tech-savvy investors who prefer to run Ghostfolio on their
</p> own infrastructure.
<ul class="list-unstyled mb-3"> </p>
<li class="align-items-center d-flex mb-1"> <ul class="list-unstyled mb-3">
<ion-icon <li class="align-items-center d-flex mb-1">
class="mr-1" <ion-icon
name="checkmark-circle-outline" class="mr-1"
></ion-icon> name="checkmark-circle-outline"
<span i18n>Unlimited Transactions</span> ></ion-icon>
</li> <span i18n>Unlimited Transactions</span>
<li class="align-items-center d-flex mb-1"> </li>
<ion-icon <li class="align-items-center d-flex mb-1">
class="mr-1" <ion-icon
name="checkmark-circle-outline" class="mr-1"
></ion-icon> name="checkmark-circle-outline"
<span i18n>Unlimited Accounts</span> ></ion-icon>
</li> <span i18n>Unlimited Accounts</span>
<li class="align-items-center d-flex mb-1"> </li>
<ion-icon <li class="align-items-center d-flex mb-1">
class="mr-1" <ion-icon
name="checkmark-circle-outline" class="mr-1"
></ion-icon> name="checkmark-circle-outline"
<span i18n>Portfolio Performance</span> ></ion-icon>
</li> <span i18n>Portfolio Performance</span>
<li class="align-items-center d-flex mb-1"> </li>
<ion-icon <li class="align-items-center d-flex mb-1">
class="mr-1" <ion-icon
name="checkmark-circle-outline" class="mr-1"
></ion-icon> name="checkmark-circle-outline"
<span i18n>Portfolio Summary</span> ></ion-icon>
</li> <span i18n>Portfolio Summary</span>
<li class="align-items-center d-flex mb-1"> </li>
<ion-icon <li class="align-items-center d-flex mb-1">
class="mr-1" <ion-icon
name="checkmark-circle-outline" class="mr-1"
></ion-icon> name="checkmark-circle-outline"
<span i18n>Portfolio Allocations</span> ></ion-icon>
</li> <span i18n>Portfolio Allocations</span>
<li class="align-items-center d-flex mb-1"> </li>
<ion-icon <li class="align-items-center d-flex mb-1">
class="mr-1" <ion-icon
name="checkmark-circle-outline" class="mr-1"
></ion-icon> name="checkmark-circle-outline"
<span i18n>Performance Benchmarks</span> ></ion-icon>
</li> <span i18n>Performance Benchmarks</span>
<li class="align-items-center d-flex mb-1"> </li>
<ion-icon <li class="align-items-center d-flex mb-1">
class="mr-1" <ion-icon
name="checkmark-circle-outline" class="mr-1"
></ion-icon> name="checkmark-circle-outline"
<span i18n>FIRE Calculator</span> ></ion-icon>
</li> <span i18n>FIRE Calculator</span>
<li class="align-items-center d-flex mb-1"> </li>
<ion-icon <li class="align-items-center d-flex mb-1">
class="mr-1" <ion-icon
name="checkmark-circle-outline" class="mr-1"
></ion-icon> name="checkmark-circle-outline"
<span i18n>Data Import and Export</span> ></ion-icon>
<span <span i18n>Data Import and Export</span>
class="align-items-center d-flex ml-1" <span
matTooltipPosition="above" class="align-items-center d-flex ml-1"
[matTooltip]="importAndExportTooltipOSS" matTooltipPosition="above"
> [matTooltip]="importAndExportTooltipOSS"
<ion-icon name="information-circle-outline"></ion-icon> >
</span> <ion-icon name="information-circle-outline"></ion-icon>
</li> </span>
<li class="align-items-center d-flex mb-1"> </li>
<ion-icon <li class="align-items-center d-flex mb-1">
class="mr-1" <ion-icon
name="checkmark-circle-outline" class="mr-1"
></ion-icon> name="checkmark-circle-outline"
<a i18n [routerLink]="['/features']">and more Features...</a> ></ion-icon>
</li> <a i18n [routerLink]="['/features']"
<li class="align-items-center d-flex mb-1"> >and more Features...</a
<ion-icon >
class="mr-1" </li>
name="checkmark-circle-outline" <li class="align-items-center d-flex mb-1">
></ion-icon> <ion-icon
<span i18n>Community Support</span> class="mr-1"
</li> name="checkmark-circle-outline"
</ul> ></ion-icon>
</div> <span i18n>Community Support</span>
<p i18n>Self-hosted, update manually.</p> </li>
<p class="h5 text-right" i18n>Free</p> </ul>
<div </div>
*ngIf="user?.subscription?.type === 'Basic'" <p i18n>Self-hosted, update manually.</p>
class="d-none d-lg-block hidden mt-3 text-center" <p class="h5 text-right" i18n>Free</p>
> <div
<a color="primary" mat-flat-button>&nbsp;</a> *ngIf="user?.subscription?.type === 'Basic'"
<p class="m-0 text-muted"> class="d-none d-lg-block hidden mt-3 text-center"
<small>&nbsp;</small> >
</p> <a color="primary" mat-flat-button>&nbsp;</a>
</div> <p class="m-0 text-muted">
<small>&nbsp;</small>
</p>
</div>
</mat-card-content>
</mat-card> </mat-card>
</div> </div>
<div class="col-xs-12 col-lg-4 mb-3"> <div class="col-xs-12 col-lg-4 mb-3">
<mat-card <mat-card
class="d-flex flex-column h-100" appearance="outlined"
class="h-100"
[ngClass]="{ 'active': user?.subscription?.type === 'Basic' }" [ngClass]="{ 'active': user?.subscription?.type === 'Basic' }"
> >
<div class="flex-grow-1"> <mat-card-content class="d-flex flex-column h-100">
<div class="align-items-center d-flex mb-2"> <div class="flex-grow-1">
<h4 class="flex-grow-1 m-0">Basic</h4> <div class="align-items-center d-flex mb-2">
<div *ngIf="user?.subscription?.type === 'Basic'"> <h4 class="flex-grow-1 m-0">Basic</h4>
<ion-icon class="mr-1" name="checkmark-outline"></ion-icon> <div *ngIf="user?.subscription?.type === 'Basic'">
<ion-icon class="mr-1" name="checkmark-outline"></ion-icon>
</div>
</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> </div>
<p i18n> <p i18n>Fully managed Ghostfolio cloud offering.</p>
For new investors who are just getting started with trading. <p class="h5 text-right" i18n>Free</p>
</p> <div
<ul class="list-unstyled mb-3"> *ngIf="user?.subscription?.type === 'Basic'"
<li class="align-items-center d-flex mb-1"> class="d-none d-lg-block hidden mt-3 text-center"
<ion-icon >
class="mr-1" <a color="primary" mat-flat-button>&nbsp;</a>
name="checkmark-circle-outline" <p class="m-0 text-muted">
></ion-icon> <small>&nbsp;</small>
<span i18n>Unlimited Transactions</span> </p>
</li> </div>
<li class="align-items-center d-flex mb-1"> </mat-card-content>
<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>
</mat-card> </mat-card>
</div> </div>
<div class="col-xs-12 col-lg-4 mb-3"> <div class="col-xs-12 col-lg-4 mb-3">
<mat-card <mat-card
class="d-flex flex-column h-100" appearance="outlined"
class="h-100"
[ngClass]="{ 'active': user?.subscription?.type === 'Premium' }" [ngClass]="{ 'active': user?.subscription?.type === 'Premium' }"
> >
<div class="flex-grow-1"> <mat-card-content class="d-flex flex-column h-100">
<div class="align-items-center d-flex mb-2"> <div class="flex-grow-1">
<h4 class="align-items-center d-flex flex-grow-1 m-0"> <div class="align-items-center d-flex mb-2">
<span>Premium</span> <h4 class="align-items-center d-flex flex-grow-1 m-0">
<gf-premium-indicator <span>Premium</span>
class="ml-1" <gf-premium-indicator
[enableLink]="false" class="ml-1"
></gf-premium-indicator> [enableLink]="false"
</h4> ></gf-premium-indicator>
<div *ngIf="user?.subscription?.type === 'Premium'"> </h4>
<ion-icon class="mr-1" name="checkmark-outline"></ion-icon> <div *ngIf="user?.subscription?.type === 'Premium'">
<ion-icon class="mr-1" name="checkmark-outline"></ion-icon>
</div>
</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> </div>
<p i18n> <p i18n>Fully managed Ghostfolio cloud offering.</p>
For ambitious investors who need the full picture of their <p class="h5 text-right" [hidden]="!price">
financial assets. <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> </p>
<ul class="list-unstyled mb-3"> <div
<li class="align-items-center d-flex mb-1"> *ngIf="user?.subscription?.type === 'Basic'"
<ion-icon class="mt-3 text-center"
class="mr-1" >
name="checkmark-circle-outline" <a color="primary" mat-flat-button [routerLink]="['/account']">
></ion-icon> <ng-container
<span i18n>Unlimited Transactions</span> *ngIf="user.subscription.offer === 'default'"
</li> i18n
<li class="align-items-center d-flex mb-1"> >Upgrade Plan</ng-container
<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> <ng-container
</span> *ngIf="user.subscription.offer === 'renewal'"
</li> i18n
<li class="align-items-center d-flex mb-1"> >Renew Plan</ng-container
<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> </a>
<ng-container *ngIf="!coupon" <p class="m-0 text-muted">
>{{ baseCurrency }}&nbsp;<strong <small i18n>One-time payment, no auto-renewal.</small>
>{{ price }}</strong </p>
></ng-container </div>
>&nbsp;<span>per year</span></span </mat-card-content>
>
</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>
</mat-card> </mat-card>
</div> </div>
</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 { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button'; 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 { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator'; 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, &:hover,
&.active { &.active {
border-color: rgba(var(--palette-primary-500), 1); 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>
<div class="proportion-charts row"> <div class="proportion-charts row">
<div class="col-md-12 allocations-by-symbol"> <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-header class="overflow-hidden w-100">
<mat-card-title class="text-truncate" i18n>Holdings</mat-card-title> <mat-card-title class="text-truncate" i18n>Holdings</mat-card-title>
</mat-card-header> </mat-card-header>
@ -25,7 +25,7 @@
</mat-card> </mat-card>
</div> </div>
<div *ngIf="portfolioPublicDetails?.hasDetails" class="col-md-4"> <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-header class="overflow-hidden w-100">
<mat-card-title class="text-truncate" i18n>Currencies</mat-card-title> <mat-card-title class="text-truncate" i18n>Currencies</mat-card-title>
</mat-card-header> </mat-card-header>
@ -40,7 +40,7 @@
</mat-card> </mat-card>
</div> </div>
<div *ngIf="portfolioPublicDetails?.hasDetails" class="col-md-4"> <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-header class="overflow-hidden w-100">
<mat-card-title class="text-truncate" i18n>Sectors</mat-card-title> <mat-card-title class="text-truncate" i18n>Sectors</mat-card-title>
</mat-card-header> </mat-card-header>
@ -55,7 +55,7 @@
</mat-card> </mat-card>
</div> </div>
<div *ngIf="portfolioPublicDetails?.hasDetails" class="col-md-4"> <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-header class="overflow-hidden w-100">
<mat-card-title class="text-truncate" i18n>Continents</mat-card-title> <mat-card-title class="text-truncate" i18n>Continents</mat-card-title>
</mat-card-header> </mat-card-header>
@ -71,16 +71,18 @@
</div> </div>
<div *ngIf="portfolioPublicDetails?.hasDetails" class="row world-map-chart"> <div *ngIf="portfolioPublicDetails?.hasDetails" class="row world-map-chart">
<div class="col-lg"> <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-header class="overflow-hidden w-100">
<mat-card-title class="text-truncate" i18n>Regions</mat-card-title> <mat-card-title class="text-truncate" i18n>Regions</mat-card-title>
</mat-card-header> </mat-card-header>
<mat-card-content> <mat-card-content>
<gf-world-map-chart <div class="world-map-chart-container">
format="{0}%" <gf-world-map-chart
[countries]="countries" format="{0}%"
[isInPercent]="true" [countries]="countries"
></gf-world-map-chart> [isInPercent]="true"
></gf-world-map-chart>
</div>
<div class="row"> <div class="row">
<div class="col-xs-12 col-md-4 my-2"> <div class="col-xs-12 col-md-4 my-2">
<gf-value <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 { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button'; 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 { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module';
import { GfHoldingsTableModule } from '@ghostfolio/ui/holdings-table/holdings-table.module'; import { GfHoldingsTableModule } from '@ghostfolio/ui/holdings-table/holdings-table.module';
import { GfPortfolioProportionChartModule } from '@ghostfolio/ui/portfolio-proportion-chart/portfolio-proportion-chart.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 { .world-map-chart {
.mat-card { .mat-mdc-card {
.mat-card-content { .world-map-chart-container {
aspect-ratio: 16 / 9; 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 { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { GfLogoModule } from '@ghostfolio/ui/logo'; import { GfLogoModule } from '@ghostfolio/ui/logo';
@ -15,7 +14,6 @@ import { ShowAccessTokenDialogModule } from './show-access-token-dialog/show-acc
CommonModule, CommonModule,
GfLogoModule, GfLogoModule,
MatButtonModule, MatButtonModule,
MatCardModule,
RegisterPageRoutingModule, RegisterPageRoutingModule,
RouterModule, RouterModule,
ShowAccessTokenDialogModule ShowAccessTokenDialogModule

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

@ -236,15 +236,6 @@ body {
@include gf-table(true); @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 { .mat-dialog-container {
background: var(--dark-background); background: var(--dark-background);
} }
@ -374,17 +365,6 @@ ngx-skeleton-loader {
font-weight: unset; 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 { .mat-mdc-button-base {
.mdc-button__label { .mdc-button__label {
align-items: center; align-items: center;

Write Preview
Loading…
Cancel
Save