diff options
| author | eugenijm <eugenijm@protonmail.com> | 2020-07-23 09:06:50 +0300 |
|---|---|---|
| committer | eugenijm <eugenijm@protonmail.com> | 2020-07-23 09:53:51 +0300 |
| commit | 61dd1a3b4935d0466bfd77e026c19461d62b124f (patch) | |
| tree | 4895a62ea70929a9a96efc25b1be5b4e7838aa03 | |
| parent | dac075c61a33eafa6778d04b9f972dbc1e1dfb57 (diff) | |
Add body 100% width for the preview, refactor the modalActivated watcher, use body scroll lock for the setting tab content
| -rw-r--r-- | src/App.scss | 1 | ||||
| -rw-r--r-- | src/components/settings_modal/settings_modal.js | 13 | ||||
| -rw-r--r-- | src/components/settings_modal/settings_modal.scss | 4 | ||||
| -rw-r--r-- | src/components/tab_switcher/tab_switcher.js | 2 |
4 files changed, 11 insertions, 9 deletions
diff --git a/src/App.scss b/src/App.scss index 21c00bac..336c4998 100644 --- a/src/App.scss +++ b/src/App.scss @@ -949,6 +949,7 @@ nav { body { height: 100vh; + width: 100%; overflow-y: hidden; position: fixed; } diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js index b6880445..4f54d6a3 100644 --- a/src/components/settings_modal/settings_modal.js +++ b/src/components/settings_modal/settings_modal.js @@ -38,17 +38,14 @@ const SettingsModal = { } }, watch: { + // This is the only way to access the <html> element. modalActivated (newValue) { + let html = document.querySelector('html') + if (!html) return if (newValue) { - let html = document.querySelector('html') - if (html) { - html.classList.add('settings-modal-layout') - } + html.classList.add('settings-modal-layout') } else { - let html = document.querySelector('html') - if (html) { - html.classList.remove('settings-modal-layout') - } + 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 e7f4d3d3..f32db4bd 100644 --- a/src/components/settings_modal/settings_modal.scss +++ b/src/components/settings_modal/settings_modal.scss @@ -14,6 +14,10 @@ * - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible */ transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px)); + + @media all and (max-width: 800px) { + transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 100px)); + } } } diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js index 7891cb78..919eb7cd 100644 --- a/src/components/tab_switcher/tab_switcher.js +++ b/src/components/tab_switcher/tab_switcher.js @@ -134,7 +134,7 @@ export default Vue.component('tab-switcher', { <div class="tabs"> {tabs} </div> - <div ref="contents" class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')}> + <div ref="contents" class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')} v-body-scroll-lock> {contents} </div> </div> |