From 2298ad0011e8507a138d967ed142641981e1e297 Mon Sep 17 00:00:00 2001 From: eugenijm Date: Thu, 23 Jul 2020 09:41:22 +0300 Subject: [PATCH] Use bock-scroll-lock directive for the settings modal --- src/App.scss | 17 ----------------- src/components/settings_modal/settings_modal.js | 12 ------------ .../settings_modal/settings_modal.scss | 3 +-- src/components/tab_switcher/tab_switcher.js | 11 +++++++++-- 4 files changed, 10 insertions(+), 33 deletions(-) diff --git a/src/App.scss b/src/App.scss index 336c4998..e2e2d079 100644 --- a/src/App.scss +++ b/src/App.scss @@ -943,23 +943,6 @@ nav { line-height: 1.3rem; } -.settings-modal-layout { - @media all and (max-width: 800px) { - height: 100%; - - body { - height: 100vh; - width: 100%; - overflow-y: hidden; - position: fixed; - } - - #app { - height: 100%; - } - } -} - .chat-layout { // Needed for smoother chat navigation in the desktop Safari (otherwise the chat layout "jumps" as the chat opens). overflow: hidden; diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js index 4f54d6a3..f0d49c91 100644 --- a/src/components/settings_modal/settings_modal.js +++ b/src/components/settings_modal/settings_modal.js @@ -36,18 +36,6 @@ const SettingsModal = { modalPeeked () { return this.$store.state.interface.settingsModalState === 'minimized' } - }, - watch: { - // This is the only way to access the element. - modalActivated (newValue) { - let html = document.querySelector('html') - if (!html) return - if (newValue) { - html.classList.add('settings-modal-layout') - } else { - html.classList.remove('settings-modal-layout') - } - } } } diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss index f32db4bd..cdb32fd7 100644 --- a/src/components/settings_modal/settings_modal.scss +++ b/src/components/settings_modal/settings_modal.scss @@ -1,7 +1,6 @@ @import 'src/_variables.scss'; .settings-modal { overflow: hidden; - height: 100%; &.peek { .settings-modal-panel { @@ -16,7 +15,7 @@ transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px)); @media all and (max-width: 800px) { - transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 100px)); + transform: translateY(calc(100% - 50px)); } } } diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js index 919eb7cd..19206610 100644 --- a/src/components/tab_switcher/tab_switcher.js +++ b/src/components/tab_switcher/tab_switcher.js @@ -1,4 +1,5 @@ import Vue from 'vue' +import { mapState } from 'vuex' import './tab_switcher.scss' @@ -44,7 +45,13 @@ export default Vue.component('tab-switcher', { } else { return this.active } - } + }, + bodyLocked () { + return this.settingsModalState === 'visible' + }, + ...mapState({ + settingsModalState: state => state.interface.settingsModalState + }) }, beforeUpdate () { const currentSlot = this.$slots.default[this.active] @@ -134,7 +141,7 @@ export default Vue.component('tab-switcher', {
{tabs}
-
+
{contents}