MOBILE-3833 core: Simplify empty box component

src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html

@@ -69,7 +69,7 @@
     </ion-row>
 
     <core-empty-box *ngIf="filteredCourses.length == 0" image="assets/img/icons/courses.svg"
-        [message]="'addon.block_myoverview.nocourses' | translate" inline="true">
+        [message]="'addon.block_myoverview.nocourses' | translate">
     </core-empty-box>
 
     <!-- List of courses. -->

src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html

@@ -8,7 +8,7 @@
     </div>
 </ion-item-divider>
 <core-loading [hideUntil]="loaded" [fullscreen]="false">
-    <core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg" inline="true"
+    <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 [hidden]="courses.length === 0" [id]="scrollElementId" class="core-horizontal-scroll"

src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html

@@ -37,7 +37,7 @@
         </div>
     </div>
 
-    <core-empty-box *ngIf="items.length <= 0" image="assets/img/icons/activities.svg" inline="true"
+    <core-empty-box *ngIf="items.length <= 0" image="assets/img/icons/activities.svg"
         [message]="'addon.block_recentlyaccesseditems.noitems' | translate"></core-empty-box>
 
 </core-loading>

src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html

@@ -8,7 +8,7 @@
     </div>
 </ion-item-divider>
 <core-loading [hideUntil]="loaded" [fullscreen]="false">
-    <core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg" inline="true"
+    <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 [hidden]="courses.length === 0" [id]="scrollElementId" class="core-horizontal-scroll"

src/addons/block/timeline/components/events/addon-block-timeline-events.html

@@ -79,5 +79,5 @@
         <p>{{'addon.block_timeline.noevents' | translate}}</p>
     </ion-label>
 </ion-item>
-<core-empty-box *ngIf="empty && !course" image="assets/img/icons/activities.svg" inline="true"
+<core-empty-box *ngIf="empty && !course" image="assets/img/icons/activities.svg" [message]="'addon.block_timeline.noevents' | translate">
-    [message]="'addon.block_timeline.noevents' | translate"></core-empty-box>
+</core-empty-box>

src/addons/block/timeline/components/timeline/addon-block-timeline.html

@@ -66,7 +66,7 @@
             <addon-block-timeline-events [events]="course.events" [canLoadMore]="course.canLoadMore" (loadMore)="loadMore(course)"
                 [course]="course" [from]="dataFrom" [to]="dataTo"></addon-block-timeline-events>
         </ng-container>
-        <core-empty-box *ngIf="timelineCourses.courses.length == 0" image="assets/img/icons/courses.svg" inline="true"
+        <core-empty-box *ngIf="timelineCourses.courses.length == 0" image="assets/img/icons/courses.svg"
             [message]="'addon.block_timeline.noevents' | translate"></core-empty-box>
     </core-loading>
 </core-loading>

src/addons/calendar/pages/day/day.html

@@ -59,7 +59,7 @@
                             </ion-item>
                         </ion-card>
 
-                        <core-empty-box *ngIf="!day.filteredEvents || !day.filteredEvents.length" icon="fas-calendar" inline="true"
+                        <core-empty-box *ngIf="!day.filteredEvents || !day.filteredEvents.length" icon="fas-calendar"
                             [message]="'addon.calendar.noevents' | translate">
                         </core-empty-box>
 

src/addons/mod/wiki/components/index/addon-mod-wiki-index.html

@@ -60,7 +60,7 @@
             <core-format-text *ngIf="pageContent" [component]="component" [componentId]="componentId" [text]="pageContent"
                 contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
             </core-format-text>
-            <core-empty-box *ngIf="!pageContent" icon="fas-file-alt" [message]="'addon.mod_wiki.nocontent' | translate" inline="true">
+            <core-empty-box *ngIf="!pageContent" icon="fas-file-alt" [message]="'addon.mod_wiki.nocontent' | translate">
             </core-empty-box>
         </article>
 

src/core/components/empty-box/core-empty-box.html

@@ -1,8 +1,4 @@
-<div class="core-empty-box ion-padding" [class.core-empty-box-inline]="(!image && !icon) || inline">
+<img *ngIf="image && !icon" [src]="image" role="presentation" alt="">
-    <div class="core-empty-box-content">
+<ion-icon *ngIf="icon" [name]="icon" aria-hidden="true"></ion-icon>
-        <img *ngIf="image && !icon" [src]="image" role="presentation" alt="">
+<p *ngIf="message">{{ message }}</p>
-        <ion-icon *ngIf="icon" [name]="icon" aria-hidden="true"></ion-icon>
+<ng-content></ng-content>
-        <p *ngIf="message" [class.ion-padding-top]="image || icon">{{ message }}</p>
-        <ng-content></ng-content>
-    </div>
-</div>

src/core/components/empty-box/empty-box.scss

@@ -1,74 +1,35 @@
+@import "~theme/globals";
+
 :host {
-    display: contents;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex-grow: 1;
+
     color: var(--text-color);
+    margin: 0 auto;
+    text-align: center;
+    padding: 16px;
+    --image-size: 120px;
 
-    .core-empty-box {
+    ion-icon {
-        position: absolute;
+        font-size: var(--image-size);
-        top: 0;
+    }
-        right: 0;
+    img {
-        bottom: 0;
+        height: var(--image-size);
-        left: 0;
+    }
-        display: table;
+    p {
-        height: 100%;
+        font-size: 120%;
-        width: 100%;
-        margin: 0;
-        clear: both;
-        pointer-events: none;
-
-        .core-empty-box-content {
-            margin: 0;
-            display: table-cell;
-            text-align: center;
-            vertical-align: middle;
-            pointer-events: auto;
-        }
-
-        &.core-empty-box-inline {
-            position: relative;
-            z-index: initial;
-            top: initial;
-            right: initial;
-            bottom: 0;
-            left: initial;
-            height: auto;
-        }
-
-        ion-icon {
-            font-size: 120px;
-        }
-        img {
-            height: 125px;
-            width: 145px;
-            margin: 0 auto;
-        }
-        p {
-            font-size: 120%;
-        }
     }
 
-    &.core-empty-box-clickable .core-empty-box {
+    &.core-empty-box-clickable {
         z-index: 0;
     }
+}
 
-    @media (max-height: 550px) {
+@include media-breakpoint-down(sm) {
-        .core-empty-box {
+    :host {
-            position: relative;
+        --image-size: 100px;
-            height: auto;
-            margin-top: 50px;
-
-            ion-icon {
-                font-size: 100px;
-            }
-            img {
-                height: 104px;
-                width: 121px;
-            }
-        }
-    }
-
-     &.core-empty-inline .core-empty-box {
-        position: relative;
-        z-index: initial;
-        height: auto;
     }
 }

src/core/components/empty-box/empty-box.ts

@@ -32,12 +32,11 @@ export class CoreEmptyBoxComponent {
     @Input() message = ''; // Message to display.
     @Input() icon?: string; // Name of the icon to use.
     @Input() image?: string; // Image source. If an icon is provided, image won't be used.
-
-    /**
-     * If this has to be shown inline instead of occupying whole page.
-     * If image or icon is not supplied, it's true by default.
-     */
-    @Input() inline = false;
     @Input() flipIconRtl = false; // Whether to flip the icon in RTL. Defaults to false.
 
+    /**
+     * @deprecated not used anymore.
+     */
+    @Input() inline = false;
+
 }

src/core/components/split-view/split-view.scss

@@ -10,7 +10,7 @@
     --menu-display: flex;
     --content-display: block;
     --content-outlet-display: none;
-    --content-placeholder-display: var(--content-display);
+    --content-placeholder-display: flex;
 
     top: 0;
     right: 0;
@@ -70,6 +70,7 @@
     --menu-min-width: 0px;
     --menu-max-width: 100%;
     --content-display: none;
+    --content-placeholder-display: none;
     --menu-border-width: 0px;
     --menu-box-shadow: none;
     --menu-z: 0px;

src/theme/theme.base.scss

@@ -1520,7 +1520,8 @@ ion-header.no-title {
 
 }
 
-.has-spacer {
+.has-spacer,
+.core-flex-fill {
     display: flex;
     flex-direction: column;
     min-height: 100%;