EVOgeek/Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-2567 ux: Fix ios header size

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2018-08-30 15:51:45 +02:00
parent ee88e015b8
commit 4697ce7c59
6 changed files with 21 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/app.scss
View File

@ -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;

2
src/components/context-menu/core-context-menu.html
View File

@ -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>

4
src/components/ion-tabs/ion-tabs.scss
View File

@ -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 {

13
src/components/split-view/split-view.scss
View File

@ -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)});
}
}

2
src/components/tabs/tabs.ts
View File

@ -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;
}

13
src/theme/variables.scss
View File

@ -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";