From 4697ce7c5915be85232e2dcde8f5c4d651891e41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 30 Aug 2018 15:51:45 +0200
Subject: [PATCH] MOBILE-2567 ux: Fix ios header size

---
 src/app/app.scss                                   |  5 +++++
 src/components/context-menu/core-context-menu.html |  2 +-
 src/components/ion-tabs/ion-tabs.scss              |  4 +---
 src/components/split-view/split-view.scss          | 13 ++-----------
 src/components/tabs/tabs.ts                        |  2 +-
 src/theme/variables.scss                           | 13 +++++++++++--
 6 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/app/app.scss b/src/app/app.scss
index 17509e20f..70d41c0ee 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -42,6 +42,11 @@
   text-transform: none;
 }
 
+[dir="ltr"] body, [dir="rtl"] body {
+    padding-top: constant(safe-area-inset-top); //for iOS 11.2
+    padding-top: env(safe-area-inset-top); //for iOS 11.1
+}
+
 @include media-breakpoint-up(sm) {
   .core-center-view .scroll-content {
     display: flex!important;
diff --git a/src/components/context-menu/core-context-menu.html b/src/components/context-menu/core-context-menu.html
index 523970a63..262bb3256 100644
--- a/src/components/context-menu/core-context-menu.html
+++ b/src/components/context-menu/core-context-menu.html
@@ -1,4 +1,4 @@
-<button [hidden]="hideMenu" ion-button clear icon-only [attr.aria-label]="ariaLabel" (click)="showContextMenu($event)">
+<button [hidden]="hideMenu" ion-button clear icon-only [attr.aria-label]="ariaLabel" (click)="showContextMenu($event)" class="bar-button">
     <core-icon [name]="icon"></core-icon>
 </button>
 <ng-content></ng-content>
\ No newline at end of file
diff --git a/src/components/ion-tabs/ion-tabs.scss b/src/components/ion-tabs/ion-tabs.scss
index a34d98c88..d7761d706 100644
--- a/src/components/ion-tabs/ion-tabs.scss
+++ b/src/components/ion-tabs/ion-tabs.scss
@@ -83,9 +83,7 @@ core-ion-tab.show-tab {
 }
 
 .ios {
-    core-ion-tab > .ion-page > ion-header .toolbar-ios {
-      padding-top: 4px;
-    }
+    @include core-ion-tabs-statusbar-padding($toolbar-ios-height, $toolbar-ios-padding, $content-ios-padding, $cordova-ios-statusbar-padding, $cordova-ios-statusbar-padding-modal-max-width, true);
 }
 
 .md {
diff --git a/src/components/split-view/split-view.scss b/src/components/split-view/split-view.scss
index f38027603..65a5a64a2 100644
--- a/src/components/split-view/split-view.scss
+++ b/src/components/split-view/split-view.scss
@@ -1,4 +1,4 @@
-core-split-view {
+ion-app.app-root core-split-view {
     ion-menu.split-pane-side {
         display: block;
 
@@ -37,15 +37,6 @@ core-split-view {
         display: none;
     }
     ion-content.statusbar-padding:first-child .scroll-content {
-        padding-top: 0 !important;
+        padding-top: 0  !important;
     }
 }
-
-.ios .split-pane {
-    .core-avoid-header ion-content.statusbar-padding,
-    .core-avoid-header .menu-inner > ion-content {
-         top: $navbar-ios-height;
-         height: calc(100% - #{($navbar-ios-height)});
-    }
-
-}
diff --git a/src/components/tabs/tabs.ts b/src/components/tabs/tabs.ts
index 09e37e2ce..07dfebfb2 100644
--- a/src/components/tabs/tabs.ts
+++ b/src/components/tabs/tabs.ts
@@ -311,7 +311,7 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges, OnDe
             const width = this.domUtils.getElementWidth(this.slides.getNativeElement()) || this.slides.renderedWidth;
 
             if (width) {
-                this.maxSlides = Math.floor(width / 120);
+                this.maxSlides = Math.floor(width / 100);
 
                 return;
             }
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index b176ed86c..d08c673c9 100644
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@@ -147,7 +147,7 @@ $loading-ios-spinner-color: $core-loading-spinner-color;
 $spinner-ios-ios-color: $core-spinner-color;
 $tabs-ios-tab-color-inactive: $tabs-tab-color-inactive;
 $button-ios-outline-background-color: $core-button-outline-background-color;
-$toolbar-ios-height: 44px + 15;
+$toolbar-ios-height: 44px + 15; // Avoid toolbar with different heights.
 $checkbox-ios-icon-border-radius: 0px !default;
 
 // App Material Design Variables
@@ -164,7 +164,6 @@ $tabs-md-tab-color-inactive: $tabs-tab-color-inactive;
 $button-md-outline-background-color: $core-button-outline-background-color;
 $font-family-md-base: "Roboto", "Noto Sans", "Helvetica Neue", sans-serif !default;
 
-
 // App Windows Variables
 // --------------------------------------------------
 // Windows only Sass variables can go here
@@ -275,6 +274,16 @@ $core-question-state-incorrect-color: $red-light !default;
   }
 }
 
+@mixin app-root() {
+  $root: #{&};
+  @at-root ion-app.app-root {
+    #{$root} {
+      @content;
+    }
+  }
+}
+
+
 // Font Awesome
 $fa-font-path: $font-path;
 @import "font-awesome";