github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-06-11 13:16:04 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: mess with iPad and iPhone sizing to compensate for keyboard

Browse Source 
iOS still has no mechanism for figuring out how big the keyboard is, so
we fudge it.
This commit is contained in:
Sam
2017-09-27 16:50:04 +10:00
parent 2568312475
commit a311dd06fe
1 changed files with 27 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
app/assets/javascripts/discourse/lib/safari-hacks.js.es6
View File

@ -6,17 +6,38 @@ export function isAppleDevice() {
!navigator.userAgent.match(/Trident/g); !navigator.userAgent.match(/Trident/g);
} }
// we can't tell what the actual visible window height is // we can't tell what the actual visible window height is
// because we cannot account for the height of the mobile keyboard // because we cannot account for the height of the mobile keyboard
// and any other mobile autocomplete UI that may appear // and any other mobile autocomplete UI that may appear
// so let's be conservative here rather than trying to max out every // so let's be conservative here rather than trying to max out every
// available pixel of height for the editor // available pixel of height for the editor
function calcHeight(composingTopic) { function calcHeight() {
const winHeight = window.innerHeight;
const ratio = composingTopic ? 0.45 : 0.45; // estimate 270 px for keyboard
const min = composingTopic ? 300 : 300; let withoutKeyboard = window.innerHeight - 270;
return Math.max(parseInt(winHeight*ratio), min); const min = 270;
// iPhone 6/7/8
if (window.innerHeight === 553) {
withoutKeyboard = 308;
}
// iPhone 6/7/8 plus
if (window.innerHeight === 622) {
withoutKeyboard = 360;
}
// iPad landscape, so we have a bigger keyboard
if (window.innerWidth > window.innerHeight && window.innerHeight > 690) {
withoutKeyboard -= 128;
}
// iPad portrait also has a bigger keyboard
if (window.innerWidth < window.innerHeight && window.innerHeight > 950) {
withoutKeyboard -= 45;
}
return Math.max(withoutKeyboard, min);
} }
let workaroundActive = false; let workaroundActive = false;