diff options
| author | Dave Arter <davea@mysociety.org> | 2018-03-19 11:34:35 +0000 |
|---|---|---|
| committer | Dave Arter <davea@mysociety.org> | 2018-04-30 13:13:15 +0100 |
| commit | 186cad0fb9d4320ee0ab781704cf692e8aeece06 (patch) | |
| tree | 6e7536741ff980c32c28480e3b8d96aaedf1e8e9 /www/js | |
| parent | 8d8e65fb32b47eeccb3b82ddd1111a8d24856a4d (diff) | |
iPhone X support
Adds a correctly-sized splash sceen image and ensures
the full viewport is used by the webview, as well as
adding sufficient vertical padding based on
`safe-area-inset-bottom` CSS variable.
Diffstat (limited to 'www/js')
| -rw-r--r-- | www/js/app.js | 7 | ||||
| -rw-r--r-- | www/js/views/around.js | 4 | ||||
| -rw-r--r-- | www/js/views/fms.js | 8 |
3 files changed, 16 insertions, 3 deletions
diff --git a/www/js/app.js b/www/js/app.js index 8502581..c45a333 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -278,6 +278,13 @@ var tpl = { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false); } $('#load-screen').height( $(window).height() ); + + // Rough-and-ready iPhone X detection so CSS can stop things + // obscuring the home indicator at the bottom of the screen. + if (window.screen.width == 375 && window.screen.height == 812) { + $("body").addClass("iphone-x"); + } + FMS.initialized = 1; if ( navigator && navigator.splashscreen ) { navigator.splashscreen.hide(); diff --git a/www/js/views/around.js b/www/js/views/around.js index bafc65d..8ebe8f8 100644 --- a/www/js/views/around.js +++ b/www/js/views/around.js @@ -410,9 +410,7 @@ pauseMap: function() { this.stopListening(FMS.locator); FMS.locator.stopTracking(); - if ( FMS.iPhoneModel > 3 ) { - $('#map_box').addClass('background-map'); - } + $('#map_box').addClass('background-map'); $('#map_box').off('touchend'); if ( fixmystreet.map ) { fixmystreet.nav.deactivate(); diff --git a/www/js/views/fms.js b/www/js/views/fms.js index 4e1a0a4..711968f 100644 --- a/www/js/views/fms.js +++ b/www/js/views/fms.js @@ -52,6 +52,14 @@ viewHeight = $(window).height(), contentHeight = FMS.windowHeight - header.outerHeight() - this.bottomMargin; + if ($("body").hasClass("iphone-x")) { + var body = $("body").get(0); + var inset = window.getComputedStyle(body).getPropertyValue("--safe-area-inset-bottom"); + // We want the pixel value, not the CSS string + inset = parseInt(inset.replace(/[^\d]*/g, '')); + contentHeight -= inset; + } + this.setHeight( content, contentHeight - top ); }, |