From 79b33e95f63b15583a52dca0a432e7ddacbbfa74 Mon Sep 17 00:00:00 2001 From: Sony Thomas Date: Fri, 25 Oct 2024 12:37:32 +0530 Subject: [PATCH] update refactor code --- .vscode/settings.json | 3 +- .../resources-glossary.component.scss | 48 +------------ .../glossary/resources-glossary.component.ts | 4 +- .../guides/resources-guides.component.scss | 44 +----------- .../guides/resources-guides.component.ts | 4 +- .../markets/resources-markets.component.html | 20 +++--- .../markets/resources-markets.component.scss | 55 +-------------- .../markets/resources-markets.component.ts | 4 +- .../resources-overview.component.html | 2 +- .../resources-overview.component.scss | 40 +---------- .../overview/resources-overview.component.ts | 4 +- .../resources-page-routing.module.ts | 18 ++--- .../resources/resources-page.component.ts | 14 +++- .../pages/resources/resources-page.module.ts | 2 +- .../app/pages/resources/resources-page.scss | 68 ++----------------- .../pages/resources/shared/resource-page.scss | 25 +++++++ 16 files changed, 78 insertions(+), 277 deletions(-) create mode 100644 apps/client/src/app/pages/resources/shared/resource-page.scss diff --git a/.vscode/settings.json b/.vscode/settings.json index ba68f1b50..9bf4d12b5 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,5 +1,4 @@ { "editor.defaultFormatter": "esbenp.prettier-vscode", - "editor.formatOnSave": true, - "vsicons.presets.angular": true + "editor.formatOnSave": true } 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 e2d265315..af53f894b 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,47 +1,5 @@ -:host { - display: block; - padding: 1rem; -} - -// Target the parent panel -:host-context(.mat-tab-nav-panel) { - -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; /* Firefox */ - - &::-webkit-scrollbar { - /* Chrome, Safari and Opera */ - display: none; - } -} - -.container { - max-width: 800px; - margin: 0 auto; -} +@import '../shared/resource-page'; -h1 { - margin-bottom: 2rem; -} - -.glossary-list { - .mb-4 { - margin-bottom: 2rem; - } - - h3 { - margin-bottom: 0.5rem; - } - - p { - margin-bottom: 0.5rem; - } - - a { - color: #007bff; - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } +:host { + @include resource-page; } diff --git a/apps/client/src/app/pages/resources/glossary/resources-glossary.component.ts b/apps/client/src/app/pages/resources/glossary/resources-glossary.component.ts index 4360c3b23..8f0bded53 100644 --- a/apps/client/src/app/pages/resources/glossary/resources-glossary.component.ts +++ b/apps/client/src/app/pages/resources/glossary/resources-glossary.component.ts @@ -2,8 +2,8 @@ import { Component } from '@angular/core'; @Component({ selector: 'gf-resources-glossary', - templateUrl: './resources-glossary.component.html', - styleUrls: ['./resources-glossary.component.scss'] + styleUrls: ['./resources-glossary.component.scss'], + templateUrl: './resources-glossary.component.html' }) export class ResourcesGlossaryPageComponent { public glossaryItems = [ 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 4e9a621c1..af53f894b 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,43 +1,5 @@ -:host { - display: block; - color: rgb(var(--dark-primary-text)); - - .container { - max-width: 800px; - margin: 0 auto; - } - - h1 { - margin-bottom: 2rem; - } - - .guides-list { - .mb-4 { - margin-bottom: 2rem; - } - - h3 { - margin-top: 0; - margin-bottom: 0.5rem; - } +@import '../shared/resource-page'; - p { - margin-bottom: 0.5rem; - } - - 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)); +:host { + @include resource-page; } diff --git a/apps/client/src/app/pages/resources/guides/resources-guides.component.ts b/apps/client/src/app/pages/resources/guides/resources-guides.component.ts index 06852b2fb..851f6e3e0 100644 --- a/apps/client/src/app/pages/resources/guides/resources-guides.component.ts +++ b/apps/client/src/app/pages/resources/guides/resources-guides.component.ts @@ -2,8 +2,8 @@ import { Component } from '@angular/core'; @Component({ selector: 'gf-resources-guides', - templateUrl: './resources-guides.component.html', - styleUrls: ['./resources-guides.component.scss'] + styleUrls: ['./resources-guides.component.scss'], + templateUrl: './resources-guides.component.html' }) export class ResourcesGuidesComponent { public guides = [ diff --git a/apps/client/src/app/pages/resources/markets/resources-markets.component.html b/apps/client/src/app/pages/resources/markets/resources-markets.component.html index e6aae43c2..a1a3788ac 100644 --- a/apps/client/src/app/pages/resources/markets/resources-markets.component.html +++ b/apps/client/src/app/pages/resources/markets/resources-markets.component.html @@ -1,16 +1,12 @@
-
-
-

Markets

-
- @for (resource of marketResources; track resource) { -
-

{{ resource.title }}

-

{{ resource.description }}

- View resource → -
- } +

Markets

+
+ @for (resource of marketResources; track resource) { +
+

{{ resource.title }}

+

{{ resource.description }}

+ View resource →
-
+ }
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 f02ff31be..af53f894b 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,54 +1,5 @@ -:host { - color: rgb(var(--dark-primary-text)); - display: block; - - .market-resources { - display: grid; - gap: 1rem; - grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); - - .mat-mdc-card { - height: 100%; - transition: border-color 0.3s ease; - - &:hover { - border-color: var(--gf-theme-primary-500); - } - - .mat-mdc-card-header { - .mat-mdc-card-title { - font-size: 1.1rem; - } - } - - .mat-mdc-card-content { - font-size: 0.9rem; - } +@import '../shared/resource-page'; - .mat-mdc-card-actions { - padding: 0 1rem 1rem; - } - - 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)); - - .market-resources { - .mat-mdc-card { - background-color: rgba(var(--palette-background-card-dark), 1); - } - } +:host { + @include resource-page; } diff --git a/apps/client/src/app/pages/resources/markets/resources-markets.component.ts b/apps/client/src/app/pages/resources/markets/resources-markets.component.ts index 32585d496..9e1e6c9e0 100644 --- a/apps/client/src/app/pages/resources/markets/resources-markets.component.ts +++ b/apps/client/src/app/pages/resources/markets/resources-markets.component.ts @@ -2,8 +2,8 @@ import { Component } from '@angular/core'; @Component({ selector: 'gf-resources-markets', - templateUrl: './resources-markets.component.html', - styleUrls: ['./resources-markets.component.scss'] + styleUrls: ['./resources-markets.component.scss'], + templateUrl: './resources-markets.component.html' }) export class ResourcesMarketsComponent { public marketResources = [ diff --git a/apps/client/src/app/pages/resources/overview/resources-overview.component.html b/apps/client/src/app/pages/resources/overview/resources-overview.component.html index 3a3cfb915..1782ee20b 100644 --- a/apps/client/src/app/pages/resources/overview/resources-overview.component.html +++ b/apps/client/src/app/pages/resources/overview/resources-overview.component.html @@ -1,7 +1,7 @@
-

Resources Overview

+

Resources

@for (item of overviewItems; track item) {
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 8ff4cc7a0..fff430794 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,41 +1,7 @@ -:host { - display: block; - color: rgb(var(--dark-primary-text)); -} - -.container { - max-width: 800px; - margin: 0 auto; -} - -h1 { - margin-bottom: 2rem; -} +@import '../shared/resource-page'; -.overview-list { - .mb-4 { - margin-bottom: 2rem; - } - - h3 { - margin-top: 0; - margin-bottom: 0.5rem; - } - - p { - margin-bottom: 0.5rem; - } - - 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 { + @include resource-page; } :host-context(.theme-dark) { diff --git a/apps/client/src/app/pages/resources/overview/resources-overview.component.ts b/apps/client/src/app/pages/resources/overview/resources-overview.component.ts index f790d2fe9..02c48b820 100644 --- a/apps/client/src/app/pages/resources/overview/resources-overview.component.ts +++ b/apps/client/src/app/pages/resources/overview/resources-overview.component.ts @@ -2,8 +2,8 @@ import { Component } from '@angular/core'; @Component({ selector: 'gf-resources-overview', - templateUrl: './resources-overview.component.html', - styleUrls: ['./resources-overview.component.scss'] + styleUrls: ['./resources-overview.component.scss'], + templateUrl: './resources-overview.component.html' }) export class ResourcesOverviewComponent { public overviewItems = [ 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 e8edfeaa1..38778b588 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 @@ -3,10 +3,6 @@ import { AuthGuard } from '@ghostfolio/client/core/auth.guard'; import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -// import { ResourcesGlossaryPageComponent } from './glossary/resources-glossary.component'; -// import { ResourcesGuidesComponent } from './guides/resources-guides.component'; -// import { ResourcesMarketsComponent } from './markets/resources-markets.component'; -// import { ResourcesOverviewComponent } from './overview/resources-overview.component'; import { ResourcesPageComponent } from './resources-page.component'; const routes: Routes = [ @@ -15,6 +11,13 @@ const routes: Routes = [ component: ResourcesPageComponent, canActivate: [AuthGuard], children: [ + { + path: '', + loadChildren: () => + import('./overview/resources-overview.module').then( + (m) => m.ResourcesOverviewModule + ) + }, { path: 'guides', loadChildren: () => @@ -35,13 +38,6 @@ const routes: Routes = [ import('./glossary/resources-glossary.module').then( (m) => m.ResourcesGlossaryPageModule ) - }, - { - path: '', - loadChildren: () => - import('./overview/resources-overview.module').then( - (m) => m.ResourcesOverviewModule - ) } ] } 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 298064632..86d7c42ac 100644 --- a/apps/client/src/app/pages/resources/resources-page.component.ts +++ b/apps/client/src/app/pages/resources/resources-page.component.ts @@ -25,13 +25,21 @@ export class ResourcesPageComponent implements OnInit { label: $localize`Overview`, iconName: 'information-circle-outline' }, - { path: 'guides', label: $localize`Guides`, iconName: 'book-outline' }, + { + path: 'guides', + label: $localize`Guides`, + iconName: 'book-outline' + }, + { + path: 'glossary', + label: $localize`Glossary`, + iconName: 'list-outline' + }, { path: 'markets', label: $localize`Markets`, iconName: 'trending-up-outline' - }, - { path: 'glossary', label: $localize`Glossary`, iconName: 'list-outline' } + } ]; private unsubscribeSubject = new Subject(); diff --git a/apps/client/src/app/pages/resources/resources-page.module.ts b/apps/client/src/app/pages/resources/resources-page.module.ts index c324d1bca..de14a67ba 100644 --- a/apps/client/src/app/pages/resources/resources-page.module.ts +++ b/apps/client/src/app/pages/resources/resources-page.module.ts @@ -10,8 +10,8 @@ import { ResourcesPageComponent } from './resources-page.component'; declarations: [ResourcesPageComponent], imports: [ CommonModule, - ResourcesPageRoutingModule, MatTabsModule, + ResourcesPageRoutingModule, RouterModule ], schemas: [CUSTOM_ELEMENTS_SCHEMA] diff --git a/apps/client/src/app/pages/resources/resources-page.scss b/apps/client/src/app/pages/resources/resources-page.scss index 7a197412b..3bb174316 100644 --- a/apps/client/src/app/pages/resources/resources-page.scss +++ b/apps/client/src/app/pages/resources/resources-page.scss @@ -1,77 +1,17 @@ +@import './shared/resource-page'; + :host { - color: rgb(var(--dark-primary-text)); display: flex; flex-direction: row; height: 100%; - - // Add this to ensure proper ordering - nav { - order: 1; // This will force the nav to be first - } - - 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)); -} - -.mat-tab-nav-bar { - border-top: none; - border-right: 1px solid rgba(0, 0, 0, 0.12); - flex-direction: column; - width: 240px; -} - -.mat-tab-link { - flex-direction: row; - justify-content: flex-start; - height: 48px; - padding: 0 16px; - min-width: auto; - - ion-icon { - font-size: 24px; - } - - .d-none { - margin-left: 8px; - } +::ng-deep .resource-content { + @include resource-page; } @media (max-width: 599px) { :host { flex-direction: column-reverse; } - - .mat-tab-nav-bar { - width: 100%; - border-right: none; - border-top: 1px solid rgba(0, 0, 0, 0.12); - } - - .mat-tab-link { - flex-direction: column; - height: auto; - padding: 8px 16px; - - ion-icon { - font-size: 28px; - } - } -} - -.flex-grow-1 { - flex-grow: 1; -} - -.overflow-auto { - overflow: auto; } diff --git a/apps/client/src/app/pages/resources/shared/resource-page.scss b/apps/client/src/app/pages/resources/shared/resource-page.scss new file mode 100644 index 000000000..a4fbe04fd --- /dev/null +++ b/apps/client/src/app/pages/resources/shared/resource-page.scss @@ -0,0 +1,25 @@ +@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)); + } +}