Tweaks to be more mobile friendly

src/RapidElement.ts

@@ -36,6 +36,7 @@ export interface EventHandler {
   event: string;
   method: EventListener;
   isDocument?: boolean;
+  isWindow?: boolean;
 }
 
 export class RapidElement extends LitElement {
@@ -54,6 +55,8 @@ export class RapidElement extends LitElement {
     for (const handler of this.getEventHandlers()) {
       if (handler.isDocument) {
         document.addEventListener(handler.event, handler.method.bind(this));
+      } else if (handler.isWindow) {
+        window.addEventListener(handler.event, handler.method.bind(this));
       } else {
         this.addEventListener(handler.event, handler.method.bind(this));
       }
@@ -64,6 +67,8 @@ export class RapidElement extends LitElement {
     for (const handler of this.getEventHandlers()) {
       if (handler.isDocument) {
         document.removeEventListener(handler.event, handler.method);
+      } else if (handler.isWindow) {
+        window.removeEventListener(handler.event, handler.method);
       } else {
         this.removeEventListener(handler.event, handler.method);
       }
@@ -173,4 +178,12 @@ export class RapidElement extends LitElement {
       event.preventDefault();
     }
   }
+
+  public isMobile() {
+    const win = window as any;
+    if (win.isMobile) {
+      return win.isMobile();
+    }
+    return false;
+  }
 }

src/ResizeElement.ts

@@ -0,0 +1,18 @@
+import { RapidElement } from './RapidElement';
+import { throttle } from './utils';
+
+export class ResizeElement extends RapidElement {
+  public handleResize() {
+    this.requestUpdate();
+  }
+
+  public getEventHandlers() {
+    return [
+      {
+        event: 'resize',
+        method: throttle(this.handleResize, 50),
+        isWindow: true,
+      },
+    ];
+  }
+}

src/dialog/Dialog.ts

@@ -5,6 +5,7 @@ import { RapidElement } from '../RapidElement';
 import { CustomEventType } from '../interfaces';
 import { styleMap } from 'lit-html/directives/style-map.js';
 import { getClasses } from '../utils';
+import { ResizeElement } from '../ResizeElement';
 
 export enum ButtonType {
   PRIMARY = 'primary',
@@ -19,7 +20,7 @@ export class DialogButton {
   closes?: boolean;
 }
 
-export class Dialog extends RapidElement {
+export class Dialog extends ResizeElement {
   static get widths(): { [size: string]: string } {
     return {
       small: '400px',
@@ -86,12 +87,14 @@ export class Dialog extends RapidElement {
         transform: scale(0.9) translatey(2em);
         background: white;
         margin: auto;
+        display: flex;
+        flex-direction: column;
       }
 
       .dialog-body {
         background: #fff;
-        max-height: 75vh;
         overflow-y: auto;
+        flex-grow: 1;
       }
 
       .dialog-mask.dialog-open {
@@ -397,6 +400,12 @@ export class Dialog extends RapidElement {
       dialogStyle['width'] = Dialog.widths[this.size];
     }
 
+    if (this.isMobile()) {
+      dialogStyle['width'] = '100%';
+      dialogStyle['height'] = '100%';
+      delete dialogStyle['maxWidth'];
+    }
+
     const header = this.header
       ? html`
           <div class="dialog-header">
@@ -428,14 +437,18 @@ export class Dialog extends RapidElement {
         </div>
 
         <div class="flex">
-          <div class="grow-top"></div>
+          <div class="grow-top" style="${
+            this.isMobile() ? 'flex-grow:0' : ''
+          }"></div>
           <div
             @keyup=${this.handleKeyUp}
             style=${styleMap(dialogStyle)}
             class="dialog-container"
           >
             ${header}
-            <div class="dialog-body" @keypress=${this.handleKeyUp}>
+            <div class="dialog-body" @keypress=${this.handleKeyUp} ${
+      this.isMobile() ? 'flex-grow:1;max-height:""' : ''
+    } >
               ${this.body ? this.body : html`<slot></slot>`}
               <temba-loading units="6" size="8"></temba-loading>
             </div>
@@ -460,7 +473,9 @@ export class Dialog extends RapidElement {
               )}
               </div>
             </div>
-            <div class="grow-bottom"></div>
+            <div class="grow-bottom" style="${
+              this.isMobile() ? 'flex-grow:0' : ''
+            }"></div>
           </div>
         </div>
       </div>

src/dialog/Modax.ts

@@ -435,7 +435,10 @@ export class Modax extends RapidElement {
         @temba-button-clicked=${this.handleDialogClick.bind(this)}
         @temba-dialog-hidden=${this.handleDialogHidden.bind(this)}
       >
-        <div class="modax-body${this.submitting ? ' submitting' : ''}">
+        <div
+          class="modax-body ${this.submitting ? 'submitting' : ''}"
+          style="${this.isMobile() ? 'flex-grow:1' : ''}"
+        >
           ${this.body}
         </div>
         <div class="scripts"></div>

src/dropdown/Dropdown.ts

@@ -161,12 +161,6 @@ export class Dropdown extends RapidElement {
     }
 
     if (changedProperties.has('open')) {
-      if (this.open) {
-        this.classList.add('open');
-      } else {
-        this.classList.remove('open');
-      }
-
       this.ensureOnScreen();
     }
   }
@@ -179,10 +173,29 @@ export class Dropdown extends RapidElement {
 
       if (dropdown) {
         // dropdown will go off the screen, let's push it up
+        const toggle = this.querySelector('div[slot="toggle"]');
         if (dropdown.getBoundingClientRect().bottom > window.innerHeight) {
-          const toggle = this.querySelector('div[slot="toggle"]');
-          dropdown.style.bottom =
-            this.offsetY + toggle.clientHeight + 10 + 'px';
+          if (this.bottom) {
+            dropdown.style.top = toggle.clientHeight + 'px';
+          } else {
+            dropdown.style.top = '';
+            dropdown.style.bottom = toggle.clientHeight + 'px';
+          }
+        } else if (dropdown.getBoundingClientRect().top < 0) {
+          if (this.bottom) {
+            dropdown.style.top = toggle.clientHeight + 'px';
+          } else {
+            dropdown.style.top = toggle.clientHeight + 'px';
+            dropdown.style.bottom = '';
+          }
+        }
+
+        if (dropdown.getBoundingClientRect().right > window.innerWidth) {
+          dropdown.style.left = '';
+          dropdown.style.right = 0 + 'px';
+        } else if (dropdown.getBoundingClientRect().left < 0) {
+          dropdown.style.left = 0 + 'px';
+          dropdown.style.right = '';
         }
       }
     }, 100);

src/list/ContentMenu.ts

@@ -160,11 +160,11 @@ export class ContentMenu extends RapidElement {
           </temba-button>`;
         })}
         ${this.items && this.items.length > 0
-          ? html` <temba-dropdown
+          ? html`<temba-dropdown
               arrowsize="8"
               arrowoffset="-12"
-              offsetx="-200"
               offsety="6"
+              bottom
             >
               <div slot="toggle" class="toggle">
                 <temba-icon name="menu" size="1.5"></temba-icon>