From 4b98a592c7ef56263179efb85288115710cf379e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Mon, 9 Sep 2019 12:49:13 +0200 Subject: [PATCH] MOBILE-3123 style: Add some safe areas for notch --- .../addon-block-recentlyaccessedcourses.html | 12 +- .../addon-block-recentlyaccesseditems.html | 2 +- .../addon-block-starredcourses.html | 12 +- .../timeline/addon-block-timeline.html | 22 ++-- .../entries/addon-blog-entries.html | 14 +-- .../calendar/addon-calendar-calendar.html | 2 +- src/addon/calendar/pages/day/day.html | 4 +- src/addon/files/pages/list/list.html | 2 +- .../messages/pages/discussion/discussion.html | 4 +- .../index/addon-mod-book-index.html | 2 +- .../index/addon-mod-chat-index.html | 2 +- .../mod/chat/pages/sessions/sessions.html | 4 +- .../index/addon-mod-data-index.html | 2 +- .../index/addon-mod-imscp-index.html | 2 +- .../components/index/addon-mod-lti-index.html | 2 +- .../index/addon-mod-page-index.html | 2 +- .../index/addon-mod-quiz-index.html | 4 +- src/addon/mod/quiz/pages/review/review.html | 6 +- .../index/addon-mod-resource-index.html | 2 +- .../index/addon-mod-scorm-index.html | 4 +- .../index/addon-mod-survey-index.html | 2 +- .../components/index/addon-mod-url-index.html | 4 +- .../mod/wiki/components/index/index.scss | 1 + src/app/app.ios.scss | 7 +- src/app/app.md.scss | 4 +- src/app/app.scss | 95 ++++++++------- src/app/app.wp.scss | 4 +- src/components/file/file.scss | 2 +- src/components/loading/loading.scss | 10 ++ src/components/loading/loading.ts | 2 + src/components/split-view/split-view.scss | 40 +------ src/core/block/components/block/block.scss | 2 +- .../course-blocks/course-blocks.scss | 2 + .../components/format/core-course-format.html | 2 +- .../course-module-description.scss | 16 +++ .../components/my-courses/my-courses.html | 2 +- .../components/course/core-grades-course.html | 4 +- src/core/siteplugins/providers/helper.ts | 3 +- src/core/tag/pages/search/search.html | 4 +- src/theme/variables.scss | 113 +++++++++++++++++- 40 files changed, 269 insertions(+), 156 deletions(-) create mode 100644 src/core/course/components/module-description/course-module-description.scss diff --git a/src/addon/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html b/src/addon/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html index 0d83e5a7e..7aadba0cb 100644 --- a/src/addon/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html +++ b/src/addon/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html @@ -8,14 +8,12 @@ - + -
-
- - - -
+
+ + +
diff --git a/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html b/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html index f3538163d..f6e60ba65 100644 --- a/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html +++ b/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html @@ -1,7 +1,7 @@

{{ 'addon.block_recentlyaccesseditems.pluginname' | translate }}

 - +
diff --git a/src/addon/block/starredcourses/components/starredcourses/addon-block-starredcourses.html b/src/addon/block/starredcourses/components/starredcourses/addon-block-starredcourses.html index a900b1f0f..a6b1d49b7 100644 --- a/src/addon/block/starredcourses/components/starredcourses/addon-block-starredcourses.html +++ b/src/addon/block/starredcourses/components/starredcourses/addon-block-starredcourses.html @@ -8,14 +8,12 @@
- + -
-
- - - -
+
+ + +
diff --git a/src/addon/block/timeline/components/timeline/addon-block-timeline.html b/src/addon/block/timeline/components/timeline/addon-block-timeline.html index 0e160fdf0..62afe16e1 100644 --- a/src/addon/block/timeline/components/timeline/addon-block-timeline.html +++ b/src/addon/block/timeline/components/timeline/addon-block-timeline.html @@ -20,18 +20,16 @@ - -
- - - - - - - - - -
+ + + + + + + + + + \ No newline at end of file diff --git a/src/addon/blog/components/entries/addon-blog-entries.html b/src/addon/blog/components/entries/addon-blog-entries.html index b3a41ae72..f5ed012be 100644 --- a/src/addon/blog/components/entries/addon-blog-entries.html +++ b/src/addon/blog/components/entries/addon-blog-entries.html @@ -3,12 +3,10 @@ -
- - {{ 'addon.blog.showonlyyourentries' | translate }} - > - -
+ + {{ 'addon.blog.showonlyyourentries' | translate }} + > + @@ -28,7 +26,9 @@

- + + +
{{ 'core.tag.tags' | translate }}:
diff --git a/src/addon/calendar/components/calendar/addon-calendar-calendar.html b/src/addon/calendar/components/calendar/addon-calendar-calendar.html index 093b97064..460072acb 100644 --- a/src/addon/calendar/components/calendar/addon-calendar-calendar.html +++ b/src/addon/calendar/components/calendar/addon-calendar-calendar.html @@ -6,7 +6,7 @@ - + diff --git a/src/addon/calendar/pages/day/day.html b/src/addon/calendar/pages/day/day.html index cb9102207..4f225959f 100644 --- a/src/addon/calendar/pages/day/day.html +++ b/src/addon/calendar/pages/day/day.html @@ -19,7 +19,7 @@ - + @@ -37,7 +37,7 @@ - + {{ 'core.hasdatatosync' | translate:{$a: 'core.day' | translate} }} diff --git a/src/addon/files/pages/list/list.html b/src/addon/files/pages/list/list.html index 06fdce330..4d467d824 100644 --- a/src/addon/files/pages/list/list.html +++ b/src/addon/files/pages/list/list.html @@ -8,7 +8,7 @@ - +
diff --git a/src/addon/messages/pages/discussion/discussion.html b/src/addon/messages/pages/discussion/discussion.html index 8363436b7..f29618655 100644 --- a/src/addon/messages/pages/discussion/discussion.html +++ b/src/addon/messages/pages/discussion/discussion.html @@ -25,7 +25,7 @@ - + @@ -34,7 +34,7 @@

{{ 'addon.messages.selfconversationdefaultmessage' | translate }}

- +
{{ message.timecreated | coreFormatDate: "strftimedayshort" }} diff --git a/src/addon/mod/book/components/index/addon-mod-book-index.html b/src/addon/mod/book/components/index/addon-mod-book-index.html index 13cc19b7e..3b1f0d214 100644 --- a/src/addon/mod/book/components/index/addon-mod-book-index.html +++ b/src/addon/mod/book/components/index/addon-mod-book-index.html @@ -18,7 +18,7 @@ -
+
diff --git a/src/addon/mod/chat/components/index/addon-mod-chat-index.html b/src/addon/mod/chat/components/index/addon-mod-chat-index.html index 3aaa3b0ce..a9bc1ebdc 100644 --- a/src/addon/mod/chat/components/index/addon-mod-chat-index.html +++ b/src/addon/mod/chat/components/index/addon-mod-chat-index.html @@ -10,7 +10,7 @@ - + diff --git a/src/addon/mod/chat/pages/sessions/sessions.html b/src/addon/mod/chat/pages/sessions/sessions.html index b78df54bc..acffafa23 100644 --- a/src/addon/mod/chat/pages/sessions/sessions.html +++ b/src/addon/mod/chat/pages/sessions/sessions.html @@ -28,9 +28,9 @@

{{ session.duration | coreDuration }}

-

+ {{ user.userfullname }} ({{ user.messagecount }}) -

+
-
+
diff --git a/src/addon/mod/imscp/components/index/addon-mod-imscp-index.html b/src/addon/mod/imscp/components/index/addon-mod-imscp-index.html index a07aa6be4..fe3930374 100644 --- a/src/addon/mod/imscp/components/index/addon-mod-imscp-index.html +++ b/src/addon/mod/imscp/components/index/addon-mod-imscp-index.html @@ -14,7 +14,7 @@ - +
diff --git a/src/addon/mod/lti/components/index/addon-mod-lti-index.html b/src/addon/mod/lti/components/index/addon-mod-lti-index.html index 492303fa3..a4e3f2e1e 100644 --- a/src/addon/mod/lti/components/index/addon-mod-lti-index.html +++ b/src/addon/mod/lti/components/index/addon-mod-lti-index.html @@ -9,7 +9,7 @@ - + diff --git a/src/addon/mod/page/components/index/addon-mod-page-index.html b/src/addon/mod/page/components/index/addon-mod-page-index.html index 819cef352..d231a3874 100644 --- a/src/addon/mod/page/components/index/addon-mod-page-index.html +++ b/src/addon/mod/page/components/index/addon-mod-page-index.html @@ -11,7 +11,7 @@ - + diff --git a/src/addon/mod/quiz/components/index/addon-mod-quiz-index.html b/src/addon/mod/quiz/components/index/addon-mod-quiz-index.html index 7f7cb5b74..b6eba13f7 100644 --- a/src/addon/mod/quiz/components/index/addon-mod-quiz-index.html +++ b/src/addon/mod/quiz/components/index/addon-mod-quiz-index.html @@ -36,7 +36,9 @@ -

{{ 'addon.mod_quiz.summaryofattempts' | translate }}

+
+

{{ 'addon.mod_quiz.summaryofattempts' | translate }}

+
diff --git a/src/addon/mod/quiz/pages/review/review.html b/src/addon/mod/quiz/pages/review/review.html index 3dba297ac..4d398ed27 100644 --- a/src/addon/mod/quiz/pages/review/review.html +++ b/src/addon/mod/quiz/pages/review/review.html @@ -18,8 +18,10 @@ -

{{ 'addon.mod_quiz.reviewofpreview' | translate }}

-

{{ 'addon.mod_quiz.reviewofattempt' | translate:{$a: attempt.attempt} }}

+
+

{{ 'addon.mod_quiz.reviewofpreview' | translate }}

+

{{ 'addon.mod_quiz.reviewofattempt' | translate:{$a: attempt.attempt} }}

+
diff --git a/src/addon/mod/resource/components/index/addon-mod-resource-index.html b/src/addon/mod/resource/components/index/addon-mod-resource-index.html index 45056cdcd..8f57c0428 100644 --- a/src/addon/mod/resource/components/index/addon-mod-resource-index.html +++ b/src/addon/mod/resource/components/index/addon-mod-resource-index.html @@ -11,7 +11,7 @@ - + diff --git a/src/addon/mod/scorm/components/index/addon-mod-scorm-index.html b/src/addon/mod/scorm/components/index/addon-mod-scorm-index.html index 5aeb8dec5..959fd819f 100644 --- a/src/addon/mod/scorm/components/index/addon-mod-scorm-index.html +++ b/src/addon/mod/scorm/components/index/addon-mod-scorm-index.html @@ -26,7 +26,9 @@ -

{{ 'addon.mod_scorm.attempts' | translate }}

+
+

{{ 'addon.mod_scorm.attempts' | translate }}

+
diff --git a/src/addon/mod/survey/components/index/addon-mod-survey-index.html b/src/addon/mod/survey/components/index/addon-mod-survey-index.html index 3f5eec9f1..d0d7c33d3 100644 --- a/src/addon/mod/survey/components/index/addon-mod-survey-index.html +++ b/src/addon/mod/survey/components/index/addon-mod-survey-index.html @@ -12,7 +12,7 @@ - + diff --git a/src/addon/mod/url/components/index/addon-mod-url-index.html b/src/addon/mod/url/components/index/addon-mod-url-index.html index bf2d57265..2e3ae8b8b 100644 --- a/src/addon/mod/url/components/index/addon-mod-url-index.html +++ b/src/addon/mod/url/components/index/addon-mod-url-index.html @@ -31,11 +31,11 @@

{{ 'addon.mod_url.pointingtourl' | translate }}

{{ url }}

 - + diff --git a/src/addon/mod/wiki/components/index/index.scss b/src/addon/mod/wiki/components/index/index.scss index 3a0249f11..e7edc2e28 100644 --- a/src/addon/mod/wiki/components/index/index.scss +++ b/src/addon/mod/wiki/components/index/index.scss @@ -13,6 +13,7 @@ ion-app.app-root addon-mod-wiki-index { .addon-mod_wiki-page-content { background-color: $white; border-top: 1px solid $gray; + @include safe-area-padding-horizontal(0px, 0px); @include darkmode() { background-color: $black; } diff --git a/src/app/app.ios.scss b/src/app/app.ios.scss index d90e3da7b..76b7d379d 100644 --- a/src/app/app.ios.scss +++ b/src/app/app.ios.scss @@ -37,7 +37,6 @@ ion-app.app-root.ios { @include margin-horizontal(0, null); } - @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) { .core-#{$color-name}-card { @extend .card-ios ; @@ -48,10 +47,10 @@ ion-app.app-root.ios { } &[icon-start] { - @include padding(null, null, null, $card-ios-padding-left * 2 + 20); + @include safe-area-padding(null, null, null, $card-ios-padding-left * 2 + 20); ion-icon { - @include position(null, null, null, $card-ios-padding-left); + @include safe-area-position(null, null, null, $card-ios-padding-left); } } } @@ -121,4 +120,4 @@ ion-app.app-root.ios { cursor: pointer; } } -} \ No newline at end of file +} diff --git a/src/app/app.md.scss b/src/app/app.md.scss index db1666048..a1efde285 100644 --- a/src/app/app.md.scss +++ b/src/app/app.md.scss @@ -43,10 +43,10 @@ ion-app.app-root.md { } &[icon-start] { - @include padding(null, null, null, $card-md-padding-left * 2 + 20); + @include safe-area-padding(null, null, null, $card-md-padding-left * 2 + 20); ion-icon { - @include position(null, null, null, $card-md-padding-left); + @include safe-area-position(null, null, null, $card-md-padding-left); } } } diff --git a/src/app/app.scss b/src/app/app.scss index a43d1efee..8f49c0974 100644 --- a/src/app/app.scss +++ b/src/app/app.scss @@ -738,13 +738,13 @@ ion-app.app-root { } &[icon-start] { - @include padding(null, null, null, 52px); + @include safe-area-padding(null, null, null, 52px); position: relative; > ion-icon { color: $color-base; position: absolute; - @include position(0, null, null, 16px); + @include safe-area-position(0, null, null, 16px); height: 100%; font-size: 24px; display: flex; @@ -786,17 +786,7 @@ ion-app.app-root { } .core-#{$color-name}-selected-item { - @include safe-area-border-start(5px, solid, $color-base); - - &.item-md { - @include padding(null, null, null, $item-md-padding-start - 5px); - } - &.item-ios { - @include padding(null, null, null, $item-ios-padding-start - 5px); - } - &.item-wp { - @include padding(null, null, null, $item-wp-padding-start - 5px); - } + @include core-selected-item($color-base); } .split-pane-main .core-#{$color-name}-selected-item { @@ -852,6 +842,8 @@ ion-app.app-root { @media only screen and (min-height: 400px) and (min-width: 300px) { .core-modal-lateral { + @include core-split-area-end(); + .modal-wrapper { position: absolute; @include position(0 !important, 0 !important, 0 !important, auto); @@ -1031,6 +1023,14 @@ ion-app.app-root { flex-flow: nowrap; overflow-x: scroll; flex-direction: row; + + .item-ios.item-block { + @include padding-horizontal($item-ios-padding-end / 2, null); + + .item-inner { + @include padding-horizontal(null, $item-ios-padding-end / 2); + } + } } ion-content.core-expand-max .scroll-content { @@ -1095,11 +1095,6 @@ ion-app.app-root { } } -[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 -} - body.keyboard-is-open { ion-content:not(.has-footer) { > .scroll-content, > .fixed-content { @@ -1112,31 +1107,6 @@ body.keyboard-is-open { } } -.safe-padding-horizontal{ - @include safe-area-padding-horizontal(0px, 0px); -} - -[padding].safe-padding-horizontal, -ion-app.ios [padding].safe-padding-horizontal { - @include safe-area-padding-horizontal($content-padding, $content-padding); -} - -ion-app.ios .split-pane-side, -.split-pane-side { - .safe-padding-horizontal, - [padding].safe-padding-horizontal { - @include safe-area-padding-start(0px, $content-padding); - } -} - -ion-app.ios .split-pane-main, -.split-pane-main { - .safe-padding-horizontal, - [padding].safe-padding-horizontal { - @include safe-area-padding-end($content-padding, 0px); - } -} - details summary { pointer-events: auto; } @@ -1239,3 +1209,42 @@ ion-app.platform-desktop { font-size: 28px; } } + +// Safe areas +[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 +} + +ion-app.app-root { + .safe-area-page, + .safe-padding-horizontal { + @include safe-area-padding-horizontal(0px, 0px); + } + + [padding].safe-padding-horizontal, + &.ios [padding].safe-padding-horizontal { + @include safe-area-padding-horizontal($content-padding, $content-padding); + } + + // Disable safe area padding. + ion-popover, + .safe-area-page, + .safe-padding-horizontal { + .item-ios.item-block { + @include padding-horizontal($item-ios-padding-end, null); + + .item-inner { + @include padding-horizontal(null, $item-ios-padding-end / 2); + } + } + } + + .item-ios[detail-push] .item-inner, + button.item-ios:not([detail-none]) .item-inner, + a.item-ios:not([detail-none]) .item-inner { + [item-end] { + @include safe-area-margin-horizontal(($item-ios-padding-start / 2), ($item-ios-padding-end / 2)); + } + } +} diff --git a/src/app/app.wp.scss b/src/app/app.wp.scss index 127e273b0..97a8317ae 100644 --- a/src/app/app.wp.scss +++ b/src/app/app.wp.scss @@ -40,10 +40,10 @@ ion-app.app-root.wp { } &[icon-start] { - @include padding(null, null, null, $card-wp-padding-left * 2 + 20); + @include safe-area-padding(null, null, null, $card-wp-padding-left * 2 + 20); ion-icon { - @include position(null, null, null, $card-wp-padding-left); + @include safe-area-position(null, null, null, $card-wp-padding-left); } } } diff --git a/src/components/file/file.scss b/src/components/file/file.scss index 227c565b8..9fa957c53 100644 --- a/src/components/file/file.scss +++ b/src/components/file/file.scss @@ -20,7 +20,7 @@ ion-app.app-root { core-file > .item.item-block > .item-inner { border-bottom: 0; - @include padding(null, 0, null, null); + @include safe-area-padding(null, 0px, null, null); .buttons { display: flex; flex-flow: row; diff --git a/src/components/loading/loading.scss b/src/components/loading/loading.scss index 8b4136eea..d4c5916ba 100644 --- a/src/components/loading/loading.scss +++ b/src/components/loading/loading.scss @@ -20,6 +20,16 @@ ion-app.app-root { &.core-loading-noheight .core-loading-content { height: auto; } + + &.safe-area-page { + padding-left: 0 !important; + padding-right: 0 !important; + + > .core-loading-content > *, + > .core-loading-content-loading > * { + @include safe-area-padding-horizontal(0px, 0px); + } + } } .scroll-content > core-loading, diff --git a/src/components/loading/loading.ts b/src/components/loading/loading.ts index 21cb4e92f..ad4c61032 100644 --- a/src/components/loading/loading.ts +++ b/src/components/loading/loading.ts @@ -84,11 +84,13 @@ export class CoreLoadingComponent implements OnInit, OnChanges { setTimeout(() => { // Change CSS to force calculate height. this.content.nativeElement.classList.add('core-loading-content'); + this.content.nativeElement.classList.remove('core-loading-content-loading'); }, 500); }); } else { this.element.classList.remove('core-loading-loaded'); this.content.nativeElement.classList.remove('core-loading-content'); + this.content.nativeElement.classList.add('core-loading-content-loading'); } // Trigger the event after a timeout since the elements inside ngIf haven't been added to DOM yet. diff --git a/src/components/split-view/split-view.scss b/src/components/split-view/split-view.scss index 4d1fe88aa..355e1ef4e 100644 --- a/src/components/split-view/split-view.scss +++ b/src/components/split-view/split-view.scss @@ -17,6 +17,11 @@ ion-app.app-root core-split-view { .split-pane-visible { .split-pane-main { display: block; + @include core-split-area-end(); + } + + .split-pane-side { + @include core-split-area-start(); } .split-pane-side .core-split-item-selected { @@ -27,12 +32,6 @@ ion-app.app-root core-split-view { background-color: $black; } } - - .item-ios[detail-push] .item-inner, - button.item-ios:not([detail-none]) .item-inner, - a.item-ios:not([detail-none]) .item-inner { - @include background-position(end, $item-ios-padding-end - 2, center); - } } ion-header { display: none; @@ -41,32 +40,3 @@ ion-app.app-root core-split-view { padding-top: 0 !important; } } - -.safe-area-page { - @include safe-area-padding-horizontal(0px, 0px); -} - -ion-app.app-root .split-pane-visible .split-pane-side { - .safe-area-page { - @include safe-area-padding-start(0px, 0px); - - .core-split-item-selected { - @include border-start(5px, solid, $core-splitview-selected); - } - } - - // Disable safe area padding. - .item-ios.item-block .item-inner { - @include padding-horizontal(null, $item-ios-padding-end / 2); - } -} - -ion-app.app-root .split-pane-visible .split-pane-main { - .safe-area-page { - @include safe-area-padding-end(0px, 0px); - } - - .toolbar { - @include safe-area-padding-end(0px, 0px); - } -} diff --git a/src/core/block/components/block/block.scss b/src/core/block/components/block/block.scss index 2ab0c8f20..95fcc68e7 100644 --- a/src/core/block/components/block/block.scss +++ b/src/core/block/components/block/block.scss @@ -19,7 +19,7 @@ ion-app.app-root core-block { } .item-divider { - @include safe-area-padding-horizontal(null, 0px); + @include padding-horizontal(null, 0px); } .item-divider .core-button-spinner { diff --git a/src/core/block/components/course-blocks/course-blocks.scss b/src/core/block/components/course-blocks/course-blocks.scss index ef2da86c0..b81858bc9 100644 --- a/src/core/block/components/course-blocks/course-blocks.scss +++ b/src/core/block/components/course-blocks/course-blocks.scss @@ -22,12 +22,14 @@ ion-app.app-root core-block-course-blocks { box-shadow: none !important; flex-grow: 1; max-width: 100%; + @include core-split-area-start(); } div.core-course-blocks-side { max-width: $core-side-blocks-max-width; min-width: $core-side-blocks-min-width; @include border-start(1px, solid, $list-md-border-color); + @include core-split-area-end(); } .core-course-blocks-content, diff --git a/src/core/course/components/format/core-course-format.html b/src/core/course/components/format/core-course-format.html index 40bcd52fe..7013b69f5 100644 --- a/src/core/course/components/format/core-course-format.html +++ b/src/core/course/components/format/core-course-format.html @@ -55,7 +55,7 @@
- +