Responsivness for home page (logged in)

.gitignore

@@ -40,3 +40,4 @@ testem.log
 # System files
 .DS_Store
 Thumbs.db
+package-lock.json

src/app/core/components/root/root.component.html

@@ -1,4 +1,4 @@
-@if (!isPortrait()) {
+@if (isWeb()) {
   <div class="layout-desktop">
     <osf-sidenav></osf-sidenav>
     <div class="content-wrapper">

src/app/core/components/root/root.component.scss

@@ -4,6 +4,7 @@
 :host {
   height: 100vh;
   display: flex;
+  max-width: 100vw;
 
   .layout-desktop {
     display: flex;
@@ -29,6 +30,7 @@
   .layout-tablet {
     @include mix.flex-center;
     flex: 1;
+    max-width: 100vw;
 
     .content-wrapper {
       @include mix.flex-column;

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$);
 }

src/app/features/auth/forgot-password/forgot-password.component.html

@@ -1,4 +1,4 @@
-<section class="forgot-password-container" [class.mobile]="isXSmall()">
+<section class="forgot-password-container" [class.mobile]="isMobile()">
   <h2>Forgot Your Password?</h2>
   <p>Enter your email address and we'll send a link to reset your password</p>
 

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<MessageInfo | null>(null);
 
   onSubmit(): void {

src/app/features/auth/reset-password/reset-password.component.html

@@ -1,5 +1,5 @@
 @if (!isFormSubmitted()) {
-  <section class="reset-password-container" [class.mobile]="isXSmall()">
+  <section class="reset-password-container" [class.mobile]="isMobile()">
     <h2>Reset Password</h2>
 
     <form [formGroup]="resetPasswordForm" (ngSubmit)="onSubmit()">

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) {

src/app/features/auth/sign-up/sign-up.component.html

@@ -1,5 +1,5 @@
 @if (!isFormSubmitted()) {
-  <section class="sign-up-container" [class.mobile]="isXSmall()">
+  <section class="sign-up-container" [class.mobile]="isMobile()">
     <h2>Create A Free Account</h2>
 
     <form [formGroup]="signUpForm" (ngSubmit)="onSubmit()">
@@ -109,7 +109,7 @@ <h2>Create A Free Account</h2>
     </form>
   </section>
 } @else {
-  <section class="message-container" [class.mobile]="isXSmall()">
+  <section class="message-container" [class.mobile]="isMobile()">
     <h2>Registration successful</h2>
     <p>Check your email to confirm your account</p>
   </section>

src/app/features/auth/sign-up/sign-up.component.ts

@@ -38,8 +38,8 @@ import { toSignal } from '@angular/core/rxjs-interop';
 export class SignUpComponent implements OnInit {
   signUpForm: FormGroup = new FormGroup({});
   passwordRegex: RegExp = PASSWORD_REGEX;
-  #isXSmall$ = inject(IS_XSMALL);
-  isXSmall = toSignal(this.#isXSmall$);
+  #isMobile$ = inject(IS_XSMALL);
+  isMobile = toSignal(this.#isMobile$);
   isFormSubmitted = signal(false);
 
   fb: FormBuilder = inject(FormBuilder);

src/app/features/home/home.component.html

@@ -11,8 +11,8 @@
 
 <section
   class="home-container"
-  [class.mobile]="isXSmall()"
-  [class.portrait]="isPortrait()"
+  [class.tablet]="isTablet()"
+  [class.mobile]="isMobile()"
 >
   <osf-sub-header
     [showButton]="true"

src/app/features/home/home.component.scss

@@ -6,6 +6,8 @@
 
   .home-container {
     margin-top: 4.5rem;
+    //width: 100%;
+    max-width: 100%;
   }
 
   .dashboard-header {
@@ -30,7 +32,7 @@
   .quick-search-container {
     background: white;
     padding: 1.71rem;
-    width: 100%;
+    //max-width: 100vw;
 
     .text-center {
       font-size: 1rem;
@@ -114,7 +116,6 @@
   .latest-research-container {
     width: 100%;
     background: var.$bg-blue-3;
-    height: 11.14rem;
     padding: 3.43rem 3.43rem 3.43rem 1.71rem;
 
     .content {
@@ -151,7 +152,6 @@
 
   .hosting-container {
     width: 100%;
-    height: 11.14rem;
     padding: 3.43rem 3.43rem 3.43rem 1.71rem;
     background-color: var.$bg-blue-2;
 
@@ -186,4 +186,174 @@
   .portrait {
     margin-top: 0;
   }
+
+  .tablet {
+    .quick-search-container {
+      padding-left: 2.57rem;
+      padding-right: 2.57rem;
+
+      .text-center {
+        margin-bottom: 1.71rem;
+
+        a {
+          font-weight: 700;
+        }
+      }
+    }
+
+    .noteworthy-container {
+      display: flex;
+      flex-direction: column;
+      padding: 2.57rem;
+      column-gap: 0.85rem;
+
+      .news-section {
+        width: 100%;
+        padding-top: 1.71rem;
+
+        h2 {
+          padding-bottom: 0.85rem;
+        }
+      }
+    }
+
+    .latest-research-container {
+      display: flex;
+      padding: 4rem 2.58rem 4rem 2.58rem;
+
+      .content {
+        display: flex;
+        flex-direction: column;
+        row-gap: 2rem;
+
+        .text-container {
+          display: flex;
+          flex-direction: column;
+          row-gap: 0.85rem;
+
+          h2 {
+            font-weight: 400;
+            font-size: 1rem;
+          }
+        }
+      }
+
+      p-button {
+        margin: 0;
+      }
+    }
+
+    .hosting-container {
+      display: flex;
+      padding: 4rem 2.58rem 4rem 2.58rem;
+
+      .content {
+        display: flex;
+        flex-direction: column;
+        row-gap: 2rem;
+
+        .text-container {
+          display: flex;
+          flex-direction: column;
+          row-gap: 0.85rem;
+
+          h2 {
+            font-weight: 400;
+            font-size: 1rem;
+          }
+        }
+      }
+
+      p-button {
+        margin: 0;
+        align-self: start;
+      }
+    }
+  }
+
+  .mobile {
+    margin: 0;
+
+    .quick-search-container {
+      padding: 1.71rem 1.14rem 1.71rem 1.14rem;
+
+      .text-center {
+        padding: 0 2.5rem 0 2.5rem;
+        margin-bottom: 1.71rem;
+      }
+    }
+
+    .noteworthy-container {
+      display: flex;
+      flex-direction: column;
+      padding: 1.14rem;
+      column-gap: 0.85rem;
+
+      .news-section {
+        width: 100%;
+        padding-bottom: 1.14rem;
+
+        .news-block {
+          padding: 1.14rem;
+        }
+
+        h2 {
+          padding-bottom: 0.85rem;
+        }
+      }
+    }
+
+    .latest-research-container {
+      display: flex;
+      padding: 4rem 1.14rem 4rem 1.14rem;
+
+      .content {
+        display: flex;
+        flex-direction: column;
+        row-gap: 2rem;
+
+        .text-container {
+          display: flex;
+          flex-direction: column;
+          row-gap: 0.85rem;
+
+          h2 {
+            font-weight: 400;
+            font-size: 1rem;
+          }
+        }
+      }
+
+      p-button {
+        margin: 0;
+      }
+    }
+
+    .hosting-container {
+      display: flex;
+      padding: 4rem 1.14rem 4rem 1.14rem;
+
+      .content {
+        display: flex;
+        flex-direction: column;
+        row-gap: 2rem;
+
+        .text-container {
+          display: flex;
+          flex-direction: column;
+          row-gap: 0.85rem;
+
+          h2 {
+            font-weight: 400;
+            font-size: 1rem;
+          }
+        }
+      }
+
+      p-button {
+        margin: 0;
+        align-self: start;
+      }
+    }
+  }
 }

src/app/features/home/home.component.ts

@@ -7,7 +7,7 @@ import { DatePipe, NgOptimizedImage } from '@angular/common';
 import { RouterLink } from '@angular/router';
 import { Button } from 'primeng/button';
 import { SubHeaderComponent } from '@shared/components/sub-header/sub-header.component';
-import { IS_PORTRAIT, IS_XSMALL } from '@shared/utils/breakpoints.tokens';
+import { IS_TABLET, IS_XSMALL } from '@shared/utils/breakpoints.tokens';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { Carousel } from 'primeng/carousel';
 import { noteworthy, mostPopular, projects } from '@osf/features/home/data';
@@ -30,10 +30,10 @@ import { noteworthy, mostPopular, projects } from '@osf/features/home/data';
   styleUrl: './home.component.scss',
 })
 export class HomeComponent {
-  #isPortrait$ = inject(IS_PORTRAIT);
-  #isXSmall$ = inject(IS_XSMALL);
-  isPortrait = toSignal(this.#isPortrait$);
-  isXSmall = toSignal(this.#isXSmall$);
+  #isTablet$ = inject(IS_TABLET);
+  #isMobile$ = inject(IS_XSMALL);
+  isTablet = toSignal(this.#isTablet$);
+  isMobile = toSignal(this.#isMobile$);
   projects: Project[] = projects;
   noteworthy = noteworthy;
   mostPopular = mostPopular;

src/app/shared/components/sub-header/sub-header.component.html

@@ -1,8 +1,10 @@
-<section class="sub-header">
-  <i [class]="'osf-icon-' + icon()"></i>
-  <h1>{{ title() }}</h1>
+<section class="sub-header" [class.mobile]="isMobile()">
+  <div class="title-icon">
+    <i [class]="'osf-icon-' + icon()"></i>
+    <h1>{{ title() }}</h1>
+  </div>
   @if (showButton()) {
-    <div class="btn-container">
+    <div class="btn-container" [class.btn-full-width]="isMobile()">
       <p-button
         [label]="buttonLabel()"
         (onClick)="buttonClick.emit()"