moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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:
eugenijm 2020-07-23 12:20:48 +03:00
parent 2298ad0011
commit 77d65d6cec
2 changed files with 5 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,6 +15,9 @@
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) {
/* 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)); transform: translateY(calc(100% - 50px));
} }
} }

4
src/components/tab_switcher/tab_switcher.js
View File

@ -46,7 +46,7 @@ export default Vue.component('tab-switcher', {
return this.active return this.active
} }
}, },
bodyLocked () { settingsModalVisible () {
return this.settingsModalState === 'visible' return this.settingsModalState === 'visible'
}, },
...mapState({ ...mapState({
@ -141,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={this.bodyLocked}> <div ref="contents" class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')} v-body-scroll-lock={this.settingsModalVisible}>
{contents} {contents}
</div> </div>
</div> </div>