Skip to content
This repository was archived by the owner on May 4, 2022. It is now read-only.

Commit 046beff

Browse files
mhartingtonmhartington
committed
fix(): add ios11 style fixes
1 parent 1b7414f commit 046beff

File tree

4 files changed

+114
-24
lines changed

4 files changed

+114
-24
lines changed

‎gulpfile.js

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -192,15 +192,12 @@ gulp.task('scripts-ng', function() {
192192

193193
gulp.task('sass', function(done) {
194194
gulp.src('scss/ionic.scss')
195-
.pipe(header(banner))
196-
.pipe(sass({
197-
onError: function(err) {
198-
//If we're watching, don't exit on error
199-
if (IS_WATCH) {
200-
console.log(gutil.colors.red(err));
201-
} else {
202-
done(err);
203-
}
195+
// .pipe(header(banner))
196+
.pipe(sass().on('error', function(err){
197+
if (IS_WATCH){
198+
console.log(gutil.colors.red(err));
199+
} else {
200+
done(err);
204201
}
205202
}))
206203
.pipe(concat('ionic.css'))

‎package.json

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,17 @@
1313
"conventional-changelog": "^1.1.0",
1414
"cpr": "^0.2.0",
1515
"dgeni": "^0.3.0",
16-
"dgeni-packages": "^0.9.3",
16+
"dgeni-packages": "^0.22.0",
1717
"event-stream": "3.1.0",
1818
"github": "^0.2.1",
1919
"gulp": "^3.7.0",
2020
"gulp-concat": "^2.1.7",
2121
"gulp-eslint": "^0.9.0",
2222
"gulp-footer": "^1.0.4",
23-
"gulp-header": "^1.0.2",
23+
"gulp-header": "^1.8.9",
2424
"gulp-if": "0.0.5",
2525
"gulp-jscs": "^1.3.0",
26-
"gulp-minify-css": "^0.3.0",
2726
"gulp-rename": "^1.1.0",
28-
"gulp-sass": "^2.0.4",
2927
"gulp-strip-debug": "^0.3.0",
3028
"gulp-template": "^0.1.1",
3129
"gulp-uglify": "^0.2.1",
@@ -39,11 +37,11 @@
3937
"js-string-escape": "^1.0.0",
4038
"js-yaml": "^3.0.2",
4139
"jshint-summary": "^0.3.0",
42-
"karma": "^0.12.23",
40+
"karma": "^1.7.1",
4341
"karma-chrome-launcher": "^0.1.4",
4442
"karma-coverage": "^0.4.2",
4543
"karma-jasmine": "~0.1.5",
46-
"karma-mocha-reporter": "^1.0.2",
44+
"karma-mocha-reporter": "^2.2.4",
4745
"karma-phantomjs-launcher": "^1.0.0",
4846
"karma-sauce-launcher": "~0.2.0",
4947
"karma-script-launcher": "~0.1.0",
@@ -76,5 +74,9 @@
7674
"commitizen": {
7775
"path": "node_modules/ionic-cz-conventional-changelog"
7876
}
77+
},
78+
"dependencies": {
79+
"gulp-minify-css": "^1.2.4",
80+
"gulp-sass": "^3.1.0"
7981
}
8082
}

‎scss/_items.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -822,4 +822,9 @@ button.item.item-button-right {
822822
margin: 0 auto;
823823
}
824824
}
825+
826+
ion-option-button:last-child {
827+
padding-right: calc(constant(safe-area-inset-right) + #{$button-padding});
828+
padding-right: calc(env(safe-area-inset-right) + #{$button-padding});
829+
}
825830
}

‎scss/_platform.scss

Lines changed: 95 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
/**
32
* Platform
43
* --------------------------------------------------
@@ -12,35 +11,77 @@
1211
&:not(.fullscreen) {
1312
.bar-header:not(.bar-subheader) {
1413
height: $bar-height + $ios-statusbar-height;
14+
height: calc(constant(safe-area-inset-top) + #{$bar-height});
15+
height: calc(env(safe-area-inset-top) + #{$bar-height});
1516

1617
&.item-input-inset .item-input-wrapper {
1718
margin-top: 19px !important;
1819
}
1920

2021
> * {
2122
margin-top: $ios-statusbar-height;
23+
margin-top: constant(safe-area-inset-top);
24+
margin-top: env(safe-area-inset-top);
25+
}
26+
}
27+
.bar-header {
28+
padding-left: calc(
29+
constant(safe-area-inset-left) + #{$bar-padding-portrait}
30+
);
31+
padding-left: calc(env(safe-area-inset-left) + #{$bar-padding-portrait});
32+
padding-right: calc(
33+
constant(safe-area-inset-right) + #{$bar-padding-portrait}
34+
);
35+
padding-right: calc(
36+
env(safe-area-inset-right) + #{$bar-padding-portrait}
37+
);
38+
39+
.buttons:last-child {
40+
right: calc(constant(safe-area-inset-right) + #{$bar-padding-portrait});
41+
right: calc(env(safe-area-inset-right) + #{$bar-padding-portrait});
2242
}
2343
}
24-
.tabs-top > .tabs,
25-
.tabs.tabs-top {
44+
45+
.has-tabs, .bar-footer.has-tabs {
46+
bottom : calc(constant(safe-area-inset-bottom) + #{$tabs-height});
47+
bottom : calc(env(safe-area-inset-bottom) + #{$tabs-height});
48+
}
49+
50+
.tabs-top > .tabs, .tabs.tabs-top {
2651
top: $bar-height + $ios-statusbar-height;
2752
}
2853

29-
.has-header,
30-
.bar-subheader {
54+
.tabs {
55+
padding-bottom: constant(safe-area-inset-bottom);
56+
padding-bottom: env(safe-area-inset-bottom);
57+
height: calc(constant(safe-area-inset-bottom) + 49px);
58+
height: calc(env(safe-area-inset-bottom) + 49px);
59+
}
60+
.has-header, .bar-subheader {
3161
top: $bar-height + $ios-statusbar-height;
62+
top: calc(constant(safe-area-inset-top) + #{$bar-height});
63+
top: calc(env(safe-area-inset-top) + #{$bar-height});
3264
}
3365
.has-subheader {
3466
top: $bar-height + $bar-subheader-height + $ios-statusbar-height;
67+
68+
top: calc(constant(safe-area-inset-top) + #{$bar-height + $bar-subheader-height});
69+
top: calc(env(safe-area-inset-top) + #{$bar-height + $bar-subheader-height});
3570
}
3671
.has-header.has-tabs-top {
3772
top: $bar-height + $tabs-height + $ios-statusbar-height;
73+
74+
top: calc(#{$bar-height + $tabs-height} + constant(safe-area-inset-top));
75+
top: calc(#{$bar-height + $tabs-height} + env(safe-area-inset-top));
3876
}
3977
.has-header.has-subheader.has-tabs-top {
4078
top: $bar-height + $bar-subheader-height + $tabs-height + $ios-statusbar-height;
79+
80+
top: calc(#{$bar-height + $bar-subheader-height + $tabs-height} + constant(safe-area-inset-right);
81+
top: calc(#{$bar-height + $bar-subheader-height + $tabs-height} + env(safe-area-inset-right);
4182
}
4283
}
43-
.popover{
84+
.popover {
4485
.bar-header:not(.bar-subheader) {
4586
height: $bar-height;
4687
&.item-input-inset .item-input-wrapper {
@@ -50,8 +91,7 @@
5091
margin-top: 0;
5192
}
5293
}
53-
.has-header,
54-
.bar-subheader {
94+
.has-header, .bar-subheader {
5595
top: $bar-height;
5696
}
5797
.has-subheader {
@@ -64,7 +104,53 @@
64104
}
65105
}
66106
67-
@media (orientation:landscape) {
107+
@media (orientation: landscape) {
108+
.item {
109+
padding: $item-padding calc(constant(safe-area-inset-right) + #{$item-padding});
110+
111+
.badge {
112+
right: calc(constant(safe-area-inset-right) + 32px)
113+
}
114+
}
115+
.item-icon-left {
116+
padding-left: calc(constant(safe-area-inset-left) + 54px);
117+
118+
.icon {
119+
left: calc(constant(safe-area-inset-left) + 11px);
120+
}
121+
}
122+
.item-icon-right {
123+
padding-right: calc(constant(safe-area-inset-right) + 54px);
124+
.icon {
125+
right: calc(constant(safe-area-inset-right) + 11px);
126+
}
127+
}
128+
129+
.item-complex, a.item.item-complex, button.item.item-complex {
130+
padding: 0;
131+
132+
.item-content {
133+
padding: $item-padding
134+
calc(constant(safe-area-inset-right) + #{(ceil( ($item-padding * 3) + ($item-padding / 3)) - 5)})
135+
$item-padding
136+
calc(constant(safe-area-inset-left) + #{$item-padding});
137+
}
138+
}
139+
140+
.item-left-edit.visible.active {
141+
@include translate3d(calc(constant(safe-area-inset-left) + 8px), 0, 0);
142+
}
143+
.list-left-editing .item-left-editable .item-content,
144+
.item-left-editing.item-left-editable .item-content {
145+
@include translate3d(calc(constant(safe-area-inset-left) + 50px), 0, 0);
146+
}
147+
148+
.item-right-edit{
149+
right: constant(safe-area-inset-right);
150+
right: env(safe-area-inset-right)
151+
}
152+
153+
68154
.platform-ios.platform-browser.platform-ipad {
69155
position: fixed; // required for iPad 7 Safari
70156
}

0 commit comments

Comments
 (0)