From 61dd1a3b4935d0466bfd77e026c19461d62b124f Mon Sep 17 00:00:00 2001
From: eugenijm <eugenijm@protonmail.com>
Date: Thu, 23 Jul 2020 09:06:50 +0300
Subject: [PATCH] Add body 100% width for the preview, refactor the
modalActivated watcher, use body scroll lock for the setting tab content
---
src/App.scss | 1 +
src/components/settings_modal/settings_modal.js | 13 +++++--------
src/components/settings_modal/settings_modal.scss | 4 ++++
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>