Skip to content

Commit 4d27680

Browse files
brandyscarneybrandyscarney
committed
fix(app): fix status bar padding for inset modals
1 parent 22abc37 commit 4d27680

File tree

4 files changed

+108
-78
lines changed

4 files changed

+108
-78
lines changed

‎ionic/platform/cordova.ios.scss‎

Lines changed: 11 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,25 @@
11
@import "../globals.ios";
2+
@import "./cordova";
23

34
// iOS Cordova
45
// --------------------------------------------------
56

6-
$cordova-ios-statusbar-padding: 20px !default;
7+
$cordova-ios-statusbar-padding-modal-max-width: $cordova-statusbar-padding-modal-max-width !default;
78

89

9-
ion-navbar-section.statusbar-padding {
10-
height: calc(#{$toolbar-ios-height} + #{$cordova-ios-statusbar-padding});
11-
min-height: calc(#{$toolbar-ios-height} + #{$cordova-ios-statusbar-padding});
12-
}
13-
14-
ion-navbar-section.statusbar-padding > .toolbar ion-segment,
15-
ion-navbar-section.statusbar-padding > .toolbar ion-title,
16-
ion-navbar-section.statusbar-padding > .toolbar {
17-
padding-top: $cordova-ios-statusbar-padding;
18-
19-
height: calc(#{$toolbar-ios-height} + #{$cordova-ios-statusbar-padding});
20-
min-height: calc(#{$toolbar-ios-height} + #{$cordova-ios-statusbar-padding});
21-
}
10+
@include navbar-section-statusbar-padding($toolbar-ios-height);
11+
@include navbar-section-title-statusbar-padding($toolbar-ios-height);
2212

2313
.tab-subpage,
2414
ion-nav > ion-page,
2515
ion-menu {
26-
> .toolbar.statusbar-padding:first-child ion-segment,
27-
> .toolbar.statusbar-padding:first-child ion-title,
28-
> .toolbar.statusbar-padding:first-child {
29-
padding-top: $cordova-ios-statusbar-padding;
30-
height: calc(#{$toolbar-ios-height} + #{$cordova-ios-statusbar-padding});
31-
min-height: calc(#{$toolbar-ios-height} + #{$cordova-ios-statusbar-padding});
32-
}
33-
34-
> ion-content.statusbar-padding:first-child scroll-content {
35-
padding-top: $cordova-ios-statusbar-padding;
36-
}
16+
@include toolbar-statusbar-padding($toolbar-ios-height, $content-ios-padding);
17+
@include toolbar-title-statusbar-padding($toolbar-ios-height, $content-ios-padding);
18+
}
3719

38-
> ion-content.statusbar-padding:first-child[padding] scroll-content,
39-
> ion-content.statusbar-padding:first-child[padding-top] scroll-content {
40-
padding-top: calc(#{$content-ios-padding} + #{$cordova-ios-statusbar-padding});
20+
@media only screen and (max-width: $cordova-ios-statusbar-padding-modal-max-width) {
21+
.modal-wrapper > ion-page {
22+
@include toolbar-statusbar-padding($toolbar-ios-height, $content-ios-padding);
23+
@include toolbar-title-statusbar-padding($toolbar-ios-height, $content-ios-padding);
4124
}
4225
}

‎ionic/platform/cordova.md.scss‎

Lines changed: 9 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,22 @@
11
@import "../globals.md";
2+
@import "./cordova";
23

3-
// iOS Cordova
4+
// Material Design on iOS with Cordova
45
// --------------------------------------------------
56

6-
$cordova-ios-statusbar-padding: 20px !default;
7+
$cordova-md-statusbar-padding-modal-max-width: $cordova-statusbar-padding-modal-max-width !default;
78

89

9-
ion-navbar-section.statusbar-padding {
10-
height: calc(#{$toolbar-md-height} + #{$cordova-ios-statusbar-padding});
11-
min-height: calc(#{$toolbar-md-height} + #{$cordova-ios-statusbar-padding});
12-
}
13-
14-
ion-navbar-section.statusbar-padding > .toolbar {
15-
padding-top: $cordova-ios-statusbar-padding;
16-
17-
height: calc(#{$toolbar-md-height} + #{$cordova-ios-statusbar-padding});
18-
min-height: calc(#{$toolbar-md-height} + #{$cordova-ios-statusbar-padding});
19-
}
10+
@include navbar-section-statusbar-padding($toolbar-md-height);
2011

2112
.tab-subpage,
2213
ion-nav > ion-page,
2314
ion-menu {
24-
> .toolbar.statusbar-padding:first-child {
25-
padding-top: $cordova-ios-statusbar-padding;
26-
height: calc(#{$toolbar-md-height} + #{$cordova-ios-statusbar-padding});
27-
min-height: calc(#{$toolbar-md-height} + #{$cordova-ios-statusbar-padding});
28-
}
29-
30-
> ion-content.statusbar-padding:first-child scroll-content {
31-
padding-top: $cordova-ios-statusbar-padding;
32-
}
15+
@include toolbar-statusbar-padding($toolbar-md-height, $content-md-padding);
16+
}
3317

34-
> ion-content.statusbar-padding:first-child[padding] scroll-content,
35-
> ion-content.statusbar-padding:first-child[padding-top] scroll-content {
36-
padding-top: calc(#{$content-md-padding} + #{$cordova-ios-statusbar-padding});
18+
@media only screen and (max-width: $cordova-md-statusbar-padding-modal-max-width) {
19+
.modal-wrapper > ion-page {
20+
@include toolbar-statusbar-padding($toolbar-md-height, $content-md-padding);
3721
}
3822
}

‎ionic/platform/cordova.scss‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
@import "../globals.core";
2+
3+
// Cordova Status Bar Padding iOS Platform
4+
// --------------------------------------------------------------------------------
5+
6+
// The height of the ios statusbar
7+
$cordova-ios-statusbar-padding: 20px !default;
8+
9+
// The breakpoint when a modal becomes inset
10+
$cordova-statusbar-padding-modal-max-width: 767px !default;
11+
12+
13+
// The first-child should get modified padding-top for the status bar
14+
// --------------------------------------------------------------------------------
15+
16+
@mixin toolbar-statusbar-padding($toolbar-height, $content-padding) {
17+
18+
> .toolbar.statusbar-padding:first-child {
19+
padding-top: $cordova-ios-statusbar-padding;
20+
height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
21+
min-height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
22+
}
23+
24+
> ion-content.statusbar-padding:first-child scroll-content {
25+
padding-top: $cordova-ios-statusbar-padding;
26+
}
27+
28+
> ion-content.statusbar-padding:first-child[padding] scroll-content,
29+
> ion-content.statusbar-padding:first-child[padding-top] scroll-content {
30+
padding-top: calc(#{$content-padding} + #{$cordova-ios-statusbar-padding});
31+
}
32+
33+
}
34+
35+
// The navbar section should get modified height and padding-top for the status bar
36+
// --------------------------------------------------------------------------------
37+
38+
@mixin navbar-section-statusbar-padding($toolbar-height) {
39+
40+
ion-navbar-section.statusbar-padding {
41+
height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
42+
min-height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
43+
}
44+
45+
ion-navbar-section.statusbar-padding > .toolbar {
46+
padding-top: $cordova-ios-statusbar-padding;
47+
48+
height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
49+
min-height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
50+
}
51+
52+
}
53+
54+
55+
// iOS is the only mode that uses these mixins and they should be removed with #5036
56+
// --------------------------------------------------------------------------------
57+
58+
@mixin toolbar-title-statusbar-padding($toolbar-height, $content-padding) {
59+
60+
> .toolbar.statusbar-padding:first-child ion-segment,
61+
> .toolbar.statusbar-padding:first-child ion-title {
62+
padding-top: $cordova-ios-statusbar-padding;
63+
height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
64+
min-height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
65+
}
66+
67+
}
68+
69+
@mixin navbar-section-title-statusbar-padding($toolbar-height) {
70+
71+
ion-navbar-section.statusbar-padding > .toolbar ion-segment,
72+
ion-navbar-section.statusbar-padding > .toolbar ion-title {
73+
padding-top: $cordova-ios-statusbar-padding;
74+
75+
height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
76+
min-height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
77+
}
78+
79+
}

‎ionic/platform/cordova.wp.scss‎

Lines changed: 9 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,22 @@
11
@import "../globals.wp";
2+
@import "./cordova";
23

3-
// iOS Cordova
4+
// Windows on iOS with Cordova
45
// --------------------------------------------------
56

6-
$cordova-ios-statusbar-padding: 20px !default;
7+
$cordova-wp-statusbar-padding-modal-max-width: $cordova-statusbar-padding-modal-max-width !default;
78

89

9-
ion-navbar-section.statusbar-padding {
10-
height: calc(#{$toolbar-wp-height} + #{$cordova-ios-statusbar-padding});
11-
min-height: calc(#{$toolbar-wp-height} + #{$cordova-ios-statusbar-padding});
12-
}
13-
14-
ion-navbar-section.statusbar-padding > .toolbar {
15-
padding-top: $cordova-ios-statusbar-padding;
16-
17-
height: calc(#{$toolbar-wp-height} + #{$cordova-ios-statusbar-padding});
18-
min-height: calc(#{$toolbar-wp-height} + #{$cordova-ios-statusbar-padding});
19-
}
10+
@include navbar-section-statusbar-padding($toolbar-wp-height);
2011

2112
.tab-subpage,
2213
ion-nav > ion-page,
2314
ion-menu {
24-
> .toolbar.statusbar-padding:first-child {
25-
padding-top: $cordova-ios-statusbar-padding;
26-
height: calc(#{$toolbar-wp-height} + #{$cordova-ios-statusbar-padding});
27-
min-height: calc(#{$toolbar-wp-height} + #{$cordova-ios-statusbar-padding});
28-
}
29-
30-
> ion-content.statusbar-padding:first-child scroll-content {
31-
padding-top: $cordova-ios-statusbar-padding;
32-
}
15+
@include toolbar-statusbar-padding($toolbar-wp-height, $content-wp-padding);
16+
}
3317

34-
> ion-content.statusbar-padding:first-child[padding] scroll-content,
35-
> ion-content.statusbar-padding:first-child[padding-top] scroll-content {
36-
padding-top: calc(#{$content-wp-padding} + #{$cordova-ios-statusbar-padding});
18+
@media only screen and (max-width: $cordova-wp-statusbar-padding-modal-max-width) {
19+
.modal-wrapper > ion-page {
20+
@include toolbar-statusbar-padding($toolbar-wp-height, $content-wp-padding);
3721
}
3822
}

0 commit comments

Comments
 (0)