diff options
Diffstat (limited to 'www')
| -rw-r--r-- | www/css/fms.css | 24 | ||||
| -rw-r--r-- | www/index.html | 2 | ||||
| -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 |
5 files changed, 41 insertions, 4 deletions
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 ); }, |