commit: 9a10ad38260cc4d1ef93a6988ef2cb0941080156
parent 7bd684670384b082d9b87a3a1eacf04dbce0267d
Author: Shpuld Shpludson <shp@cock.li>
Date: Thu, 6 Aug 2020 09:53:24 +0000
Merge branch 'mobile-setting-modal-fix' into 'develop'
Mobile setting modal behavior fixes
Closes #908
See merge request pleroma/pleroma-fe!1200
Diffstat:
2 files changed, 17 insertions(+), 3 deletions(-)
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
@@ -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 {
diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js
@@ -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>