overlay mobile view

src/app/app.routes.ts

@@ -6,12 +6,14 @@ import { PrivacyPolicyComponent } from './shared/components/privacy-policy/priva
 import { AddTaskComponent } from './components/add-task/add-task.component';
 import { BoardComponent } from './components/board/board.component';
 import { ContactsComponent } from './components/contacts/contacts.component';
+import { OverlayComponent } from './shared/components/overlay/overlay.component';
 
 export const routes: Routes = [
   { path: '', component: SummaryComponent },
   { path: 'summary', component: SummaryComponent },
   { path: 'add-task', component: AddTaskComponent },
   { path: 'board', component: BoardComponent },
+  { path: 'board/:id', component: BoardComponent },
   { path: 'contacts', component: ContactsComponent },
   { path: 'contacts/:id', component: ContactsComponent },
   { path: 'help', component: HelpComponent },

src/app/components/add-task/add-task.component.ts

@@ -172,7 +172,7 @@ export class AddTaskComponent {
   }
 
   closeOverlay() {
-    this.overlayService.setOverlayData('', '');
+    this.overlayService.setOverlayData('', '', false);
   }
 
   untouchedFormFields() {

src/app/components/board/task/task.component.ts

@@ -4,6 +4,7 @@ import { DragDropService } from '../../../services/drag-drop.service';
 import { Task } from '../../../interfaces/task.interface';
 import { FirebaseService } from '../../../services/firebase.service';
 import { OverlayService } from '../../../services/overlay.service';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-task',
@@ -23,11 +24,16 @@ export class TaskComponent {
   constructor(
     public dragDropService: DragDropService,
     private firebaseService: FirebaseService,
-    public overlayService: OverlayService
+    public overlayService: OverlayService,
+    private router: Router
   ) {}
 
   openTaskDetailsOverlay(taskId: string | undefined) {
-    this.overlayService.setOverlayData('taskOverlay', taskId);
+    if (window.innerWidth >= 650) {
+      this.overlayService.setOverlayData('taskOverlay', taskId, false);
+    } else {
+      this.overlayService.setOverlayData('taskOverlay', taskId, true);
+    }
   }
 
   // Subtasks

src/app/services/overlay.service.ts

@@ -10,7 +10,7 @@ export class OverlayService {
 
   constructor() {}
 
-  setOverlayData(overlay: string, data: any) {
+  setOverlayData(overlay: string, data: any, mobile: boolean) {
-    this.overlayDataSubject.next({ overlay, data });
+    this.overlayDataSubject.next({ overlay, data, mobile });
   }
 }

src/app/shared/components/overlay/overlay.component.html

@@ -1,8 +1,12 @@
-<div *ngIf="overlayData" class="overlay">
+<div
+  *ngIf="overlayData"
+  [ngClass]="{ overlay: isOverlay, 'overlay-mobile': isOverlayMobile }"
+>
   <div class="overlay-content">
     @if (overlayType === "taskOverlay") {
     <app-task-overlay
       [overlayData]="overlayData"
+      [overlayMobile]="overlayMobile"
       (closeDialogEmitter)="onCloseOverlay($event)"
     ></app-task-overlay>
     } @if (overlayType === "taskOverlayEdit") {

src/app/shared/components/overlay/overlay.component.scss

@@ -11,6 +11,16 @@
   align-items: center;
   z-index: 999;
 }
+.overlay-mobile {
+  position: fixed;
+  top: 96px;
+  bottom: 80px;
+  left: 0;
+  right: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 999;
+}
 
 .overlay-content {
   display: flex;

src/app/shared/components/overlay/overlay.component.ts

@@ -1,7 +1,10 @@
 import {
+  AfterViewInit,
   Component,
   EventEmitter,
+  HostBinding,
   HostListener,
+  OnDestroy,
   OnInit,
   Output,
 } from '@angular/core';
@@ -10,6 +13,7 @@ import { CommonModule } from '@angular/common';
 import { TaskOverlayComponent } from './task-overlay/task-overlay.component';
 import { FirebaseService } from '../../../services/firebase.service';
 import { TaskEditOverlayComponent } from './task-edit-overlay/task-edit-overlay.component';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-overlay',
@@ -18,21 +22,44 @@ import { TaskEditOverlayComponent } from './task-edit-overlay/task-edit-overlay.
   templateUrl: './overlay.component.html',
   styleUrl: './overlay.component.scss',
 })
-export class OverlayComponent implements OnInit {
+export class OverlayComponent implements OnInit, OnDestroy {
+  @HostBinding('class.overlay') isOverlay = window.innerWidth >= 650;
+  @HostBinding('class.overlay-mobile') isOverlayMobile =
+    window.innerWidth < 650;
+  private resizeListener!: () => void;
+
   overlayType: any;
   overlayData: any;
+  overlayMobile: boolean = false;
 
-  constructor(private overlayService: OverlayService) {}
+  constructor(
+    private overlayService: OverlayService,
+    private route: ActivatedRoute
+  ) {}
 
   ngOnInit(): void {
+    this.checkOverlayData();
+    this.checkWindowWidth();
+  }
+
+  checkOverlayData() {
     this.overlayService.overlayData$.subscribe((data) => {
       if (data) {
         this.overlayType = data.overlay;
         this.overlayData = data.data;
+        this.overlayMobile = data.mobile;
       }
     });
   }
 
+  checkWindowWidth() {
+    this.resizeListener = () => {
+      this.isOverlay = window.innerWidth >= 650;
+      this.isOverlayMobile = window.innerWidth < 650;
+    };
+    window.addEventListener('resize', this.resizeListener);
+  }
+
   onCloseOverlay(emitter: string) {
     this.overlayData = emitter;
   }
@@ -47,4 +74,8 @@ export class OverlayComponent implements OnInit {
       this.onCloseOverlay('');
     }
   }
+
+  ngOnDestroy(): void {
+    window.removeEventListener('resize', this.resizeListener);
+  }
 }

src/app/shared/components/overlay/task-overlay/task-overlay.component.html

@@ -1,4 +1,9 @@
-<section>
+<section
+  [ngClass]="{
+  overlay: !overlayMobile,
+  'overlay-mobile': overlayMobile,
+}"
+>
   <div class="header">
     <div
       class="category"
@@ -10,7 +15,12 @@
     </div>
     <app-btn-close (click)="closeDialog()"></app-btn-close>
   </div>
-  <div class="content">
+  <div
+    [ngClass]="{
+    content: !overlayMobile,
+    'content-mobile': overlayMobile,
+  }"
+  >
     <div class="headline">{{ getTaskData(overlayData)[0].title }}</div>
     <div class="description">
       {{ getTaskData(overlayData)[0].description }}

src/app/shared/components/overlay/task-overlay/task-overlay.component.scss

@@ -1,4 +1,4 @@
-section {
+.overlay {
   width: 525px;
   height: 700px;
   padding: 48px 40px 48px 40px;
@@ -6,6 +6,13 @@ section {
   background-color: var(--white);
 }
 
+.overlay-mobile {
+  background-color: var(--white);
+  width: calc(100vw - 24px);
+  height: calc(100vh - 200px);
+  padding: 12px;
+}
+
 .header {
   display: flex;
   justify-content: space-between;
@@ -25,7 +32,12 @@ section {
 }
 
 .content {
-  height: calc(700px - 104px);
+  height: calc(700px - 114px);
+  overflow-y: auto;
+}
+
+.content-mobile {
+  height: calc(700px - 159px);
   overflow-y: auto;
 }
 
@@ -204,7 +216,7 @@ section {
   align-items: center;
   justify-content: right;
   width: 100%;
-  margin-top: 12px;
+  margin: 12px 0;
   img {
     width: 20px;
     height: 20px;

src/app/shared/components/overlay/task-overlay/task-overlay.component.ts

@@ -13,6 +13,7 @@ import { OverlayService } from '../../../../services/overlay.service';
 })
 export class TaskOverlayComponent {
   @Input() overlayData: string = '';
+  @Input() overlayMobile: boolean = false;
   @Output() closeDialogEmitter = new EventEmitter<string>();
 
   constructor(
@@ -30,7 +31,7 @@ export class TaskOverlayComponent {
   }
 
   editTask(overlayData: string) {
-    this.overlayService.setOverlayData('taskOverlayEdit', overlayData);
+    this.overlayService.setOverlayData('taskOverlayEdit', overlayData, false);
   }
 
   deleteTask(overlayData: string) {