diff --git a/app/components/gh-fullscreen-modal.js b/app/components/gh-fullscreen-modal.js index e60e80693..2e7cba8bb 100644 --- a/app/components/gh-fullscreen-modal.js +++ b/app/components/gh-fullscreen-modal.js @@ -4,42 +4,34 @@ import {A as emberA} from 'ember-array/utils'; import {isBlank} from 'ember-utils'; import on from 'ember-evented/on'; import run from 'ember-runloop'; - -import LiquidTether from 'liquid-tether/components/liquid-tether'; import {invokeAction} from 'ember-invoke-action'; +import computed from 'ember-computed'; +import Component from 'ember-component'; -const {Promise} = RSVP; +const FullScreenModalComponent = Component.extend({ -const FullScreenModalComponent = LiquidTether.extend({ - to: 'fullscreen-modal', - target: 'document.body', - targetModifier: 'visible', - targetAttachment: 'top center', - attachment: 'top center', - tetherClass: 'fullscreen-modal', - overlayClass: 'fullscreen-modal-background', - modalPath: 'unknown', + model: null, + modifier: null, dropdown: injectService(), - init() { - this._super(...arguments); - this.modalPath = `modals/${this.get('modal')}`; - }, + modalPath: computed('modal', function () { + return `modals/${this.get('modal') || 'unknown'}`; + }), - setTetherClass: on('init', function () { - let tetherClass = this.get('tetherClass'); + modalClasses: computed('modifiers', function () { + let modalClass = 'fullscreen-modal'; let modifiers = (this.get('modifier') || '').split(' '); - let tetherClasses = emberA([tetherClass]); + let modalClasses = emberA([modalClass]); modifiers.forEach((modifier) => { if (!isBlank(modifier)) { - let className = `${tetherClass}-${modifier}`; - tetherClasses.push(className); + let className = `${modalClass}-${modifier}`; + modalClasses.push(className); } }); - this.set('tetherClass', tetherClasses.join(' ')); + return modalClasses.join(' '); }), closeDropdowns: on('didInsertElement', function () { @@ -56,9 +48,7 @@ const FullScreenModalComponent = LiquidTether.extend({ return invokeAction(this, 'close'); } - return new Promise((resolve) => { - resolve(); - }); + return RSVP.resolve(); }, confirm() { @@ -66,9 +56,7 @@ const FullScreenModalComponent = LiquidTether.extend({ return invokeAction(this, 'confirm'); } - return new Promise((resolve) => { - resolve(); - }); + return RSVP.resolve(); }, clickOverlay() { diff --git a/app/styles/components/modals.css b/app/styles/components/modals.css index fd52dbe1a..c0205f201 100644 --- a/app/styles/components/modals.css +++ b/app/styles/components/modals.css @@ -5,8 +5,16 @@ /* Fullscreen Modal /* ---------------------------------------------------------- */ -.fullscreen-modal-liquid-target { - overflow-y: auto; +/* explicit modal container so that background and content can be animated individually */ +.fullscreen-modal-container { + visibility: hidden; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 10000; + overflow: auto; height: 100vh; } @@ -16,15 +24,18 @@ right: 0; bottom: 0; left: 0; - z-index: 0; + z-index: 50; + height: 100vh; background: rgba(0, 0, 0, 0.6); } .fullscreen-modal { - padding-top: 30px; - padding-bottom: 30px; + position: relative; + z-index: 100; + margin: auto; + margin-top: 30px; + margin-bottom: 30px; max-width: 550px; - width: 100%; pointer-events: auto; } @@ -48,12 +59,12 @@ } .fullscreen-modal-action { - padding: 60px 0 30px; + margin: 60px auto 30px; } @media (max-width: 900px) { .fullscreen-modal-action { - padding: 30px 0; + margin: 30px auto; } } diff --git a/app/templates/components/gh-fullscreen-modal.hbs b/app/templates/components/gh-fullscreen-modal.hbs index 06ecdf5f7..c0b60a8f6 100644 --- a/app/templates/components/gh-fullscreen-modal.hbs +++ b/app/templates/components/gh-fullscreen-modal.hbs @@ -1,11 +1,13 @@ -
-