drudge/pleroma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add body 100% width for the preview, refactor the modalActivated watcher, use body scroll lock for the setting tab content

Browse source
This commit is contained in:
eugenijm 2020-07-23 09:06:50 +03:00
parent dac075c61a
commit 61dd1a3b49
4 changed files with 11 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/App.scss
View file

@ -949,6 +949,7 @@ nav {
body { body {
height: 100vh; height: 100vh;
width: 100%;
overflow-y: hidden; overflow-y: hidden;
position: fixed; position: fixed;
} }

9
src/components/settings_modal/settings_modal.js
View file

@ -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

4
src/components/settings_modal/settings_modal.scss
View file

@ -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));
}
} }
} }

2
src/components/tab_switcher/tab_switcher.js
View file

@ -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>