landing page responsive

src/app/authentication/auth-sign-in/auth-sign-in.component.html

@@ -1,7 +1,19 @@
 <section class="signIn">
   <div class="overlay">
-    <div class="signIn__logo">
+    <div
+      class="signIn__logo"
+      fxLayout="row"
+      fxLayoutAlign="space-between center"
+    >
       <img src="../../../assets/images/logo.svg" alt="" title="" />
+      <select
+        (change)="onChangeLanguage($event)"
+        [(ngModel)]="lang"
+        class="lang"
+      >
+        <option value="ar">Arabic</option>
+        <option value="en">English</option>
+      </select>
     </div>
     <router-outlet></router-outlet>
   </div>

src/app/authentication/auth-sign-in/auth-sign-in.component.scss

@@ -0,0 +1,6 @@
+.lang {
+  background-color: transparent;
+  border: none;
+  color: #fff;
+  outline: none;
+}

src/app/authentication/auth-sign-in/auth-sign-in.component.ts

@@ -1,10 +1,39 @@
-import { Component } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { Component, Inject, Renderer2 } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-auth-sign-in',
   templateUrl: './auth-sign-in.component.html',
-  styleUrls: ['./auth-sign-in.component.scss']
+  styleUrls: ['./auth-sign-in.component.scss'],
 })
 export class AuthSignInComponent {
+  lang!: string;
 
+  constructor(
+    private readonly translate: TranslateService,
+    private readonly renderer: Renderer2,
+    @Inject(DOCUMENT) private document: Document
+  ) {
+    this.lang = localStorage.getItem('lang') ?? 'en';
+    translate.setDefaultLang(this.lang);
+    localStorage.setItem('lang', this.lang);
+    this.chnageDirection();
+  }
+  onChangeLanguage(event: any): void {
+    this.lang = event?.target?.value ?? event;
+    localStorage.setItem('lang', this.lang);
+    this.translate.use(this.lang);
+    this.chnageDirection();
+  }
+
+  chnageDirection(): void {
+    this.renderer.setAttribute(
+      this.document.documentElement,
+      'dir',
+      this.lang === 'en' ? 'ltr' : 'rtl'
+    );
+
+    document.body.className = this.lang === 'en' ? 'body-en' : 'body-ar';
+  }
 }

src/app/authentication/auth-sign-up/signup-type/signup-type.component.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { ToastrService } from 'ngx-toastr';
 
 @Component({
   selector: 'app-signup-type',
@@ -15,7 +16,8 @@ export class SignupTypeComponent {
   };
   constructor(
     private readonly router: Router,
-    private readonly route: ActivatedRoute
+    private readonly route: ActivatedRoute,
+    private readonly toastr: ToastrService
   ) {}
 
   onClickType(type: number): void {
@@ -30,7 +32,7 @@ export class SignupTypeComponent {
         relativeTo: this.route,
       });
     } else {
-      alert('Please Select the Type !');
+      this.toastr.warning('Please Select Type !');
     }
   }
 }

src/app/landing-page/landing-page-theme.scss

@@ -15,6 +15,9 @@
           color: $main-color;
           font-size: 50px;
           font-family: Montserrat-Bold;
+          @media (max-width: 767px) {
+            font-size: 30px;
+          }
         }
         p {
           color: $main-color;
@@ -47,6 +50,11 @@
           font-size: 40px;
           color: $main-color;
           font-family: Montserrat-Bold;
+          @media (max-width: 767px) {
+            font-size: 25px;
+            padding-left: 0 !important;
+            padding-right: 0 !important;
+          }
         }
         p {
           color: $main-color;
@@ -182,6 +190,9 @@
       padding: 20px 40px;
       margin-top: 20px;
       width: 100%;
+      @media (max-width: 767px) {
+        padding: 20px 20px;
+      }
       h1 {
         color: $main-color;
         font-size: 25px;
@@ -276,6 +287,9 @@
       }
       .highlight {
         padding: 20px 40px;
+        @media (max-width: 767px) {
+          padding: 0;
+        }
         p {
           color: $white-color;
           font-size: 18px;

src/app/modules/components/side-nav/side-nav.component.ts

@@ -42,7 +42,7 @@ export class SideNavComponent {
       index: 6,
       name: 'Task Management',
       img: '../../../../assets/images/task-manager.svg',
-      link: '/task-management',
+      link: '/modules/task-management',
     },
     {
       index: 7,

src/app/modules/modules-routing.module.ts

@@ -23,6 +23,13 @@ const routes: Routes = [
           import('./teams/teams.module').then((m) => m.TeamsModule),
       },
       {
+        path: 'task-management',
+        loadChildren: () =>
+          import('./task-management/task-management.module').then(
+            (m) => m.TaskManagementModule
+          ),
+      },
+      {
         path: '',
         redirectTo: 'dashboard',
         pathMatch: 'full',

src/app/modules/task-management/task-management-main/task-management-main.component.html

@@ -0,0 +1,45 @@
+<section
+  class="task-managament h-100"
+  fxLayout="row wrap"
+  fxLayoutAlign="start start"
+>
+  <div fxFlex.lt-md="100" fxFlex.gt-sm="20">
+    <h1 class="bold">Task Management</h1>
+    <div class="projects">
+      <p class="bold">Projects</p>
+      <ul>
+        <li>Dashboard Project</li>
+        <li>Mobile App</li>
+        <li>Web Platform</li>
+        <li>Dashboard Design</li>
+      </ul>
+    </div>
+    <div class="team-members">
+      <p class="bold">Team Members</p>
+      <ul>
+        <li class="gap-10" fxLayout="row" fxLayoutAlign="start start">
+          <img src="../../../../assets/images/avatar.png" alt="" title="" />
+          <div>
+            <p>User name</p>
+            <span>Online</span>
+          </div>
+        </li>
+        <li class="gap-10" fxLayout="row" fxLayoutAlign="start start">
+          <img src="../../../../assets/images/avatar.png" alt="" title="" />
+          <div>
+            <p>User name</p>
+            <span>Online</span>
+          </div>
+        </li>
+        <li class="gap-10" fxLayout="row" fxLayoutAlign="start start">
+          <img src="../../../../assets/images/avatar.png" alt="" title="" />
+          <div>
+            <p>User name</p>
+            <span>Online</span>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <div fxFlex.lt-md="100" fxFlex.gt-sm="80"></div>
+</section>

src/app/modules/task-management/task-management-main/task-management-main.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TaskManagementMainComponent } from './task-management-main.component';
+
+describe('TaskManagementMainComponent', () => {
+  let component: TaskManagementMainComponent;
+  let fixture: ComponentFixture<TaskManagementMainComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TaskManagementMainComponent]
+    });
+    fixture = TestBed.createComponent(TaskManagementMainComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/task-management/task-management-main/task-management-main.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-task-management-main',
+  templateUrl: './task-management-main.component.html',
+  styleUrls: ['./task-management-main.component.scss']
+})
+export class TaskManagementMainComponent {
+
+}

src/app/modules/task-management/task-management-routing.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { TaskManagementMainComponent } from './task-management-main/task-management-main.component';
+import { TaskManagementComponent } from './task-management.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: TaskManagementComponent,
+    children: [{ path: '', component: TaskManagementMainComponent }],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class TaskManagementRoutingModule {}

src/app/modules/task-management/task-management.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

src/app/modules/task-management/task-management.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TaskManagementComponent } from './task-management.component';
+
+describe('TaskManagementComponent', () => {
+  let component: TaskManagementComponent;
+  let fixture: ComponentFixture<TaskManagementComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TaskManagementComponent]
+    });
+    fixture = TestBed.createComponent(TaskManagementComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/task-management/task-management.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-task-management',
+  templateUrl: './task-management.component.html',
+  styleUrls: ['./task-management.component.scss']
+})
+export class TaskManagementComponent {
+
+}

src/app/modules/task-management/task-management.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { TaskManagementRoutingModule } from './task-management-routing.module';
+import { TaskManagementComponent } from './task-management.component';
+import { TaskManagementMainComponent } from './task-management-main/task-management-main.component';
+import { SharedModule } from '@shared/shared.module';
+
+@NgModule({
+  declarations: [TaskManagementComponent, TaskManagementMainComponent],
+  imports: [CommonModule, TaskManagementRoutingModule, SharedModule],
+})
+export class TaskManagementModule {}

src/app/modules/task-management/task-managemnt-theme.scss

@@ -0,0 +1,77 @@
+@mixin task-management() {
+  app-task-management {
+    .task-managament {
+      background-color: $off-white;
+      border-radius: 25px;
+      padding: 20px;
+      div {
+        h1 {
+          color: $main-color;
+          margin-bottom: 10px;
+        }
+      }
+
+      .projects {
+        background-color: $white-color;
+        padding: 20px 10px;
+        border-radius: 10px;
+        p {
+          color: $main-color;
+          font-size: 20px;
+        }
+        ul {
+          list-style: none;
+          border-radius: 15px;
+          padding: 10px;
+          li {
+            margin-bottom: 10px;
+            padding: 10px;
+            border-radius: 10px;
+            color: $main-color;
+            transition: all 0.5s;
+            cursor: pointer;
+            &:hover {
+              background-color: #2e368f26;
+            }
+          }
+        }
+      }
+
+      .team-members {
+        background-color: $white-color;
+        padding: 20px 10px;
+        border-radius: 10px;
+        margin-top: 10px;
+        p {
+          color: $main-color;
+          font-size: 20px;
+        }
+        ul {
+          list-style: none;
+          border-radius: 15px;
+          padding: 10px;
+          li {
+            margin-bottom: 0;
+            padding: 10px;
+            border-radius: 10px;
+            color: $main-color;
+            &:hover {
+              background-color: #2e368f26;
+              cursor: pointer;
+            }
+            div {
+              p {
+                font-size: 16px;
+                color: #4b5155;
+              }
+              span {
+                color: green;
+                font-size: 12px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/assets/scss/variables.scss

@@ -81,6 +81,7 @@ $span-color: #707070;
 @import "../../app/modules/dashboard//dashboard-theme.scss";
 @import "../../app/modules/profile/profile-theme.scss";
 @import "../../app/modules/teams/teams.component.scss";
+@import "../../app/modules/task-management//task-managemnt-theme.scss";
 @import "./spineer.scss";
 
 @mixin component-theme() {
@@ -94,6 +95,7 @@ $span-color: #707070;
   @include dashboard-theme();
   @include profile-theme();
   @include teams-theme();
+  @include task-management();
 }
 
 @include component-theme();

src/styles.scss

@@ -33,6 +33,13 @@ body {
   // font-family: "Roboto";
 }
 
+.body-en {
+  direction: ltr;
+}
+
+.body-ar {
+  direction: rtl;
+}
 .mt-2 {
   margin-top: 1rem;
 }