diff --git a/CHANGELOG.md b/CHANGELOG.md index fff9bb217..9e10fe5f4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed +- Improved the style of the system message - Upgraded _Postgres_ from version `12` to `15` in the `docker-compose` files ## 2.1.0 - 2023-09-15 diff --git a/apps/client/src/app/app.component.html b/apps/client/src/app/app.component.html index c9457cfc0..b8dfbdb9c 100644 --- a/apps/client/src/app/app.component.html +++ b/apps/client/src/app/app.component.html @@ -1,37 +1,26 @@
- -
- -
-
-
+
+
- You are using the Live Demo. - Create Account + You are using the Live Demo. + Create Account
{{ info.systemMessage }} @@ -40,6 +29,18 @@
+ + + +
diff --git a/apps/client/src/app/app.component.scss b/apps/client/src/app/app.component.scss index 0c0828880..2cc6d9a17 100644 --- a/apps/client/src/app/app.component.scss +++ b/apps/client/src/app/app.component.scss @@ -4,31 +4,47 @@ display: block; min-height: 100vh; + &.has-info-message { + header { + height: calc(2 * var(--mat-toolbar-standard-height)); + + .info-message-container { + height: var(--mat-toolbar-standard-height); + + .info-message-inner-container { + background-color: rgba(var(--palette-primary-500), 1); + height: var(--mat-toolbar-standard-height); + z-index: 999; + + .info-message { + color: rgba(var(--palette-foreground-text), 1); + font-size: 80%; + max-width: 100%; + + .a { + font-weight: 500; + } + } + } + } + } + + main { + min-height: calc(100vh - 2 * var(--mat-toolbar-standard-height)); + } + } + footer { background-color: rgba(var(--palette-foreground-text), 0.05); font-size: 90%; } + header { + height: var(--mat-toolbar-standard-height); + } + main { - min-height: 100vh; - padding-top: 5rem; - - .info-message-container { - height: 3.5rem; - margin-top: -0.5rem; - - .info-message { - background-color: rgba(var(--palette-foreground-text), 0.05); - border-radius: 2rem; - font-size: 80%; - max-width: 100%; - - .a { - color: rgba(var(--palette-primary-500), 1); - font-weight: 500; - } - } - } + min-height: calc(100vh - var(--mat-toolbar-standard-height)); } } @@ -36,12 +52,4 @@ footer { background-color: rgba(var(--palette-foreground-text-dark), 0.05); } - - main { - .info-message-container { - .info-message { - background-color: rgba(var(--palette-foreground-text-dark), 0.05); - } - } - } } diff --git a/apps/client/src/app/app.component.ts b/apps/client/src/app/app.component.ts index dd6240d98..f260f4bbd 100644 --- a/apps/client/src/app/app.component.ts +++ b/apps/client/src/app/app.component.ts @@ -3,6 +3,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, + HostBinding, Inject, OnDestroy, OnInit @@ -28,14 +29,20 @@ import { UserService } from './services/user/user.service'; styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnDestroy, OnInit { + @HostBinding('class.has-info-message') get getHasMessage() { + return this.hasInfoMessage; + } + public canCreateAccount: boolean; public currentRoute: string; public currentYear = new Date().getFullYear(); public deviceType: string; + public hasInfoMessage: boolean; public hasPermissionForBlog: boolean; public hasPermissionForStatistics: boolean; public hasPermissionForSubscription: boolean; public hasPermissionToAccessFearAndGreedIndex: boolean; + public hasTabs = false; public info: InfoItem; public pageTitle: string; public routerLinkAbout = ['/' + $localize`about`]; @@ -103,6 +110,14 @@ export class AppComponent implements OnDestroy, OnInit { const urlSegments = urlSegmentGroup.segments; this.currentRoute = urlSegments[0].path; + this.hasTabs = + (this.currentRoute === this.routerLinkAbout[0].slice(1) || + this.currentRoute === 'admin' || + this.currentRoute === 'home' || + this.currentRoute === 'portfolio' || + this.currentRoute === 'zen') && + this.deviceType !== 'mobile'; + this.showFooter = (this.currentRoute === 'blog' || this.currentRoute === this.routerLinkFaq[0].slice(1) || @@ -140,6 +155,12 @@ export class AppComponent implements OnDestroy, OnInit { permissions.createUserAccount ); + this.hasInfoMessage = + hasPermission( + this.user?.permissions, + permissions.createUserAccount + ) || !!this.info.systemMessage; + this.initializeTheme(this.user?.settings.colorScheme); this.changeDetectorRef.markForCheck(); 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 97066d533..35e6d5c63 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 @@ -8,7 +8,6 @@ import { Subject } from 'rxjs'; @Component({ changeDetection: ChangeDetectionStrategy.OnPush, - host: { class: 'page' }, selector: 'gf-admin-settings', styleUrls: ['./admin-settings.component.scss'], templateUrl: './admin-settings.component.html' diff --git a/apps/client/src/app/components/header/header.component.html b/apps/client/src/app/components/header/header.component.html index 5c412a1b9..2c56cb742 100644 --- a/apps/client/src/app/components/header/header.component.html +++ b/apps/client/src/app/components/header/header.component.html @@ -1,14 +1,17 @@ - + - - - +
+ + + +
-