From 5ea171847eda15c7c5bf8be022cb81227d614d56 Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Thu, 25 Apr 2024 08:33:26 +0200
Subject: [PATCH] task overlay responsive

---
 src/app/app.routes.ts                         |  2 +-
 .../components/overlay/overlay.component.html | 26 +++++++++----------
 .../components/overlay/overlay.component.scss | 13 ++++------
 .../task-overlay/task-overlay.component.scss  |  4 +--
 4 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index a0cd0d2..f5da097 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -7,13 +7,13 @@ 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';
+import { TaskOverlayComponent } from './shared/components/overlay/task-overlay/task-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 },
diff --git a/src/app/shared/components/overlay/overlay.component.html b/src/app/shared/components/overlay/overlay.component.html
index 281cab7..afa1a56 100644
--- a/src/app/shared/components/overlay/overlay.component.html
+++ b/src/app/shared/components/overlay/overlay.component.html
@@ -2,18 +2,16 @@
   *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") {
-    <app-task-edit-overlay
-      [overlayData]="overlayData"
-      (closeDialogEmitter)="onCloseOverlay($event)"
-    ></app-task-edit-overlay>
-    }
-  </div>
+  @if (overlayType === "taskOverlay") {
+  <app-task-overlay
+    [overlayData]="overlayData"
+    [overlayMobile]="overlayMobile"
+    (closeDialogEmitter)="onCloseOverlay($event)"
+  ></app-task-overlay>
+  } @if (overlayType === "taskOverlayEdit") {
+  <app-task-edit-overlay
+    [overlayData]="overlayData"
+    (closeDialogEmitter)="onCloseOverlay($event)"
+  ></app-task-edit-overlay>
+  }
 </div>
diff --git a/src/app/shared/components/overlay/overlay.component.scss b/src/app/shared/components/overlay/overlay.component.scss
index f16ad5c..7306b35 100644
--- a/src/app/shared/components/overlay/overlay.component.scss
+++ b/src/app/shared/components/overlay/overlay.component.scss
@@ -1,7 +1,9 @@
 .overlay {
   position: fixed;
   top: 0;
+  bottom: 0;
   left: 0;
+  right: 0;
   width: 100vw;
   height: 100vh;
   backdrop-filter: blur(5px);
@@ -11,19 +13,14 @@
   align-items: center;
   z-index: 999;
 }
+
 .overlay-mobile {
   position: fixed;
-  top: 96px;
-  bottom: 80px;
+  top: 0;
+  bottom: 0;
   left: 0;
   right: 0;
   width: 100vw;
   height: 100vh;
   z-index: 999;
 }
-
-.overlay-content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
diff --git a/src/app/shared/components/overlay/task-overlay/task-overlay.component.scss b/src/app/shared/components/overlay/task-overlay/task-overlay.component.scss
index ac695f1..d9ab431 100644
--- a/src/app/shared/components/overlay/task-overlay/task-overlay.component.scss
+++ b/src/app/shared/components/overlay/task-overlay/task-overlay.component.scss
@@ -9,7 +9,7 @@
 .overlay-mobile {
   background-color: var(--white);
   width: calc(100vw - 24px);
-  height: calc(100vh - 200px);
+  height: calc(100vh - 24px);
   padding: 12px;
 }
 
@@ -37,7 +37,7 @@
 }
 
 .content-mobile {
-  height: calc(700px - 159px);
+  height: calc(100vh - 214px);
   overflow-y: auto;
 }