From 5f9cd9cb16eabda7cb928fdcfe900213110e24bc Mon Sep 17 00:00:00 2001 From: Sony Thomas Date: Sat, 26 Oct 2024 14:14:42 +0530 Subject: [PATCH] update tab split --- .../resources-glossary.component.scss | 18 ++++++++++--- .../guides/resources-guides.component.scss | 18 ++++++++++--- .../markets/resources-markets.component.scss | 18 ++++++++++--- .../resources-overview.component.scss | 14 ++++++++--- .../overview/resources-overview.module.ts | 2 +- .../resources-page-routing.module.ts | 14 +++++------ .../resources/resources-page.component.ts | 8 +++++- .../app/pages/resources/resources-page.scss | 6 ----- .../pages/resources/shared/resource-page.scss | 25 ------------------- 9 files changed, 71 insertions(+), 52 deletions(-) delete mode 100644 apps/client/src/app/pages/resources/shared/resource-page.scss diff --git a/apps/client/src/app/pages/resources/glossary/resources-glossary.component.scss b/apps/client/src/app/pages/resources/glossary/resources-glossary.component.scss index af53f894b..c3109fdf7 100644 --- a/apps/client/src/app/pages/resources/glossary/resources-glossary.component.scss +++ b/apps/client/src/app/pages/resources/glossary/resources-glossary.component.scss @@ -1,5 +1,17 @@ -@import '../shared/resource-page'; - :host { - @include resource-page; + color: rgb(var(--dark-primary-text)); + display: block; + + a { + color: rgba(var(--palette-primary-500), 1); + font-weight: 500; + + &:hover { + color: rgba(var(--palette-primary-300), 1); + } + } +} + +:host-context(.theme-dark) { + color: rgb(var(--light-primary-text)); } diff --git a/apps/client/src/app/pages/resources/guides/resources-guides.component.scss b/apps/client/src/app/pages/resources/guides/resources-guides.component.scss index af53f894b..c3109fdf7 100644 --- a/apps/client/src/app/pages/resources/guides/resources-guides.component.scss +++ b/apps/client/src/app/pages/resources/guides/resources-guides.component.scss @@ -1,5 +1,17 @@ -@import '../shared/resource-page'; - :host { - @include resource-page; + color: rgb(var(--dark-primary-text)); + display: block; + + a { + color: rgba(var(--palette-primary-500), 1); + font-weight: 500; + + &:hover { + color: rgba(var(--palette-primary-300), 1); + } + } +} + +:host-context(.theme-dark) { + color: rgb(var(--light-primary-text)); } diff --git a/apps/client/src/app/pages/resources/markets/resources-markets.component.scss b/apps/client/src/app/pages/resources/markets/resources-markets.component.scss index af53f894b..c3109fdf7 100644 --- a/apps/client/src/app/pages/resources/markets/resources-markets.component.scss +++ b/apps/client/src/app/pages/resources/markets/resources-markets.component.scss @@ -1,5 +1,17 @@ -@import '../shared/resource-page'; - :host { - @include resource-page; + color: rgb(var(--dark-primary-text)); + display: block; + + a { + color: rgba(var(--palette-primary-500), 1); + font-weight: 500; + + &:hover { + color: rgba(var(--palette-primary-300), 1); + } + } +} + +:host-context(.theme-dark) { + color: rgb(var(--light-primary-text)); } diff --git a/apps/client/src/app/pages/resources/overview/resources-overview.component.scss b/apps/client/src/app/pages/resources/overview/resources-overview.component.scss index fff430794..c3109fdf7 100644 --- a/apps/client/src/app/pages/resources/overview/resources-overview.component.scss +++ b/apps/client/src/app/pages/resources/overview/resources-overview.component.scss @@ -1,7 +1,15 @@ -@import '../shared/resource-page'; - :host { - @include resource-page; + color: rgb(var(--dark-primary-text)); + display: block; + + a { + color: rgba(var(--palette-primary-500), 1); + font-weight: 500; + + &:hover { + color: rgba(var(--palette-primary-300), 1); + } + } } :host-context(.theme-dark) { diff --git a/apps/client/src/app/pages/resources/overview/resources-overview.module.ts b/apps/client/src/app/pages/resources/overview/resources-overview.module.ts index 6cac8ced4..8057e7d2f 100644 --- a/apps/client/src/app/pages/resources/overview/resources-overview.module.ts +++ b/apps/client/src/app/pages/resources/overview/resources-overview.module.ts @@ -7,6 +7,6 @@ import { ResourcesOverviewComponent } from './resources-overview.component'; @NgModule({ declarations: [ResourcesOverviewComponent], - imports: [CommonModule, RouterModule, ResourcesOverviewRoutingModule] + imports: [CommonModule, ResourcesOverviewRoutingModule, RouterModule] }) export class ResourcesOverviewModule {} diff --git a/apps/client/src/app/pages/resources/resources-page-routing.module.ts b/apps/client/src/app/pages/resources/resources-page-routing.module.ts index 38778b588..6983ac9f5 100644 --- a/apps/client/src/app/pages/resources/resources-page-routing.module.ts +++ b/apps/client/src/app/pages/resources/resources-page-routing.module.ts @@ -18,6 +18,13 @@ const routes: Routes = [ (m) => m.ResourcesOverviewModule ) }, + { + path: 'glossary', + loadChildren: () => + import('./glossary/resources-glossary.module').then( + (m) => m.ResourcesGlossaryPageModule + ) + }, { path: 'guides', loadChildren: () => @@ -31,13 +38,6 @@ const routes: Routes = [ import('./markets/resources-markets.module').then( (m) => m.ResourcesMarketsModule ) - }, - { - path: 'glossary', - loadChildren: () => - import('./glossary/resources-glossary.module').then( - (m) => m.ResourcesGlossaryPageModule - ) } ] } diff --git a/apps/client/src/app/pages/resources/resources-page.component.ts b/apps/client/src/app/pages/resources/resources-page.component.ts index 86d7c42ac..010dd4cb5 100644 --- a/apps/client/src/app/pages/resources/resources-page.component.ts +++ b/apps/client/src/app/pages/resources/resources-page.component.ts @@ -3,6 +3,7 @@ import { InfoItem } from '@ghostfolio/common/interfaces'; import { hasPermission, permissions } from '@ghostfolio/common/permissions'; import { Component, OnInit } from '@angular/core'; +import { DeviceDetectorService } from 'ngx-device-detector'; import { Subject } from 'rxjs'; @Component({ @@ -12,6 +13,7 @@ import { Subject } from 'rxjs'; styleUrls: ['./resources-page.scss'] }) export class ResourcesPageComponent implements OnInit { + public deviceType: string; public hasPermissionForSubscription: boolean; public info: InfoItem; public routerLinkFaq = ['/' + $localize`:snake-case:faq`]; @@ -44,11 +46,15 @@ export class ResourcesPageComponent implements OnInit { private unsubscribeSubject = new Subject(); - public constructor(private dataService: DataService) { + public constructor( + private dataService: DataService, + private deviceService: DeviceDetectorService + ) { this.info = this.dataService.fetchInfo(); } public ngOnInit() { + this.deviceType = this.deviceService.getDeviceInfo().deviceType; this.hasPermissionForSubscription = hasPermission( this.info?.globalPermissions, permissions.enableSubscription diff --git a/apps/client/src/app/pages/resources/resources-page.scss b/apps/client/src/app/pages/resources/resources-page.scss index 3bb174316..5b975ff60 100644 --- a/apps/client/src/app/pages/resources/resources-page.scss +++ b/apps/client/src/app/pages/resources/resources-page.scss @@ -1,15 +1,9 @@ -@import './shared/resource-page'; - :host { display: flex; flex-direction: row; height: 100%; } -::ng-deep .resource-content { - @include resource-page; -} - @media (max-width: 599px) { :host { flex-direction: column-reverse; diff --git a/apps/client/src/app/pages/resources/shared/resource-page.scss b/apps/client/src/app/pages/resources/shared/resource-page.scss deleted file mode 100644 index a4fbe04fd..000000000 --- a/apps/client/src/app/pages/resources/shared/resource-page.scss +++ /dev/null @@ -1,25 +0,0 @@ -@mixin resource-page { - display: block; - padding: 1rem; - color: rgb(var(--dark-primary-text)); - - .container { - max-width: 800px; - margin: 0 auto; - } - - a { - color: rgba(var(--palette-primary-500), 1); - font-weight: 500; - text-decoration: none; - - &:hover { - color: rgba(var(--palette-primary-300), 1); - text-decoration: underline; - } - } - - :host-context(.theme-dark) & { - color: rgb(var(--light-primary-text)); - } -}