From 59af9cbe8945805b53ab08c708961fe83b782674 Mon Sep 17 00:00:00 2001 From: Israel Rios 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 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 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 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 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;