From f171854ea9cd3afe5c75166dce163e9c29c147d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 20 Nov 2018 11:50:33 +0100
Subject: [PATCH] MOBILE-2676 ux: Fix styles in horizontal with notch

---
 .../myoverview/addon-block-myoverview.html    |  4 +-
 .../addon-block-recentlyaccessedcourses.html  | 16 ++++---
 .../addon-block-starredcourses.html           | 16 ++++---
 .../timeline/addon-block-timeline.html        | 22 +++++----
 src/addon/files/pages/list/list.html          |  6 +--
 .../messages/pages/discussion/discussion.html |  2 +-
 .../pages/settings/settings.html              |  2 +-
 src/app/app.scss                              | 31 +++++++++++-
 src/components/search-box/search-box.scss     |  5 ++
 src/components/split-view/split-view.scss     | 38 ++++++++++++++-
 .../components/format/core-course-format.html |  2 +-
 src/core/course/components/module/module.scss |  2 +-
 .../course-progress/course-progress.scss      |  3 +-
 .../components/course/core-grades-course.html |  2 +-
 src/core/sharedfiles/pages/list/list.html     |  5 +-
 src/theme/variables.scss                      | 47 +++++++++++++++++++
 16 files changed, 161 insertions(+), 42 deletions(-)

diff --git a/src/addon/block/myoverview/components/myoverview/addon-block-myoverview.html b/src/addon/block/myoverview/components/myoverview/addon-block-myoverview.html
index c5d5d1521..1932ed057 100644
--- a/src/addon/block/myoverview/components/myoverview/addon-block-myoverview.html
+++ b/src/addon/block/myoverview/components/myoverview/addon-block-myoverview.html
@@ -9,7 +9,7 @@
     <h2>{{ 'addon.block_myoverview.pluginname' | translate }}</h2>
 </ion-item-divider>
 <core-loading [hideUntil]="loaded" class="core-loading-center">
-    <div padding ion-row justify-content-end [hidden]="showFilter">
+    <div padding ion-row justify-content-end [hidden]="showFilter" class="safe-padding-horizontal">
         <!-- "Time" selector. -->
         <ion-col [hidden]="!showSelectorFilter">
             <ion-select text-start [title]="'core.show' | translate" [(ngModel)]="selectedFilter" ion-col (ngModelChange)="selectedChanged()" interface="popover" class="core-button-select">
@@ -43,7 +43,7 @@
     <ion-searchbar #searchbar *ngIf="showFilter" [(ngModel)]="courses.filter" (ionInput)="filterChanged($event)" (ionCancel)="filterChanged()" [placeholder]="'core.courses.filtermycourses' | translate">
     </ion-searchbar>
     <!-- List of courses. -->
-    <div>
+    <div class="safe-area-page">
         <ion-grid 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>
diff --git a/src/addon/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html b/src/addon/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
index 18e176104..04b90057e 100644
--- a/src/addon/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
+++ b/src/addon/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
@@ -11,11 +11,13 @@
 <core-loading [hideUntil]="loaded" class="core-loading-center">
     <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. -->
-    <ion-grid no-padding>
-        <ion-row no-padding>
-            <ion-col *ngFor="let course of courses" 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-recentlyaccessedcourses"></core-courses-course-progress>
-            </ion-col>
-        </ion-row>
-    </ion-grid>
+    <div class="safe-area-page">
+        <ion-grid no-padding>
+            <ion-row no-padding>
+                <ion-col *ngFor="let course of courses" 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-recentlyaccessedcourses"></core-courses-course-progress>
+                </ion-col>
+            </ion-row>
+        </ion-grid>
+    </div>
 </core-loading>
diff --git a/src/addon/block/starredcourses/components/starredcourses/addon-block-starredcourses.html b/src/addon/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
index 121eb1ffa..19c6fea67 100644
--- a/src/addon/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
+++ b/src/addon/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
@@ -11,11 +11,13 @@
 <core-loading [hideUntil]="loaded" class="core-loading-center">
     <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. -->
-    <ion-grid no-padding>
-        <ion-row no-padding>
-            <ion-col *ngFor="let course of courses" 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-block_starredcourses"></core-courses-course-progress>
-            </ion-col>
-        </ion-row>
-    </ion-grid>
+    <div class="safe-area-page">
+        <ion-grid no-padding>
+            <ion-row no-padding>
+                <ion-col *ngFor="let course of courses" 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-block_starredcourses"></core-courses-course-progress>
+                </ion-col>
+            </ion-row>
+        </ion-grid>
+    </div>
 </core-loading>
diff --git a/src/addon/block/timeline/components/timeline/addon-block-timeline.html b/src/addon/block/timeline/components/timeline/addon-block-timeline.html
index 50096c64f..56f9b4089 100644
--- a/src/addon/block/timeline/components/timeline/addon-block-timeline.html
+++ b/src/addon/block/timeline/components/timeline/addon-block-timeline.html
@@ -2,7 +2,7 @@
     <h2>{{ 'addon.block_timeline.pluginname' | translate }}</h2>
 </ion-item-divider>
 <core-loading [hideUntil]="loaded" class="core-loading-center">
-    <div padding ion-row>
+    <div padding ion-row class="safe-padding-horizontal">
         <ion-col>
             <ion-select text-start [(ngModel)]="filter" (ngModelChange)="switchFilter()" interface="popover" class="core-button-select">
                 <ion-option value="all">{{ 'core.all' | translate }}</ion-option>
@@ -25,15 +25,17 @@
         <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">
-        <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 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-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>
\ No newline at end of file
diff --git a/src/addon/files/pages/list/list.html b/src/addon/files/pages/list/list.html
index ef80bd1e1..1f2a23f71 100644
--- a/src/addon/files/pages/list/list.html
+++ b/src/addon/files/pages/list/list.html
@@ -10,7 +10,7 @@
 
     <core-loading [hideUntil]="filesLoaded" *ngIf="showPrivateFiles || showSiteFiles">
         <!-- Allow selecting the files to see: private or site. -->
-        <div padding *ngIf="showPrivateFiles && showSiteFiles && !path">
+        <div padding *ngIf="showPrivateFiles && showSiteFiles && !path" class="safe-padding-horizontal">
             <ion-select [(ngModel)]="root" (ngModelChange)="rootChanged()" interface="popover" class="core-button-select">
                 <ion-option value="my">{{ 'addon.files.privatefiles' | translate }}</ion-option>
                 <ion-option value="site">{{ 'addon.files.sitefiles' | translate }}</ion-option>
@@ -22,13 +22,13 @@
 
         <!-- List of files. -->
         <ion-list *ngIf="files && files.length > 0">
-            <div *ngFor="let file of files">
+            <ng-container *ngFor="let file of files">
                 <a *ngIf="file.isdir" ion-item class="item-media" [navPush]="'AddonFilesListPage'" [navParams]="{path: file.link, title: file.filename}">
                     <img [src]="file.imgPath" alt="" role="presentation" item-start>
                     <p>{{file.filename}}</p>
                 </a>
                 <core-file *ngIf="!file.isdir" [file]="file" [component]="component" [componentId]="file.contextid"></core-file>
-            </div>
+            </ng-container>
         </ion-list>
 
         <!-- Message telling there are no files. -->
diff --git a/src/addon/messages/pages/discussion/discussion.html b/src/addon/messages/pages/discussion/discussion.html
index 81330c3ab..89e20fe8b 100644
--- a/src/addon/messages/pages/discussion/discussion.html
+++ b/src/addon/messages/pages/discussion/discussion.html
@@ -16,7 +16,7 @@
     <core-loading [hideUntil]="loaded">
         <!-- Load previous messages. -->
         <core-infinite-loading [enabled]="canLoadMore" (action)="loadPrevious($event)" position="top" [error]="loadMoreError"></core-infinite-loading>
-        <ion-list class="addon-messages-discussion-container" [attr.aria-live]="polite">
+        <ion-list class="addon-messages-discussion-container safe-area-page" [attr.aria-live]="polite">
             <ng-container *ngFor="let message of messages; index as index; last as last">
                 <ion-chip *ngIf="showDate(message, messages[index - 1])" class="addon-messages-date" color="light">
                     <ion-label>{{ message.timecreated | coreFormatDate: "LL" }}</ion-label>
diff --git a/src/addon/notifications/pages/settings/settings.html b/src/addon/notifications/pages/settings/settings.html
index 80ce698aa..f5dd5cdb3 100644
--- a/src/addon/notifications/pages/settings/settings.html
+++ b/src/addon/notifications/pages/settings/settings.html
@@ -34,7 +34,7 @@
             </ion-card>
 
             <!-- Show processor selector. -->
-            <div padding>
+            <div padding class="safe-padding-horizontal">
                 <ion-select *ngIf="preferences && preferences.processors && preferences.processors.length > 0" [ngModel]="currentProcessor.name" (ngModelChange)="changeProcessor($event)" interface="popover" class="core-button-select">
                     <ion-option *ngFor="let processor of preferences.processors" [value]="processor.name">{{ processor.displayname }}</ion-option>
                 </ion-select>
diff --git a/src/app/app.scss b/src/app/app.scss
index 6a3b55d09..e61e6fdb0 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -742,7 +742,8 @@ ion-app.app-root {
     }
 
     .core-#{$color-name}-selected-item {
-      @include border-start(5px, solid, $color-base);
+      @include safe-area-border-start(5px, solid, $color-base);
+
       &.item-md {
         @include padding(null, null, null, $item-md-padding-start - 5px);
       }
@@ -752,7 +753,11 @@ ion-app.app-root {
       &.item-wp {
         @include padding(null, null, null, $item-wp-padding-start - 5px);
       }
-   }
+    }
+
+    .split-pane-main .core-#{$color-name}-selected-item {
+      @include border-start(5px, solid, $color-base);
+    }
 
     .core-#{$color-name}-circle {
       margin: 0 4px;
@@ -989,6 +994,28 @@ body.keyboard-is-open {
   }
 }
 
+.safe-padding-horizontal,
+[padding].safe-padding-horizontal,
+ion-app.ios [padding].safe-padding-horizontal {
+  @include safe-area-padding-horizontal(0px, 0px);
+}
+
+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);
+    }
+}
+
 // Fix iframes in fullscreen mode.
 //
 // Ionic sets "contain: strict" to some elements. This enables paint containment,
diff --git a/src/components/search-box/search-box.scss b/src/components/search-box/search-box.scss
index 335d9ed54..28e718b90 100644
--- a/src/components/search-box/search-box.scss
+++ b/src/components/search-box/search-box.scss
@@ -6,4 +6,9 @@ ion-app.app-root core-search-box {
     .item.item-input.item-block .item-inner ion-input {
        border-bottom: 0;
     }
+
+    .item-inner {
+        padding-right: 0 !important;
+        padding-left: 0 !important;
+    }
 }
diff --git a/src/components/split-view/split-view.scss b/src/components/split-view/split-view.scss
index 65a5a64a2..893e7708c 100644
--- a/src/components/split-view/split-view.scss
+++ b/src/components/split-view/split-view.scss
@@ -21,7 +21,8 @@ ion-app.app-root core-split-view {
 
         .split-pane-side .core-split-item-selected {
             background-color: $gray-lighter;
-            @include border-start(5px, solid, $core-splitview-selected);
+            @include safe-area-border-start(5px, solid, $core-splitview-selected);
+
             &.item-md {
                 @include padding(null, null, null, $item-md-padding-start - 5px);
             }
@@ -32,6 +33,12 @@ ion-app.app-root core-split-view {
                 @include padding(null, null, null, $item-wp-padding-start - 5px);
             }
         }
+
+        .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;
@@ -40,3 +47,32 @@ ion-app.app-root core-split-view {
         padding-top: 0  !important;
     }
 }
+
+.safe-area-page {
+    @include safe-area-padding-horizontal(0px, 0px);
+}
+
+ion-app.app-root .split-pane-visible .split-pane-side {
+  .safe-area-page  {
+    @include safe-area-padding-start(0px, 0px);
+
+    .core-split-item-selected {
+      @include border-start(5px, solid, $core-splitview-selected);
+    }
+  }
+
+  // Disable safe area padding.
+  .item-ios.item-block .item-inner {
+    @include padding-horizontal(null, $item-ios-padding-end / 2);
+  }
+}
+
+ion-app.app-root .split-pane-visible .split-pane-main {
+  .safe-area-page  {
+    @include safe-area-padding-end(0px, 0px);
+  }
+
+  .toolbar {
+    @include safe-area-padding-end(0px, 0px);
+  }
+}
diff --git a/src/core/course/components/format/core-course-format.html b/src/core/course/components/format/core-course-format.html
index 618a83d0d..a7c21a84c 100644
--- a/src/core/course/components/format/core-course-format.html
+++ b/src/core/course/components/format/core-course-format.html
@@ -10,7 +10,7 @@
     <core-loading [hideUntil]="loaded">
         <!-- Section selector. -->
         <core-dynamic-component [component]="sectionSelectorComponent" [data]="data">
-            <div text-wrap *ngIf="displaySectionSelector && sections && sections.length" padding class="clearfix" ion-row justify-content-between>
+            <div text-wrap *ngIf="displaySectionSelector && sections && sections.length" padding class="clearfix" ion-row justify-content-between class="safe-padding-horizontal">
                 <button float-start ion-button icon-start icon-end (click)="showSectionSelector($event)" color="light" class="core-button-select button-no-uppercase" ion-col>
                     <core-icon name="fa-folder"></core-icon>
                     <span class="core-section-selector-text">{{selectedSection && (selectedSection.formattedName || selectedSection.name) || 'core.course.sections' | translate }}</span>
diff --git a/src/core/course/components/module/module.scss b/src/core/course/components/module/module.scss
index 4fe55c73a..d4d566636 100644
--- a/src/core/course/components/module/module.scss
+++ b/src/core/course/components/module/module.scss
@@ -7,7 +7,7 @@ ion-app.app-root core-course-module {
         min-height: 52px;
 
         &.item .item-inner {
-            @include padding(null, 0, null, null);
+            @include safe-area-padding(null, 0px, null, null);
         }
         .label {
             @include margin(0, 0, 0, null);
diff --git a/src/core/courses/components/course-progress/course-progress.scss b/src/core/courses/components/course-progress/course-progress.scss
index 51c020133..ae2f1a1bd 100644
--- a/src/core/courses/components/course-progress/course-progress.scss
+++ b/src/core/courses/components/course-progress/course-progress.scss
@@ -34,8 +34,7 @@ ion-app.app-root core-courses-course-progress {
         }
 
         .core-course-link {
-            padding-top: 8px;
-            padding-bottom: 8px;
+            @include padding(8px, 0px, 8px, 16px);
             .item-inner {
                 @include padding(null, 0, null, null);
             }
diff --git a/src/core/grades/components/course/core-grades-course.html b/src/core/grades/components/course/core-grades-course.html
index 637e22a35..991a1d048 100644
--- a/src/core/grades/components/course/core-grades-course.html
+++ b/src/core/grades/components/course/core-grades-course.html
@@ -6,7 +6,7 @@
         <core-empty-box *ngIf="!gradesTable" icon="stats" [message]="'core.grades.nogradesreturned' | translate">
         </core-empty-box>
 
-        <div *ngIf="gradesTable" class="core-grades-container">
+        <div *ngIf="gradesTable" class="core-grades-container safe-area-page">
             <table cellspacing="0" cellpadding="0" class="core-grades-table">
                 <thead>
                     <tr>
diff --git a/src/core/sharedfiles/pages/list/list.html b/src/core/sharedfiles/pages/list/list.html
index 3da41008d..5470ee0c6 100644
--- a/src/core/sharedfiles/pages/list/list.html
+++ b/src/core/sharedfiles/pages/list/list.html
@@ -15,16 +15,15 @@
     </ion-refresher>
     <!-- Allow selecting the site to view. -->
     <core-site-picker [hidden]="!filesLoaded" [initialSite]="siteId" (siteSelected)="changeSite($event)"></core-site-picker>
-    <ion-item-divider color="light"></ion-item-divider>
     <core-loading [hideUntil]="filesLoaded">
         <ion-list *ngIf="files && files.length > 0">
-            <div *ngFor="let file of files; let idx = index">
+            <ng-container *ngFor="let file of files; let idx = index">
                 <core-local-file *ngIf="file.isFile" [file]="file" [manage]="manage" [overrideClick]="pick" (onClick)="filePicked(file)" (onDelete)="fileDeleted(idx)" (onRename)="fileRenamed(idx, $event)"></core-local-file>
                 <a ion-item text-wrap class="item-media" *ngIf="!file.isFile" (click)="openFolder(file)">
                     <img src="assets/img/files/folder-64.png" alt="{{ 'core.folder' | translate }}" role="presentation" item-start>
                     <p>{{ file.name }}</p>
                 </a>
-            </div>
+            </ng-container>
         </ion-list>
         <core-empty-box *ngIf="files && !files.length && manage" icon="folder" [message]="'core.sharedfiles.nosharedfiles' | translate"></core-empty-box>
         <core-empty-box *ngIf="files && !files.length && !manage" icon="folder" [message]="'core.sharedfiles.nosharedfilestoupload' | translate"></core-empty-box>
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index 7eeb788e9..988743546 100644
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@@ -291,6 +291,53 @@ $core-question-state-incorrect-color: $red-light !default;
   }
 }
 
+@mixin safe-area-border-start($px, $type, $color) {
+  $safe-area-position: calc(constant(safe-area-inset-left) + #{$px});
+  $safe-area-position-env: calc(env(safe-area-inset-left) + #{$px});
+
+  @include border-start($px, $type, $color);
+  @media screen and (orientation: landscape) {
+    @include border-start($safe-area-position, $type, $color);
+    @include border-start($safe-area-position-env, $type, $color);
+  }
+}
+
+
+@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});
+
+  @include border-end($px, $type, $color);
+  @media screen and (orientation: landscape) {
+    @include border-end($safe-area-position, $type, $color);
+    @include border-end($safe-area-position-env, $type, $color);
+  }
+}
+
+@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});
+
+  @include padding-horizontal($start, $end);
+
+  @media screen and (orientation: landscape) {
+    @include padding-horizontal($safe-area-start, $end);
+    @include padding-horizontal($safe-area-start-env, $end);
+  }
+}
+
+@mixin safe-area-padding-end($start, $end) {
+  $safe-area-end: calc(constant(safe-area-inset-right) + #{$end});
+  $safe-area-end-env: calc(env(safe-area-inset-right) + #{$end});
+
+  @include padding-horizontal($start, $end);
+
+  @media screen and (orientation: landscape) {
+    @include padding-horizontal($start, $safe-area-end);
+    @include padding-horizontal($start, $safe-area-end-env);
+  }
+}
+
 // Font Awesome
 $fa-font-path: $font-path;
 @import "font-awesome";