MOBILE-3320 core: Improve inline loading styles

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

@@ -3,7 +3,7 @@
         <h2>{{ 'addon.block_activitymodules.pluginname' | translate }}</h2>
     </ion-label>
 </ion-item-divider>
-<core-loading [hideUntil]="loaded" [fullscreen]="false">
+<core-loading [hideUntil]="loaded" [fullscreen]="false" class="margin">
     <ion-item class="ion-text-wrap item-media" *ngFor="let entry of entries" detail="false" button
         (click)="gotoCoureListModType(entry)">
         <img slot="start" [src]="entry.icon" alt="" role="presentation" class="core-module-icon">

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

@@ -36,7 +36,7 @@
         </core-context-menu-item>
     </core-context-menu>
 </ion-item-divider>
-<core-loading [hideUntil]="loaded" [fullscreen]="false">
+<core-loading [hideUntil]="loaded" [fullscreen]="false" class="margin">
     <div class="safe-padding-horizontal" [hidden]="showFilter || !showSelectorFilter">
         <!-- "Time" selector. -->
         <core-combobox [label]="'core.show' | translate" [selection]="selectedFilter" (onChange)="selectedChanged($event)">

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

@@ -20,7 +20,7 @@
         </core-horizontal-scroll-controls>
     </div>
 </ion-item-divider>
-<core-loading [hideUntil]="loaded" [fullscreen]="false" class="safe-area-page">
+<core-loading [hideUntil]="loaded" [fullscreen]="false" class="safe-area-page margin">
     <core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg" inline="true"
         [message]="'addon.block_recentlyaccessedcourses.nocourses' | translate"></core-empty-box>
     <!-- List of courses. -->

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

@@ -5,7 +5,7 @@
         </core-horizontal-scroll-controls>
     </div>
 </ion-item-divider>
-<core-loading [hideUntil]="loaded" [fullscreen]="false" class="safe-area-page">
+<core-loading [hideUntil]="loaded" [fullscreen]="false" class="safe-area-page margin">
     <div
         [id]="scrollElementId"
         [hidden]="!items || items.length === 0"

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

@@ -3,7 +3,7 @@
         <h2>{{ 'addon.block_sitemainmenu.pluginname' | translate }}</h2>
     </ion-label>
 </ion-item-divider>
-<core-loading [hideUntil]="loaded" [fullscreen]="false">
+<core-loading [hideUntil]="loaded" [fullscreen]="false" class="margin">
     <ng-container *ngIf="mainMenuBlock">
         <ion-item class="ion-text-wrap" *ngIf="mainMenuBlock.summary">
             <ion-label>

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

@@ -20,7 +20,7 @@
         </core-horizontal-scroll-controls>
     </div>
 </ion-item-divider>
-<core-loading [hideUntil]="loaded" [fullscreen]="false" class="safe-area-page">
+<core-loading [hideUntil]="loaded" [fullscreen]="false" class="safe-area-page margin">
     <core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg" inline="true"
         [message]="'addon.block_starredcourses.nocourses' | translate"></core-empty-box>
     <!-- List of courses. -->

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

@@ -9,7 +9,7 @@
         </core-context-menu-item>
     </core-context-menu>
 </ion-item-divider>
-<core-loading [hideUntil]="loaded" [fullscreen]="false">
+<core-loading [hideUntil]="loaded" [fullscreen]="false" class="margin">
     <div class="safe-padding-horizontal">
         <core-combobox [selection]="filter" (onChange)="switchFilter($event)">
             <ion-select-option class="ion-text-wrap" value="all">
@@ -35,12 +35,12 @@
             </ion-select-option>
         </core-combobox>
     </div>
-    <core-loading [hideUntil]="timeline.loaded" [hidden]="sort != 'sortbydates'" [fullscreen]="false">
+    <core-loading [hideUntil]="timeline.loaded" [hidden]="sort != 'sortbydates'" [fullscreen]="false" class="margin">
         <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'"
-        [fullscreen]="false" class="safe-area-page">
+        [fullscreen]="false" class="safe-area-page margin">
         <ion-grid class="ion-no-padding">
             <ion-row class="ion-no-padding">
                 <ion-col *ngFor="let course of timelineCourses.courses" class="ion-no-padding" size="12" size-md="6">

src/addons/messages/pages/discussion/discussion.html

@@ -128,7 +128,7 @@
     <!-- Scroll bottom. -->
     <ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end" *ngIf="loaded && newMessages > 0">
         <ion-fab-button size="small" (click)="scrollToFirstUnreadMessage()" color="light"
-        [attr.aria-label]="'addon.messages.newmessages' | translate">
+            [attr.aria-label]="'addon.messages.newmessages' | translate">
             <ion-icon name="fas-arrow-down" aria-hidden="true"></ion-icon>
             <span class="core-discussion-messages-badge">{{ newMessages }}</span>
         </ion-fab-button>

src/addons/mod/assign/components/submission/addon-mod-assign-submission.html

@@ -1,4 +1,4 @@
-<core-loading [hideUntil]="loaded" [fullscreen]="false">
+<core-loading [hideUntil]="loaded" class="margin">
 
     <!-- User and status of the submission. -->
     <ion-item class="ion-text-wrap" *ngIf="!blindMarking && user" core-user-link [userId]="submitId" [courseId]="courseId"

src/addons/mod/forum/components/post-options-menu/post-options-menu.html

@@ -1,4 +1,4 @@
-<core-loading [hideUntil]="loaded" [fullscreen]="false">
+<core-loading [hideUntil]="loaded" [fullscreen]="false" class="margin">
     <ion-item class="ion-text-wrap" (click)="editPost()" *ngIf="offlinePost || (canEdit && isOnline)">
         <ion-icon name="fas-pen" slot="start" aria-hidden="true"></ion-icon>
         <ion-label>

src/core/components/loading/core-loading.html

@@ -1,8 +1,6 @@
 <div class="core-loading-container" *ngIf="!hideUntil" role="status" [@coreShowHideAnimation]>
-    <span class="core-loading-spinner">
+    <ion-spinner color="primary"></ion-spinner>
-        <ion-spinner color="primary"></ion-spinner>
+    <p class="core-loading-message" *ngIf="message" role="status">{{message}}</p>
-        <p class="core-loading-message" *ngIf="message" role="status">{{message}}</p>
-    </span>
 </div>
 <div #content class="core-loading-content" [id]="uniqueId" [attr.aria-busy]="hideUntil" [@coreShowHideAnimation]>
     <ng-content *ngIf="hideUntil">

src/core/components/loading/loading.scss

@@ -4,35 +4,44 @@
     --loading-background: var(--ion-background-color);
     --loading-spinner: var(--ion-color-primary);
     --loading-text-color: var(--ion-text-color);
+    --loading-inline-margin: 0;
+    --loading-inline-min-height: 28px;
 
     position: static;
     color: var(--loading-text-color);
 
+    &.margin {
+        --loading-inline-margin: 10px;
+    }
+
+    &.core-loading-loaded {
+        --loading-inline-margin: 0;
+        --loading-inline-min-height: 0;
+    }
+
     ion-spinner {
         --color: var(--loading-spinner);
         color: var(--color);
     }
 
-    > .core-loading-container {
+    .core-loading-container {
         position: absolute;
         @include position(0, 0, 0, 0);
-        display: table;
+        display: flex;
         height: 100%;
         width: 100%;
-        text-align: center;
+        justify-content: center;
-        clear: both;
+        align-items: center;
+        flex-direction: column;
         z-index: 3;
         margin: 0;
-        padding: 10px 0 0 0;
+        padding: 0;
         background-color: var(--loading-background);
-        -webkit-transition: all 200ms ease-in-out;
+        @include core-transition(all, 200ms);
-        transition: all 200ms ease-in-out;
+    }
 
-        .core-loading-spinner {
+    .core-loading-message {
-            display: table-cell;
+        @include margin(10px, 0, 0, 0);
-            text-align: center;
-            vertical-align: middle;
-        }
     }
 
     .core-loading-content {
@@ -48,21 +57,26 @@
     }
 
     &.core-loading-inline {
-        display: block;
+        --loading-background: transparent;
-
-        .core-loading-container {
-            padding-top: 20px;
-            position: relative;
-        }
-    }
-
-    &.core-loading-loaded.core-loading-inline {
         position: relative;
-        min-height: 102px;
+        display: block;
+        min-height: var(--loading-inline-min-height);
+        margin-top: var(--loading-inline-margin);
+        margin-bottom: var(--loading-inline-margin);
+
+        .core-loading-message {
+            @include margin(0, 0, 0, 10px);
+        }
 
         .core-loading-container {
-            padding-top: 10px;
+            flex-direction: row;
-            position: absolute;
         }
     }
 }
+
+:host-context(ion-item) {
+    &.core-loading-inline {
+        position: static;
+        display: block;
+    }
+}

src/core/features/block/components/course-blocks/core-block-course-blocks.html

@@ -3,7 +3,7 @@
 </div>
 
 <div *ngIf="blocks && blocks.length > 0 && !hideBlocks" [class.core-hide-blocks]="hideBottomBlocks" class="core-course-blocks-side">
-    <core-loading [hideUntil]="dataLoaded" [fullscreen]="false">
+    <core-loading [hideUntil]="dataLoaded" [fullscreen]="false" class="margin">
         <ion-list>
             <!-- Course expand="block"s. -->
             <ng-container *ngFor="let block of blocks">

src/core/features/block/components/pre-rendered-block/core-block-pre-rendered.html

@@ -7,7 +7,7 @@
         </h2>
     </ion-label>
 </ion-item-divider>
-<core-loading [hideUntil]="loaded" [fullscreen]="false">
+<core-loading [hideUntil]="loaded" [fullscreen]="false" class="margin">
     <ion-item *ngIf="block.contents?.content" class="ion-text-wrap core-block-content">
         <ion-label>
             <core-format-text [text]="block.contents?.content" contextLevel="block" [contextInstanceId]="block.instanceid"

src/core/features/comments/components/comments/core-comments.html

@@ -1,4 +1,4 @@
-<core-loading *ngIf="!disabled" [hideUntil]="commentsLoaded || !displaySpinner">
+<core-loading *ngIf="!disabled" [hideUntil]="commentsLoaded || !displaySpinner" [fullscreen]="false">
     <div *ngIf="!countError" (click)="openComments($event)" [class.core-comments-clickable]="!disabled">
         {{ 'core.comments.commentscount' | translate : {'$a': commentsCount} }}
     </div>

src/core/features/courses/pages/my-courses/my-courses.html

@@ -12,7 +12,7 @@
                     <ion-icon name="fas-search" slot="icon-only" aria-hidden="true"></ion-icon>
                 </ion-button>
                 <ion-button [hidden]="!downloadAllCoursesEnabled || !courses || courses.length < 2 || downloadAllCoursesLoading"
-                (click)="prefetchCourses()" [attr.aria-label]="'core.courses.downloadcourses' | translate">
+                    (click)="prefetchCourses()" [attr.aria-label]="'core.courses.downloadcourses' | translate">
                     <ion-icon [name]="downloadAllCoursesIcon" slot="icon-only" aria-hidden="true"></ion-icon>
                 </ion-button>
                 <ion-spinner [hidden]="!downloadAllCoursesEnabled || !courses || courses.length < 2 ||

src/core/features/siteplugins/components/plugin-content/core-siteplugins-plugin-content.html

@@ -1,4 +1,4 @@
-<core-loading [hideUntil]="dataLoaded" [fullscreen]="false">
+<core-loading [hideUntil]="dataLoaded" [fullscreen]="false" class="margin">
     <core-compile-html [text]="content" [javascript]="javascript" [jsData]="jsData" [forceCompile]="forceCompile" #compile>
     </core-compile-html>
 </core-loading>