forked from CIT/Vmeda.Online
		
	Merge pull request #2116 from crazyserver/MOBILE-3123
MOBILE-3123 style: Add some safe areas for notch
This commit is contained in:
		
						commit
						ed7a212a8f
					
				| @ -8,14 +8,12 @@ | |||||||
|         <ion-spinner *ngIf="!prefetchCoursesData.icon || prefetchCoursesData.icon == 'spinner'"></ion-spinner> |         <ion-spinner *ngIf="!prefetchCoursesData.icon || prefetchCoursesData.icon == 'spinner'"></ion-spinner> | ||||||
|     </div> |     </div> | ||||||
| </ion-item-divider> | </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> |     <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. --> |     <!-- List of courses. --> | ||||||
|     <div class="safe-area-page"> |      <div class="core-horizontal-scroll"> | ||||||
|          <div class="core-horizontal-scroll"> |         <ng-container *ngFor="let course of courses"> | ||||||
|             <ng-container *ngFor="let course of courses"> |             <core-courses-course-progress [course]="course" class="core-recentlyaccessedcourses" [showDownload]="downloadEnabled"></core-courses-course-progress> | ||||||
|                 <core-courses-course-progress [course]="course" class="core-recentlyaccessedcourses" [showDownload]="downloadEnabled"></core-courses-course-progress> |         </ng-container> | ||||||
|             </ng-container> |  | ||||||
|         </div> |  | ||||||
|     </div> |     </div> | ||||||
| </core-loading> | </core-loading> | ||||||
|  | |||||||
| @ -1,7 +1,7 @@ | |||||||
| <ion-item-divider> | <ion-item-divider> | ||||||
|     <h2>{{ 'addon.block_recentlyaccesseditems.pluginname' | translate }}</h2> |     <h2>{{ 'addon.block_recentlyaccesseditems.pluginname' | translate }}</h2> | ||||||
| </ion-item-divider> | </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 class="core-horizontal-scroll" *ngIf="items && items.length > 0"> | ||||||
|         <div *ngFor="let item of items"> |         <div *ngFor="let item of items"> | ||||||
|             <ion-card> |             <ion-card> | ||||||
|  | |||||||
| @ -8,14 +8,12 @@ | |||||||
|         <ion-spinner *ngIf="!prefetchCoursesData.icon || prefetchCoursesData.icon == 'spinner'"></ion-spinner> |         <ion-spinner *ngIf="!prefetchCoursesData.icon || prefetchCoursesData.icon == 'spinner'"></ion-spinner> | ||||||
|     </div> |     </div> | ||||||
| </ion-item-divider> | </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> |     <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. --> |     <!-- List of courses. --> | ||||||
|     <div class="safe-area-page"> |     <div class="core-horizontal-scroll"> | ||||||
|         <div class="core-horizontal-scroll"> |         <ng-container *ngFor="let course of courses"> | ||||||
|             <ng-container *ngFor="let course of courses"> |             <core-courses-course-progress [course]="course" class="core-block_starredcourses" [showDownload]="downloadEnabled"></core-courses-course-progress> | ||||||
|                 <core-courses-course-progress [course]="course" class="core-block_starredcourses" [showDownload]="downloadEnabled"></core-courses-course-progress> |         </ng-container> | ||||||
|             </ng-container> |  | ||||||
|         </div> |  | ||||||
|     </div> |     </div> | ||||||
| </core-loading> | </core-loading> | ||||||
|  | |||||||
| @ -20,18 +20,16 @@ | |||||||
|     <core-loading [hideUntil]="timeline.loaded" [hidden]="sort != 'sortbydates'" class="core-loading-center"> |     <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> |         <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> | ||||||
|     <core-loading [hideUntil]="timelineCourses.loaded" [hidden]="sort != 'sortbycourses'" class="core-loading-center"> |     <core-loading [hideUntil]="timelineCourses.loaded" [hidden]="sort != 'sortbycourses'" class="core-loading-center safe-area-page"> | ||||||
|         <div class="safe-area-page"> |         <ion-grid no-padding> | ||||||
|             <ion-grid no-padding> |             <ion-row no-padding> | ||||||
|                 <ion-row no-padding> |                 <ion-col *ngFor="let course of timelineCourses.courses" no-padding col-12 col-md-6> | ||||||
|                     <ion-col *ngFor="let course of timelineCourses.courses" no-padding col-12 col-md-6> |                     <core-courses-course-progress [course]="course"> | ||||||
|                         <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> | ||||||
|                             <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> | ||||||
|                         </core-courses-course-progress> |                 </ion-col> | ||||||
|                     </ion-col> |             </ion-row> | ||||||
|                 </ion-row> |         </ion-grid> | ||||||
|             </ion-grid> |  | ||||||
|         </div> |  | ||||||
|         <core-empty-box *ngIf="timelineCourses.courses.length == 0" image="assets/img/icons/courses.svg" [message]="'addon.block_timeline.nocoursesinprogress' | translate"></core-empty-box> |         <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> | ||||||
| </core-loading> | </core-loading> | ||||||
| @ -3,12 +3,10 @@ | |||||||
|         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content> |         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content> | ||||||
|     </ion-refresher> |     </ion-refresher> | ||||||
|     <core-loading [hideUntil]="loaded" class="core-loading-center"> |     <core-loading [hideUntil]="loaded" class="core-loading-center"> | ||||||
|         <div class="safe-padding-horizontal"> |         <ion-item *ngIf="showMyEntriesToggle"> | ||||||
|             <ion-item *ngIf="showMyEntriesToggle"> |             <ion-label>{{ 'addon.blog.showonlyyourentries' | translate }}</ion-label> | ||||||
|                 <ion-label>{{ 'addon.blog.showonlyyourentries' | translate }}</ion-label> |             <ion-toggle [(ngModel)]="onlyMyEntries" (ionChange)="onlyMyEntriesToggleChanged(onlyMyEntries)">></ion-toggle> | ||||||
|                 <ion-toggle [(ngModel)]="onlyMyEntries" (ionChange)="onlyMyEntriesToggleChanged(onlyMyEntries)">></ion-toggle> |         </ion-item> | ||||||
|             </ion-item> |  | ||||||
|         </div> |  | ||||||
|         <core-empty-box *ngIf="entries && entries.length == 0" icon="fa-newspaper-o" [message]="'addon.blog.noentriesyet' | translate"></core-empty-box> |         <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"> |         <ng-container *ngFor="let entry of entries"> | ||||||
|             <ion-card *ngIf="!onlyMyEntries || entry.userid == currentUserId"> |             <ion-card *ngIf="!onlyMyEntries || entry.userid == currentUserId"> | ||||||
| @ -28,7 +26,9 @@ | |||||||
|                     </p> |                     </p> | ||||||
|                 </ion-item> |                 </ion-item> | ||||||
|                 <ion-card-content> |                 <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"> |                     <ion-item text-wrap *ngIf="tagsEnabled && entry.tags && entry.tags.length > 0"> | ||||||
|                         <div item-start>{{ 'core.tag.tags' | translate }}:</div> |                         <div item-start>{{ 'core.tag.tags' | translate }}:</div> | ||||||
|                         <core-tag-list [tags]="entry.tags"></core-tag-list> |                         <core-tag-list [tags]="entry.tags"></core-tag-list> | ||||||
|  | |||||||
| @ -6,7 +6,7 @@ | |||||||
|     </core-context-menu> |     </core-context-menu> | ||||||
| </core-navbar-buttons> | </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. --> |     <!-- Period name and arrows to navigate. --> | ||||||
|     <ion-grid no-padding class="addon-calendar-navigation"> |     <ion-grid no-padding class="addon-calendar-navigation"> | ||||||
|         <ion-row align-items-center> |         <ion-row align-items-center> | ||||||
|  | |||||||
| @ -19,7 +19,7 @@ | |||||||
|     </ion-refresher> |     </ion-refresher> | ||||||
| 
 | 
 | ||||||
|     <!-- Period name and arrows to navigate. --> |     <!-- Period name and arrows to navigate. --> | ||||||
|     <ion-grid padding-top> |     <ion-grid padding-top class="safe-area-page"> | ||||||
|         <ion-row> |         <ion-row> | ||||||
|             <ion-col text-start *ngIf="currentMoment"> |             <ion-col text-start *ngIf="currentMoment"> | ||||||
|                 <a ion-button icon-only clear (click)="loadPrevious()" [title]="'addon.calendar.dayprev' | translate"> |                 <a ion-button icon-only clear (click)="loadPrevious()" [title]="'addon.calendar.dayprev' | translate"> | ||||||
| @ -37,7 +37,7 @@ | |||||||
|         </ion-row> |         </ion-row> | ||||||
|     </ion-grid> |     </ion-grid> | ||||||
| 
 | 
 | ||||||
|     <core-loading [hideUntil]="loaded"> |     <core-loading [hideUntil]="loaded" class="safe-area-page"> | ||||||
|         <!-- There is data to be synchronized --> |         <!-- There is data to be synchronized --> | ||||||
|         <ion-card class="core-warning-card" icon-start *ngIf="hasOffline"> |         <ion-card class="core-warning-card" icon-start *ngIf="hasOffline"> | ||||||
|             <ion-icon name="warning"></ion-icon> {{ 'core.hasdatatosync' | translate:{$a: 'core.day' | translate} }} |             <ion-icon name="warning"></ion-icon> {{ 'core.hasdatatosync' | translate:{$a: 'core.day' | translate} }} | ||||||
|  | |||||||
| @ -8,7 +8,7 @@ | |||||||
|         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content> |         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content> | ||||||
|     </ion-refresher> |     </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. --> |         <!-- Allow selecting the files to see: private or site. --> | ||||||
|         <div padding *ngIf="showPrivateFiles && showSiteFiles && !path"> |         <div padding *ngIf="showPrivateFiles && showSiteFiles && !path"> | ||||||
|             <ion-select [(ngModel)]="root" (ngModelChange)="rootChanged()" interface="popover" class="core-button-select"> |             <ion-select [(ngModel)]="root" (ngModelChange)="rootChanged()" interface="popover" class="core-button-select"> | ||||||
|  | |||||||
| @ -25,7 +25,7 @@ | |||||||
|     </core-navbar-buttons> |     </core-navbar-buttons> | ||||||
| </ion-header> | </ion-header> | ||||||
| <ion-content class="has-footer"> | <ion-content class="has-footer"> | ||||||
|     <core-loading [hideUntil]="loaded"> |     <core-loading [hideUntil]="loaded" class="safe-area-page"> | ||||||
|         <!-- Load previous messages. --> |         <!-- Load previous messages. --> | ||||||
|         <core-infinite-loading [enabled]="canLoadMore" (action)="loadPrevious($event)" position="top" [error]="loadMoreError"></core-infinite-loading> |         <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> |             <p text-center><i>{{ 'addon.messages.selfconversationdefaultmessage' | translate }}</i></p> | ||||||
|         </ng-container> |         </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"> |             <ng-container *ngFor="let message of messages; index as index; last as last"> | ||||||
|                 <h6 text-center *ngIf="message.showDate" class="addon-messages-date"> |                 <h6 text-center *ngIf="message.showDate" class="addon-messages-date"> | ||||||
|                     {{ message.timecreated | coreFormatDate: "strftimedayshort" }} |                     {{ message.timecreated | coreFormatDate: "strftimedayshort" }} | ||||||
|  | |||||||
| @ -18,7 +18,7 @@ | |||||||
| 
 | 
 | ||||||
|     <core-course-module-description [description]="description" [component]="component" [componentId]="componentId"></core-course-module-description> |     <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-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> |         <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"> |         <div margin-top *ngIf="tagsEnabled && contentsMap && contentsMap[currentChapter] && contentsMap[currentChapter].tags && contentsMap[currentChapter].tags.length > 0"> | ||||||
|  | |||||||
| @ -10,7 +10,7 @@ | |||||||
| </core-navbar-buttons> | </core-navbar-buttons> | ||||||
| 
 | 
 | ||||||
| <!-- Content. --> | <!-- 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> |     <core-course-module-description [description]="description" [component]="component" [componentId]="componentId"></core-course-module-description> | ||||||
| 
 | 
 | ||||||
|  | |||||||
| @ -28,9 +28,9 @@ | |||||||
|                     <p *ngIf="session.duration">{{ session.duration | coreDuration }}</p> |                     <p *ngIf="session.duration">{{ session.duration | coreDuration }}</p> | ||||||
|                 </ion-item> |                 </ion-item> | ||||||
|                 <ion-card-content> |                 <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> |                         {{ user.userfullname }} <span *ngIf="user.messagecount">({{ user.messagecount }})</span> | ||||||
|                     </p> |                     </ion-item> | ||||||
|                 </ion-card-content> |                 </ion-card-content> | ||||||
|                 <div *ngIf="session.sessionusers.length < session.allsessionusers.length"> |                 <div *ngIf="session.sessionusers.length < session.allsessionusers.length"> | ||||||
|                     <button ion-button clear (click)="showMoreUsers(session, $event)"> |                     <button ion-button clear (click)="showMoreUsers(session, $event)"> | ||||||
|  | |||||||
| @ -66,7 +66,7 @@ | |||||||
|         </div> |         </div> | ||||||
|     </ng-container> |     </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-style [css]="data.csstemplate" prefix=".addon-data-entries-{{data.id}}"></core-style> | ||||||
| 
 | 
 | ||||||
|         <core-compile-html [text]="entriesRendered" [jsData]="jsData" [extraImports]="extraImports"></core-compile-html> |         <core-compile-html [text]="entriesRendered" [jsData]="jsData" [extraImports]="extraImports"></core-compile-html> | ||||||
|  | |||||||
| @ -14,7 +14,7 @@ | |||||||
| </core-navbar-buttons> | </core-navbar-buttons> | ||||||
| 
 | 
 | ||||||
| <!-- Content. --> | <!-- 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"> |     <div class="addon-mod-imscp-container"> | ||||||
|         <core-course-module-description [description]="description" [component]="component" [componentId]="componentId"></core-course-module-description> |         <core-course-module-description [description]="description" [component]="component" [componentId]="componentId"></core-course-module-description> | ||||||
|         <core-navigation-bar [previous]="previousItem" [next]="nextItem" (action)="loadItem($event)" [info]="description" [title]="'core.description' | translate" [component]="component" [componentId]="componentId"></core-navigation-bar> |         <core-navigation-bar [previous]="previousItem" [next]="nextItem" (action)="loadItem($event)" [info]="description" [title]="'core.description' | translate" [component]="component" [componentId]="componentId"></core-navigation-bar> | ||||||
|  | |||||||
| @ -9,7 +9,7 @@ | |||||||
| </core-navbar-buttons> | </core-navbar-buttons> | ||||||
| 
 | 
 | ||||||
| <!-- Content. --> | <!-- 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="lti && lti.showdescriptionlaunch" [description]="description" [component]="component" [componentId]="componentId"></core-course-module-description> |     <core-course-module-description *ngIf="lti && lti.showdescriptionlaunch" [description]="description" [component]="component" [componentId]="componentId"></core-course-module-description> | ||||||
| 
 | 
 | ||||||
|  | |||||||
| @ -11,7 +11,7 @@ | |||||||
| </core-navbar-buttons> | </core-navbar-buttons> | ||||||
| 
 | 
 | ||||||
| <!-- Content. --> | <!-- 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> |     <core-course-module-description *ngIf="displayDescription" [description]="description" [component]="component" [componentId]="componentId"></core-course-module-description> | ||||||
| 
 | 
 | ||||||
|  | |||||||
| @ -36,7 +36,9 @@ | |||||||
|     <!-- List of user attempts. --> |     <!-- List of user attempts. --> | ||||||
|     <ion-card class="addon-mod_quiz-table" *ngIf="quiz && attempts && attempts.length"> |     <ion-card class="addon-mod_quiz-table" *ngIf="quiz && attempts && attempts.length"> | ||||||
|         <ion-card-header text-wrap> |         <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-card-header> | ||||||
|         <ion-list> |         <ion-list> | ||||||
|             <!-- "Header" of the table --> |             <!-- "Header" of the table --> | ||||||
|  | |||||||
| @ -18,8 +18,10 @@ | |||||||
|         <!-- Review summary --> |         <!-- Review summary --> | ||||||
|         <ion-card *ngIf="attempt"> |         <ion-card *ngIf="attempt"> | ||||||
|             <ion-card-header text-wrap> |             <ion-card-header text-wrap> | ||||||
|                 <h2 *ngIf="attempt.preview">{{ 'addon.mod_quiz.reviewofpreview' | translate }}</h2> |                 <div class="safe-padding-horizontal"> | ||||||
|                 <h2 *ngIf="!attempt.preview">{{ 'addon.mod_quiz.reviewofattempt' | translate:{$a: attempt.attempt} }}</h2> |                     <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-card-header> | ||||||
|             <ion-list> |             <ion-list> | ||||||
|                 <ion-item text-wrap no-lines> |                 <ion-item text-wrap no-lines> | ||||||
|  | |||||||
| @ -11,7 +11,7 @@ | |||||||
| </core-navbar-buttons> | </core-navbar-buttons> | ||||||
| 
 | 
 | ||||||
| <!-- Content. --> | <!-- 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' && (mode != 'embedded' || displayDescription)" [description]="description" [component]="component" [componentId]="componentId"></core-course-module-description> |     <core-course-module-description *ngIf="mode != 'iframe' && (mode != 'embedded' || displayDescription)" [description]="description" [component]="component" [componentId]="componentId"></core-course-module-description> | ||||||
| 
 | 
 | ||||||
|  | |||||||
| @ -26,7 +26,9 @@ | |||||||
|         <!-- Attempts status. --> |         <!-- Attempts status. --> | ||||||
|         <ion-card *ngIf="(scorm.displayattemptstatus || (scorm.offlineAttempts && scorm.offlineAttempts.length)) && !skip"> |         <ion-card *ngIf="(scorm.displayattemptstatus || (scorm.offlineAttempts && scorm.offlineAttempts.length)) && !skip"> | ||||||
|             <ion-card-header text-wrap> |             <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-card-header> | ||||||
|             <ion-list> |             <ion-list> | ||||||
|                 <ng-container *ngIf="scorm.displayattemptstatus"> |                 <ng-container *ngIf="scorm.displayattemptstatus"> | ||||||
|  | |||||||
| @ -12,7 +12,7 @@ | |||||||
| </core-navbar-buttons> | </core-navbar-buttons> | ||||||
| 
 | 
 | ||||||
| <!-- Content. --> | <!-- 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="survey && !survey.surveydone && !hasOffline" [description]="description" [component]="component" [componentId]="componentId"></core-course-module-description> |     <core-course-module-description *ngIf="survey && !survey.surveydone && !hasOffline" [description]="description" [component]="component" [componentId]="componentId"></core-course-module-description> | ||||||
| 
 | 
 | ||||||
|  | |||||||
| @ -31,11 +31,11 @@ | |||||||
|             <h2>{{ 'addon.mod_url.pointingtourl' | translate }}</h2> |             <h2>{{ 'addon.mod_url.pointingtourl' | translate }}</h2> | ||||||
|             <p>{{ url }}</p> |             <p>{{ url }}</p> | ||||||
|         </ion-item> |         </ion-item> | ||||||
|         <div padding> |         <ion-item text-wrap> | ||||||
|             <a ion-button block (click)="go()" icon-start> |             <a ion-button block (click)="go()" icon-start> | ||||||
|                 <ion-icon name="link" start></ion-icon> |                 <ion-icon name="link" start></ion-icon> | ||||||
|                 {{ 'addon.mod_url.accessurl' | translate }} |                 {{ 'addon.mod_url.accessurl' | translate }} | ||||||
|             </a> |             </a> | ||||||
|         </div> |         </ion-item> | ||||||
|     </ion-list> |     </ion-list> | ||||||
| </core-loading> | </core-loading> | ||||||
|  | |||||||
| @ -13,6 +13,7 @@ ion-app.app-root addon-mod-wiki-index { | |||||||
|     .addon-mod_wiki-page-content { |     .addon-mod_wiki-page-content { | ||||||
|         background-color: $white; |         background-color: $white; | ||||||
|         border-top: 1px solid $gray; |         border-top: 1px solid $gray; | ||||||
|  |         @include safe-area-padding-horizontal(0px, 0px); | ||||||
|         @include darkmode() { |         @include darkmode() { | ||||||
|             background-color: $black; |             background-color: $black; | ||||||
|         } |         } | ||||||
|  | |||||||
| @ -37,7 +37,6 @@ ion-app.app-root.ios { | |||||||
|     @include margin-horizontal(0, null); |     @include margin-horizontal(0, null); | ||||||
|   } |   } | ||||||
| 
 | 
 | ||||||
| 
 |  | ||||||
|   @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) { |   @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) { | ||||||
|     .core-#{$color-name}-card { |     .core-#{$color-name}-card { | ||||||
|       @extend .card-ios ; |       @extend .card-ios ; | ||||||
| @ -48,10 +47,10 @@ ion-app.app-root.ios { | |||||||
|       } |       } | ||||||
| 
 | 
 | ||||||
|       &[icon-start] { |       &[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 { |         ion-icon { | ||||||
|           @include position(null, null, null, $card-ios-padding-left); |           @include safe-area-position(null, null, null, $card-ios-padding-left); | ||||||
|         } |         } | ||||||
|       } |       } | ||||||
|     } |     } | ||||||
|  | |||||||
| @ -43,10 +43,10 @@ ion-app.app-root.md { | |||||||
|       } |       } | ||||||
| 
 | 
 | ||||||
|       &[icon-start] { |       &[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 { |         ion-icon { | ||||||
|           @include position(null, null, null, $card-md-padding-left); |           @include safe-area-position(null, null, null, $card-md-padding-left); | ||||||
|         } |         } | ||||||
|       } |       } | ||||||
|     } |     } | ||||||
|  | |||||||
| @ -738,13 +738,13 @@ ion-app.app-root { | |||||||
|       } |       } | ||||||
| 
 | 
 | ||||||
|       &[icon-start] { |       &[icon-start] { | ||||||
|         @include padding(null, null, null, 52px); |         @include safe-area-padding(null, null, null, 52px); | ||||||
|         position: relative; |         position: relative; | ||||||
| 
 | 
 | ||||||
|         > ion-icon { |         > ion-icon { | ||||||
|           color: $color-base; |           color: $color-base; | ||||||
|           position: absolute; |           position: absolute; | ||||||
|           @include position(0, null, null, 16px); |           @include safe-area-position(0, null, null, 16px); | ||||||
|           height: 100%; |           height: 100%; | ||||||
|           font-size: 24px; |           font-size: 24px; | ||||||
|           display: flex; |           display: flex; | ||||||
| @ -786,17 +786,7 @@ ion-app.app-root { | |||||||
|     } |     } | ||||||
| 
 | 
 | ||||||
|     .core-#{$color-name}-selected-item { |     .core-#{$color-name}-selected-item { | ||||||
|       @include safe-area-border-start(5px, solid, $color-base); |       @include core-selected-item($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); |  | ||||||
|       } |  | ||||||
|     } |     } | ||||||
| 
 | 
 | ||||||
|     .split-pane-main .core-#{$color-name}-selected-item { |     .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) { |   @media only screen and (min-height: 400px) and (min-width: 300px) { | ||||||
|       .core-modal-lateral { |       .core-modal-lateral { | ||||||
|  |         @include core-split-area-end(); | ||||||
|  | 
 | ||||||
|         .modal-wrapper { |         .modal-wrapper { | ||||||
|           position: absolute; |           position: absolute; | ||||||
|           @include position(0 !important, 0 !important, 0 !important, auto); |           @include position(0 !important, 0 !important, 0 !important, auto); | ||||||
| @ -1031,6 +1023,14 @@ ion-app.app-root { | |||||||
|     flex-flow: nowrap; |     flex-flow: nowrap; | ||||||
|     overflow-x: scroll; |     overflow-x: scroll; | ||||||
|     flex-direction: row; |     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 { |   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 { | body.keyboard-is-open { | ||||||
|   ion-content:not(.has-footer) { |   ion-content:not(.has-footer) { | ||||||
|     > .scroll-content, > .fixed-content { |     > .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 { | details summary { | ||||||
|   pointer-events: auto; |   pointer-events: auto; | ||||||
| } | } | ||||||
| @ -1239,3 +1209,42 @@ ion-app.platform-desktop { | |||||||
|     font-size: 28px; |     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)); | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | |||||||
| @ -40,10 +40,10 @@ ion-app.app-root.wp { | |||||||
|       } |       } | ||||||
| 
 | 
 | ||||||
|       &[icon-start] { |       &[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 { |         ion-icon { | ||||||
|           @include position(null, null, null, $card-wp-padding-left); |           @include safe-area-position(null, null, null, $card-wp-padding-left); | ||||||
|         } |         } | ||||||
|       } |       } | ||||||
|     } |     } | ||||||
|  | |||||||
| @ -20,7 +20,7 @@ ion-app.app-root { | |||||||
| 
 | 
 | ||||||
|     core-file > .item.item-block > .item-inner { |     core-file > .item.item-block > .item-inner { | ||||||
|         border-bottom: 0; |         border-bottom: 0; | ||||||
|         @include padding(null, 0, null, null); |         @include safe-area-padding(null, 0px, null, null); | ||||||
|         .buttons { |         .buttons { | ||||||
|             display: flex; |             display: flex; | ||||||
|             flex-flow: row; |             flex-flow: row; | ||||||
|  | |||||||
| @ -20,6 +20,16 @@ ion-app.app-root { | |||||||
|         &.core-loading-noheight .core-loading-content { |         &.core-loading-noheight .core-loading-content { | ||||||
|             height: auto; |             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, |     .scroll-content > core-loading, | ||||||
|  | |||||||
| @ -84,11 +84,13 @@ export class CoreLoadingComponent implements OnInit, OnChanges { | |||||||
|                     setTimeout(() => { |                     setTimeout(() => { | ||||||
|                         // Change CSS to force calculate height.
 |                         // Change CSS to force calculate height.
 | ||||||
|                         this.content.nativeElement.classList.add('core-loading-content'); |                         this.content.nativeElement.classList.add('core-loading-content'); | ||||||
|  |                         this.content.nativeElement.classList.remove('core-loading-content-loading'); | ||||||
|                     }, 500); |                     }, 500); | ||||||
|                 }); |                 }); | ||||||
|             } else { |             } else { | ||||||
|                 this.element.classList.remove('core-loading-loaded'); |                 this.element.classList.remove('core-loading-loaded'); | ||||||
|                 this.content.nativeElement.classList.remove('core-loading-content'); |                 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.
 |             // Trigger the event after a timeout since the elements inside ngIf haven't been added to DOM yet.
 | ||||||
|  | |||||||
| @ -17,6 +17,11 @@ ion-app.app-root core-split-view { | |||||||
|     .split-pane-visible { |     .split-pane-visible { | ||||||
|         .split-pane-main { |         .split-pane-main { | ||||||
|             display: block; |             display: block; | ||||||
|  |             @include core-split-area-end(); | ||||||
|  |         } | ||||||
|  | 
 | ||||||
|  |         .split-pane-side { | ||||||
|  |             @include core-split-area-start(); | ||||||
|         } |         } | ||||||
| 
 | 
 | ||||||
|         .split-pane-side .core-split-item-selected { |         .split-pane-side .core-split-item-selected { | ||||||
| @ -27,12 +32,6 @@ ion-app.app-root core-split-view { | |||||||
|               background-color: $black; |               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 { |     ion-header { | ||||||
|         display: none; |         display: none; | ||||||
| @ -41,32 +40,3 @@ ion-app.app-root core-split-view { | |||||||
|         padding-top: 0  !important; |         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); |  | ||||||
|   } |  | ||||||
| } |  | ||||||
|  | |||||||
| @ -19,7 +19,7 @@ ion-app.app-root core-block { | |||||||
|   } |   } | ||||||
| 
 | 
 | ||||||
|   .item-divider { |   .item-divider { | ||||||
|     @include safe-area-padding-horizontal(null, 0px); |     @include padding-horizontal(null, 0px); | ||||||
|   } |   } | ||||||
| 
 | 
 | ||||||
|   .item-divider .core-button-spinner { |   .item-divider .core-button-spinner { | ||||||
|  | |||||||
| @ -22,12 +22,14 @@ ion-app.app-root core-block-course-blocks { | |||||||
|                 box-shadow: none !important; |                 box-shadow: none !important; | ||||||
|                 flex-grow: 1; |                 flex-grow: 1; | ||||||
|                 max-width: 100%; |                 max-width: 100%; | ||||||
|  |                 @include core-split-area-start(); | ||||||
|             } |             } | ||||||
| 
 | 
 | ||||||
|             div.core-course-blocks-side { |             div.core-course-blocks-side { | ||||||
|                 max-width: $core-side-blocks-max-width; |                 max-width: $core-side-blocks-max-width; | ||||||
|                 min-width: $core-side-blocks-min-width; |                 min-width: $core-side-blocks-min-width; | ||||||
|                 @include border-start(1px, solid, $list-md-border-color); |                 @include border-start(1px, solid, $list-md-border-color); | ||||||
|  |                 @include core-split-area-end(); | ||||||
|             } |             } | ||||||
| 
 | 
 | ||||||
|             .core-course-blocks-content, |             .core-course-blocks-content, | ||||||
|  | |||||||
| @ -55,7 +55,7 @@ | |||||||
|                 <core-infinite-loading [enabled]="canLoadMore" (action)="showMoreActivities($event)"></core-infinite-loading> |                 <core-infinite-loading [enabled]="canLoadMore" (action)="showMoreActivities($event)"></core-infinite-loading> | ||||||
|             </div> |             </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 }}"> |                 <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> |                     <ion-icon name="arrow-back" md="ios-arrow-back"></ion-icon> | ||||||
|                     <core-format-text class="accesshide" [text]="previousSection.formattedName || previousSection.name"></core-format-text> |                     <core-format-text class="accesshide" [text]="previousSection.formattedName || previousSection.name"></core-format-text> | ||||||
|  | |||||||
| @ -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); | ||||||
|  |                 } | ||||||
|  |             } | ||||||
|  |         } | ||||||
|  |     } | ||||||
|  | } | ||||||
| @ -1,7 +1,7 @@ | |||||||
| <core-loading [hideUntil]="coursesLoaded"> | <core-loading [hideUntil]="coursesLoaded"> | ||||||
|     <ion-searchbar #searchbar *ngIf="showFilter" [(ngModel)]="filter" (ionInput)="filterChanged($event)" (ionCancel)="filterChanged()" [placeholder]="'core.courses.filtermycourses' | translate"> |     <ion-searchbar #searchbar *ngIf="showFilter" [(ngModel)]="filter" (ionInput)="filterChanged($event)" (ionCancel)="filterChanged()" [placeholder]="'core.courses.filtermycourses' | translate"> | ||||||
|     </ion-searchbar> |     </ion-searchbar> | ||||||
|     <ion-grid no-padding> |     <ion-grid no-padding class="safe-area-page"> | ||||||
|         <ion-row no-padding> |         <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> |             <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> |                 <core-courses-course-progress [course]="course" class="core-courseoverview" showAll="true"></core-courses-course-progress> | ||||||
|  | |||||||
| @ -2,11 +2,11 @@ | |||||||
|     <ion-refresher [enabled]="gradesLoaded" (ionRefresh)="refreshGrades($event)"> |     <ion-refresher [enabled]="gradesLoaded" (ionRefresh)="refreshGrades($event)"> | ||||||
|         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content> |         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content> | ||||||
|     </ion-refresher> |     </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 *ngIf="!gradesTable" icon="stats" [message]="'core.grades.nogradesreturned' | translate"> | ||||||
|         </core-empty-box> |         </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"> |             <table cellspacing="0" cellpadding="0" class="core-grades-table"> | ||||||
|                 <thead> |                 <thead> | ||||||
|                     <tr> |                     <tr> | ||||||
|  | |||||||
| @ -664,7 +664,8 @@ export class CoreSitePluginsHelperProvider { | |||||||
| 
 | 
 | ||||||
|         const uniqueName = this.sitePluginsProvider.getHandlerUniqueName(plugin, handlerName), |         const uniqueName = this.sitePluginsProvider.getHandlerUniqueName(plugin, handlerName), | ||||||
|             blockName = (handlerSchema.moodlecomponent || plugin.component).replace('block_', ''), |             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); |             prefixedTitle = this.getPrefixedString(plugin.addon, titleString); | ||||||
| 
 | 
 | ||||||
|         this.blockDelegate.registerHandler( |         this.blockDelegate.registerHandler( | ||||||
|  | |||||||
| @ -7,7 +7,7 @@ | |||||||
|     <ion-refresher [enabled]="loaded" (ionRefresh)="refreshData($event)"> |     <ion-refresher [enabled]="loaded" (ionRefresh)="refreshData($event)"> | ||||||
|         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content> |         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content> | ||||||
|     </ion-refresher> |     </ion-refresher> | ||||||
|     <ion-grid> |     <ion-grid class="safe-area-page"> | ||||||
|         <ion-row> |         <ion-row> | ||||||
|             <ion-col col-12 [attr.col-sm-6]="collections && collections.length > 1 ? '' : null"> |             <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> |                 <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-col> | ||||||
|         </ion-row> |         </ion-row> | ||||||
|     </ion-grid> |     </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> |         <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"> |         <ng-container *ngIf="cloud && cloud.tags && cloud.tags.length > 0"> | ||||||
|  | |||||||
| @ -413,7 +413,6 @@ $core-dd-question-colors: $white, $blue-light, #DCDCDC, #D8BFD8, #87CEFA, #DAA52 | |||||||
|   } |   } | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| 
 |  | ||||||
| @mixin safe-area-border-end($px, $type, $color) { | @mixin safe-area-border-end($px, $type, $color) { | ||||||
|   $safe-area-position: calc(constant(safe-area-inset-right) + #{$px}); |   $safe-area-position: calc(constant(safe-area-inset-right) + #{$px}); | ||||||
|   $safe-area-position-env: calc(env(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) { | @mixin safe-area-padding-start($start, $end) { | ||||||
|   $safe-area-start: calc(constant(safe-area-inset-left) + #{$start}); |   $safe-area-start: calc(constant(safe-area-inset-left) + #{$start}); | ||||||
|   $safe-area-start-env: calc(env(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) { | @mixin horizontal_scroll_item($width, $min-width, $max-width) { | ||||||
|     flex: 0 0 $width; |     flex: 0 0 $width; | ||||||
|     min-width: $min-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) { | @mixin core-selected-item($selected-color) { | ||||||
|   @include border-start(5px, solid, $selected-color); |   @include safe-area-border-start(5px, solid, $selected-color); | ||||||
| 
 | 
 | ||||||
|   &.item-md { |   &.item-md { | ||||||
|       @include padding(null, null, null, $item-md-padding-start - 5px); |       @include padding-horizontal($item-md-padding-start - 5px, null); | ||||||
|   } |   } | ||||||
|   &.item-ios { |   &.item-ios { | ||||||
|       @include padding(null, null, null, $item-ios-padding-start - 5px); |       @include padding-horizontal($item-ios-padding-start - 5px, null); | ||||||
|   } |   } | ||||||
|   &.item-wp { |   &.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); | ||||||
|   } |   } | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
|  | |||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user