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

MOBILE-3123 style: Add some safe areas for notch

main
Pau Ferrer Ocaña 2019-09-09 12:49:13 +02:00
parent 8063fb42ea
commit 4b98a592c7
40 changed files with 269 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/addon/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
View File

@ -8,14 +8,12 @@
<ion-spinner *ngIf="!prefetchCoursesData.icon || prefetchCoursesData.icon == 'spinner'"></ion-spinner>
</div>
</ion-item-divider>
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
<core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg" [message]="'addon.block_recentlyaccessedcourses.nocourses' | translate"></core-empty-box>
<!-- List of courses. -->
<div class="safe-area-page">
<div class="core-horizontal-scroll">
<ng-container *ngFor="let course of courses">
<core-courses-course-progress [course]="course" class="core-recentlyaccessedcourses" [showDownload]="downloadEnabled"></core-courses-course-progress>
</ng-container>
</div>
<div class="core-horizontal-scroll">
<ng-container *ngFor="let course of courses">
<core-courses-course-progress [course]="course" class="core-recentlyaccessedcourses" [showDownload]="downloadEnabled"></core-courses-course-progress>
</ng-container>
</div>
</core-loading>

2
src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
View File

@ -1,7 +1,7 @@
<ion-item-divider>
<h2>{{ 'addon.block_recentlyaccesseditems.pluginname' | translate }}</h2>
</ion-item-divider>
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
<div class="core-horizontal-scroll" *ngIf="items && items.length > 0">
<div *ngFor="let item of items">
<ion-card>

12
src/addon/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
View File

@ -8,14 +8,12 @@
<ion-spinner *ngIf="!prefetchCoursesData.icon || prefetchCoursesData.icon == 'spinner'"></ion-spinner>
</div>
</ion-item-divider>
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
<core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg" [message]="'addon.block_starredcourses.nocourses' | translate"></core-empty-box>
<!-- List of courses. -->
<div class="safe-area-page">
<div class="core-horizontal-scroll">
<ng-container *ngFor="let course of courses">
<core-courses-course-progress [course]="course" class="core-block_starredcourses" [showDownload]="downloadEnabled"></core-courses-course-progress>
</ng-container>
</div>
<div class="core-horizontal-scroll">
<ng-container *ngFor="let course of courses">
<core-courses-course-progress [course]="course" class="core-block_starredcourses" [showDownload]="downloadEnabled"></core-courses-course-progress>
</ng-container>
</div>
</core-loading>

22
src/addon/block/timeline/components/timeline/addon-block-timeline.html
View File

@ -20,18 +20,16 @@
<core-loading [hideUntil]="timeline.loaded" [hidden]="sort != 'sortbydates'" class="core-loading-center">
<addon-block-timeline-events [events]="timeline.events" showCourse="true" [canLoadMore]="timeline.canLoadMore" (loadMore)="loadMoreTimeline()" [from]="dataFrom" [to]="dataTo"></addon-block-timeline-events>
</core-loading>
<core-loading [hideUntil]="timelineCourses.loaded" [hidden]="sort != 'sortbycourses'" class="core-loading-center">
<div class="safe-area-page">
<ion-grid no-padding>
<ion-row no-padding>
<ion-col *ngFor="let course of timelineCourses.courses" no-padding col-12 col-md-6>
<core-courses-course-progress [course]="course">
<addon-block-timeline-events [events]="course.events" [canLoadMore]="course.canLoadMore" (loadMore)="loadMoreCourse(course)" [from]="dataFrom" [to]="dataTo"></addon-block-timeline-events>
</core-courses-course-progress>
</ion-col>
</ion-row>
</ion-grid>
</div>
<core-loading [hideUntil]="timelineCourses.loaded" [hidden]="sort != 'sortbycourses'" class="core-loading-center safe-area-page">
<ion-grid no-padding>
<ion-row no-padding>
<ion-col *ngFor="let course of timelineCourses.courses" no-padding col-12 col-md-6>
<core-courses-course-progress [course]="course">
<addon-block-timeline-events [events]="course.events" [canLoadMore]="course.canLoadMore" (loadMore)="loadMoreCourse(course)" [from]="dataFrom" [to]="dataTo"></addon-block-timeline-events>
</core-courses-course-progress>
</ion-col>
</ion-row>
</ion-grid>
<core-empty-box *ngIf="timelineCourses.courses.length == 0" image="assets/img/icons/courses.svg" [message]="'addon.block_timeline.nocoursesinprogress' | translate"></core-empty-box>
</core-loading>
</core-loading>

14
src/addon/blog/components/entries/addon-blog-entries.html
View File

@ -3,12 +3,10 @@
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher>
<core-loading [hideUntil]="loaded" class="core-loading-center">
<div class="safe-padding-horizontal">
<ion-item *ngIf="showMyEntriesToggle">
<ion-label>{{ 'addon.blog.showonlyyourentries' | translate }}</ion-label>
<ion-toggle [(ngModel)]="onlyMyEntries" (ionChange)="onlyMyEntriesToggleChanged(onlyMyEntries)">></ion-toggle>
</ion-item>
</div>
<ion-item *ngIf="showMyEntriesToggle">
<ion-label>{{ 'addon.blog.showonlyyourentries' | translate }}</ion-label>
<ion-toggle [(ngModel)]="onlyMyEntries" (ionChange)="onlyMyEntriesToggleChanged(onlyMyEntries)">></ion-toggle>
</ion-item>
<core-empty-box *ngIf="entries && entries.length == 0" icon="fa-newspaper-o" [message]="'addon.blog.noentriesyet' | translate"></core-empty-box>
<ng-container *ngFor="let entry of entries">
<ion-card *ngIf="!onlyMyEntries || entry.userid == currentUserId">
@ -28,7 +26,9 @@
</p>
</ion-item>
<ion-card-content>
<core-format-text [text]="entry.summary" [component]="this.component" [componentId]="entry.id"></core-format-text>
<ion-item>
<core-format-text [text]="entry.summary" [component]="this.component" [componentId]="entry.id"></core-format-text>
</ion-item>
<ion-item text-wrap *ngIf="tagsEnabled && entry.tags && entry.tags.length > 0">
<div item-start>{{ 'core.tag.tags' | translate }}:</div>
<core-tag-list [tags]="entry.tags"></core-tag-list>

2
src/addon/calendar/components/calendar/addon-calendar-calendar.html
View File

@ -6,7 +6,7 @@
</core-context-menu>
</core-navbar-buttons>
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
<!-- Period name and arrows to navigate. -->
<ion-grid no-padding class="addon-calendar-navigation">
<ion-row align-items-center>

4
src/addon/calendar/pages/day/day.html
View File

@ -19,7 +19,7 @@
</ion-refresher>
<!-- Period name and arrows to navigate. -->
<ion-grid padding-top>
<ion-grid padding-top class="safe-area-page">
<ion-row>
<ion-col text-start *ngIf="currentMoment">
<a ion-button icon-only clear (click)="loadPrevious()" [title]="'addon.calendar.dayprev' | translate">
@ -37,7 +37,7 @@
</ion-row>
</ion-grid>
<core-loading [hideUntil]="loaded">
<core-loading [hideUntil]="loaded" class="safe-area-page">
<!-- There is data to be synchronized -->
<ion-card class="core-warning-card" icon-start *ngIf="hasOffline">
<ion-icon name="warning"></ion-icon> {{ 'core.hasdatatosync' | translate:{$a: 'core.day' | translate} }}

2
src/addon/files/pages/list/list.html
View File

@ -8,7 +8,7 @@
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher>
<core-loading [hideUntil]="filesLoaded" *ngIf="showPrivateFiles || showSiteFiles">
<core-loading [hideUntil]="filesLoaded" *ngIf="showPrivateFiles || showSiteFiles" class="safe-area-page">
<!-- Allow selecting the files to see: private or site. -->
<div padding *ngIf="showPrivateFiles && showSiteFiles && !path">
<ion-select [(ngModel)]="root" (ngModelChange)="rootChanged()" interface="popover" class="core-button-select">

4
src/addon/messages/pages/discussion/discussion.html
View File

@ -25,7 +25,7 @@
</core-navbar-buttons>
</ion-header>
<ion-content class="has-footer">
<core-loading [hideUntil]="loaded">
<core-loading [hideUntil]="loaded" class="safe-area-page">
<!-- Load previous messages. -->
<core-infinite-loading [enabled]="canLoadMore" (action)="loadPrevious($event)" position="top" [error]="loadMoreError"></core-infinite-loading>
@ -34,7 +34,7 @@
<p text-center><i>{{ 'addon.messages.selfconversationdefaultmessage' | translate }}</i></p>
</ng-container>
<ion-list class="addon-messages-discussion-container safe-area-page" [class.addon-messages-discussion-group]="isGroup" [attr.aria-live]="'polite'">
<ion-list class="addon-messages-discussion-container" [class.addon-messages-discussion-group]="isGroup" [attr.aria-live]="'polite'">
<ng-container *ngFor="let message of messages; index as index; last as last">
<h6 text-center *ngIf="message.showDate" class="addon-messages-date">
{{ message.timecreated | coreFormatDate: "strftimedayshort" }}

2
src/addon/mod/book/components/index/addon-mod-book-index.html
View File

@ -18,7 +18,7 @@
<core-course-module-description [description]="description" [component]="component" [componentId]="componentId"></core-course-module-description>
<div padding>
<div padding class="safe-padding-horizontal">
<core-navigation-bar [previous]="previousChapter > 0 && previousChapter" [next]="nextChapter > 0 && nextChapter" (action)="changeChapter($event)"></core-navigation-bar>
<core-format-text [component]="component" [componentId]="componentId" [text]="chapterContent"></core-format-text>
<div margin-top *ngIf="tagsEnabled && contentsMap && contentsMap[currentChapter] && contentsMap[currentChapter].tags && contentsMap[currentChapter].tags.length > 0">

2
src/addon/mod/chat/components/index/addon-mod-chat-index.html
View File

@ -10,7 +10,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
<core-course-module-description [description]="description" [component]="component" [componentId]="componentId"></core-course-module-description>

4
src/addon/mod/chat/pages/sessions/sessions.html
View File

@ -28,9 +28,9 @@
<p *ngIf="session.duration">{{ session.duration | coreDuration }}</p>
</ion-item>
<ion-card-content>
<p *ngFor="let user of session.sessionusers">
<ion-item *ngFor="let user of session.sessionusers">
{{ user.userfullname }} <span *ngIf="user.messagecount">({{ user.messagecount }})</span>
</p>
</ion-item>
</ion-card-content>
<div *ngIf="session.sessionusers.length < session.allsessionusers.length">
<button ion-button clear (click)="showMoreUsers(session, $event)">

2
src/addon/mod/data/components/index/addon-mod-data-index.html
View File

@ -66,7 +66,7 @@
</div>
</ng-container>
<div class="addon-data-contents addon-data-entries-{{data.id}}" *ngIf="!isEmpty">
<div class="addon-data-contents addon-data-entries-{{data.id}} safe-padding-horizontal" *ngIf="!isEmpty">
<core-style [css]="data.csstemplate" prefix=".addon-data-entries-{{data.id}}"></core-style>
<core-compile-html [text]="entriesRendered" [jsData]="jsData" [extraImports]="extraImports"></core-compile-html>

2
src/addon/mod/imscp/components/index/addon-mod-imscp-index.html
View File

@ -14,7 +14,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
<div class="addon-mod-imscp-container">
<core-navigation-bar [previous]="previousItem" [next]="nextItem" (action)="loadItem($event)" [info]="description" [title]="'core.description' | translate" [component]="component" [componentId]="componentId"></core-navigation-bar>
<core-iframe [src]="src"></core-iframe>

2
src/addon/mod/lti/components/index/addon-mod-lti-index.html
View File

@ -9,7 +9,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
<core-course-module-description [description]="description" [component]="component" [componentId]="componentId"></core-course-module-description>

2
src/addon/mod/page/components/index/addon-mod-page-index.html
View File

@ -11,7 +11,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
<core-course-module-description *ngIf="displayDescription" [description]="description" [component]="component" [componentId]="componentId"></core-course-module-description>

4
src/addon/mod/quiz/components/index/addon-mod-quiz-index.html
View File

@ -36,7 +36,9 @@
<!-- List of user attempts. -->
<ion-card class="addon-mod_quiz-table" *ngIf="quiz && attempts && attempts.length">
<ion-card-header text-wrap>
<h2>{{ 'addon.mod_quiz.summaryofattempts' | translate }}</h2>
<div class="safe-padding-horizontal">
<h2>{{ 'addon.mod_quiz.summaryofattempts' | translate }}</h2>
</div>
</ion-card-header>
<ion-list>
<!-- "Header" of the table -->

6
src/addon/mod/quiz/pages/review/review.html
View File

@ -18,8 +18,10 @@
<!-- Review summary -->
<ion-card *ngIf="attempt">
<ion-card-header text-wrap>
<h2 *ngIf="attempt.preview">{{ 'addon.mod_quiz.reviewofpreview' | translate }}</h2>
<h2 *ngIf="!attempt.preview">{{ 'addon.mod_quiz.reviewofattempt' | translate:{$a: attempt.attempt} }}</h2>
<div class="safe-padding-horizontal">
<h2 *ngIf="attempt.preview">{{ 'addon.mod_quiz.reviewofpreview' | translate }}</h2>
<h2 *ngIf="!attempt.preview">{{ 'addon.mod_quiz.reviewofattempt' | translate:{$a: attempt.attempt} }}</h2>
</div>
</ion-card-header>
<ion-list>
<ion-item text-wrap no-lines>

2
src/addon/mod/resource/components/index/addon-mod-resource-index.html
View File

@ -11,7 +11,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
<core-course-module-description *ngIf="mode != 'iframe'" [description]="description" [component]="component" [componentId]="componentId"></core-course-module-description>

4
src/addon/mod/scorm/components/index/addon-mod-scorm-index.html
View File

@ -26,7 +26,9 @@
<!-- Attempts status. -->
<ion-card *ngIf="(scorm.displayattemptstatus || (scorm.offlineAttempts && scorm.offlineAttempts.length)) && !skip">
<ion-card-header text-wrap>
<h2>{{ 'addon.mod_scorm.attempts' | translate }}</h2>
<div class="safe-padding-horizontal">
<h2>{{ 'addon.mod_scorm.attempts' | translate }}</h2>
</div>
</ion-card-header>
<ion-list>
<ng-container *ngIf="scorm.displayattemptstatus">

2
src/addon/mod/survey/components/index/addon-mod-survey-index.html
View File

@ -12,7 +12,7 @@
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center">
<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
<core-course-module-description [description]="description" [component]="component" [componentId]="componentId"></core-course-module-description>

4
src/addon/mod/url/components/index/addon-mod-url-index.html
View File

@ -31,11 +31,11 @@
<h2>{{ 'addon.mod_url.pointingtourl' | translate }}</h2>
<p>{{ url }}</p>
</ion-item>
<div padding>
<ion-item text-wrap>
<a ion-button block (click)="go()" icon-start>
<ion-icon name="link" start></ion-icon>
{{ 'addon.mod_url.accessurl' | translate }}
</a>
</div>
</ion-item>
</ion-list>
</core-loading>

1
src/addon/mod/wiki/components/index/index.scss
View File

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

5
src/app/app.ios.scss
View File

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

4
src/app/app.md.scss
View File

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

95
src/app/app.scss
View File

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

4
src/app/app.wp.scss
View File

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

2
src/components/file/file.scss
View File

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

10
src/components/loading/loading.scss
View File

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

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

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

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

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

2
src/core/block/components/block/block.scss
View File

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

2
src/core/block/components/course-blocks/course-blocks.scss
View File

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

2
src/core/course/components/format/core-course-format.html
View File

@ -55,7 +55,7 @@
<core-infinite-loading [enabled]="canLoadMore" (action)="showMoreActivities($event)"></core-infinite-loading>
</div>
<ion-buttons padding end class="core-course-section-nav-buttons" *ngIf="displaySectionSelector && sections && sections.length">
<ion-buttons padding end class="core-course-section-nav-buttons safe-padding-horizontal" *ngIf="displaySectionSelector && sections && sections.length">
<button *ngIf="previousSection" ion-button color="light" icon-only (click)="sectionChanged(previousSection)" title="{{ 'core.previous' | translate }}">
<ion-icon name="arrow-back" md="ios-arrow-back"></ion-icon>
<core-format-text class="accesshide" [text]="previousSection.formattedName || previousSection.name"></core-format-text>

16
src/core/course/components/module-description/course-module-description.scss 100644
View File

@ -0,0 +1,16 @@
ion-app.app-root {
.safe-area-page,
.safe-padding-horizontal {
core-course-module-description {
padding-left: 0 !important;
padding-right: 0 !important;
.item-ios.item-block {
@include safe-area-padding-horizontal($item-ios-padding-end / 2, null);
.item-inner {
@include safe-area-padding-horizontal(null, $item-ios-padding-end / 2);
}
}
}
}
}

2
src/core/courses/components/my-courses/my-courses.html
View File

@ -1,7 +1,7 @@
<core-loading [hideUntil]="coursesLoaded">
<ion-searchbar #searchbar *ngIf="showFilter" [(ngModel)]="filter" (ionInput)="filterChanged($event)" (ionCancel)="filterChanged()" [placeholder]="'core.courses.filtermycourses' | translate">
</ion-searchbar>
<ion-grid no-padding>
<ion-grid no-padding class="safe-area-page">
<ion-row no-padding>
<ion-col *ngFor="let course of filteredCourses" no-padding col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4 align-self-stretch>
<core-courses-course-progress [course]="course" class="core-courseoverview" showAll="true"></core-courses-course-progress>

4
src/core/grades/components/course/core-grades-course.html
View File

@ -2,11 +2,11 @@
<ion-refresher [enabled]="gradesLoaded" (ionRefresh)="refreshGrades($event)">
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher>
<core-loading [hideUntil]="gradesLoaded">
<core-loading [hideUntil]="gradesLoaded" class="safe-area-page">
<core-empty-box *ngIf="!gradesTable" icon="stats" [message]="'core.grades.nogradesreturned' | translate">
</core-empty-box>
<div *ngIf="gradesTable" class="core-grades-container safe-area-page">
<div *ngIf="gradesTable" class="core-grades-container">
<table cellspacing="0" cellpadding="0" class="core-grades-table">
<thead>
<tr>

3
src/core/siteplugins/providers/helper.ts
View File

@ -664,7 +664,8 @@ export class CoreSitePluginsHelperProvider {
const uniqueName = this.sitePluginsProvider.getHandlerUniqueName(plugin, handlerName),
blockName = (handlerSchema.moodlecomponent || plugin.component).replace('block_', ''),
titleString = (handlerSchema.displaydata && handlerSchema.displaydata.title) ? handlerSchema.displaydata.title : 'pluginname',
titleString = (handlerSchema.displaydata && handlerSchema.displaydata.title) ?
handlerSchema.displaydata.title : 'pluginname',
prefixedTitle = this.getPrefixedString(plugin.addon, titleString);
this.blockDelegate.registerHandler(

4
src/core/tag/pages/search/search.html
View File

@ -7,7 +7,7 @@
<ion-refresher [enabled]="loaded" (ionRefresh)="refreshData($event)">
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher>
<ion-grid>
<ion-grid class="safe-area-page">
<ion-row>
<ion-col col-12 [attr.col-sm-6]="collections && collections.length > 1 ? '' : null">
<core-search-box (onSubmit)="searchTags($event)" (onClear)="searchTags('')" [initialSearch]="query" [disabled]="searching" autocorrect="off" [spellcheck]="false" [autoFocus]="true" [lengthCheck]="0"></core-search-box>
@ -20,7 +20,7 @@
</ion-col>
</ion-row>
</ion-grid>
<core-loading [hideUntil]="loaded && !searching">
<core-loading [hideUntil]="loaded && !searching" class="safe-area-page">
<core-empty-box *ngIf="!cloud || !cloud.tags || !cloud.tags.length" icon="pricetags" [message]="'core.tag.notagsfound' | translate: {$a: query}"></core-empty-box>
<ng-container *ngIf="cloud && cloud.tags && cloud.tags.length > 0">

113
src/theme/variables.scss
View File

@ -413,7 +413,6 @@ $core-dd-question-colors: $white, $blue-light, #DCDCDC, #D8BFD8, #87CEFA, #DAA52
}
}
@mixin safe-area-border-end($px, $type, $color) {
$safe-area-position: calc(constant(safe-area-inset-right) + #{$px});
$safe-area-position-env: calc(env(safe-area-inset-right) + #{$px});
@ -425,6 +424,29 @@ $core-dd-question-colors: $white, $blue-light, #DCDCDC, #D8BFD8, #87CEFA, #DAA52
}
}
@mixin safe-area-margin-horizontal($start, $end: $start) {
$safe-area-end: null;
$safe-area-start: null;
$safe-area-start-env: null;
$safe-area-end-env: null;
@if ($end) {
$safe-area-end: calc(constant(safe-area-inset-right) + #{$end});
$safe-area-end-env: calc(env(safe-area-inset-right) + #{$end});
}
@if ($start) {
$safe-area-start: calc(constant(safe-area-inset-left) + #{$start});
$safe-area-start-env: calc(env(safe-area-inset-left) + #{$start});
}
@include margin-horizontal($start, $end);
@media screen and (orientation: landscape) {
@include margin-horizontal($safe-area-start, $safe-area-end);
@include margin-horizontal($safe-area-start-env, $safe-area-end-env);
}
}
@mixin safe-area-padding-start($start, $end) {
$safe-area-start: calc(constant(safe-area-inset-left) + #{$start});
$safe-area-start-env: calc(env(safe-area-inset-left) + #{$start});
@ -449,6 +471,12 @@ $core-dd-question-colors: $white, $blue-light, #DCDCDC, #D8BFD8, #87CEFA, #DAA52
}
}
@mixin safe-area-position($top: null, $end: null, $bottom: null, $start: null) {
@include safe-position-horizontal($start, $end);
top: $top;
bottom: $bottom;
}
@mixin horizontal_scroll_item($width, $min-width, $max-width) {
flex: 0 0 $width;
min-width: $min-width;
@ -556,16 +584,91 @@ $core-dd-question-colors: $white, $blue-light, #DCDCDC, #D8BFD8, #87CEFA, #DAA52
}
@mixin core-selected-item($selected-color) {
@include border-start(5px, solid, $selected-color);
@include safe-area-border-start(5px, solid, $selected-color);
&.item-md {
@include padding(null, null, null, $item-md-padding-start - 5px);
@include padding-horizontal($item-md-padding-start - 5px, null);
}
&.item-ios {
@include padding(null, null, null, $item-ios-padding-start - 5px);
@include padding-horizontal($item-ios-padding-start - 5px, null);
}
&.item-wp {
@include padding(null, null, null, $item-wp-padding-start - 5px);
@include padding-horizontal($item-wp-padding-start - 5px, null);
}
}
@mixin core-split-area-start() {
.safe-padding-horizontal,
[padding].safe-padding-horizontal {
@include safe-area-padding-start(0px, $content-padding);
}
.safe-area-page {
@include safe-area-padding-start(0px, 0px);
.core-split-item-selected {
@include border-start(5px, solid, $core-splitview-selected);
}
}
core-loading.safe-area-page {
> .core-loading-content > *,
> .core-loading-content-loading > * {
@include safe-area-padding-start(0px, 0px);
}
}
// Disable safe area padding on the "end" side.
.item-ios.item-block .item-inner {
@include padding-horizontal(null, $item-ios-padding-end / 2);
}
@if $item-ios-detail-push-show == true {
.item-ios[detail-push] .item-inner,
button.item-ios:not([detail-none]) .item-inner,
a.item-ios:not([detail-none]) .item-inner {
@include padding-horizontal(null, 32px);
@include background-position(end, $item-ios-padding-end - 2, center);
[item-end] {
@include margin-horizontal(($item-ios-padding-start / 2), ($item-ios-padding-end / 2));
}
}
}
ion-fab[end] {
@include position-horizontal(null, $fab-content-margin);
}
}
@mixin core-split-area-end() {
.safe-padding-horizontal,
[padding].safe-padding-horizontal {
@include safe-area-padding-end($content-padding, 0px);
}
.safe-area-page {
@include safe-area-padding-end(0px, 0px);
}
core-loading.safe-area-page {
> .core-loading-content > *,
> .core-loading-content-loading > * {
@include safe-area-padding-end(0px, 0px);
}
}
// Disable safe area padding on the "start" side.
.item-ios {
@include padding-horizontal($item-ios-padding-end / 2, null);
}
.toolbar {
@include safe-area-padding-end(0px, 0px);
}
.core-nav-item-selected, .item.core-nav-item-selected {
@include border-start(5px, solid, $core-splitview-selected);
}
}