github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-26 22:43:43 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: iOS 11 modals now hide all background

Browse Source 
This fixes issues where login looks very buggy on iOS

see also: https://meta.discourse.org/t/ios-11-makes-discourse-buggy/71140/7
This commit is contained in:
Sam 2017-11-08 07:31:45 +11:00
parent 667b025d12
commit 3f2105db85
1 changed files with 30 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
app/assets/javascripts/discourse/lib/show-modal.js.es6
View File

@ -1,7 +1,37 @@
import { isAppleDevice } from 'discourse/lib/safari-hacks';
export default function(name, opts) { export default function(name, opts) {
opts = opts || {}; opts = opts || {};
const container = Discourse.__container__; const container = Discourse.__container__;
// iOS 11 -> 11.1 have broken INPUTs on position fixed
// if for any reason there is a body higher than 100% behind them.
// What happens is that when INPUTs gets focus they shift the body
// which ends up moving the cursor to an invisible spot
// this makes the login experience on iOS painful, user thinks it is broken.
//
// Also, very little value in showing main outlet and header on iOS
// anyway, so just hide it.
if (isAppleDevice()) {
let pos = $(window).scrollTop();
$(window)
.off('show.bs.modal.ios-hacks')
.on('show.bs.modal.ios-hacks', () => {
$('#main-outlet, header').hide();
});
$(window)
.off('hide.bs.modal.ios-hacks')
.on('hide.bs.modal.ios-hacks', () => {
$('#main-outlet, header').show();
$(window).scrollTop(pos);
$(window).off('hide.bs.modal.ios-hacks');
$(window).off('show.bs.modal.ios-hacks');
});
}
// We use the container here because modals are like singletons // We use the container here because modals are like singletons
// in Discourse. Only one can be shown with a particular state. // in Discourse. Only one can be shown with a particular state.
const route = container.lookup('route:application'); const route = container.lookup('route:application');