open-source-mirrors
/
ghostfolio
mirror of https://github.com/ghostfolio/ghostfolio
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Migrate card components to Angular Material 15 (#1837)

Browse Source
pull/1839/head
Thomas Kaul 2 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
Show Stats Download Patch File Download Diff File

2
apps/client/src/app/components/admin-overview/admin-overview.html
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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';

5
apps/client/src/app/components/rules/rules.component.html
Unescape 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"
> >
<mat-card-content>
<gf-no-transactions-info-indicator <gf-no-transactions-info-indicator
[hasBorder]="false" [hasBorder]="false"
></gf-no-transactions-info-indicator> ></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
Unescape 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
Unescape 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
Unescape 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';

84
apps/client/src/app/pages/faq/faq-page.html
Unescape 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-header>
<mat-card-title>What is Ghostfolio?</mat-card-title> <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-header>
<mat-card-title <mat-card-title
>What assets can I track with Ghostfolio?</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-header>
<mat-card-title <mat-card-title
>How can I get a student discount for Ghostfolio >How can I get a student discount for Ghostfolio
Premium?</mat-card-title 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-header>
<mat-card-title>Which devices are supported?</mat-card-title> <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
*ngIf="user?.subscription?.type === 'Premium'"
appearance="outlined"
class="mb-3"
>
<mat-card-header>
<mat-card-title <mat-card-title
>I cannot find my broker in the list of platforms. What can I >I cannot find my broker in the list of platforms. What can I
do?</mat-card-title 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-header>
<mat-card-title <mat-card-title
>Ghostfolio sounds cool, how can I get involved?</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-header>
<mat-card-title>Got any other questions?</mat-card-title> <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
Unescape 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';

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

@ -10,15 +10,18 @@
</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">
<mat-card-content>
<div class="flex-grow-1"> <div class="flex-grow-1">
<h4>Stocks</h4> <h4>Stocks</h4>
<p class="m-0">Keep track of your stock purchases and sales.</p> <p class="m-0">Keep track of your stock purchases and sales.</p>
</div> </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">
<mat-card-content>
<div class="flex-grow-1"> <div class="flex-grow-1">
<h4>ETFs</h4> <h4>ETFs</h4>
<p class="m-0"> <p class="m-0">
@ -26,10 +29,12 @@
investments. investments.
</p> </p>
</div> </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">
<mat-card-content>
<div class="flex-grow-1"> <div class="flex-grow-1">
<h4>Bonds</h4> <h4>Bonds</h4>
<p class="m-0"> <p class="m-0">
@ -37,20 +42,24 @@
income. income.
</p> </p>
</div> </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">
<mat-card-content>
<div class="flex-grow-1"> <div class="flex-grow-1">
<h4>Cryptocurrencies</h4> <h4>Cryptocurrencies</h4>
<p class="m-0"> <p class="m-0">
Keep track of your Bitcoin and Altcoin holdings. Keep track of your Bitcoin and Altcoin holdings.
</p> </p>
</div> </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">
<mat-card-content>
<div class="flex-grow-1"> <div class="flex-grow-1">
<h4>Dividend</h4> <h4>Dividend</h4>
<p class="m-0"> <p class="m-0">
@ -58,10 +67,12 @@
Ghostfolio. Ghostfolio.
</p> </p>
</div> </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">
<mat-card-content>
<div class="flex-grow-1"> <div class="flex-grow-1">
<h4 class="align-items-center d-flex">Wealth Items</h4> <h4 class="align-items-center d-flex">Wealth Items</h4>
<p class="m-0"> <p class="m-0">
@ -69,10 +80,12 @@
trading cards. trading cards.
</p> </p>
</div> </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">
<mat-card-content>
<div class="flex-grow-1"> <div class="flex-grow-1">
<h4 class="align-items-center d-flex">Emergency Fund</h4> <h4 class="align-items-center d-flex">Emergency Fund</h4>
<p class="m-0"> <p class="m-0">
@ -80,18 +93,22 @@
difficult times. difficult times.
</p> </p>
</div> </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">
<mat-card-content>
<div class="flex-grow-1"> <div class="flex-grow-1">
<h4 class="align-items-center d-flex">Import and Export</h4> <h4 class="align-items-center d-flex">Import and Export</h4>
<p class="m-0">Import and export your investment activities.</p> <p class="m-0">Import and export your investment activities.</p>
</div> </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">
<mat-card-content>
<div class="flex-grow-1"> <div class="flex-grow-1">
<h4>Multi-Accounts</h4> <h4>Multi-Accounts</h4>
<p class="m-0"> <p class="m-0">
@ -99,10 +116,12 @@
(multi-banking). (multi-banking).
</p> </p>
</div> </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">
<mat-card-content>
<div class="flex-grow-1"> <div class="flex-grow-1">
<h4 class="align-items-center d-flex"> <h4 class="align-items-center d-flex">
<span>Portfolio Calculations</span> <span>Portfolio Calculations</span>
@ -117,10 +136,12 @@
<code>5Y</code>, and <code>Max</code>. <code>5Y</code>, and <code>Max</code>.
</p> </p>
</div> </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">
<mat-card-content>
<div class="flex-grow-1"> <div class="flex-grow-1">
<h4 class="align-items-center d-flex"> <h4 class="align-items-center d-flex">
<span>Portfolio Allocations</span> <span>Portfolio Allocations</span>
@ -130,53 +151,63 @@
></gf-premium-indicator> ></gf-premium-indicator>
</h4> </h4>
<p class="m-0"> <p class="m-0">
Check the allocations of your portfolio by account, asset class, Check the allocations of your portfolio by account, asset
currency, region, and sector. class, currency, region, and sector.
</p> </p>
</div> </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">
<mat-card-content>
<div class="flex-grow-1"> <div class="flex-grow-1">
<h4 class="align-items-center d-flex">Dark Mode</h4> <h4 class="align-items-center d-flex">Dark Mode</h4>
<p class="m-0"> <p class="m-0">
Ghostfolio automatically switches to a dark color theme based on Ghostfolio automatically switches to a dark color theme based
your operating system's preferences. on your operating system's preferences.
</p> </p>
</div> </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">
<mat-card-content>
<div class="flex-grow-1"> <div class="flex-grow-1">
<h4 class="align-items-center d-flex">Zen Mode</h4> <h4 class="align-items-center d-flex">Zen Mode</h4>
<p class="m-0"> <p class="m-0">
Keep calm and activate Zen Mode if the markets are going crazy. Keep calm and activate Zen Mode if the markets are going
crazy.
</p> </p>
</div> </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">
<mat-card-content>
<div class="flex-grow-1"> <div class="flex-grow-1">
<h4 class="align-items-center d-flex"> <h4 class="align-items-center d-flex">
<span>Market Mood</span> <span>Market Mood</span>
<gf-premium-indicator class="ml-1"></gf-premium-indicator> <gf-premium-indicator class="ml-1"></gf-premium-indicator>
</h4> </h4>
<p class="m-0"> <p class="m-0">
Check the current market mood (<a [routerLink]="['/resources']" Check the current market mood (<a
[routerLink]="['/resources']"
>Fear & Greed Index</a >Fear & Greed Index</a
>) within the app. >) within the app.
</p> </p>
</div> </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">
<mat-card-content>
<div class="flex-grow-1"> <div class="flex-grow-1">
<h4 class="align-items-center d-flex"> <h4 class="align-items-center d-flex">
<span>Static Analysis</span> <span>Static Analysis</span>
@ -190,10 +221,12 @@
X-ray, the static portfolio analysis. X-ray, the static portfolio analysis.
</p> </p>
</div> </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">
<mat-card-content>
<div class="flex-grow-1"> <div class="flex-grow-1">
<h4>Multi-Language</h4> <h4>Multi-Language</h4>
<p class="m-0"> <p class="m-0">
@ -204,10 +237,12 @@
and Spanish are currently supported. and Spanish are currently supported.
</p> </p>
</div> </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">
<mat-card-content>
<div class="flex-grow-1"> <div class="flex-grow-1">
<h4>Community</h4> <h4>Community</h4>
<p class="m-0"> <p class="m-0">
@ -221,10 +256,12 @@
trends. trends.
</p> </p>
</div> </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">
<mat-card-content>
<div class="flex-grow-1"> <div class="flex-grow-1">
<h4>Open Source Software</h4> <h4>Open Source Software</h4>
<p class="m-0"> <p class="m-0">
@ -237,6 +274,7 @@
(OSS) and licensed under the <i>AGPLv3 License</i>. (OSS) and licensed under the <i>AGPLv3 License</i>.
</p> </p>
</div> </div>
</mat-card-content>
</mat-card> </mat-card>
</div> </div>
</div> </div>

2
apps/client/src/app/pages/features/features-page.module.ts
Unescape 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';

31
apps/client/src/app/pages/landing/landing-page.html
Unescape 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-header>
<mat-card-title>360° View</mat-card-title> <mat-card-title>360° View</mat-card-title>
</mat-card-header>
<mat-card-content>
Get the full picture of your personal finances across multiple Get the full picture of your personal finances across multiple
platforms. </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-header>
<mat-card-title>Web3 Ready</mat-card-title> <mat-card-title>Web3 Ready</mat-card-title>
</mat-card-header>
<mat-card-content>
Use Ghostfolio anonymously and own your financial data. 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-header>
<mat-card-title>Open Source</mat-card-title> <mat-card-title>Open Source</mat-card-title>
</mat-card-header>
<mat-card-content>
Benefit from continuous improvements through a strong community. Benefit from continuous improvements through a strong community.
</mat-card-content>
</mat-card> </mat-card>
</div> </div>
</div> </div>
@ -340,7 +351,8 @@
<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">
<mat-card-content class="d-flex flex-row">
<div class="flex-grow-1"> <div class="flex-grow-1">
<div class="font-weight-bold">Sign up anonymously*</div> <div class="font-weight-bold">Sign up anonymously*</div>
<div class="text-muted"> <div class="text-muted">
@ -348,26 +360,31 @@
</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">
<mat-card-content class="d-flex flex-row">
<div class="flex-grow-1"> <div class="flex-grow-1">
<div class="font-weight-bold"> <div class="font-weight-bold">
Add any of your historical transactions 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">
<mat-card-content class="d-flex flex-row">
<div class="flex-grow-1"> <div class="flex-grow-1">
<div class="font-weight-bold"> <div class="font-weight-bold">
Get valuable insights of your portfolio composition 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
Unescape 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';

20
apps/client/src/app/pages/portfolio/allocations/allocations-page.html
Unescape 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>
<div class="world-map-chart-container">
<gf-world-map-chart <gf-world-map-chart
[countries]="countries" [countries]="countries"
[format]="worldMapChartFormat" [format]="worldMapChartFormat"
[isInPercent]="hasImpersonationId || user.settings.isRestrictedView" [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
[locale]="user?.settings?.locale" [locale]="user?.settings?.locale"
></gf-world-map-chart> ></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
Unescape 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
Unescape 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
Unescape 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
Unescape 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';

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

@ -29,7 +29,8 @@
</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">
<mat-card-content class="d-flex flex-column h-100">
<div class="flex-grow-1"> <div class="flex-grow-1">
<h4>Open Source</h4> <h4>Open Source</h4>
<p i18n> <p i18n>
@ -105,7 +106,9 @@
class="mr-1" class="mr-1"
name="checkmark-circle-outline" name="checkmark-circle-outline"
></ion-icon> ></ion-icon>
<a i18n [routerLink]="['/features']">and more Features...</a> <a i18n [routerLink]="['/features']"
>and more Features...</a
>
</li> </li>
<li class="align-items-center d-flex mb-1"> <li class="align-items-center d-flex mb-1">
<ion-icon <ion-icon
@ -127,13 +130,16 @@
<small>&nbsp;</small> <small>&nbsp;</small>
</p> </p>
</div> </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' }"
> >
<mat-card-content class="d-flex flex-column h-100">
<div class="flex-grow-1"> <div class="flex-grow-1">
<div class="align-items-center d-flex mb-2"> <div class="align-items-center d-flex mb-2">
<h4 class="flex-grow-1 m-0">Basic</h4> <h4 class="flex-grow-1 m-0">Basic</h4>
@ -193,13 +199,16 @@
<small>&nbsp;</small> <small>&nbsp;</small>
</p> </p>
</div> </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 === 'Premium' }" [ngClass]="{ 'active': user?.subscription?.type === 'Premium' }"
> >
<mat-card-content class="d-flex flex-column h-100">
<div class="flex-grow-1"> <div class="flex-grow-1">
<div class="align-items-center d-flex mb-2"> <div class="align-items-center d-flex mb-2">
<h4 class="align-items-center d-flex flex-grow-1 m-0"> <h4 class="align-items-center d-flex flex-grow-1 m-0">
@ -293,7 +302,9 @@
class="mr-1" class="mr-1"
name="checkmark-circle-outline" name="checkmark-circle-outline"
></ion-icon> ></ion-icon>
<a i18n [routerLink]="['/features']">and more Features...</a> <a i18n [routerLink]="['/features']"
>and more Features...</a
>
</li> </li>
<li class="align-items-center d-flex mb-1"> <li class="align-items-center d-flex mb-1">
<ion-icon <ion-icon
@ -326,10 +337,14 @@
class="mt-3 text-center" class="mt-3 text-center"
> >
<a color="primary" mat-flat-button [routerLink]="['/account']"> <a color="primary" mat-flat-button [routerLink]="['/account']">
<ng-container *ngIf="user.subscription.offer === 'default'" i18n <ng-container
*ngIf="user.subscription.offer === 'default'"
i18n
>Upgrade Plan</ng-container >Upgrade Plan</ng-container
> >
<ng-container *ngIf="user.subscription.offer === 'renewal'" i18n <ng-container
*ngIf="user.subscription.offer === 'renewal'"
i18n
>Renew Plan</ng-container >Renew Plan</ng-container
> >
</a> </a>
@ -337,6 +352,7 @@
<small i18n>One-time payment, no auto-renewal.</small> <small i18n>One-time payment, no auto-renewal.</small>
</p> </p>
</div> </div>
</mat-card-content>
</mat-card> </mat-card>
</div> </div>
</div> </div>

2
apps/client/src/app/pages/pricing/pricing-page.module.ts
Unescape 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
Unescape 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);

12
apps/client/src/app/pages/public/public-page.html
Unescape 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>
<div class="world-map-chart-container">
<gf-world-map-chart <gf-world-map-chart
format="{0}%" format="{0}%"
[countries]="countries" [countries]="countries"
[isInPercent]="true" [isInPercent]="true"
></gf-world-map-chart> ></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
Unescape 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
Unescape 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
Unescape 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
Unescape 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