Troplo/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; 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 { .chat-layout {
// Needed for smoother chat navigation in the desktop Safari (otherwise the chat layout "jumps" as the chat opens). // Needed for smoother chat navigation in the desktop Safari (otherwise the chat layout "jumps" as the chat opens).
overflow: hidden; overflow: hidden;

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

@ -36,18 +36,6 @@ const SettingsModal = {
modalPeeked () { modalPeeked () {
return this.$store.state.interface.settingsModalState === 'minimized' 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'; @import 'src/_variables.scss';
.settings-modal { .settings-modal {
overflow: hidden; overflow: hidden;
height: 100%;
&.peek { &.peek {
.settings-modal-panel { .settings-modal-panel {
@ -16,7 +15,7 @@
transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px)); transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px));
@media all and (max-width: 800px) { @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 Vue from 'vue'
import { mapState } from 'vuex'
import './tab_switcher.scss' import './tab_switcher.scss'
@ -44,7 +45,13 @@ export default Vue.component('tab-switcher', {
} else { } else {
return this.active return this.active
} }
} },
bodyLocked () {
return this.settingsModalState === 'visible'
},
...mapState({
settingsModalState: state => state.interface.settingsModalState
})
}, },
beforeUpdate () { beforeUpdate () {
const currentSlot = this.$slots.default[this.active] const currentSlot = this.$slots.default[this.active]
@ -134,7 +141,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' : '')} v-body-scroll-lock> <div ref="contents" class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')} v-body-scroll-lock={this.bodyLocked}>
{contents} {contents}
</div> </div>
</div> </div>