sam/pleroma-fe
sam/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Use bock-scroll-lock directive for the settings modal

Browse source
This commit is contained in:
eugenijm 2020-07-23 09:41:22 +03:00
parent 61dd1a3b49
commit 2298ad0011
4 changed files with 10 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/App.scss
View file

@ -943,23 +943,6 @@ nav {
line-height: 1.3rem;
}
.settings-modal-layout {
@media all and (max-width: 800px) {
height: 100%;
body {
height: 100vh;
width: 100%;
overflow-y: hidden;
position: fixed;
}
#app {
height: 100%;
}
}
}
.chat-layout {
// Needed for smoother chat navigation in the desktop Safari (otherwise the chat layout "jumps" as the chat opens).
overflow: hidden;

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

@ -36,18 +36,6 @@ const SettingsModal = {
modalPeeked () {
return this.$store.state.interface.settingsModalState === 'minimized'
}
},
watch: {
// This is the only way to access the <html> element.
modalActivated (newValue) {
let html = document.querySelector('html')
if (!html) return
if (newValue) {
html.classList.add('settings-modal-layout')
} else {
html.classList.remove('settings-modal-layout')
}
}
}
}

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

@ -1,7 +1,6 @@
@import 'src/_variables.scss';
.settings-modal {
overflow: hidden;
height: 100%;
&.peek {
.settings-modal-panel {
@ -16,7 +15,7 @@
transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px));
@media all and (max-width: 800px) {
transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 100px));
transform: translateY(calc(100% - 50px));
}
}
}

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

@ -1,4 +1,5 @@
import Vue from 'vue'
import { mapState } from 'vuex'
import './tab_switcher.scss'
@ -44,7 +45,13 @@ export default Vue.component('tab-switcher', {
} else {
return this.active
}
}
},
bodyLocked () {
return this.settingsModalState === 'visible'
},
...mapState({
settingsModalState: state => state.interface.settingsModalState
})
},
beforeUpdate () {
const currentSlot = this.$slots.default[this.active]
@ -134,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>
<div ref="contents" class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')} v-body-scroll-lock={this.bodyLocked}>
{contents}
</div>
</div>