Chneemann/join
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

task overlay responsive

Browse source
This commit is contained in:
Chneemann 2024-04-25 08:33:26 +02:00
parent fc3fff0977
commit 5ea171847e
4 changed files with 20 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app/app.routes.ts
View file

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

2
src/app/shared/components/overlay/overlay.component.html
View file

@ -2,7 +2,6 @@
*ngIf="overlayData" *ngIf="overlayData"
[ngClass]="{ overlay: isOverlay, 'overlay-mobile': isOverlayMobile }" [ngClass]="{ overlay: isOverlay, 'overlay-mobile': isOverlayMobile }"
> >
<div class="overlay-content">
@if (overlayType === "taskOverlay") { @if (overlayType === "taskOverlay") {
<app-task-overlay <app-task-overlay
[overlayData]="overlayData" [overlayData]="overlayData"
@ -15,5 +14,4 @@
(closeDialogEmitter)="onCloseOverlay($event)" (closeDialogEmitter)="onCloseOverlay($event)"
></app-task-edit-overlay> ></app-task-edit-overlay>
} }
</div>
</div> </div>

13
src/app/shared/components/overlay/overlay.component.scss
View file

@ -1,7 +1,9 @@
.overlay { .overlay {
position: fixed; position: fixed;
top: 0; top: 0;
bottom: 0;
left: 0; left: 0;
right: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
@ -11,19 +13,14 @@
align-items: center; align-items: center;
z-index: 999; z-index: 999;
} }
.overlay-mobile { .overlay-mobile {
position: fixed; position: fixed;
top: 96px; top: 0;
bottom: 80px; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
z-index: 999; z-index: 999;
} }
.overlay-content {
display: flex;
align-items: center;
justify-content: center;
}

4
src/app/shared/components/overlay/task-overlay/task-overlay.component.scss
View file

@ -9,7 +9,7 @@
.overlay-mobile { .overlay-mobile {
background-color: var(--white); background-color: var(--white);
width: calc(100vw - 24px); width: calc(100vw - 24px);
height: calc(100vh - 200px); height: calc(100vh - 24px);
padding: 12px; padding: 12px;
} }
@ -37,7 +37,7 @@
} }
.content-mobile { .content-mobile {
height: calc(700px - 159px); height: calc(100vh - 214px);
overflow-y: auto; overflow-y: auto;
} }