Ensures the minimized modal is always 50px above the mobile browser bottom bar regardless of whether or not it is visible.
This commit is contained in:
parent
2298ad0011
commit
77d65d6cec
|
@ -15,6 +15,9 @@
|
|||
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));
|
||||
}
|
||||
}
|
||||
|
|
|
@ -46,7 +46,7 @@ export default Vue.component('tab-switcher', {
|
|||
return this.active
|
||||
}
|
||||
},
|
||||
bodyLocked () {
|
||||
settingsModalVisible () {
|
||||
return this.settingsModalState === 'visible'
|
||||
},
|
||||
...mapState({
|
||||
|
@ -141,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={this.bodyLocked}>
|
||||
<div ref="contents" class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')} v-body-scroll-lock={this.settingsModalVisible}>
|
||||
{contents}
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue