[#44440] Issues with project selection on mobile

https://community.openproject.org/work_packages/44440
opf · Dec 6, 2022 · 601d570 · 601d570
1 parent bbc05d1
commit 601d570
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 7 deletions.
diff --git a/frontend/src/app/spot/components/drop-modal/drop-modal.component.ts b/frontend/src/app/spot/components/drop-modal/drop-modal.component.ts
@@ -1,5 +1,5 @@
 import {
-    ChangeDetectionStrategy,
+  ChangeDetectionStrategy,
   Component,
   ElementRef,
   EventEmitter,
@@ -36,6 +36,7 @@ export class SpotDropModalComponent implements OnDestroy {
   /**
    * Boolean indicating whether the modal should be opened
    */
+  /* eslint-disable-next-line @angular-eslint/no-input-rename */
   @Input('open')
   @HostBinding('class.spot-drop-modal_opened')
   set open(value:boolean) {
@@ -49,6 +50,9 @@ export class SpotDropModalComponent implements OnDestroy {
       setTimeout(() => {
         document.body.addEventListener('click', this.closeEventListener);
         document.body.addEventListener('keydown', this.escapeListener);
+        window.addEventListener('resize', this.appHeightListener);
+        window.addEventListener('orientationchange', this.appHeightListener);
+        this.appHeightListener();
 
         const focusCatcherContainer = document.querySelectorAll("[data-modal-focus-catcher-container='true']")[0];
         if (focusCatcherContainer) {
@@ -60,7 +64,10 @@ export class SpotDropModalComponent implements OnDestroy {
       });
     } else {
       document.body.removeEventListener('click', this.closeEventListener);
-      document.body.removeEventListener('click', this.escapeListener);
+      document.body.removeEventListener('keydown', this.escapeListener);
+      window.removeEventListener('resize', this.appHeightListener);
+      window.removeEventListener('orientationchange', this.appHeightListener);
+
       this.closed.emit();
     }
   }
@@ -110,7 +117,9 @@ export class SpotDropModalComponent implements OnDestroy {
 
   ngOnDestroy():void {
     document.body.removeEventListener('click', this.closeEventListener);
-    document.body.removeEventListener('click', this.escapeListener);
+    document.body.removeEventListener('keydown', this.escapeListener);
+    window.removeEventListener('resize', this.appHeightListener);
+    window.removeEventListener('orientationchange', this.appHeightListener);
   }
 
   private closeEventListener = this.close.bind(this) as () => void;
@@ -122,4 +131,9 @@ export class SpotDropModalComponent implements OnDestroy {
   };
 
   private escapeListener = this.onEscape.bind(this) as () => void;
+
+  private appHeightListener = () => {
+    const doc = document.documentElement;
+    doc.style.setProperty('--app-height', `${window.innerHeight}px`);
+  };
 }
diff --git a/frontend/src/app/spot/styles/sass/components/drop-modal.sass b/frontend/src/app/spot/styles/sass/components/drop-modal.sass
@@ -15,8 +15,7 @@
     left: $spot-spacing-1
     right: $spot-spacing-1
     width: calc(100vw - (2 * #{$spot-spacing-1}))
-    max-height: calc(100vh - (#{$spot-spacing-3_5} + #{$spot-spacing-1}))
-
+    max-height: calc(#{var(--app-height)} - (#{$spot-spacing-3_5} + #{$spot-spacing-1}))
     box-shadow: $spot-shadow-light-mid
     background: $spot-color-basic-white
     border-radius: $border-radius
@@ -27,7 +26,7 @@
     @media #{$spot-mq-landscape}
       bottom: $spot-spacing-1
       right: $spot-spacing-3_5
-      max-height: calc(100vh - (2 * #{$spot-spacing-1}))
+      max-height: calc(#{var(--app-height)} - (2 * #{$spot-spacing-1}))
       width: calc(100vw - (#{$spot-spacing-3_5} + #{$spot-spacing-1}))
 
     @media #{$spot-mq-drop-modal-in-context}
@@ -38,7 +37,7 @@
       width: auto
       height: auto
       max-width: calc(100vw - (2 * #{$spot-spacing-1}))
-      max-height: calc(100vh - (2 * #{$spot-spacing-1}))
+      max-height: calc(#{var(--app-height)} - (2 * #{$spot-spacing-1}))
 
       &_left-top
         right: 100%

diff --git a/frontend/src/global_styles/openproject/_variables.scss b/frontend/src/global_styles/openproject/_variables.scss
@@ -32,6 +32,16 @@
   --primary-color: #1A67A3;
   --primary-color-dark: #175A8E;
   --alternative-color: #35C53F;
+
+  /**
+   * The 100vh bug on iOS is a well known issue that will not be addressed.
+   * Using 100vh will not work correctly whenever the bottom toolbar of ios safari is open.
+   * To address the issue, we need to watch the screen height change events and rely on the
+   * window.innerHeight, instead of using 100vh.
+   * See more: https://medium.com/quick-code/100vh-problem-with-ios-safari-92ab23c852a8
+   */
+
+  --app-height: 100vh;
   --body-font-family: 'Lato', 'Lucida Grande', Helvetica, Arial, sans-serif;
   --gray: #EAEAEA;
   --gray-dark: #878787;