Commit 66605a3a authored by Benoit Lavenier's avatar Benoit Lavenier

Merge branch 'feature/ios-support' into 'master'

iOS support changes and mobile fixes

See merge request clients/cesium-grp/cesium!567
parents dd1c4f60 b8539a94
......@@ -2,14 +2,14 @@
"name": "cesium",
"private": "true",
"devDependencies": {
"ionic": "driftyco/ionic-bower#1.3.1",
"ionic": "driftyco/ionic-bower#1.3.5",
"ionic-material": "0.4.2"
},
"dependencies": {
"angular-messages": "1.3.13",
"robotodraft": "1.1.0",
"angular-moment": "^0.10.3",
"angular-animate": "1.4.3",
"angular-animate": "1.5.3",
"angular-sanitize": "1.5.3",
"angular": "1.5.3",
"angular-bind-notifier": "^1.1.7",
......@@ -27,9 +27,9 @@
"ion-digit-keyboard": "skol-pro/ion-digit-keyboard"
},
"resolutions": {
"angular-sanitize": "1.5.3",
"angular-animate": "1.5.3",
"angular": "1.5.3",
"ionic": "1.3.1"
"ionic": "1.3.5",
"angular-animate": "1.5.3",
"angular-sanitize": "1.5.3"
}
}
......@@ -60,34 +60,48 @@
</platform>
<platform name="ios">
<preference name="BackupWebStorage" value="local" />
<icon height="57" src="resources/ios/icon/icon.png" width="57" />
<icon height="114" src="resources/ios/icon/icon@2x.png" width="114" />
<icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
<icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
<icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
<icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
<icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
<icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
<icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
<icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
<icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
<icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
<icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
<icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
<icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
<icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
<icon height="20" src="resources/ios/icon/Icon-App-20x20@1x.png" width="20" />
<icon height="40" src="resources/ios/icon/Icon-App-20x20@2x.png" width="40" />
<icon height="60" src="resources/ios/icon/Icon-App-20x20@3x.png" width="60" />
<icon height="29" src="resources/ios/icon/Icon-App-29x29@1x.png" width="29" />
<icon height="58" src="resources/ios/icon/Icon-App-29x29@2x.png" width="58" />
<icon height="87" src="resources/ios/icon/Icon-App-29x29@3x.png" width="87" />
<icon height="40" src="resources/ios/icon/Icon-App-40x40@1x.png" width="40" />
<icon height="80" src="resources/ios/icon/Icon-App-40x40@2x.png" width="80" />
<icon height="120" src="resources/ios/icon/Icon-App-40x40@3x.png" width="120" />
<icon height="50" src="resources/ios/icon/Icon-App-50x50@1x.png" width="50" />
<icon height="100" src="resources/ios/icon/Icon-App-50x50@2x.png" width="100" />
<icon height="57" src="resources/ios/icon/Icon-App-57x57@1x.png" width="57" />
<icon height="114" src="resources/ios/icon/Icon-App-57x57@2x.png" width="114" />
<icon height="120" src="resources/ios/icon/Icon-App-60x60@2x.png" width="120" />
<icon height="180" src="resources/ios/icon/Icon-App-60x60@3x.png" width="180" />
<icon height="72" src="resources/ios/icon/Icon-App-72x72@1x.png" width="72" />
<icon height="144" src="resources/ios/icon/Icon-App-72x72@2x.png" width="144" />
<icon height="76" src="resources/ios/icon/Icon-App-76x76@1x.png" width="76" />
<icon height="152" src="resources/ios/icon/Icon-App-76x76@2x.png" width="152" />
<icon height="167" src="resources/ios/icon/Icon-App-83.5x83.5@2x.png" width="167" />
<icon height="1024" src="resources/ios/icon/ItunesArtwork@2x.png" width="1024" />
<splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
<splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
<splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
<splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
<splash height="2436" src="resources/ios/splash/Default-2436h.png" width="1125" />
<splash height="1125" src="resources/ios/splash/Default-Landscape-2436h.png" width="2436" />
<splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
<splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
<splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
<splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
<splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
<splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
<edit-config file="*-Info.plist" mode="merge" target="NSCameraUsageDescription">
<string>To scan QRCode</string>
</edit-config>
<edit-config file="*-Info.plist" mode="merge" target="NSPhotoLibraryUsageDescription">
<string>To choose a profile picture</string>
</edit-config>
</platform>
<engine name="android" spec="^6.2.3" />
<engine name="ios" spec="^4.5.5" />
<plugin name="cordova-plugin-camera" spec="^2.4.1" />
<plugin name="cordova-plugin-console" spec="^1.0.7" />
<plugin name="cordova-plugin-device" spec="^1.1.6" />
......@@ -96,13 +110,13 @@
<plugin name="cordova-plugin-minisodium" spec="^1.0.0" />
<plugin name="cordova-plugin-secure-storage" spec="^2.6.8" />
<plugin name="cordova-plugin-splashscreen" spec="^3.2.2" />
<plugin name="cordova-plugin-statusbar" spec="^2.2.3" />
<plugin name="cordova-plugin-statusbar" spec="^2.4.2" />
<plugin name="cordova-plugin-vibration" spec="^2.1.5" />
<plugin name="cordova-plugin-websocket" spec="^0.12.2" />
<plugin name="cordova-plugin-whitelist" spec="^1.3.2" />
<plugin name="cordova-plugin-x-toast" spec="^2.6.0" />
<plugin name="ionic-plugin-keyboard" spec="^2.2.1" />
<plugin name="phonegap-plugin-barcodescanner" spec="git+https://github.com/phonegap/phonegap-plugin-barcodescanner.git">
<variable name="CAMERA_USAGE_DESCRIPTION" value=" QRCode scan" />
<variable name="CAMERA_USAGE_DESCRIPTION" value=" " />
</plugin>
</widget>
......@@ -32,6 +32,7 @@
"dependencies": {
"cordova": "^6.5.0",
"cordova-android": "^6.2.3",
"cordova-ios": "^4.5.5",
"cordova-plugin-camera": "^2.4.1",
"cordova-plugin-compat": "^1.1.0",
"cordova-plugin-console": "^1.0.7",
......@@ -42,7 +43,7 @@
"cordova-plugin-minisodium": "^1.0.0",
"cordova-plugin-secure-storage": "^2.6.8",
"cordova-plugin-splashscreen": "^3.2.2",
"cordova-plugin-statusbar": "^2.2.3",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-vibration": "^2.1.5",
"cordova-plugin-websocket": "^0.12.2",
"cordova-plugin-whitelist": "^1.3.2",
......@@ -146,7 +147,8 @@
}
},
"platforms": [
"android"
"android",
"ios"
]
}
}
}
\ No newline at end of file
Subproject commit df50262d000506dd813763b5533eb997fdc1acd6
resources/ios/splash/Default-667h.png

39.5 KB | W: | H:

resources/ios/splash/Default-667h.png

92.8 KB | W: | H:

resources/ios/splash/Default-667h.png
resources/ios/splash/Default-667h.png
resources/ios/splash/Default-667h.png
resources/ios/splash/Default-667h.png
  • 2-up
  • Swipe
  • Onion skin
resources/ios/splash/Default~iphone.png

7.04 KB | W: | H:

resources/ios/splash/Default~iphone.png

21.2 KB | W: | H:

resources/ios/splash/Default~iphone.png
resources/ios/splash/Default~iphone.png
resources/ios/splash/Default~iphone.png
resources/ios/splash/Default~iphone.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -716,6 +716,12 @@ $screen-menu: 845px;
padding-right: 32px !important;
line-height: 42px;
}
.button-fab-bottom-left.has-footer,
.button-fab-bottom-right.has-footer {
bottom: 64px !important;
}
/* ============
Home page
=============== */
......@@ -1756,10 +1762,18 @@ $ionicon-var-badge-editable: $ionicon-var-edit + "\00a0";
height: 150px;
padding-right: 0px !important;
.platform-ios & {
height: 180px;
}
.hero {
height: 150px;
box-shadow: none; // not need (define in bar-header)
.platform-ios & {
height: 160px;
}
.content {
bottom: 0px;
}
......@@ -1768,6 +1782,10 @@ $ionicon-var-badge-editable: $ionicon-var-edit + "\00a0";
#menu .has-header {
top: 150px;
.platform-ios & {
top: 180px;
}
}
}
......
This diff is collapsed.
......@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width, minimal-ui">
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width, minimal-ui">
<title>Cesium</title>
<link rel="icon" href="img/favicon.ico">
......
{
"name": "ionic",
"version": "1.3.1",
"codename": "el salvador",
"homepage": "https://github.com/driftyco/ionic",
"version": "1.3.5",
"codename": "hong kong",
"homepage": "https://github.com/ionic-team/ionic-v1",
"authors": [
"Max Lynch <max@drifty.com>",
"Adam Bradley <adam@drifty.com>",
......@@ -34,13 +34,13 @@
"angular-sanitize": "1.5.3",
"angular-ui-router": "0.2.13"
},
"_release": "1.3.1",
"_release": "1.3.5",
"_resolution": {
"type": "version",
"tag": "v1.3.1",
"commit": "deade5ac92dc25febaa60b05336decd62f545bb5"
"tag": "v1.3.5",
"commit": "c4e4be2e1766b2caf276bd83af4c924533be688a"
},
"_source": "https://github.com/driftyco/ionic-bower.git",
"_target": "1.3.1",
"_target": "1.3.5",
"_originalSource": "driftyco/ionic-bower"
}
\ No newline at end of file
# ionic-bower
Bower repository for [Ionic Framework](http://github.com/driftyco/ionic)
Bower repository for [Ionic Framework](http://github.com/driftyco/ionic) v1 (Ionic 2+ uses npm)
### Usage
......@@ -10,6 +10,6 @@ Alternatively, include the individual ionic files with the dependencies separate
### Versions
To install the latest stable version, `bower install driftyco/ionic-bower#v1.1.1`
To install the latest stable version, `bower install driftyco/ionic-bower`
To install the latest nightly release, `bower install driftyco/ionic-bower#master`
{
"name": "ionic",
"version": "1.3.1",
"codename": "el salvador",
"homepage": "https://github.com/driftyco/ionic",
"version": "1.3.5",
"codename": "hong kong",
"homepage": "https://github.com/ionic-team/ionic-v1",
"authors": [
"Max Lynch <max@drifty.com>",
"Adam Bradley <adam@drifty.com>",
......
@charset "UTF-8";
/*!
* Copyright 2015 Drifty Co.
* http://drifty.com/
*
* Ionic, v1.3.1
* A powerful HTML5 mobile app framework.
* http://ionicframework.com/
*
* By @maxlynch, @benjsperry, @adamdbradley <3
*
* Licensed under the MIT license. Please see LICENSE for more information.
*
*/
/*!
Ionicons, v2.0.1
Created by Ben Sperry for the Ionic Framework, http://ionicons.com/
https://twitter.com/benjsperry https://twitter.com/ionicframework
MIT License: https://github.com/driftyco/ionicons
MIT License: https://github.com/ionic-team/ionicons
Android-style icons originally built by Google’s
Material Design Icons: https://github.com/google/material-design-icons
......@@ -6601,6 +6588,9 @@ button.item.item-button-right {
align-items: center; }
.item-options .button:before {
margin: 0 auto; }
.item-options ion-option-button:last-child {
padding-right: calc(constant(safe-area-inset-right) + 12px);
padding-right: calc(env(safe-area-inset-right) + 12px); }
/**
* Lists
......@@ -9596,28 +9586,57 @@ a.button {
* Platform specific tweaks
*/
.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) {
height: 64px; }
height: 64px;
height: calc(constant(safe-area-inset-top) + 44px);
height: calc(env(safe-area-inset-top) + 44px); }
.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader).item-input-inset .item-input-wrapper {
margin-top: 19px !important; }
.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > * {
margin-top: 20px; }
.platform-ios.platform-cordova:not(.fullscreen) .tabs-top > .tabs,
.platform-ios.platform-cordova:not(.fullscreen) .tabs.tabs-top {
margin-top: 20px;
margin-top: constant(safe-area-inset-top);
margin-top: env(safe-area-inset-top); }
.platform-ios.platform-cordova:not(.fullscreen) .bar-header {
padding-left: calc( constant(safe-area-inset-left) + 5px);
padding-left: calc(env(safe-area-inset-left) + 5px);
padding-right: calc(constant(safe-area-inset-right) + 5px);
padding-right: calc(env(safe-area-inset-right) + 5px); }
.platform-ios.platform-cordova:not(.fullscreen) .bar-header .buttons:last-child {
right: calc(constant(safe-area-inset-right) + 5px);
right: calc(env(safe-area-inset-right) + 5px); }
.platform-ios.platform-cordova:not(.fullscreen) .has-tabs, .platform-ios.platform-cordova:not(.fullscreen) .bar-footer.has-tabs {
bottom: calc(constant(safe-area-inset-bottom) + 49px);
bottom: calc(env(safe-area-inset-bottom) + 49px); }
.platform-ios.platform-cordova:not(.fullscreen) .tabs-top > .tabs, .platform-ios.platform-cordova:not(.fullscreen) .tabs.tabs-top {
top: 64px; }
.platform-ios.platform-cordova:not(.fullscreen) .has-header,
.platform-ios.platform-cordova:not(.fullscreen) .bar-subheader {
top: 64px; }
.platform-ios.platform-cordova:not(.fullscreen) .tabs {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
height: calc(constant(safe-area-inset-bottom) + 49px);
height: calc(env(safe-area-inset-bottom) + 49px); }
.platform-ios.platform-cordova:not(.fullscreen) .has-header, .platform-ios.platform-cordova:not(.fullscreen) .bar-subheader {
top: 64px;
top: calc(constant(safe-area-inset-top) + 44px);
top: calc(env(safe-area-inset-top) + 44px); }
.platform-ios.platform-cordova:not(.fullscreen) .has-subheader {
top: 108px; }
top: 108px;
top: calc(constant(safe-area-inset-top) + 88px);
top: calc(env(safe-area-inset-top) + 88px); }
.platform-ios.platform-cordova:not(.fullscreen) .has-header.has-tabs-top {
top: 113px; }
top: 113px;
top: calc(93px + constant(safe-area-inset-top));
top: calc(93px + env(safe-area-inset-top)); }
.platform-ios.platform-cordova:not(.fullscreen) .has-header.has-subheader.has-tabs-top {
top: 157px; }
top: 157px;
top: calc(137px + constant(safe-area-inset-right));
top: calc(137px + env(safe-area-inset-right)); }
.platform-ios.platform-cordova .popover .bar-header:not(.bar-subheader) {
height: 44px; }
......@@ -9626,8 +9645,7 @@ a.button {
.platform-ios.platform-cordova .popover .bar-header:not(.bar-subheader) > * {
margin-top: 0; }
.platform-ios.platform-cordova .popover .has-header,
.platform-ios.platform-cordova .popover .bar-subheader {
.platform-ios.platform-cordova .popover .has-header, .platform-ios.platform-cordova .popover .bar-subheader {
top: 44px; }
.platform-ios.platform-cordova .popover .has-subheader {
......@@ -9637,6 +9655,32 @@ a.button {
margin-bottom: 20px; }
@media (orientation: landscape) {
.item {
padding: 16px calc(constant(safe-area-inset-right) + 16px); }
.item .badge {
right: calc(constant(safe-area-inset-right) + 32px); }
.item-icon-left {
padding-left: calc(constant(safe-area-inset-left) + 54px); }
.item-icon-left .icon {
left: calc(constant(safe-area-inset-left) + 11px); }
.item-icon-right {
padding-right: calc(constant(safe-area-inset-right) + 54px); }
.item-icon-right .icon {
right: calc(constant(safe-area-inset-right) + 11px); }
.item-complex, a.item.item-complex, button.item.item-complex {
padding: 0; }
.item-complex .item-content, a.item.item-complex .item-content, button.item.item-complex .item-content {
padding: 16px calc(constant(safe-area-inset-right) + 49px) 16px calc(constant(safe-area-inset-left) + 16px); }
.item-left-edit.visible.active {
-webkit-transform: translate3d(calc(constant(safe-area-inset-left) + 8px), 0, 0);
transform: translate3d(calc(constant(safe-area-inset-left) + 8px), 0, 0); }
.list-left-editing .item-left-editable .item-content,
.item-left-editing.item-left-editable .item-content {
-webkit-transform: translate3d(calc(constant(safe-area-inset-left) + 50px), 0, 0);
transform: translate3d(calc(constant(safe-area-inset-left) + 50px), 0, 0); }
.item-right-edit {
right: constant(safe-area-inset-right);
right: env(safe-area-inset-right); }
.platform-ios.platform-browser.platform-ipad {
position: fixed; } }
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This diff is collapsed.
......@@ -2,7 +2,7 @@
* Copyright 2015 Drifty Co.
* http://drifty.com/
*
* Ionic, v1.3.1
* Ionic, v1.3.5
* A powerful HTML5 mobile app framework.
* http://ionicframework.com/
*
......@@ -18,7 +18,7 @@
// build processes may have already created an ionic obj
window.ionic = window.ionic || {};
window.ionic.views = {};
window.ionic.version = '1.3.1';
window.ionic.version = '1.3.5';
(function (ionic) {
......@@ -2390,7 +2390,7 @@ window.ionic.version = '1.3.1';
/**
* @ngdoc method
* @name ionic.Platform#showStatusBar
* @description Shows or hides the device status bar (in Cordova). Requires `cordova plugin add org.apache.cordova.statusbar`
* @description Shows or hides the device status bar (in Cordova). Requires `ionic plugin add cordova-plugin-statusbar`
* @param {boolean} shouldShow Whether or not to show the status bar.
*/
showStatusBar: function(val) {
......@@ -2417,7 +2417,7 @@ window.ionic.version = '1.3.1';
* @name ionic.Platform#fullScreen
* @description
* Sets whether the app is fullscreen or not (in Cordova).
* @param {boolean=} showFullScreen Whether or not to set the app to fullscreen. Defaults to true. Requires `cordova plugin add org.apache.cordova.statusbar`
* @param {boolean=} showFullScreen Whether or not to set the app to fullscreen. Defaults to true. Requires `ionic plugin add cordova-plugin-statusbar`
* @param {boolean=} showStatusBar Whether or not to show the device's status bar. Defaults to false.
*/
fullScreen: function(showFullScreen, showStatusBar) {
......@@ -2666,7 +2666,7 @@ window.ionic.version = '1.3.1';
* - Works with labels surrounding inputs
* - Does not fire off a click if the user moves the pointer too far
* - Adds and removes an 'activated' css class
* - Multiple [unit tests](https://github.com/driftyco/ionic/blob/master/test/unit/utils/tap.unit.js) for each scenario
* - Multiple [unit tests](https://github.com/ionic-team/ionic/blob/1.x/test/unit/utils/tap.unit.js) for each scenario
*
*/
/*
......@@ -2977,7 +2977,7 @@ function tapMouseDown(e) {
e.stopPropagation();
if (!ionic.Platform.isEdge() && (!ionic.tap.isTextInput(e.target) || tapLastTouchTarget !== e.target) &&
!isSelectOrOption(e.target.tagName) && !ionic.tap.isVideo(e.target)) {
!isSelectOrOption(e.target.tagName) && !e.target.isContentEditable && !ionic.tap.isVideo(e.target)) {
// If you preventDefault on a text input then you cannot move its text caret/cursor.
// Allow through only the text input default. However, without preventDefault on an
// input the 300ms delay can change focus on inputs after the keyboard shows up.
......@@ -3101,6 +3101,10 @@ function tapIgnoreEvent(e) {
return true;
}
if(e.target.tagName == 'SELECT') {
return true;
}
if (ionic.scroll.isScrolling && ionic.tap.containsOrIsTextInput(e.target)) {
e.preventDefault();
return true;
......@@ -3567,7 +3571,7 @@ ionic.DomUtil.ready(function() {
* which can cause layout issues such as pushing headers up and out of view.
*
* The keyboard fixes work best in conjunction with the
* [Ionic Keyboard Plugin](https://github.com/driftyco/ionic-plugins-keyboard),
* [Ionic Keyboard Plugin](https://github.com/ionic-team/ionic-plugins-keyboard),
* although it will perform reasonably well without. However, if you are using
* Cordova there is no reason not to use the plugin.
*
......@@ -3598,7 +3602,7 @@ ionic.DomUtil.ready(function() {
*
* ### Plugin Usage
* Information on using the plugin can be found at
* [https://github.com/driftyco/ionic-plugins-keyboard](https://github.com/driftyco/ionic-plugins-keyboard).
* [https://github.com/ionic-team/ionic-plugins-keyboard](https://github.com/ionic-team/ionic-plugins-keyboard).
*
* ----------
*
......@@ -7001,6 +7005,8 @@ ionic.scroll = {
if(options.startY >= 0 || options.startX >= 0) {
ionic.requestAnimationFrame(function() {
self.__originalContainerHeight = self.el.getBoundingClientRect().height;
self.el.scrollTop = options.startY || 0;
self.el.scrollLeft = options.startX || 0;
......@@ -7533,15 +7539,14 @@ ionic.scroll = {
var self = this;
var container = self.__container;
container.removeEventListener('resetScrollView', self.resetScrollView);
container.removeEventListener('scroll', self.onScroll);
container.removeEventListener('scrollChildIntoView', self.scrollChildIntoView);
container.removeEventListener('resetScrollView', self.resetScrollView);
container.removeEventListener(ionic.EVENTS.touchstart, self.handleTouchMove);
container.removeEventListener(ionic.EVENTS.touchmove, self.handleTouchMove);
document.removeEventListener('resetScrollView', self.resetScrollView);
ionic.tap.removeClonedInputs(container, self);
delete self.__container;
......
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -822,4 +822,9 @@ button.item.item-button-right {
margin: 0 auto;
}
}
ion-option-button:last-child {
padding-right: calc(constant(safe-area-inset-right) + #{$button-padding});
padding-right: calc(env(safe-area-inset-right) + #{$button-padding});
}
}
/**
* Platform
* --------------------------------------------------
......@@ -12,6 +11,8 @@
&:not(.fullscreen) {
.bar-header:not(.bar-subheader) {
height: $bar-height + $ios-statusbar-height;
height: calc(constant(safe-area-inset-top) + #{$bar-height});
height: calc(env(safe-area-inset-top) + #{$bar-height});
&.item-input-inset .item-input-wrapper {
margin-top: 19px !important;
......@@ -19,28 +20,62 @@
> * {
margin-top: $ios-statusbar-height;
margin-top: constant(safe-area-inset-top);
margin-top: env(safe-area-inset-top);
}
}
.bar-header {
padding-left: calc( constant(safe-area-inset-left) + #{$bar-padding-portrait});
padding-left: calc(env(safe-area-inset-left) + #{$bar-padding-portrait});
padding-right: calc(constant(safe-area-inset-right) + #{$bar-padding-portrait});
padding-right: calc(env(safe-area-inset-right) + #{$bar-padding-portrait});
.buttons:last-child {
right: calc(constant(safe-area-inset-right) + #{$bar-padding-portrait});
right: calc(env(safe-area-inset-right) + #{$bar-padding-portrait});
}
}
.tabs-top > .tabs,
.tabs.tabs-top {
.has-tabs, .bar-footer.has-tabs {
bottom : calc(constant(safe-area-inset-bottom) + #{$tabs-height});
bottom : calc(env(safe-area-inset-bottom) + #{$tabs-height});
}
.tabs-top > .tabs, .tabs.tabs-top {
top: $bar-height + $ios-statusbar-height;
}
.has-header,
.bar-subheader {
.tabs {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
height: calc(constant(safe-area-inset-bottom) + 49px);
height: calc(env(safe-area-inset-bottom) + 49px);