diff options
15 files changed, 42 insertions, 4 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index a74cb5f..2d36942 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,5 +3,6 @@ * Unreleased - New features - Multiple photo support. #107 + - iPhone X support. #259 - Development improvements - CONFIG.SKIP_CONFIRM_REPORT flag to skip confirmation screen diff --git a/res/ios/splash/Default-1125@3x~iphonex-portrait_1125x2436.png b/res/ios/splash/Default-1125@3x~iphonex-portrait_1125x2436.png Binary files differnew file mode 100644 index 0000000..bdf6d12 --- /dev/null +++ b/res/ios/splash/Default-1125@3x~iphonex-portrait_1125x2436.png diff --git a/res/ios/splash/Default-1242@3x~iphone6s-portrait_1242x2208.png b/res/ios/splash/Default-1242@3x~iphone6s-portrait_1242x2208.png Binary files differindex e60610d..e60610d 100755..100644 --- a/res/ios/splash/Default-1242@3x~iphone6s-portrait_1242x2208.png +++ b/res/ios/splash/Default-1242@3x~iphone6s-portrait_1242x2208.png diff --git a/res/ios/splash/Default-568h@2x~iphone_640x1136.png b/res/ios/splash/Default-568h@2x~iphone_640x1136.png Binary files differindex a9acffc..a9acffc 100755..100644 --- a/res/ios/splash/Default-568h@2x~iphone_640x1136.png +++ b/res/ios/splash/Default-568h@2x~iphone_640x1136.png diff --git a/res/ios/splash/Default-750@2x~iphone6-portrait_750x1334.png b/res/ios/splash/Default-750@2x~iphone6-portrait_750x1334.png Binary files differindex 4926f98..4926f98 100755..100644 --- a/res/ios/splash/Default-750@2x~iphone6-portrait_750x1334.png +++ b/res/ios/splash/Default-750@2x~iphone6-portrait_750x1334.png diff --git a/res/ios/splash/Default-Portrait@2x~ipad_1536x2008.png b/res/ios/splash/Default-Portrait@2x~ipad_1536x2008.png Binary files differindex 6504a06..6504a06 100755..100644 --- a/res/ios/splash/Default-Portrait@2x~ipad_1536x2008.png +++ b/res/ios/splash/Default-Portrait@2x~ipad_1536x2008.png diff --git a/res/ios/splash/Default-Portrait@2x~ipad_1536x2048.png b/res/ios/splash/Default-Portrait@2x~ipad_1536x2048.png Binary files differindex 33a18fc..33a18fc 100755..100644 --- a/res/ios/splash/Default-Portrait@2x~ipad_1536x2048.png +++ b/res/ios/splash/Default-Portrait@2x~ipad_1536x2048.png diff --git a/res/ios/splash/Default-Portrait~ipad_768x1024.png b/res/ios/splash/Default-Portrait~ipad_768x1024.png Binary files differindex 20c5109..20c5109 100755..100644 --- a/res/ios/splash/Default-Portrait~ipad_768x1024.png +++ b/res/ios/splash/Default-Portrait~ipad_768x1024.png diff --git a/res/ios/splash/Default@2x~iphone_640x960.png b/res/ios/splash/Default@2x~iphone_640x960.png Binary files differindex facda8e..facda8e 100755..100644 --- a/res/ios/splash/Default@2x~iphone_640x960.png +++ b/res/ios/splash/Default@2x~iphone_640x960.png diff --git a/res/ios/splash/Default~iphone.png b/res/ios/splash/Default~iphone.png Binary files differindex 50741df..50741df 100755..100644 --- a/res/ios/splash/Default~iphone.png +++ b/res/ios/splash/Default~iphone.png diff --git a/www/css/fms.css b/www/css/fms.css index 9ed3fd0..de94e95 100644 --- a/www/css/fms.css +++ b/www/css/fms.css @@ -423,6 +423,9 @@ -webkit-filter: blur(3px); opacity: 0.9; } + #map_box.background-map .olControlAttribution{ + display: none; + } #map{ opacity: 0.85; @@ -952,3 +955,24 @@ .ui-content.hidden { visibility: hidden; } + +/* iPhone X has an 'unsafe' area occupied by the home +indicator at the bottom of screen, which we need to stop UI controls +clashing with. */ +body.iphone-x { + /* iOS 11–11.1 use constant(), 11.2 uses env() - assign whatever one is valid + to a CSS variable as this makes things simpler (e.g. with calc()) */ + --safe-area-inset-bottom: constant(safe-area-inset-bottom); + --safe-area-inset-bottom: env(safe-area-inset-bottom); +} + +/* The OpenLayers attribution control */ +body.iphone-x .olControlAttribution { + padding-bottom: var(--safe-area-inset-bottom); +} + +/* The "new report here" button */ +body.iphone-x .map-bottom-btn { + /* Can't use env() inside calc(), so assign value to a CSS variable instead */ + bottom: calc(20px + var(--safe-area-inset-bottom)); +} diff --git a/www/index.html b/www/index.html index aae1e71..b60ab56 100644 --- a/www/index.html +++ b/www/index.html @@ -8,7 +8,7 @@ --> <head> <title></title> - <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" /> <meta charset="utf-8"> <script type="text/javascript" src="jslib/jquery-1.9.1.min.js"></script> 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 ); }, |
