From 408f74636537954458c8289baf04c022814dc024 Mon Sep 17 00:00:00 2001
From: Hamza HRAMCHI <hamza.hramchi@xelians.fr>
Date: Mon, 27 Feb 2023 11:29:14 +0100
Subject: [PATCH] FIX #23981 TIME 1:40 detect the resizing of the window and
check if the device resolution has changed.
---
src/frontend/app/app.component.ts | 33 ++++++++++++++++---
src/frontend/app/sidebar/sidebar.component.ts | 3 +-
src/frontend/core/global.scss | 10 ++++--
3 files changed, 39 insertions(+), 7 deletions(-)
diff --git a/src/frontend/app/app.component.ts b/src/frontend/app/app.component.ts
index 632ea21764..d3bb4a2be3 100755
--- a/src/frontend/app/app.component.ts
+++ b/src/frontend/app/app.component.ts
@@ -1,4 +1,4 @@
-import { Component, ViewEncapsulation } from '@angular/core';
+import { Component, HostListener, OnInit, ViewEncapsulation } from '@angular/core';
import { CookieService } from 'ngx-cookie-service';
import { SignaturesContentService } from './service/signatures.service';
import { HttpClient } from '@angular/common/http';
@@ -19,11 +19,12 @@ import { Platform } from '@ionic/angular';
styleUrls: ['app.component.scss']
})
-export class AppComponent {
+export class AppComponent implements OnInit {
isPortrait: boolean;
debugMode: boolean;
showLeftContent: boolean = false;
showRightContent: boolean = false;
+
constructor(private translate: TranslateService,
public http: HttpClient,
public signaturesService: SignaturesContentService,
@@ -53,8 +54,32 @@ export class AppComponent {
}
- test() {
- return true;
+ // The event listens for window resize and checks if the device resolution has changed
+ @HostListener('window:resize', ['$event'])
+ onResize() {
+ if (window.matchMedia('(resolution: ' + window.devicePixelRatio + 'dppx)').matches) {
+ if (window.devicePixelRatio >= 1.25) {
+ this.signaturesService.mobileMode = true;
+ setTimeout(() => {
+ $('.right-menu-responsive').css('--max-width', 'none');
+ }, 0);
+ } else {
+ this.signaturesService.mobileMode = false;
+ }
+ }
+ }
+
+ ngOnInit(): void {
+ if (window.matchMedia('(resolution: ' + window.devicePixelRatio + 'dppx)').matches) {
+ if (window.devicePixelRatio >= 1.25) {
+ this.signaturesService.mobileMode = true;
+ setTimeout(() => {
+ $('.right-menu-responsive').css('--max-width', 'none');
+ }, 0);
+ } else {
+ this.signaturesService.mobileMode = false;
+ }
+ }
}
allowedRoute() {
diff --git a/src/frontend/app/sidebar/sidebar.component.ts b/src/frontend/app/sidebar/sidebar.component.ts
index 65df2131da..d3e74e0461 100755
--- a/src/frontend/app/sidebar/sidebar.component.ts
+++ b/src/frontend/app/sidebar/sidebar.component.ts
@@ -78,7 +78,8 @@ export class SidebarComponent implements OnInit, AfterViewInit {
async openProfile() {
const modal = await this.modalController.create({
component: ProfileComponent,
- cssClass: 'profileCss'
+ cssClass: 'profileCss',
+ backdropDismiss: false
});
await modal.present();
}
diff --git a/src/frontend/core/global.scss b/src/frontend/core/global.scss
index 677133306e..72561592ef 100644
--- a/src/frontend/core/global.scss
+++ b/src/frontend/core/global.scss
@@ -92,8 +92,14 @@ input:read-only {
}
.profileCss {
- --width: 40%;
- --height: 65%;
+ @media screen and (min-width: 768px) and (min-height: 768px) {
+ --width: 56%;
+ --height: 600px
+ }
+ @media screen and (min-width: 768px) and (min-height: 600px) {
+ --width: 56%;
+ --height: 600px
+ }
}
.aboutUsCss {
--
GitLab