From 040e2ca4172a94c6647e13434bfd219b88aa559b Mon Sep 17 00:00:00 2001 From: Kyrylo Petrov Date: Tue, 18 Mar 2025 14:29:44 +0200 Subject: [PATCH 1/2] chore(home): home logged in responsivness --- .gitignore | 1 + .../core/components/root/root.component.html | 2 +- .../core/components/root/root.component.scss | 3 + .../core/components/root/root.component.ts | 6 +- .../forgot-password.component.html | 2 +- .../forgot-password.component.ts | 4 +- .../reset-password.component.html | 2 +- .../reset-password.component.ts | 4 +- .../auth/sign-up/sign-up.component.html | 4 +- .../auth/sign-up/sign-up.component.ts | 4 +- src/app/features/home/home.component.html | 4 +- src/app/features/home/home.component.scss | 176 +++++++++++++++++- src/app/features/home/home.component.ts | 10 +- .../sub-header/sub-header.component.html | 10 +- .../sub-header/sub-header.component.scss | 14 ++ .../sub-header/sub-header.component.ts | 7 +- src/app/shared/utils/breakpoints.tokens.ts | 8 +- src/assets/styles/overrides/button.scss | 1 + src/assets/styles/overrides/table.scss | 63 ++++++- src/assets/styles/styles.scss | 2 + 20 files changed, 288 insertions(+), 39 deletions(-) diff --git a/.gitignore b/.gitignore index cc7b14135..5373aea4c 100644 --- a/.gitignore +++ b/.gitignore @@ -40,3 +40,4 @@ testem.log # System files .DS_Store Thumbs.db +package-lock.json diff --git a/src/app/core/components/root/root.component.html b/src/app/core/components/root/root.component.html index 07ef9e8a4..d67322bbd 100644 --- a/src/app/core/components/root/root.component.html +++ b/src/app/core/components/root/root.component.html @@ -1,4 +1,4 @@ -@if (!isPortrait()) { +@if (isWeb()) {
diff --git a/src/app/core/components/root/root.component.scss b/src/app/core/components/root/root.component.scss index 156368f90..7090691b3 100644 --- a/src/app/core/components/root/root.component.scss +++ b/src/app/core/components/root/root.component.scss @@ -4,11 +4,13 @@ :host { height: 100vh; display: flex; + max-width: 100vw; .layout-desktop { display: flex; flex: 1; background-color: var.$dark-blue-1; + max-width: 100vw; .content-wrapper { flex: 1; @@ -28,6 +30,7 @@ .layout-tablet { @include mix.flex-center; flex: 1; + max-width: 100vw; .content-wrapper { @include mix.flex-column; diff --git a/src/app/core/components/root/root.component.ts b/src/app/core/components/root/root.component.ts index 23361ce2b..194dd6007 100644 --- a/src/app/core/components/root/root.component.ts +++ b/src/app/core/components/root/root.component.ts @@ -5,7 +5,7 @@ import { HeaderComponent } from '@core/components/header/header.component'; import { MainContentComponent } from '@core/components/main-content/main-content.component'; import { FooterComponent } from '@core/components/footer/footer.component'; import { TopnavComponent } from '@core/components/topnav/topnav.component'; -import { IS_PORTRAIT } from '@shared/utils/breakpoints.tokens'; +import { IS_WEB } from '@shared/utils/breakpoints.tokens'; import { toSignal } from '@angular/core/rxjs-interop'; @Component({ @@ -24,6 +24,6 @@ import { toSignal } from '@angular/core/rxjs-interop'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class RootComponent { - #isPortrait$ = inject(IS_PORTRAIT); - isPortrait = toSignal(this.#isPortrait$); + #isWeb$ = inject(IS_WEB); + isWeb = toSignal(this.#isWeb$); } diff --git a/src/app/features/auth/forgot-password/forgot-password.component.html b/src/app/features/auth/forgot-password/forgot-password.component.html index efbff5da7..83874af3f 100644 --- a/src/app/features/auth/forgot-password/forgot-password.component.html +++ b/src/app/features/auth/forgot-password/forgot-password.component.html @@ -1,4 +1,4 @@ -
+

Forgot Your Password?

Enter your email address and we'll send a link to reset your password

diff --git a/src/app/features/auth/forgot-password/forgot-password.component.ts b/src/app/features/auth/forgot-password/forgot-password.component.ts index 8198c2f80..897144f09 100644 --- a/src/app/features/auth/forgot-password/forgot-password.component.ts +++ b/src/app/features/auth/forgot-password/forgot-password.component.ts @@ -17,11 +17,11 @@ import { toSignal } from '@angular/core/rxjs-interop'; }) export class ForgotPasswordComponent { #fb = inject(FormBuilder); - #isXSmall$ = inject(IS_XSMALL); + #isMobile$ = inject(IS_XSMALL); forgotPasswordForm: ForgotPasswordFormGroupType = this.#fb.group({ email: ['', [Validators.required, Validators.email]], }); - isXSmall = toSignal(this.#isXSmall$); + isMobile = toSignal(this.#isMobile$); message = signal(null); onSubmit(): void { diff --git a/src/app/features/auth/reset-password/reset-password.component.html b/src/app/features/auth/reset-password/reset-password.component.html index e8fab76ad..dab201213 100644 --- a/src/app/features/auth/reset-password/reset-password.component.html +++ b/src/app/features/auth/reset-password/reset-password.component.html @@ -1,5 +1,5 @@ @if (!isFormSubmitted()) { -
+

Reset Password

diff --git a/src/app/features/auth/reset-password/reset-password.component.ts b/src/app/features/auth/reset-password/reset-password.component.ts index d8699b10f..c62c53e2f 100644 --- a/src/app/features/auth/reset-password/reset-password.component.ts +++ b/src/app/features/auth/reset-password/reset-password.component.ts @@ -27,7 +27,7 @@ import { toSignal } from '@angular/core/rxjs-interop'; }) export class ResetPasswordComponent { #fb = inject(FormBuilder); - #isXSmall$ = inject(IS_XSMALL); + #isMobile$ = inject(IS_XSMALL); passwordRegex = PASSWORD_REGEX; resetPasswordForm: ResetPasswordFormGroupType = this.#fb.group( { @@ -42,7 +42,7 @@ export class ResetPasswordComponent { }, ); isFormSubmitted = signal(false); - isXSmall = toSignal(this.#isXSmall$); + isMobile = toSignal(this.#isMobile$); onSubmit(): void { if (this.resetPasswordForm.valid) { diff --git a/src/app/features/auth/sign-up/sign-up.component.html b/src/app/features/auth/sign-up/sign-up.component.html index 7e8cc54b9..9c0883e56 100644 --- a/src/app/features/auth/sign-up/sign-up.component.html +++ b/src/app/features/auth/sign-up/sign-up.component.html @@ -1,5 +1,5 @@ @if (!isFormSubmitted()) { -