From a5331dd32b33e20d45dc1abf679c64241b7f1720 Mon Sep 17 00:00:00 2001 From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com> Date: Sun, 20 Oct 2024 17:59:44 +0200 Subject: [PATCH] Feature/optimize dialog sizes for mobile (#3964) * Optimize dialog sizes for mobile * Update changelog --- CHANGELOG.md | 4 + apps/client/src/app/app.component.ts | 3 +- .../admin-market-data-detail.component.ts | 2 +- .../admin-market-data.component.ts | 2 +- .../admin-platform.component.ts | 4 +- .../admin-settings.component.ts | 2 +- .../admin-tag/admin-tag.component.ts | 4 +- .../interfaces/interfaces.ts | 6 +- ...scription-interstitial-dialog.component.ts | 7 +- .../subscription-interstitial-dialog.html | 152 +++++++++++------- ...subscription-interstitial-dialog.module.ts | 2 + .../user-account-access.component.ts | 2 +- .../pages/accounts/accounts-page.component.ts | 6 +- .../activities/activities-page.component.ts | 4 +- .../allocations/allocations-page.component.ts | 2 +- .../src/app/services/user/user.service.ts | 6 +- apps/client/src/styles.scss | 4 + apps/client/src/styles/theme.scss | 1 + .../src/lib/benchmark/benchmark.component.ts | 2 +- 19 files changed, 136 insertions(+), 79 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 707d32f1d..f7e67394e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## Unreleased +### Changed + +- Optimized the dialog sizes for mobile (full screen) + ### Fixed - Fixed the warning `export was not found` in connection with `GetValuesParams` diff --git a/apps/client/src/app/app.component.ts b/apps/client/src/app/app.component.ts index eed29a757..bc16f8080 100644 --- a/apps/client/src/app/app.component.ts +++ b/apps/client/src/app/app.component.ts @@ -313,8 +313,7 @@ export class AppComponent implements OnDestroy, OnInit { !this.user?.settings?.isRestrictedView, locale: this.user?.settings?.locale }, - height: this.deviceType === 'mobile' ? '97.5vh' : '80vh', - maxWidth: this.deviceType === 'mobile' ? '95vw' : '50rem', + height: this.deviceType === 'mobile' ? '98vh' : '80vh', width: this.deviceType === 'mobile' ? '100vw' : '50rem' }); diff --git a/apps/client/src/app/components/admin-market-data-detail/admin-market-data-detail.component.ts b/apps/client/src/app/components/admin-market-data-detail/admin-market-data-detail.component.ts index 49882536d..c8ba46851 100644 --- a/apps/client/src/app/components/admin-market-data-detail/admin-market-data-detail.component.ts +++ b/apps/client/src/app/components/admin-market-data-detail/admin-market-data-detail.component.ts @@ -186,7 +186,7 @@ export class AdminMarketDataDetailComponent implements OnChanges { symbol: this.symbol, user: this.user }, - height: this.deviceType === 'mobile' ? '97.5vh' : '80vh', + height: this.deviceType === 'mobile' ? '98vh' : '80vh', width: this.deviceType === 'mobile' ? '100vw' : '50rem' }); diff --git a/apps/client/src/app/components/admin-market-data/admin-market-data.component.ts b/apps/client/src/app/components/admin-market-data/admin-market-data.component.ts index 549708d87..d833ba7dd 100644 --- a/apps/client/src/app/components/admin-market-data/admin-market-data.component.ts +++ b/apps/client/src/app/components/admin-market-data/admin-market-data.component.ts @@ -382,7 +382,7 @@ export class AdminMarketDataComponent deviceType: this.deviceType, locale: this.user?.settings?.locale }, - height: this.deviceType === 'mobile' ? '97.5vh' : '80vh', + height: this.deviceType === 'mobile' ? '98vh' : '80vh', width: this.deviceType === 'mobile' ? '100vw' : '50rem' }); diff --git a/apps/client/src/app/components/admin-platform/admin-platform.component.ts b/apps/client/src/app/components/admin-platform/admin-platform.component.ts index 2c0aa345e..a390ae24e 100644 --- a/apps/client/src/app/components/admin-platform/admin-platform.component.ts +++ b/apps/client/src/app/components/admin-platform/admin-platform.component.ts @@ -139,7 +139,7 @@ export class AdminPlatformComponent implements OnInit, OnDestroy { url: null } }, - height: this.deviceType === 'mobile' ? '97.5vh' : undefined, + height: this.deviceType === 'mobile' ? '98vh' : undefined, width: this.deviceType === 'mobile' ? '100vw' : '50rem' }); @@ -176,7 +176,7 @@ export class AdminPlatformComponent implements OnInit, OnDestroy { url } }, - height: this.deviceType === 'mobile' ? '97.5vh' : undefined, + height: this.deviceType === 'mobile' ? '98vh' : undefined, width: this.deviceType === 'mobile' ? '100vw' : '50rem' }); diff --git a/apps/client/src/app/components/admin-settings/admin-settings.component.ts b/apps/client/src/app/components/admin-settings/admin-settings.component.ts index 51fd81576..2dd2555bd 100644 --- a/apps/client/src/app/components/admin-settings/admin-settings.component.ts +++ b/apps/client/src/app/components/admin-settings/admin-settings.component.ts @@ -59,7 +59,7 @@ export class AdminSettingsComponent implements OnDestroy, OnInit { deviceType: this.deviceType, pricingUrl: this.pricingUrl }, - height: this.deviceType === 'mobile' ? '97.5vh' : undefined, + height: this.deviceType === 'mobile' ? '98vh' : undefined, width: this.deviceType === 'mobile' ? '100vw' : '50rem' }); } diff --git a/apps/client/src/app/components/admin-tag/admin-tag.component.ts b/apps/client/src/app/components/admin-tag/admin-tag.component.ts index 3333f7176..03eef4cc7 100644 --- a/apps/client/src/app/components/admin-tag/admin-tag.component.ts +++ b/apps/client/src/app/components/admin-tag/admin-tag.component.ts @@ -138,7 +138,7 @@ export class AdminTagComponent implements OnInit, OnDestroy { name: null } }, - height: this.deviceType === 'mobile' ? '97.5vh' : undefined, + height: this.deviceType === 'mobile' ? '98vh' : undefined, width: this.deviceType === 'mobile' ? '100vw' : '50rem' }); @@ -174,7 +174,7 @@ export class AdminTagComponent implements OnInit, OnDestroy { name } }, - height: this.deviceType === 'mobile' ? '97.5vh' : undefined, + height: this.deviceType === 'mobile' ? '98vh' : undefined, width: this.deviceType === 'mobile' ? '100vw' : '50rem' }); diff --git a/apps/client/src/app/components/subscription-interstitial-dialog/interfaces/interfaces.ts b/apps/client/src/app/components/subscription-interstitial-dialog/interfaces/interfaces.ts index d93de3c4a..4bcf3549b 100644 --- a/apps/client/src/app/components/subscription-interstitial-dialog/interfaces/interfaces.ts +++ b/apps/client/src/app/components/subscription-interstitial-dialog/interfaces/interfaces.ts @@ -1 +1,5 @@ -export interface SubscriptionInterstitialDialogParams {} +import { User } from '@ghostfolio/common/interfaces'; + +export interface SubscriptionInterstitialDialogParams { + user: User; +} diff --git a/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.component.ts b/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.component.ts index fb852c920..8e3afba27 100644 --- a/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.component.ts +++ b/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.component.ts @@ -11,12 +11,17 @@ import { SubscriptionInterstitialDialogParams } from './interfaces/interfaces'; templateUrl: 'subscription-interstitial-dialog.html' }) export class SubscriptionInterstitialDialog { + private readonly VARIANTS_COUNT = 2; + public routerLinkPricing = ['/' + $localize`:snake-case:pricing`]; + public variantIndex: number; public constructor( @Inject(MAT_DIALOG_DATA) public data: SubscriptionInterstitialDialogParams, public dialogRef: MatDialogRef - ) {} + ) { + this.variantIndex = Math.floor(Math.random() * this.VARIANTS_COUNT); + } public closeDialog() { this.dialogRef.close({}); diff --git a/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.html b/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.html index 102da79f6..b9b96f9a8 100644 --- a/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.html +++ b/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.html @@ -1,62 +1,98 @@ -
-
-
-
+@switch (variantIndex) { + @case (0) { +
+
+
+
+
+
+
+
+ Ghostfolio Premium + +
+
+ Are you an ambitious investor who needs the full picture? +
+

+ Upgrade to Ghostfolio Premium today and gain access to exclusive + features to enhance your investment experience: +

+
    +
  • + + Portfolio Summary +
    • +
  • + + Portfolio Allocations +
    • +
  • + + Performance Benchmarks +
    • +
  • + + FIRE Calculator +
    • +
  • + + Professional Data Provider +
    • +
  • + + and more Features... +
    • +
+

+ Get the tools to effectively manage your finances and refine your + personal investment strategy. +

+
-
-
-
+
+ + + Upgrade Plan + + +
+ } + @case (1) { +

Ghostfolio Premium -

-
- Are you an ambitious investor who needs the full picture? + +
+
+ +
+
+
+ + + Join now + +
-

- Upgrade to Ghostfolio Premium today and gain access to exclusive features - to enhance your investment experience: -

-
    -
  • - - Portfolio Summary -
    • -
  • - - Portfolio Allocations -
    • -
  • - - Performance Benchmarks -
    • -
  • - - FIRE Calculator -
    • -
  • - - Professional Data Provider -
    • -
  • - - and more Features... -
    • -
-

- Get the tools to effectively manage your finances and refine your personal - investment strategy. -

-
-
-
- - - Upgrade Plan - - -
+ } +} diff --git a/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.module.ts b/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.module.ts index 36bc931b0..bdb2614b5 100644 --- a/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.module.ts +++ b/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.module.ts @@ -1,3 +1,4 @@ +import { GfMembershipCardComponent } from '@ghostfolio/ui/membership-card'; import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator'; import { CommonModule } from '@angular/common'; @@ -12,6 +13,7 @@ import { SubscriptionInterstitialDialog } from './subscription-interstitial-dial declarations: [SubscriptionInterstitialDialog], imports: [ CommonModule, + GfMembershipCardComponent, GfPremiumIndicatorComponent, MatButtonModule, MatDialogModule, diff --git a/apps/client/src/app/components/user-account-access/user-account-access.component.ts b/apps/client/src/app/components/user-account-access/user-account-access.component.ts index 2a4452485..16a7627c9 100644 --- a/apps/client/src/app/components/user-account-access/user-account-access.component.ts +++ b/apps/client/src/app/components/user-account-access/user-account-access.component.ts @@ -111,7 +111,7 @@ export class UserAccountAccessComponent implements OnDestroy, OnInit { type: 'PRIVATE' } }, - height: this.deviceType === 'mobile' ? '97.5vh' : undefined, + height: this.deviceType === 'mobile' ? '98vh' : undefined, width: this.deviceType === 'mobile' ? '100vw' : '50rem' }); diff --git a/apps/client/src/app/pages/accounts/accounts-page.component.ts b/apps/client/src/app/pages/accounts/accounts-page.component.ts index 6a9ee14a4..88ad3c6a0 100644 --- a/apps/client/src/app/pages/accounts/accounts-page.component.ts +++ b/apps/client/src/app/pages/accounts/accounts-page.component.ts @@ -184,7 +184,7 @@ export class AccountsPageComponent implements OnDestroy, OnInit { platformId } }, - height: this.deviceType === 'mobile' ? '97.5vh' : '80vh', + height: this.deviceType === 'mobile' ? '98vh' : '80vh', width: this.deviceType === 'mobile' ? '100vw' : '50rem' }); @@ -231,7 +231,7 @@ export class AccountsPageComponent implements OnDestroy, OnInit { hasPermission(this.user?.permissions, permissions.createOrder) && !this.user?.settings?.isRestrictedView }, - height: this.deviceType === 'mobile' ? '97.5vh' : '80vh', + height: this.deviceType === 'mobile' ? '98vh' : '80vh', width: this.deviceType === 'mobile' ? '100vw' : '50rem' }); @@ -257,7 +257,7 @@ export class AccountsPageComponent implements OnDestroy, OnInit { platformId: null } }, - height: this.deviceType === 'mobile' ? '97.5vh' : '80vh', + height: this.deviceType === 'mobile' ? '98vh' : '80vh', width: this.deviceType === 'mobile' ? '100vw' : '50rem' }); diff --git a/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts b/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts index 427637c2c..8cab0741d 100644 --- a/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts +++ b/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts @@ -272,7 +272,7 @@ export class ActivitiesPageComponent implements OnDestroy, OnInit { accounts: this.user?.accounts, user: this.user }, - height: this.deviceType === 'mobile' ? '97.5vh' : '80vh', + height: this.deviceType === 'mobile' ? '98vh' : '80vh', width: this.deviceType === 'mobile' ? '100vw' : '50rem' }); @@ -321,7 +321,7 @@ export class ActivitiesPageComponent implements OnDestroy, OnInit { }, user: this.user }, - height: this.deviceType === 'mobile' ? '97.5vh' : '80vh', + height: this.deviceType === 'mobile' ? '98vh' : '80vh', width: this.deviceType === 'mobile' ? '100vw' : '50rem' }); diff --git a/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts b/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts index 9b0384d39..8ff0554cb 100644 --- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts +++ b/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts @@ -514,7 +514,7 @@ export class AllocationsPageComponent implements OnDestroy, OnInit { hasPermission(this.user?.permissions, permissions.createOrder) && !this.user?.settings?.isRestrictedView }, - height: this.deviceType === 'mobile' ? '97.5vh' : '80vh', + height: this.deviceType === 'mobile' ? '98vh' : '80vh', width: this.deviceType === 'mobile' ? '100vw' : '50rem' }); diff --git a/apps/client/src/app/services/user/user.service.ts b/apps/client/src/app/services/user/user.service.ts index 4366c4e6a..eef0b2f41 100644 --- a/apps/client/src/app/services/user/user.service.ts +++ b/apps/client/src/app/services/user/user.service.ts @@ -104,8 +104,10 @@ export class UserService extends ObservableStore { ) { const dialogRef = this.dialog.open(SubscriptionInterstitialDialog, { autoFocus: false, - data: {}, - height: this.deviceType === 'mobile' ? '97.5vh' : '80vh', + data: { + user + }, + height: this.deviceType === 'mobile' ? '98vh' : '80vh', width: this.deviceType === 'mobile' ? '100vw' : '50rem' }); diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss index b72583050..b13b088b7 100644 --- a/apps/client/src/styles.scss +++ b/apps/client/src/styles.scss @@ -369,6 +369,10 @@ ngx-skeleton-loader { cursor: pointer; } +.gf-pointer-events-none { + pointer-events: none; +} + .gf-spacer { flex: 1 1 auto; } diff --git a/apps/client/src/styles/theme.scss b/apps/client/src/styles/theme.scss index f437ec676..54adf601a 100644 --- a/apps/client/src/styles/theme.scss +++ b/apps/client/src/styles/theme.scss @@ -114,6 +114,7 @@ $gf-theme-dark: mat.m2-define-dark-theme( --gf-theme-secondary-500: #3686cf; --gf-theme-secondary-500-rgb: 78, 208, 94; + --mat-dialog-container-small-max-width: 96vw; --mdc-filled-button-label-text-tracking: normal; --mdc-outlined-button-label-text-tracking: normal; --mdc-text-button-label-text-tracking: normal; diff --git a/libs/ui/src/lib/benchmark/benchmark.component.ts b/libs/ui/src/lib/benchmark/benchmark.component.ts index 22bc9a128..f2298a64c 100644 --- a/libs/ui/src/lib/benchmark/benchmark.component.ts +++ b/libs/ui/src/lib/benchmark/benchmark.component.ts @@ -116,7 +116,7 @@ export class GfBenchmarkComponent implements OnChanges, OnDestroy { deviceType: this.deviceType, locale: this.locale }, - height: this.deviceType === 'mobile' ? '97.5vh' : undefined, + height: this.deviceType === 'mobile' ? '98vh' : undefined, width: this.deviceType === 'mobile' ? '100vw' : '50rem' });