Merge branch 'mobile-setting-modal-fix' into 'develop'

Mobile setting modal behavior fixes

Closes #908

See merge request pleroma/pleroma-fe!1200
This commit is contained in:
Shpuld Shpludson 2020-08-06 09:53:24 +00:00
commit 9a10ad3826
2 changed files with 17 additions and 3 deletions

View file

@ -13,6 +13,13 @@
* - 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) {
/* For mobile, the modal takes 100% of the available screen.
This ensures the minimized modal is always 50px above the browser bottom bar regardless of whether or not it is visible.
*/
transform: translateY(calc(100% - 50px));
}
}
}
@ -27,7 +34,7 @@
@media all and (max-width: 800px) {
max-width: 100vw;
height: 100vh;
height: 100%;
}
>.panel-body {

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
}
}
},
settingsModalVisible () {
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' : '')}>
<div ref="contents" class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')} v-body-scroll-lock={this.settingsModalVisible}>
{contents}
</div>
</div>