From 5740123ee68fe59891b87bcaad297dc929346545 Mon Sep 17 00:00:00 2001 From: taehoon Date: Mon, 20 May 2019 16:19:59 -0400 Subject: [PATCH 1/2] install portal vue --- package.json | 1 + src/main.js | 2 ++ yarn.lock | 4 ++++ 3 files changed, 7 insertions(+) diff --git a/package.json b/package.json index 30a317b2..5409645b 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "object-path": "^0.11.3", "phoenix": "^1.3.0", "popper.js": "^1.14.7", + "portal-vue": "^2.1.4", "sanitize-html": "^1.13.0", "v-click-outside": "^2.1.1", "vue": "^2.5.13", diff --git a/src/main.js b/src/main.js index 92f843b1..e12db6a3 100644 --- a/src/main.js +++ b/src/main.js @@ -24,6 +24,7 @@ import messages from './i18n/messages.js' import VueChatScroll from 'vue-chat-scroll' import VueClickOutside from 'v-click-outside' +import PortalVue from 'portal-vue' import afterStoreSetup from './boot/after_store.js' @@ -42,6 +43,7 @@ Vue.use(VueTimeago, { Vue.use(VueI18n) Vue.use(VueChatScroll) Vue.use(VueClickOutside) +Vue.use(PortalVue) const i18n = new VueI18n({ // By default, use the browser locale, we will update it if neccessary diff --git a/yarn.lock b/yarn.lock index cfc600c9..a91b520f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6101,6 +6101,10 @@ popper.js@^1.14.7: version "1.14.7" resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.7.tgz#e31ec06cfac6a97a53280c3e55e4e0c860e7738e" +portal-vue@^2.1.4: + version "2.1.4" + resolved "https://registry.yarnpkg.com/portal-vue/-/portal-vue-2.1.4.tgz#1fc679d77e294dc8d026f1eb84aa467de11b392e" + posix-character-classes@^0.1.0: version "0.1.1" resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab" From 9c8af14908aca2ff278f16c9e71088570f2eb562 Mon Sep 17 00:00:00 2001 From: taehoon Date: Mon, 20 May 2019 16:21:53 -0400 Subject: [PATCH 2/2] render modal at the root level using portal --- src/App.vue | 1 + src/components/dialog_modal/dialog_modal.vue | 2 ++ .../moderation_tools/moderation_tools.vue | 26 ++++++++++--------- 3 files changed, 17 insertions(+), 12 deletions(-) diff --git a/src/App.vue b/src/App.vue index 21abd694..769e075d 100644 --- a/src/App.vue +++ b/src/App.vue @@ -49,6 +49,7 @@ + diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue index 7621fb20..3da543de 100644 --- a/src/components/dialog_modal/dialog_modal.vue +++ b/src/components/dialog_modal/dialog_modal.vue @@ -62,6 +62,7 @@ .title { margin-bottom: 0; + text-align: center; } } @@ -80,6 +81,7 @@ background-color: var(--lightBg, $fallback--lightBg); border-top: 1px solid $fallback--bg; border-top: 1px solid var(--bg, $fallback--bg); + display: flex; justify-content: flex-end; button { diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue index 146673a5..6a5e8cc0 100644 --- a/src/components/moderation_tools/moderation_tools.vue +++ b/src/components/moderation_tools/moderation_tools.vue @@ -65,18 +65,20 @@ {{ $t('user_card.admin_menu.moderation') }} - - {{ $t('user_card.admin_menu.delete_user') }} -

{{ $t('user_card.admin_menu.delete_user_confirmation') }}

- - - - -
+ + + +

{{ $t('user_card.admin_menu.delete_user_confirmation') }}

+ +
+