responsive task edit overlay

src/app/app.routes.ts

@@ -8,6 +8,7 @@ import { BoardComponent } from './components/board/board.component';
 import { ContactsComponent } from './components/contacts/contacts.component';
 import { OverlayComponent } from './shared/components/overlay/overlay.component';
 import { TaskOverlayComponent } from './shared/components/overlay/task-overlay/task-overlay.component';
+import { TaskEditOverlayComponent } from './shared/components/overlay/task-edit-overlay/task-edit-overlay.component';
 
 export const routes: Routes = [
   { path: '', component: SummaryComponent },
@@ -15,6 +16,7 @@ export const routes: Routes = [
   { path: 'add-task', component: AddTaskComponent },
   { path: 'board', component: BoardComponent },
   { path: 'task/:id', component: TaskOverlayComponent },
+  { path: 'task-edit/:id', component: TaskEditOverlayComponent },
   { path: 'contacts', component: ContactsComponent },
   { path: 'contacts/:id', component: ContactsComponent },
   { path: 'help', component: HelpComponent },

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

@@ -15,7 +15,10 @@
   >
     <div
       class="content"
-      [ngClass]="{ 'edit-task-overlay-content': overlayData !== '' }"
+      [ngClass]="{
+        'edit-task-overlay-content': !overlayMobile && overlayData !== '',
+        'edit-task-overlay-content-mobile': overlayMobile && overlayData !== '',
+      }"
     >
       <div class="left-side">
         <div class="title">
@@ -264,7 +267,12 @@
         </div>
       </div>
     </div>
-    <div class="form-buttons">
+    <div
+      class="form-buttons"
+      [ngStyle]="{
+        'background-color': overlayMobile ? 'var(--very-light-gray)' : ''
+      }"
+    >
       <app-form-btn
         [class]="'btn-clear'"
         [type]="'button'"

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

@@ -29,6 +29,13 @@ section {
   overflow-y: auto;
 }
 
+.edit-task-overlay-content-mobile {
+  height: calc(100% - 24px);
+  padding: 0 6px;
+  overflow-y: auto;
+  background-color: var(--very-light-gray);
+}
+
 input,
 textarea,
 select {
@@ -269,7 +276,7 @@ p {
 .form-buttons {
   display: flex;
   justify-content: end;
-  margin-top: 12px;
+  padding-top: 12px;
 }
 
 /*------------- RESPONSIVE -------------*/
@@ -282,7 +289,7 @@ p {
   }
 }
 
-@media screen and (max-width: 700px) {
+@media screen and (max-width: 750px) {
   .btn-text {
     span {
       display: block;

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

@@ -21,6 +21,7 @@ export class AddTaskComponent {
   @ViewChild('description', { static: true }) descriptionField!: NgModel;
   @ViewChild('category', { static: true }) categoryField!: NgModel;
   @Input() overlayData: string = '';
+  @Input() overlayMobile: boolean = false;
 
   currentDate: string = new Date().toISOString().split('T')[0];
   dateInPast: boolean = false;

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

@@ -1,4 +1,4 @@
-@if (overlayType) {
+@if (overlayData) {
 <div class="overlay">
   <div class="overlay-content">
     @if (overlayType === "taskOverlay") {

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

@@ -1,6 +1,19 @@
-<section>
+<section
+  [ngClass]="{
+  overlay: !overlayMobile,
+  'overlay-mobile': overlayMobile,
+}"
+  *ngIf="overlayData !== '' && getTaskData(overlayData).length > 0"
+>
   <div class="header">
+    @if (overlayMobile) {
+    <app-btn-back></app-btn-back>
+    } @else {
     <app-btn-close (click)="closeDialog()"></app-btn-close>
+    }
   </div>
-  <app-add-task [overlayData]="overlayData"></app-add-task>
+  <app-add-task
+    [overlayData]="overlayData"
+    [overlayMobile]="overlayMobile"
+  ></app-add-task>
 </section>

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

@@ -1,4 +1,4 @@
-section {
+.overlay {
   width: 925px;
   height: 700px;
   padding: 48px 40px 48px 40px;
@@ -6,6 +6,11 @@ section {
   background-color: var(--white);
 }
 
+.overlay-mobile {
+  height: calc(100% - 24px);
+  width: 100%;
+}
+
 .header {
   display: flex;
   justify-content: right;

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

@@ -8,6 +8,8 @@ import { CommonModule } from '@angular/common';
 import { User } from '../../../../interfaces/user.interface';
 import { AssignedComponent } from '../../../../components/add-task/assigned/assigned.component';
 import { AddTaskComponent } from '../../../../components/add-task/add-task.component';
+import { ActivatedRoute } from '@angular/router';
+import { BtnBackComponent } from '../../buttons/btn-back/btn-back.component';
 
 @Component({
   selector: 'app-task-edit-overlay',
@@ -18,6 +20,7 @@ import { AddTaskComponent } from '../../../../components/add-task/add-task.compo
     CommonModule,
     AssignedComponent,
     AddTaskComponent,
+    BtnBackComponent,
   ],
   templateUrl: './task-edit-overlay.component.html',
   styleUrl: './task-edit-overlay.component.scss',
@@ -26,11 +29,31 @@ export class TaskEditOverlayComponent {
   @Input() overlayData: string = '';
   @Output() closeDialogEmitter = new EventEmitter<string>();
 
+  overlayMobile: boolean = false;
+
   constructor(
     public firebaseService: FirebaseService,
-    private overlayService: OverlayService
+    private overlayService: OverlayService,
+    private route: ActivatedRoute
   ) {}
 
+  ngOnInit() {
+    if (this.overlayData == '') {
+      if (this.route.params.subscribe()) {
+        this.route.params.subscribe((params) => {
+          this.overlayData = params['id'];
+          this.overlayMobile = true;
+        });
+      }
+    }
+  }
+
+  getTaskData(taskId: string) {
+    return this.firebaseService
+      .getAllTasks()
+      .filter((task) => task.id === taskId);
+  }
+
   closeDialog() {
     this.closeDialogEmitter.emit('');
     this.removeTaskData();

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

@@ -8,7 +8,6 @@
 
 .overlay-mobile {
   height: calc(100% - 24px);
-  padding: 12px;
 }
 
 .header {

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

@@ -3,7 +3,7 @@ import { FirebaseService } from '../../../../services/firebase.service';
 import { BtnCloseComponent } from '../../buttons/btn-close/btn-close.component';
 import { CommonModule } from '@angular/common';
 import { OverlayService } from '../../../../services/overlay.service';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { BtnBackComponent } from '../../buttons/btn-back/btn-back.component';
 
 @Component({
@@ -22,6 +22,7 @@ export class TaskOverlayComponent implements OnInit {
   constructor(
     public firebaseService: FirebaseService,
     private overlayService: OverlayService,
+    private router: Router,
     private route: ActivatedRoute
   ) {}
 
@@ -46,7 +47,14 @@ export class TaskOverlayComponent implements OnInit {
   }
 
   editTask(overlayData: string) {
-    this.overlayService.setOverlayData('taskOverlayEdit', overlayData);
+    this.closeDialog();
+    setTimeout(() => {
+      if (window.innerWidth >= 650) {
+        this.overlayService.setOverlayData('taskOverlayEdit', overlayData);
+      } else {
+        this.router.navigate(['/task-edit', overlayData]);
+      }
+    }, 10);
   }
 
   deleteTask(overlayData: string) {