diff options
| author | eugenijm <eugenijm@protonmail.com> | 2020-07-23 12:20:48 +0300 |
|---|---|---|
| committer | eugenijm <eugenijm@protonmail.com> | 2020-07-23 16:36:21 +0300 |
| commit | 77d65d6cecfae1bdbf5e5b7d8c882d39846b91f1 (patch) | |
| tree | 8eb339ca8b0bb16d5282f728c1f80b905aceae59 | |
| parent | 2298ad0011e8507a138d967ed142641981e1e297 (diff) | |
Ensures the minimized modal is always 50px above the mobile browser bottom bar regardless of whether or not it is visible.
| -rw-r--r-- | src/components/settings_modal/settings_modal.scss | 3 | ||||
| -rw-r--r-- | src/components/tab_switcher/tab_switcher.js | 4 |
2 files changed, 5 insertions, 2 deletions
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss index cdb32fd7..90446b36 100644 --- a/src/components/settings_modal/settings_modal.scss +++ b/src/components/settings_modal/settings_modal.scss @@ -15,6 +15,9 @@ transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px)); @media all and (max-width: 800px) { + /* For mobile, the modal takes 100% of the available screen. + This ensures the minimized modal is always 50px above the browser bottom bar regardless of whether or not it is visible. + */ transform: translateY(calc(100% - 50px)); } } diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js index 19206610..40b5b3ca 100644 --- a/src/components/tab_switcher/tab_switcher.js +++ b/src/components/tab_switcher/tab_switcher.js @@ -46,7 +46,7 @@ export default Vue.component('tab-switcher', { return this.active } }, - bodyLocked () { + settingsModalVisible () { return this.settingsModalState === 'visible' }, ...mapState({ @@ -141,7 +141,7 @@ export default Vue.component('tab-switcher', { <div class="tabs"> {tabs} </div> - <div ref="contents" class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')} v-body-scroll-lock={this.bodyLocked}> + <div ref="contents" class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')} v-body-scroll-lock={this.settingsModalVisible}> {contents} </div> </div> |