diff --git a/src/components/mobile_post_status_modal/mobile_post_status_modal.js b/src/components/mobile_post_status_modal/mobile_post_status_modal.js index 17b08986..2f24dd08 100644 --- a/src/components/mobile_post_status_modal/mobile_post_status_modal.js +++ b/src/components/mobile_post_status_modal/mobile_post_status_modal.js @@ -10,19 +10,25 @@ const MobilePostStatusModal = { hidden: false, postFormOpen: false, scrollingDown: false, + inputActive: false, oldScrollPos: 0, amountScrolled: 0 } }, created () { window.addEventListener('scroll', this.handleScroll) + window.addEventListener('resize', this.handleOSK) }, destroyed () { window.removeEventListener('scroll', this.handleScroll) + window.removeEventListener('resize', this.handleOSK) }, computed: { currentUser () { return this.$store.state.users.currentUser + }, + isHidden () { + return this.hidden || this.inputActive } }, methods: { @@ -39,6 +45,26 @@ const MobilePostStatusModal = { this.postFormOpen = false this.hidden = false }, + handleOSK () { + // This is a big hack: we're guessing from changed window sizes if the + // on-screen keyboard is active or not. This is only really important + // for phones in portrait mode and it's more important to show the button + // in normal scenarios on all phones, than it is to hide it when the + // keyboard is active. + // Guesswork based on https://www.mydevice.io/#compare-devices + + // for example, iphone 4 and android phones from the same time period + const smallPhone = window.innerWidth < 350 + const smallPhoneKbOpen = smallPhone && window.innerHeight < 345 + + const biggerPhone = !smallPhone && window.innerWidth < 450 + const biggerPhoneKbOpen = biggerPhone && window.innerHeight < 560 + if (smallPhoneKbOpen || biggerPhoneKbOpen) { + this.inputActive = true + } else { + this.inputActive = false + } + }, handleScroll: throttle(function () { const scrollAmount = window.scrollY - this.oldScrollPos const scrollingDown = scrollAmount > 0 diff --git a/src/components/mobile_post_status_modal/mobile_post_status_modal.vue b/src/components/mobile_post_status_modal/mobile_post_status_modal.vue index 70ccf0f4..0a451c28 100644 --- a/src/components/mobile_post_status_modal/mobile_post_status_modal.vue +++ b/src/components/mobile_post_status_modal/mobile_post_status_modal.vue @@ -12,7 +12,7 @@