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 * - 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) {
/* 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) { @media all and (max-width: 800px) {
max-width: 100vw; max-width: 100vw;
height: 100vh; height: 100%;
} }
>.panel-body { >.panel-body {

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