forked from AkkomaGang/akkoma-fe
Add body 100% width for the preview, refactor the modalActivated watcher, use body scroll lock for the setting tab content
This commit is contained in:
parent
dac075c61a
commit
61dd1a3b49
4 changed files with 11 additions and 9 deletions
|
@ -949,6 +949,7 @@ nav {
|
||||||
|
|
||||||
body {
|
body {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
width: 100%;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
}
|
}
|
||||||
|
|
|
@ -38,20 +38,17 @@ const SettingsModal = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
// This is the only way to access the <html> element.
|
||||||
modalActivated (newValue) {
|
modalActivated (newValue) {
|
||||||
|
let html = document.querySelector('html')
|
||||||
|
if (!html) return
|
||||||
if (newValue) {
|
if (newValue) {
|
||||||
let html = document.querySelector('html')
|
|
||||||
if (html) {
|
|
||||||
html.classList.add('settings-modal-layout')
|
html.classList.add('settings-modal-layout')
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
let html = document.querySelector('html')
|
|
||||||
if (html) {
|
|
||||||
html.classList.remove('settings-modal-layout')
|
html.classList.remove('settings-modal-layout')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
export default SettingsModal
|
export default SettingsModal
|
||||||
|
|
|
@ -14,6 +14,10 @@
|
||||||
* - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible
|
* - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible
|
||||||
*/
|
*/
|
||||||
transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px));
|
transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px));
|
||||||
|
|
||||||
|
@media all and (max-width: 800px) {
|
||||||
|
transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 100px));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -134,7 +134,7 @@ export default Vue.component('tab-switcher', {
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
{tabs}
|
{tabs}
|
||||||
</div>
|
</div>
|
||||||
<div ref="contents" class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')}>
|
<div ref="contents" class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')} v-body-scroll-lock>
|
||||||
{contents}
|
{contents}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue