From 59af9cbe8945805b53ab08c708961fe83b782674 Mon Sep 17 00:00:00 2001
From: Israel Rios <isrrios@gmail.com>
Date: Fri, 2 Feb 2018 15:22:32 -0200
Subject: [PATCH 1/5] Fixing css iPhone X.
Tabs on top was broken on iPhone X.
Navbar with input was broken on iPhone X.
Fixes https://github.com/ionic-team/ionic/issues/13270.
---
scss/_platform.scss | 13 +++++++++----
1 file changed, 9 insertions(+), 4 deletions(-)
diff --git a/scss/_platform.scss b/scss/_platform.scss
index aae13d04b..881d96986 100644
--- a/scss/_platform.scss
+++ b/scss/_platform.scss
@@ -16,6 +16,8 @@
&.item-input-inset .item-input-wrapper {
margin-top: 19px !important;
+ margin-top: constant(safe-area-inset-top) !important;
+ margin-top: env(safe-area-inset-top) !important;
}
> * {
@@ -25,7 +27,7 @@
}
}
.bar-header {
- padding-left: calc( constant(safe-area-inset-left) + #{$bar-padding-portrait});
+ 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});
@@ -43,14 +45,17 @@
.tabs-top > .tabs, .tabs.tabs-top {
top: $bar-height + $ios-statusbar-height;
+ top: calc(constant(safe-area-inset-top) + #{$bar-height});
+ top: calc(env(safe-area-inset-top) + #{$bar-height});
}
- .tabs {
+ .tabs-bottom > .tabs, .tabs.tabs-bottom{
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);
+ height: calc(constant(safe-area-inset-bottom) + #{$tabs-height + 5px});
+ height: calc(env(safe-area-inset-bottom) + #{$tabs-height + 5px});
}
+
.has-header, .bar-subheader {
top: $bar-height + $ios-statusbar-height;
top: calc(constant(safe-area-inset-top) + #{$bar-height});
From 75945dfadb718a228ea7c28e9d9d7cafa7adc60c Mon Sep 17 00:00:00 2001
From: Israel Rios <isrrios@gmail.com>
Date: Fri, 2 Feb 2018 15:22:32 -0200
Subject: [PATCH 2/5] Fixing css iPhone X.
Tabs on top was broken on iPhone X.
Navbar with input was broken on iPhone X.
Fixes https://github.com/ionic-team/ionic/issues/13270.
---
scss/_platform.scss | 13 +++++++++----
1 file changed, 9 insertions(+), 4 deletions(-)
diff --git a/scss/_platform.scss b/scss/_platform.scss
index aae13d04b..6190967b0 100644
--- a/scss/_platform.scss
+++ b/scss/_platform.scss
@@ -16,6 +16,8 @@
&.item-input-inset .item-input-wrapper {
margin-top: 19px !important;
+ margin-top: constant(safe-area-inset-top) !important;
+ margin-top: env(safe-area-inset-top) !important;
}
> * {
@@ -25,7 +27,7 @@
}
}
.bar-header {
- padding-left: calc( constant(safe-area-inset-left) + #{$bar-padding-portrait});
+ 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});
@@ -43,14 +45,17 @@
.tabs-top > .tabs, .tabs.tabs-top {
top: $bar-height + $ios-statusbar-height;
+ top: calc(constant(safe-area-inset-top) + #{$bar-height});
+ top: calc(env(safe-area-inset-top) + #{$bar-height});
}
- .tabs {
+ .tabs-bottom > .tabs, .tabs.tabs-bottom{
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);
+ height: calc(constant(safe-area-inset-bottom) + #{$tabs-height});
+ height: calc(env(safe-area-inset-bottom) + #{$tabs-height});
}
+
.has-header, .bar-subheader {
top: $bar-height + $ios-statusbar-height;
top: calc(constant(safe-area-inset-top) + #{$bar-height});
From d2f8a193989b306c77ed932c71692240833b7410 Mon Sep 17 00:00:00 2001
From: Israel Rios <isrrios@gmail.com>
Date: Fri, 2 Feb 2018 15:36:18 -0200
Subject: [PATCH 3/5] Merge
---
scss/_platform.scss | 5 -----
1 file changed, 5 deletions(-)
diff --git a/scss/_platform.scss b/scss/_platform.scss
index a51571287..6190967b0 100644
--- a/scss/_platform.scss
+++ b/scss/_platform.scss
@@ -52,13 +52,8 @@
.tabs-bottom > .tabs, .tabs.tabs-bottom{
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
-<<<<<<< HEAD
height: calc(constant(safe-area-inset-bottom) + #{$tabs-height});
height: calc(env(safe-area-inset-bottom) + #{$tabs-height});
-=======
- height: calc(constant(safe-area-inset-bottom) + #{$tabs-height + 5px});
- height: calc(env(safe-area-inset-bottom) + #{$tabs-height + 5px});
->>>>>>> 59af9cbe8945805b53ab08c708961fe83b782674
}
.has-header, .bar-subheader {
From 4bf4feaeaf008483d4242bdf1f4acca598084512 Mon Sep 17 00:00:00 2001
From: Israel Rios <isrrios@gmail.com>
Date: Tue, 24 Apr 2018 11:09:08 -0300
Subject: [PATCH 4/5] Fixing modal header with input layout on iPads
---
scss/_modal.scss | 2 +-
scss/_platform.scss | 6 +++---
2 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/scss/_modal.scss b/scss/_modal.scss
index 7450fe9a1..c95f633a9 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -50,7 +50,7 @@
.platform-ios.platform-cordova .modal-wrapper .modal {
.bar-header:not(.bar-subheader) {
height: $bar-height;
- > * {
+ > *, &.item-input-inset .item-input-wrapper {
margin-top: 0;
}
}
diff --git a/scss/_platform.scss b/scss/_platform.scss
index 6190967b0..d65c4a591 100644
--- a/scss/_platform.scss
+++ b/scss/_platform.scss
@@ -15,9 +15,9 @@
height: calc(env(safe-area-inset-top) + #{$bar-height});
&.item-input-inset .item-input-wrapper {
- margin-top: 19px !important;
- margin-top: constant(safe-area-inset-top) !important;
- margin-top: env(safe-area-inset-top) !important;
+ margin-top: 19px;
+ margin-top: constant(safe-area-inset-top);
+ margin-top: env(safe-area-inset-top);
}
> * {
From c4700840389a6bdc48beffa6468a7a39a8129874 Mon Sep 17 00:00:00 2001
From: Israel Rios <isrrios@gmail.com>
Date: Mon, 16 Jul 2018 13:02:10 -0300
Subject: [PATCH 5/5] More iPhone X fixes.
---
scss/_platform.scss | 71 ++++++++++++++++++++++----------------------
scss/_variables.scss | 1 +
2 files changed, 37 insertions(+), 35 deletions(-)
diff --git a/scss/_platform.scss b/scss/_platform.scss
index d65c4a591..acd66727b 100644
--- a/scss/_platform.scss
+++ b/scss/_platform.scss
@@ -26,7 +26,7 @@
margin-top: env(safe-area-inset-top);
}
}
- .bar-header {
+ .bar-header, .bar-subheader {
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});
@@ -104,51 +104,52 @@
}
@media (orientation: landscape) {
- .item {
- padding: $item-padding calc(constant(safe-area-inset-right) + #{$item-padding});
+ @if $enable-item-safe-area-padding {
+ .item {
+ padding-left: calc(env(safe-area-inset-right) + #{$item-padding});
+ padding-right: calc(env(safe-area-inset-right) + #{$item-padding});
- .badge {
- right: calc(constant(safe-area-inset-right) + 32px)
+ .badge {
+ right: calc(env(safe-area-inset-right) + #{$item-padding * 2});
+ }
}
- }
- .item-icon-left {
- padding-left: calc(constant(safe-area-inset-left) + 54px);
+ .item-icon-left {
+ padding-left: calc(env(safe-area-inset-left) + #{ceil( ($item-padding * 3) + ($item-padding / 3) )});
- .icon {
- left: calc(constant(safe-area-inset-left) + 11px);
+ .icon {
+ left: calc(env(safe-area-inset-left) + #{ceil( ($item-padding / 3) * 2)});
+ }
}
- }
- .item-icon-right {
- padding-right: calc(constant(safe-area-inset-right) + 54px);
- .icon {
- right: calc(constant(safe-area-inset-right) + 11px);
+ .item-icon-right {
+ padding-right: calc(env(safe-area-inset-right) + #{ceil( ($item-padding * 3) + ($item-padding / 3) )});
+ .icon {
+ right: calc(env(safe-area-inset-right) + #{ceil( ($item-padding / 3) * 2)});
+ }
}
- }
- .item-complex, a.item.item-complex, button.item.item-complex {
- padding: 0;
+ .item-complex, a.item.item-complex, button.item.item-complex {
+ padding-right: 0;
+ padding-left: 0;
- .item-content {
- padding: $item-padding
- calc(constant(safe-area-inset-right) + #{(ceil( ($item-padding * 3) + ($item-padding / 3)) - 5)})
- $item-padding
- calc(constant(safe-area-inset-left) + #{$item-padding});
+ .item-content {
+ padding-right: calc(env(safe-area-inset-right) + #{(ceil( ($item-padding * 3) + ($item-padding / 3)) - 5)});
+ padding-left: calc(env(safe-area-inset-left) + #{$item-padding});
+ }
}
- }
- .item-left-edit.visible.active {
- @include 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 {
- @include translate3d(calc(constant(safe-area-inset-left) + 50px), 0, 0);
- }
+ .item-left-edit.visible.active {
+ transform: translateX(calc(env(safe-area-inset-left) + #{$item-left-edit-left}));
+ }
- .item-right-edit{
- right: constant(safe-area-inset-right);
- right: env(safe-area-inset-right)
- }
+ .list-left-editing .item-left-editable .item-content,
+ .item-left-editing.item-left-editable .item-content {
+ transform: translateX(calc(env(safe-area-inset-left) + #{$item-left-edit-open-width}));
+ }
+ .item-right-edit{
+ right: env(safe-area-inset-right)
+ }
+ }
.platform-ios.platform-browser.platform-ipad {
position: fixed; // required for iPad 7 Safari
diff --git a/scss/_variables.scss b/scss/_variables.scss
index f8c678b05..03d2e7150 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -762,3 +762,4 @@ $z-index-click-block: 99999 !default;
// -------------------------------
$ios-statusbar-height: 20px !default;
+$enable-item-safe-area-padding: true !default;