From 602331d2c65ca6d130b765d677a897aebc27a31f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 24 Mar 2022 12:58:55 +0100
Subject: [PATCH 1/7] MOBILE-3833 style: Shadow on collapsible footer only if
 not at bottom

---
 .../pages/discussion/discussion.page.ts       | 64 +++++++++----------
 src/app/app.component.ts                      | 19 +++++-
 src/core/directives/collapsible-footer.ts     |  3 +
 src/core/singletons/dom.ts                    | 15 +++++
 src/theme/theme.base.scss                     |  5 +-
 5 files changed, 68 insertions(+), 38 deletions(-)

diff --git a/src/addons/messages/pages/discussion/discussion.page.ts b/src/addons/messages/pages/discussion/discussion.page.ts
index 0d4896837..a7be06c6e 100644
--- a/src/addons/messages/pages/discussion/discussion.page.ts
+++ b/src/addons/messages/pages/discussion/discussion.page.ts
@@ -445,13 +445,9 @@ export class AddonMessagesDiscussionPage implements OnInit, OnDestroy, AfterView
             return;
         }
 
-        // Don't use domUtils.getScrollHeight because it gives an outdated value after receiving a new message.
-        const scrollHeight = this.scrollElement ? this.scrollElement.scrollHeight : 0;
-
         // Check if we are at the bottom to scroll it after render.
         // Use a 5px error margin because in iOS there is 1px difference for some reason.
-        this.scrollBottom = Math.abs(scrollHeight - (this.scrollElement?.scrollTop || 0) -
-            (this.scrollElement?.clientHeight || 0)) < 5;
+        this.scrollBottom = CoreDom.scrollIsBottom(this.scrollElement, 5);
 
         if (this.messagesBeingSent > 0) {
             // Ignore polling due to a race condition.
@@ -510,39 +506,39 @@ export class AddonMessagesDiscussionPage implements OnInit, OnDestroy, AfterView
      * The scroll was moved. Update new messages count.
      */
     scrollFunction(): void {
-        if (this.newMessages > 0) {
-            const scrollBottom = (this.scrollElement?.scrollTop || 0) + (this.scrollElement?.clientHeight || 0);
-            const scrollHeight = (this.scrollElement?.scrollHeight || 0);
-            if (scrollBottom > scrollHeight - 40) {
-                // At the bottom, reset.
-                this.setNewMessagesBadge(0);
+        if (this.newMessages == 0) {
+            return;
+        }
 
-                return;
+        if (CoreDom.scrollIsBottom(this.scrollElement, 40)) {
+            // At the bottom, reset.
+            this.setNewMessagesBadge(0);
+
+            return;
+        }
+
+        const scrollElRect = this.scrollElement?.getBoundingClientRect();
+        const scrollBottomPos = (scrollElRect && scrollElRect.bottom) || 0;
+
+        if (scrollBottomPos == 0) {
+            return;
+        }
+
+        const messages = Array.from(this.hostElement.querySelectorAll('.addon-message-not-mine'))
+            .slice(-this.newMessages)
+            .reverse();
+
+        const newMessagesUnread = messages.findIndex((message) => {
+            const elementRect = message.getBoundingClientRect();
+            if (!elementRect) {
+                return false;
             }
 
-            const scrollElRect = this.scrollElement?.getBoundingClientRect();
-            const scrollBottomPos = (scrollElRect && scrollElRect.bottom) || 0;
+            return elementRect.bottom <= scrollBottomPos;
+        });
 
-            if (scrollBottomPos == 0) {
-                return;
-            }
-
-            const messages = Array.from(this.hostElement.querySelectorAll('.addon-message-not-mine'))
-                .slice(-this.newMessages)
-                .reverse();
-
-            const newMessagesUnread = messages.findIndex((message) => {
-                const elementRect = message.getBoundingClientRect();
-                if (!elementRect) {
-                    return false;
-                }
-
-                return elementRect.bottom <= scrollBottomPos;
-            });
-
-            if (newMessagesUnread > 0 && newMessagesUnread < this.newMessages) {
-                this.setNewMessagesBadge(newMessagesUnread);
-            }
+        if (newMessagesUnread > 0 && newMessagesUnread < this.newMessages) {
+            this.setNewMessagesBadge(newMessagesUnread);
         }
     }
 
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 7c361804a..275daf547 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -31,6 +31,7 @@ import { CoreUrlUtils } from '@services/utils/url';
 import { CoreConstants } from '@/core/constants';
 import { CoreSitePlugins } from '@features/siteplugins/services/siteplugins';
 import { CoreDomUtils } from '@services/utils/dom';
+import { CoreDom } from '@singletons/dom';
 
 const MOODLE_VERSION_PREFIX = 'version-';
 const MOODLEAPP_VERSION_PREFIX = 'moodleapp-';
@@ -90,9 +91,21 @@ export class AppComponent implements OnInit, AfterViewInit {
         });
 
         // Listen to scroll to add style when scroll is not 0.
-        win.addEventListener('ionScroll', ({ detail, target }: CustomEvent<ScrollDetail>) => {
-            const header = (target as HTMLElement).closest('.ion-page')?.querySelector('ion-header');
-            header?.classList.toggle('core-header-shadow', detail.scrollTop > 0);
+        win.addEventListener('ionScroll', async ({ detail, target }: CustomEvent<ScrollDetail>) => {
+            if ((target as HTMLElement).tagName != 'ION-CONTENT') {
+                return;
+            }
+            const content = (target as HTMLIonContentElement);
+
+            const page = content.closest('.ion-page');
+            if (!page) {
+                return;
+            }
+
+            page.querySelector<HTMLIonHeaderElement>('ion-header')?.classList.toggle('core-header-shadow', detail.scrollTop > 0);
+
+            const scrollElement = await content.getScrollElement();
+            content.classList.toggle('core-footer-shadow', !CoreDom.scrollIsBottom(scrollElement));
         });
 
         // Listen for session expired events.
diff --git a/src/core/directives/collapsible-footer.ts b/src/core/directives/collapsible-footer.ts
index f345a9b70..7ead926a9 100644
--- a/src/core/directives/collapsible-footer.ts
+++ b/src/core/directives/collapsible-footer.ts
@@ -126,6 +126,9 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
         const scroll = await this.content.getScrollElement();
         this.content.scrollEvents = true;
 
+        // Init shadow.
+        this.content.classList.toggle('core-footer-shadow', !CoreDom.scrollIsBottom(scroll));
+
         this.content.addEventListener('ionScroll', this.contentScrollListener = (e: CustomEvent<ScrollDetail>): void => {
             if (!this.content) {
                 return;
diff --git a/src/core/singletons/dom.ts b/src/core/singletons/dom.ts
index d26b1834e..35306cc12 100644
--- a/src/core/singletons/dom.ts
+++ b/src/core/singletons/dom.ts
@@ -232,6 +232,21 @@ export class CoreDom {
         return CoreDom.scrollToElement(container, '.core-input-error');
     }
 
+    /**
+     * Has the scroll reached bottom?
+     *
+     * @param scrollElement Scroll Element.
+     * @param marginError Error margin when calculating.
+     * @return Wether the scroll reached the bottom.
+     */
+    static scrollIsBottom(scrollElement?: HTMLElement, marginError = 0): boolean {
+        if (!scrollElement) {
+            return true;
+        }
+
+        return scrollElement.scrollTop + scrollElement.clientHeight >= scrollElement.scrollHeight - marginError;
+    }
+
     /**
      * Move element to content so it can be slotted.
      *
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 4448600ce..7bc9f0437 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -1434,8 +1434,11 @@ ion-grid.core-no-grid > ion-row {
     right: 0;
 }
 
-[collapsible-footer] {
+.core-footer-shadow [collapsible-footer] {
     box-shadow: var(--drop-shadow-top, none);
+}
+[collapsible-footer] {
+    transition: box-shadow 0.5s;
     width: 100%;
     bottom: 0;
     z-index: 3;

From aa4f1cdee10aeb7341146e9773e34a526f868551 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 25 Mar 2022 14:48:56 +0100
Subject: [PATCH 2/7] MOBILE-3833 collapsible: Collapse footer when keyboard is
 open

---
 src/theme/theme.base.scss | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 7bc9f0437..59edeadaf 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -1471,8 +1471,13 @@ ion-grid.core-no-grid > ion-row {
         &.footer-expanded {
             --core-collapsible-footer-height: auto;
         }
+    }
+}
 
-
+.keyboard-is-open ion-content {
+    --core-collapsible-footer-height: 0px !important;
+    [collapsible-footer] {
+        height: 0;
     }
 }
 

From cb635411956e8fa6342edc5ede8e462a6cf52632 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 24 Mar 2022 16:08:17 +0100
Subject: [PATCH 3/7] MOBILE-3833 loading: Improve loading spinner styles

---
 src/core/components/loading/core-loading.html |   6 +-
 src/core/components/loading/loading.scss      | 127 ++++++++----------
 src/core/components/loading/loading.ts        |  17 ++-
 3 files changed, 64 insertions(+), 86 deletions(-)

diff --git a/src/core/components/loading/core-loading.html b/src/core/components/loading/core-loading.html
index 569682040..cabe746af 100644
--- a/src/core/components/loading/core-loading.html
+++ b/src/core/components/loading/core-loading.html
@@ -2,8 +2,4 @@
     <ion-spinner color="primary" aria-hidden="true"></ion-spinner>
     <p class="core-loading-message" *ngIf="message" role="status">{{message}}</p>
 </div>
-<div #content class="core-loading-content" [id]="uniqueId" [attr.aria-busy]="!hideUntil" @coreShowHideAnimation
-    [class.opacity-hide]="!hideUntil">
-    <ng-content *ngIf="loaded">
-    </ng-content>
-</div>
+<ng-content *ngIf="loaded" @coreShowHideAnimation></ng-content>
diff --git a/src/core/components/loading/loading.scss b/src/core/components/loading/loading.scss
index efa86a0de..82ab20289 100644
--- a/src/core/components/loading/loading.scss
+++ b/src/core/components/loading/loading.scss
@@ -1,5 +1,27 @@
 @import "~theme/globals";
 
+@mixin inline() {
+    min-height: var(--internal-loading-inline-min-height);
+    max-height: 100vh; // In order show it on the page (content will be cut).
+
+    &:not(.core-loading-loaded) {
+        position: relative;
+        --contents-display: flex;
+        flex-direction: column;
+    }
+
+    .core-loading-container {
+        --loading-background: rgba(var(--loading-background-inline), 0.4);
+        flex-direction: row;
+        height: auto;
+        width: auto;
+
+        .core-loading-message {
+            @include margin(0, 0, 0, 10px);
+        }
+    }
+}
+
 :host {
     --loading-background: var(--ion-background-color);
     --loading-background-inline: var(--ion-background-color-rgb);
@@ -8,27 +30,28 @@
     --loading-inline-margin: 0px;
     --loading-inline-min-height: 28px;
     --internal-loading-inline-min-height: var(--loading-inline-min-height);
-    --content-display: contents;
+    --loading-display: flex;
+    --loading-display-message: block;
+    --contents-display: contents;
 
-    position: static;
-    color: var(--loading-text-color);
     @include core-transition(all, 200ms);
-
-    &.margin {
-        --loading-inline-margin: 10px;
-        --internal-loading-inline-min-height: calc(var(--loading-inline-min-height) + var(--loading-inline-margin) + var(--loading-inline-margin));
-    }
+    pointer-events: none;
+    display: var(--contents-display);
 
     &.core-loading-loaded {
+        position: static;
+        pointer-events: auto;
         --internal-loading-inline-min-height: 0px;
-    }
 
-    ion-spinner {
-        --color: var(--loading-spinner);
-        color: var(--color);
+        &.has-spacer {
+            --contents-display: flex;
+            min-height: 100%;
+            flex-direction: column;
+        }
     }
 
     .core-loading-container {
+        pointer-events: none;
         position: absolute;
         @include position(0, 0, 0, 0);
         height: 100%;
@@ -36,78 +59,38 @@
         z-index: 3;
         margin: 0;
         padding: 0;
+        color: var(--loading-text-color);
         background-color: var(--loading-background);
         @include core-transition(all, 200ms);
-        display: flex;
+        display: var(--loading-display);
         justify-content: center;
         align-items: center;
         flex-direction: column;
-    }
-
-    .core-loading-content {
-        @include core-transition(opacity, 200ms);
-        display: var(--content-display);
-    }
-
-    .core-loading-message {
-        @include margin(10px, 0, 0, 0);
-    }
-
-    &.core-loading-loaded {
-        position: unset;
-        display: contents;
-    }
-
-    &.core-loading-inline {
-        --loading-background: rgba(var(--loading-background-inline), 0.5);
-        position: relative;
-        display: block;
-        min-height: var(--internal-loading-inline-min-height);
 
         .core-loading-message {
-            @include margin(0, 0, 0, 10px);
+            @include margin(10px, 0, 0, 0);
+            display: var(--loading-display-message);
         }
 
-        .core-loading-container {
-            flex-direction: row;
+        ion-spinner {
+            --color: var(--loading-spinner);
+            color: var(--color);
         }
     }
 
-    &.core-loading-full-height .core-loading-content {
-        height: 100%;
-    }
-
-    &.has-spacer {
-        --content-display: flex;
-
-        .core-loading-content {
-            min-height: 100%;
-            flex-direction: column;
-        }
-    }
-
-    &.list-item-limited-width .core-loading-content {
-        max-width: var(--list-item-max-width);
-        margin-left: auto !important;
-        margin-right: auto !important;
-    }
-
-    &.safe-area-padding:not(.core-loading-inline) .core-loading-content,
-    &.safe-area-padding-horizontal:not(.core-loading-inline) .core-loading-content {
-        @include safe-area-padding-horizontal(0px, 0px);
-    }
-
-    &.safe-area-padding:not(.core-loading-inline) .core-loading-content {
-        padding-bottom: var(--ion-safe-area-bottom);
-        > * {
-            --ion-safe-area-bottom: 0px;
-        }
-    }
-}
-
-:host-context(ion-item) {
     &.core-loading-inline {
-        position: static;
-        display: block;
+       @include inline();
     }
 }
+
+// Force inline on some contexts.
+:host-context(ion-item),
+:host-context(core-block) {
+    // Implicit Inline.
+    @include inline();
+}
+
+:host-context(.limited-width > ):not([slot]) {
+    --contents-display: flex;
+    flex-direction: column;
+}
diff --git a/src/core/components/loading/loading.ts b/src/core/components/loading/loading.ts
index d5be19770..7485ade46 100644
--- a/src/core/components/loading/loading.ts
+++ b/src/core/components/loading/loading.ts
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, Input, OnInit, OnChanges, SimpleChange, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
+import { Component, Input, OnInit, OnChanges, SimpleChange, ElementRef, AfterViewInit } from '@angular/core';
 
 import { CoreEventLoadingChangedData, CoreEvents } from '@singletons/events';
 import { CoreUtils } from '@services/utils/utils';
@@ -50,15 +50,14 @@ import { AsyncComponent } from '@classes/async-component';
 })
 export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit, AsyncComponent {
 
-    @Input() hideUntil: unknown; // Determine when should the contents be shown.
+    @Input() hideUntil = false; // Determine when should the contents be shown.
     @Input() message?: string; // Message to show while loading.
     @Input() fullscreen = true; // Use the whole screen.
 
-    @ViewChild('content') content?: ElementRef;
-
     uniqueId: string;
-    protected element: HTMLElement; // Current element.
     loaded = false; // Only comes true once.
+
+    protected element: HTMLElement; // Current element.
     protected onReadyPromise = new CorePromisedValue<void>();
 
     constructor(element: ElementRef) {
@@ -67,6 +66,7 @@ export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit, A
 
         // Calculate the unique ID.
         this.uniqueId = 'core-loading-content-' + CoreUtils.getUniqueId('CoreLoadingComponent');
+        this.element.setAttribute('id', this.uniqueId);
     }
 
     /**
@@ -77,7 +77,6 @@ export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit, A
             // Default loading message.
             this.message = Translate.instant('core.loading');
         }
-
         this.element.classList.toggle('core-loading-inline', !this.fullscreen);
     }
 
@@ -85,7 +84,7 @@ export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit, A
      * @inheritdoc
      */
     ngAfterViewInit(): void {
-        this.changeState(!!this.hideUntil);
+        this.changeState(this.hideUntil);
     }
 
     /**
@@ -93,7 +92,7 @@ export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit, A
      */
     ngOnChanges(changes: { [name: string]: SimpleChange }): void {
         if (changes.hideUntil) {
-            this.changeState(!!this.hideUntil);
+            this.changeState(this.hideUntil);
         }
     }
 
@@ -105,7 +104,7 @@ export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit, A
      */
     async changeState(loaded: boolean): Promise<void> {
         this.element.classList.toggle('core-loading-loaded', loaded);
-        this.content?.nativeElement.classList.toggle('core-loading-content', loaded);
+        this.element.setAttribute('aria-busy', loaded ?  'false' : 'true');
 
         if (!this.loaded && loaded) {
             this.loaded = true; // Only comes true once.

From 90ddcd78271c85562c4bd572a3682e129819c55f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 25 Mar 2022 10:16:12 +0100
Subject: [PATCH 4/7] MOBILE-3833 loading: Change loading usage

---
 .../pages/issued-badge/issued-badge.html      |   4 +-
 .../addon-block-activitymodules.html          |   2 +-
 .../myoverview/addon-block-myoverview.html    |   2 +-
 .../addon-block-recentlyaccessedcourses.html  |   2 +-
 .../addon-block-recentlyaccesseditems.html    |   2 +-
 .../addon-block-sitemainmenu.html             |   2 +-
 .../addon-block-starredcourses.html           |   2 +-
 .../timeline/addon-block-timeline.html        |   6 +-
 src/addons/blog/pages/entries/entries.html    |   4 +-
 .../calendar/addon-calendar-calendar.html     |   2 +-
 .../addon-calendar-upcoming-events.html       |   4 +-
 src/addons/calendar/pages/day/day.html        |   8 +-
 .../pages/competency/competency.html          |   4 +-
 .../competencysummary/competencysummary.html  |   4 +-
 .../coursecompetencies.html                   |   4 +-
 src/addons/competency/pages/plan/plan.html    |   4 +-
 .../messages/pages/discussion/discussion.html |   4 +-
 .../index/addon-mod-assign-index.html         |   2 +-
 .../addon-mod-assign-submission.html          | 670 +++++++++---------
 src/addons/mod/assign/pages/index/index.html  |   2 +-
 .../components/index/index.html               |   2 +-
 .../bigbluebuttonbn/pages/index/index.html    |   2 +-
 .../index/addon-mod-book-index.html           |   2 +-
 .../mod/book/pages/contents/contents.scss     |   6 -
 src/addons/mod/book/pages/index/index.html    |   2 +-
 .../index/addon-mod-chat-index.html           |   2 +-
 src/addons/mod/chat/pages/chat/chat.html      |   4 +-
 src/addons/mod/chat/pages/index/index.html    |   2 +-
 .../session-messages/session-messages.html    |   2 +-
 .../index/addon-mod-choice-index.html         | 103 ++-
 src/addons/mod/choice/pages/index/index.html  |   2 +-
 .../index/addon-mod-data-index.html           |   2 +-
 src/addons/mod/data/pages/entry/entry.html    |   5 +-
 src/addons/mod/data/pages/index/index.html    |   2 +-
 .../index/addon-mod-feedback-index.html       |   2 +-
 src/addons/mod/feedback/pages/form/form.html  |   4 +-
 .../mod/feedback/pages/index/index.html       |   2 +-
 .../index/addon-mod-folder-index.html         |   2 +-
 src/addons/mod/folder/pages/index/index.html  |   2 +-
 .../post-options-menu/post-options-menu.scss  |  13 +-
 .../forum/pages/discussion/discussion.html    |   4 +-
 .../mod/glossary/pages/entry/entry.html       |   4 +-
 .../index/addon-mod-h5pactivity-index.html    |   2 +-
 .../index/addon-mod-imscp-index.html          |   2 +-
 src/addons/mod/imscp/pages/index/index.html   |   2 +-
 src/addons/mod/imscp/pages/view/view.html     |   2 +-
 .../index/addon-mod-lesson-index.html         |   2 +-
 src/addons/mod/lesson/pages/index/index.html  |   2 +-
 .../mod/lesson/pages/player/player.html       |   4 +-
 .../lesson/pages/user-retake/user-retake.html |   4 +-
 .../components/index/addon-mod-lti-index.html |   2 +-
 src/addons/mod/lti/pages/index/index.html     |   2 +-
 .../index/addon-mod-page-index.html           |   2 +-
 .../mod/page/components/index/index.scss      |   8 -
 src/addons/mod/page/components/index/index.ts |   1 -
 src/addons/mod/page/pages/index/index.html    |   2 +-
 .../index/addon-mod-quiz-index.html           |   2 +-
 .../mod/quiz/pages/attempt/attempt.html       |   4 +-
 src/addons/mod/quiz/pages/index/index.html    |   2 +-
 src/addons/mod/quiz/pages/player/player.html  |   4 +-
 src/addons/mod/quiz/pages/review/review.html  |   4 +-
 .../index/addon-mod-resource-index.html       |   2 +-
 .../mod/resource/pages/index/index.html       |   2 +-
 .../index/addon-mod-scorm-index.html          |   2 +-
 src/addons/mod/scorm/pages/index/index.html   |   2 +-
 src/addons/mod/scorm/pages/player/player.html |   2 +-
 .../index/addon-mod-survey-index.html         |   2 +-
 src/addons/mod/survey/pages/index/index.html  |   2 +-
 .../components/index/addon-mod-url-index.html |   2 +-
 src/addons/mod/url/pages/index/index.html     |   2 +-
 .../index/addon-mod-wiki-index.html           |   2 +-
 src/addons/mod/wiki/pages/index/index.html    |   2 +-
 .../addon-mod-workshop-assessment.html        |   2 +-
 .../index/addon-mod-workshop-index.html       |   2 +-
 .../addon-mod-workshop-submission.html        |   2 +-
 .../mod/workshop/pages/index/index.html       |   2 +-
 .../workshop/pages/submission/submission.html |   2 +-
 src/addons/notes/pages/list/list.html         |   4 +-
 .../privatefiles/pages/index/index.html       |   4 +-
 .../pages/course-storage/course-storage.html  |   4 +-
 .../courses-storage/courses-storage.html      |   4 +-
 .../components/attachments/attachments.scss   |   6 +-
 src/core/components/iframe/core-iframe.html   |   9 +-
 src/core/components/iframe/iframe.scss        |  21 -
 .../core-course-format-single-activity.html   |   4 +-
 .../pages/module-preview/module-preview.html  |   4 +-
 .../features/grades/pages/course/course.html  |   2 +-
 .../h5p-iframe/core-h5p-iframe.html           |   2 +-
 .../login/pages/credentials/credentials.html  |   4 +-
 .../login/pages/site-policy/site-policy.html  |   2 +-
 .../features/login/pages/sites/sites.html     |   4 +-
 .../settings/pages/licenses/licenses.html     |   4 +-
 .../pages/space-usage/space-usage.html        |   4 +-
 .../synchronization/synchronization.html      |   4 +-
 .../tag/pages/index-area/index-area.html      |   8 +-
 .../features/tag/pages/search/search.html     |   2 +-
 src/core/features/user/pages/about/about.html |   4 +-
 .../features/user/pages/profile/profile.html  |   4 +-
 src/theme/theme.base.scss                     |   8 +-
 99 files changed, 528 insertions(+), 574 deletions(-)
 delete mode 100644 src/addons/mod/page/components/index/index.scss

diff --git a/src/addons/badges/pages/issued-badge/issued-badge.html b/src/addons/badges/pages/issued-badge/issued-badge.html
index fde877cb2..5f233087f 100644
--- a/src/addons/badges/pages/issued-badge/issued-badge.html
+++ b/src/addons/badges/pages/issued-badge/issued-badge.html
@@ -9,11 +9,11 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content [core-swipe-navigation]="badges">
+<ion-content [core-swipe-navigation]="badges" class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!badgeLoaded" (ionRefresh)="refreshBadges($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="badgeLoaded" class="list-item-limited-width">
+    <core-loading [hideUntil]="badgeLoaded">
         <ion-item-group *ngIf="badge">
             <ion-item class="ion-text-wrap ion-text-center">
                 <ion-label>
diff --git a/src/addons/block/activitymodules/components/activitymodules/addon-block-activitymodules.html b/src/addons/block/activitymodules/components/activitymodules/addon-block-activitymodules.html
index a22f3d549..b4f800003 100644
--- a/src/addons/block/activitymodules/components/activitymodules/addon-block-activitymodules.html
+++ b/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">
     <ion-item class="ion-text-wrap" *ngFor="let entry of entries" detail="true" button (click)="gotoCoureListModType(entry)">
         <core-mod-icon slot="start" [modicon]="entry.icon" [modname]="entry.iconModName" [showAlt]="false">
         </core-mod-icon>
diff --git a/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html b/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html
index 8131987f4..3718ea8e7 100644
--- a/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html
+++ b/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html
@@ -20,7 +20,7 @@
         </div>
     </div>
 </ion-item-divider>
-<core-loading [hideUntil]="loaded" [fullscreen]="false">
+<core-loading [hideUntil]="loaded">
 
     <ion-row class="ion-justify-content-between ion-align-items-center addon-block-myoverview-filter" *ngIf="hasCourses">
         <ion-col size="auto" *ngIf="filters.enabled">
diff --git a/src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html b/src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
index 93b5c04f7..d4b28ea36 100644
--- a/src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
+++ b/src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
@@ -7,7 +7,7 @@
         </core-horizontal-scroll-controls>
     </div>
 </ion-item-divider>
-<core-loading [hideUntil]="loaded" [fullscreen]="false">
+<core-loading [hideUntil]="loaded">
     <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. -->
diff --git a/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html b/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
index cacc174c9..bdab2ad19 100644
--- a/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
+++ b/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
@@ -7,7 +7,7 @@
         </core-horizontal-scroll-controls>
     </div>
 </ion-item-divider>
-<core-loading [hideUntil]="loaded" [fullscreen]="false">
+<core-loading [hideUntil]="loaded">
     <div [id]="scrollElementId" [hidden]="!items || items.length === 0" class="core-horizontal-scroll"
         (scroll)="scrollControls.updateScrollPosition()">
         <div *ngIf="items" (onResize)="scrollControls.updateScrollPosition()" class="flex-row">
diff --git a/src/addons/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html b/src/addons/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html
index fa38b0bc3..11bc7d2b8 100644
--- a/src/addons/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html
+++ b/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">
     <ion-list *ngIf="mainMenuBlock" class="core-course-module-list-wrapper">
         <ion-item class="ion-text-wrap" *ngIf="mainMenuBlock.summary">
             <ion-label>
diff --git a/src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html b/src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
index 02398a668..88e7fdfce 100644
--- a/src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
+++ b/src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
@@ -7,7 +7,7 @@
         </core-horizontal-scroll-controls>
     </div>
 </ion-item-divider>
-<core-loading [hideUntil]="loaded" [fullscreen]="false">
+<core-loading [hideUntil]="loaded">
     <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. -->
diff --git a/src/addons/block/timeline/components/timeline/addon-block-timeline.html b/src/addons/block/timeline/components/timeline/addon-block-timeline.html
index b652282e9..949692cb2 100644
--- a/src/addons/block/timeline/components/timeline/addon-block-timeline.html
+++ b/src/addons/block/timeline/components/timeline/addon-block-timeline.html
@@ -3,7 +3,7 @@
         <h2>{{ 'addon.block_timeline.pluginname' | translate }}</h2>
     </ion-label>
 </ion-item-divider>
-<core-loading [hideUntil]="loaded" [fullscreen]="false">
+<core-loading [hideUntil]="loaded">
     <ion-row class="ion-no-padding ion-justify-content-between ion-align-items-center">
         <ion-col size="auto" class="ion-no-padding">
             <core-combobox [selection]="filter" (onChange)="switchFilter($event)" icon="fas-filter">
@@ -57,11 +57,11 @@
         </ion-col>
     </ion-row>
 
-    <core-loading [hideUntil]="timeline.loaded" [hidden]="sort != 'sortbydates'" [fullscreen]="false">
+    <core-loading [hideUntil]="timeline.loaded" [hidden]="sort != 'sortbydates'">
         <addon-block-timeline-events [events]="timeline.events" [canLoadMore]="timeline.canLoadMore" (loadMore)="loadMore()"
             [from]="dataFrom" [to]="dataTo"></addon-block-timeline-events>
     </core-loading>
-    <core-loading [hideUntil]="timelineCourses.loaded" [hidden]="sort != 'sortbycourses'" [fullscreen]="false" class="safe-area-page">
+    <core-loading [hideUntil]="timelineCourses.loaded" [hidden]="sort != 'sortbycourses'">
         <ng-container *ngFor="let course of timelineCourses.courses">
             <addon-block-timeline-events [events]="course.events" [canLoadMore]="course.canLoadMore" (loadMore)="loadMore(course)"
                 [course]="course" [from]="dataFrom" [to]="dataTo"></addon-block-timeline-events>
diff --git a/src/addons/blog/pages/entries/entries.html b/src/addons/blog/pages/entries/entries.html
index d1a56b3c0..06d703932 100644
--- a/src/addons/blog/pages/entries/entries.html
+++ b/src/addons/blog/pages/entries/entries.html
@@ -11,11 +11,11 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="loaded" class="list-item-limited-width">
+    <core-loading [hideUntil]="loaded">
         <ion-item *ngIf="showMyEntriesToggle">
             <ion-label>{{ 'addon.blog.showonlyyourentries' | translate }}</ion-label>
             <ion-toggle [(ngModel)]="onlyMyEntries" (ionChange)="onlyMyEntriesToggleChanged(onlyMyEntries)"></ion-toggle>
diff --git a/src/addons/calendar/components/calendar/addon-calendar-calendar.html b/src/addons/calendar/components/calendar/addon-calendar-calendar.html
index 39466f120..21d0bc83d 100644
--- a/src/addons/calendar/components/calendar/addon-calendar-calendar.html
+++ b/src/addons/calendar/components/calendar/addon-calendar-calendar.html
@@ -7,7 +7,7 @@
     </core-context-menu>
 </core-navbar-buttons>
 
-<core-loading [hideUntil]="loaded" class="safe-area-padding core-loading-full-height">
+<core-loading [hideUntil]="loaded">
     <div class="core-swipe-slides-container">
         <!-- Period name and arrows to navigate. -->
         <ion-grid class="ion-no-padding addon-calendar-navigation">
diff --git a/src/addons/calendar/components/upcoming-events/addon-calendar-upcoming-events.html b/src/addons/calendar/components/upcoming-events/addon-calendar-upcoming-events.html
index e5a295569..ef63f7816 100644
--- a/src/addons/calendar/components/upcoming-events/addon-calendar-upcoming-events.html
+++ b/src/addons/calendar/components/upcoming-events/addon-calendar-upcoming-events.html
@@ -1,8 +1,8 @@
-<core-loading [hideUntil]="loaded" class="list-item-limited-width">
+<core-loading [hideUntil]="loaded">
     <core-empty-box *ngIf="!filteredEvents || !filteredEvents.length" icon="fas-calendar" [message]="'addon.calendar.noevents' | translate">
     </core-empty-box>
 
-    <ion-list *ngIf="filteredEvents && filteredEvents.length" class="ion-no-margin">
+    <ion-list *ngIf="filteredEvents && filteredEvents.length" class="list-item-limited-width">
         <ng-container *ngFor="let event of filteredEvents">
             <ion-card>
                 <ion-item class="ion-text-wrap addon-calendar-event" [attr.aria-label]="event.name" (click)="eventClicked(event)" button
diff --git a/src/addons/calendar/pages/day/day.html b/src/addons/calendar/pages/day/day.html
index 67bdbd8b1..fba17f45a 100644
--- a/src/addons/calendar/pages/day/day.html
+++ b/src/addons/calendar/pages/day/day.html
@@ -27,7 +27,7 @@
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
 
-    <core-loading [hideUntil]="loaded" class="core-loading-full-height">
+    <core-loading [hideUntil]="loaded">
         <div class="core-swipe-slides-container">
             <!-- Period name and arrows to navigate. -->
             <ion-grid class="ion-no-padding safe-area-padding">
@@ -50,9 +50,9 @@
 
             <core-swipe-slides [manager]="manager">
                 <ng-template let-day="item">
-                    <core-loading [hideUntil]="day.loaded" class="safe-area-padding list-item-limited-width">
+                    <core-loading [hideUntil]="day.loaded">
                         <!-- There is data to be synchronized -->
-                        <ion-card class="core-warning-card" *ngIf="day.hasOffline">
+                        <ion-card class="core-warning-card list-item-limited-width" *ngIf="day.hasOffline">
                             <ion-item>
                                 <ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
                                 <ion-label>{{ 'core.hasdatatosync' | translate:{$a: 'core.day' | translate} }}</ion-label>
@@ -63,7 +63,7 @@
                             [message]="'addon.calendar.noevents' | translate">
                         </core-empty-box>
 
-                        <ion-list *ngIf="day.filteredEvents && day.filteredEvents.length" class="ion-no-margin">
+                        <ion-list *ngIf="day.filteredEvents && day.filteredEvents.length" class="list-item-limited-width">
                             <ng-container *ngFor="let event of day.filteredEvents">
                                 <ion-card>
                                     <ion-item class="addon-calendar-event ion-text-wrap" [attr.aria-label]="event.name"
diff --git a/src/addons/competency/pages/competency/competency.html b/src/addons/competency/pages/competency/competency.html
index 194bef3ca..f8a03e245 100644
--- a/src/addons/competency/pages/competency/competency.html
+++ b/src/addons/competency/pages/competency/competency.html
@@ -10,11 +10,11 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content [core-swipe-navigation]="competencies">
+<ion-content [core-swipe-navigation]="competencies" class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!competencyLoaded" (ionRefresh)="refreshCompetency($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="competencyLoaded" class="list-item-limited-width">
+    <core-loading [hideUntil]="competencyLoaded">
         <ion-card *ngIf="user">
             <ion-item class="ion-text-wrap">
                 <core-user-avatar [user]="user" slot="start"></core-user-avatar>
diff --git a/src/addons/competency/pages/competencysummary/competencysummary.html b/src/addons/competency/pages/competencysummary/competencysummary.html
index b5314d334..57d59228e 100644
--- a/src/addons/competency/pages/competencysummary/competencysummary.html
+++ b/src/addons/competency/pages/competencysummary/competencysummary.html
@@ -10,11 +10,11 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!competencyLoaded" (ionRefresh)="refreshCompetency($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="competencyLoaded" class="list-item-limited-width">
+    <core-loading [hideUntil]="competencyLoaded">
         <ion-card *ngIf="competency">
             <ion-item class="ion-text-wrap" *ngIf="competency.competency.description">
                 <ion-label>
diff --git a/src/addons/competency/pages/coursecompetencies/coursecompetencies.html b/src/addons/competency/pages/coursecompetencies/coursecompetencies.html
index 6ca87f8af..daea95879 100644
--- a/src/addons/competency/pages/coursecompetencies/coursecompetencies.html
+++ b/src/addons/competency/pages/coursecompetencies/coursecompetencies.html
@@ -8,11 +8,11 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!competencies.loaded" (ionRefresh)="refreshCourseCompetencies($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="competencies.loaded" class="list-item-limited-width">
+    <core-loading [hideUntil]="competencies.loaded">
         <ion-card *ngIf="!user && courseCompetencies && courseCompetencies.statistics.competencycount > 0">
             <ng-container *ngIf="courseCompetencies.cangradecompetencies">
                 <ion-item class="ion-text-wrap" *ngIf="courseCompetencies.settings.pushratingstouserplans">
diff --git a/src/addons/competency/pages/plan/plan.html b/src/addons/competency/pages/plan/plan.html
index 1f2275c70..055972527 100644
--- a/src/addons/competency/pages/plan/plan.html
+++ b/src/addons/competency/pages/plan/plan.html
@@ -8,11 +8,11 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content [core-swipe-navigation]="plans">
+<ion-content [core-swipe-navigation]="plans" class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!competencies.loaded" (ionRefresh)="refreshLearningPlan($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="competencies.loaded" class="list-item-limited-width">
+    <core-loading [hideUntil]="competencies.loaded">
         <ion-card *ngIf="user">
             <ion-item class="ion-text-wrap">
                 <ion-label>
diff --git a/src/addons/messages/pages/discussion/discussion.html b/src/addons/messages/pages/discussion/discussion.html
index 2eb15f375..924b36f7b 100644
--- a/src/addons/messages/pages/discussion/discussion.html
+++ b/src/addons/messages/pages/discussion/discussion.html
@@ -57,8 +57,8 @@
         </core-context-menu>
     </core-navbar-buttons>
 </ion-header>
-<ion-content class="has-footer" (ionScroll)="scrollFunction()">
-    <core-loading [hideUntil]="loaded" class="safe-area-padding-horizontal">
+<ion-content (ionScroll)="scrollFunction()">
+    <core-loading [hideUntil]="loaded">
         <!-- Load previous messages. -->
         <core-infinite-loading [enabled]="canLoadMore" (action)="loadPrevious($event)" position="top" [error]="loadMoreError">
         </core-infinite-loading>
diff --git a/src/addons/mod/assign/components/index/addon-mod-assign-index.html b/src/addons/mod/assign/components/index/addon-mod-assign-index.html
index d5aef9734..c58552c55 100644
--- a/src/addons/mod/assign/components/index/addon-mod-assign-index.html
+++ b/src/addons/mod/assign/components/index/addon-mod-assign-index.html
@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">
+<core-loading [hideUntil]="!showLoading">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
diff --git a/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html b/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
index 5da98c6d8..7cd548372 100644
--- a/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
+++ b/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
@@ -1,316 +1,92 @@
-<core-loading [hideUntil]="loaded" class="list-item-limited-width">
+<core-loading [hideUntil]="loaded">
+    <div class="list-item-limited-width">
+        <!-- User and status of the submission. -->
+        <ion-item class="ion-text-wrap" *ngIf="!blindMarking && user" core-user-link [userId]="submitId" [courseId]="courseId"
+            [attr.aria-label]="user!.fullname">
+            <core-user-avatar [user]="user" slot="start" [linkProfile]="false"></core-user-avatar>
+            <ion-label>
+                <h2>{{ user!.fullname }}</h2>
+                <ng-container *ngTemplateOutlet="submissionStatus"></ng-container>
+            </ion-label>
+        </ion-item>
 
-    <!-- User and status of the submission. -->
-    <ion-item class="ion-text-wrap" *ngIf="!blindMarking && user" core-user-link [userId]="submitId" [courseId]="courseId"
-        [attr.aria-label]="user!.fullname">
-        <core-user-avatar [user]="user" slot="start" [linkProfile]="false"></core-user-avatar>
-        <ion-label>
-            <h2>{{ user!.fullname }}</h2>
-            <ng-container *ngTemplateOutlet="submissionStatus"></ng-container>
-        </ion-label>
-    </ion-item>
+        <!-- Status of the submission if user is blinded. -->
+        <ion-item class="ion-text-wrap" *ngIf="blindMarking && !user">
+            <ion-label>
+                <h2>{{ 'addon.mod_assign.hiddenuser' | translate }} {{blindId}}</h2>
+                <ng-container *ngTemplateOutlet="submissionStatus"></ng-container>
+            </ion-label>
+        </ion-item>
 
-    <!-- Status of the submission if user is blinded. -->
-    <ion-item class="ion-text-wrap" *ngIf="blindMarking && !user">
-        <ion-label>
-            <h2>{{ 'addon.mod_assign.hiddenuser' | translate }} {{blindId}}</h2>
-            <ng-container *ngTemplateOutlet="submissionStatus"></ng-container>
-        </ion-label>
-    </ion-item>
+        <!-- Status of the submission in the rest of cases. -->
+        <ion-item class="ion-text-wrap" *ngIf="(blindMarking && user) || (!blindMarking && !user)">
+            <ion-label>
+                <h2>{{ 'addon.mod_assign.submissionstatus' | translate }}</h2>
+                <ng-container *ngTemplateOutlet="submissionStatus"></ng-container>
+            </ion-label>
+        </ion-item>
 
-    <!-- Status of the submission in the rest of cases. -->
-    <ion-item class="ion-text-wrap" *ngIf="(blindMarking && user) || (!blindMarking && !user)">
-        <ion-label>
-            <h2>{{ 'addon.mod_assign.submissionstatus' | translate }}</h2>
-            <ng-container *ngTemplateOutlet="submissionStatus"></ng-container>
-        </ion-label>
-    </ion-item>
+        <!-- Tabs: see the submission or grade it. -->
+        <core-tabs [selectedIndex]="selectedTab" [hideUntil]="loaded" parentScrollable="true" (ionChange)="tabSelected($event)">
+            <!-- View the submission tab. -->
+            <core-tab [title]="'addon.mod_assign.submission' | translate" id="submission">
+                <ng-template>
+                    <addon-mod-assign-submission-plugin *ngFor="let plugin of submissionPlugins" [assign]="assign"
+                        [submission]="userSubmission" [plugin]="plugin">
+                    </addon-mod-assign-submission-plugin>
 
-    <!-- Tabs: see the submission or grade it. -->
-    <core-tabs [selectedIndex]="selectedTab" [hideUntil]="loaded" parentScrollable="true" (ionChange)="tabSelected($event)">
-        <!-- View the submission tab. -->
-        <core-tab [title]="'addon.mod_assign.submission' | translate" id="submission">
-            <ng-template>
-                <addon-mod-assign-submission-plugin *ngFor="let plugin of submissionPlugins" [assign]="assign" [submission]="userSubmission"
-                    [plugin]="plugin">
-                </addon-mod-assign-submission-plugin>
+                    <!-- Render some data about the submission. -->
+                    <ion-item class="ion-text-wrap"
+                        *ngIf="userSubmission && userSubmission!.status != statusNew && userSubmission!.timemodified">
+                        <ion-label>
+                            <h2>{{ 'addon.mod_assign.timemodified' | translate }}</h2>
+                            <p>{{ userSubmission!.timemodified * 1000 | coreFormatDate }}</p>
+                        </ion-label>
+                    </ion-item>
 
-                <!-- Render some data about the submission. -->
-                <ion-item class="ion-text-wrap"
-                    *ngIf="userSubmission && userSubmission!.status != statusNew && userSubmission!.timemodified">
-                    <ion-label>
-                        <h2>{{ 'addon.mod_assign.timemodified' | translate }}</h2>
-                        <p>{{ userSubmission!.timemodified * 1000 | coreFormatDate }}</p>
-                    </ion-label>
-                </ion-item>
+                    <ion-item class="ion-text-wrap" *ngIf="timeRemaining" [ngClass]="[timeRemainingClass]">
+                        <ion-label>
+                            <h2>{{ 'addon.mod_assign.timeremaining' | translate }}</h2>
+                            <p [innerHTML]="timeRemaining"></p>
+                        </ion-label>
+                    </ion-item>
 
-                <ion-item class="ion-text-wrap" *ngIf="timeRemaining" [ngClass]="[timeRemainingClass]">
-                    <ion-label>
-                        <h2>{{ 'addon.mod_assign.timeremaining' | translate }}</h2>
-                        <p [innerHTML]="timeRemaining"></p>
-                    </ion-label>
-                </ion-item>
-
-                <ion-item class="ion-text-wrap" *ngIf="showDates && fromDate && !isSubmittedForGrading">
-                    <ion-label>
-                        <p *ngIf="assign!.intro"
-                            [innerHTML]="'addon.mod_assign.allowsubmissionsfromdatesummary' | translate: {'$a': fromDate}">
-                        </p>
-                        <p *ngIf="!assign!.intro" [innerHTML]="'addon.mod_assign.allowsubmissionsanddescriptionfromdatesummary' | translate:
+                    <ion-item class="ion-text-wrap" *ngIf="showDates && fromDate && !isSubmittedForGrading">
+                        <ion-label>
+                            <p *ngIf="assign!.intro"
+                                [innerHTML]="'addon.mod_assign.allowsubmissionsfromdatesummary' | translate: {'$a': fromDate}">
+                            </p>
+                            <p *ngIf="!assign!.intro" [innerHTML]="'addon.mod_assign.allowsubmissionsanddescriptionfromdatesummary' | translate:
                                 {'$a': fromDate}">
-                        </p>
-                    </ion-label>
-                </ion-item>
-
-                <ion-item class="ion-text-wrap" *ngIf="showDates && assign!.duedate && !isSubmittedForGrading">
-                    <ion-label>
-                        <h2>{{ 'addon.mod_assign.duedate' | translate }}</h2>
-                        <p *ngIf="assign!.duedate">{{ assign!.duedate * 1000 | coreFormatDate }}</p>
-                        <p *ngIf="!assign!.duedate">{{ 'addon.mod_assign.duedateno' | translate }}</p>
-                    </ion-label>
-                </ion-item>
-
-                <ion-item class="ion-text-wrap" *ngIf="assign!.duedate && assign!.cutoffdate && isSubmittedForGrading">
-                    <ion-label>
-                        <h2>{{ 'addon.mod_assign.cutoffdate' | translate }}</h2>
-                        <p>{{ assign!.cutoffdate * 1000 | coreFormatDate }}</p>
-                    </ion-label>
-                </ion-item>
-
-                <ion-item class="ion-text-wrap" *ngIf="assign!.duedate && lastAttempt?.extensionduedate && !isSubmittedForGrading">
-                    <ion-label>
-                        <h2>{{ 'addon.mod_assign.extensionduedate' | translate }}</h2>
-                        <p>{{ lastAttempt!.extensionduedate * 1000 | coreFormatDate }}</p>
-                    </ion-label>
-                </ion-item>
-
-                <ion-item class="ion-text-wrap" *ngIf="currentAttempt && !isGrading">
-                    <ion-label>
-                        <h2>{{ 'addon.mod_assign.attemptnumber' | translate }}</h2>
-                        <p *ngIf="assign!.maxattempts == unlimitedAttempts">
-                            {{ 'addon.mod_assign.outof' | translate :
-                            {'$a': {'current': currentAttempt, 'total': maxAttemptsText} } }}
-                        </p>
-                        <p *ngIf="assign!.maxattempts != unlimitedAttempts">
-                            {{ 'addon.mod_assign.outof' | translate :
-                            {'$a': {'current': currentAttempt, 'total': assign!.maxattempts} } }}
-                        </p>
-                    </ion-label>
-                </ion-item>
-
-                <!-- Add or edit submission. -->
-                <ion-item class="ion-text-wrap" *ngIf="canEdit">
-                    <ion-label>
-                        <div *ngIf="!unsupportedEditPlugins.length && !showErrorStatementEdit">
-                            <!-- If has offline data, show edit. -->
-                            <ion-button expand="block" class="ion-text-wrap" *ngIf="hasOffline" (click)="goToEdit()">
-                                {{ 'addon.mod_assign.editsubmission' | translate }}
-                            </ion-button>
-                            <!-- If no submission or is new, show add submission. -->
-                            <ion-button expand="block" class="ion-text-wrap" (click)="goToEdit()" *ngIf="!hasOffline &&
-                                    (!userSubmission || !userSubmission!.status || userSubmission!.status == statusNew)">
-                                {{ 'addon.mod_assign.addsubmission' | translate }}
-                            </ion-button>
-                            <!-- If reopened, show addfromprevious and addnewattempt. -->
-                            <ng-container *ngIf="!hasOffline && userSubmission?.status == statusReopened">
-                                <ion-button *ngIf="!isPreviousAttemptEmpty" expand="block" class="ion-text-wrap" (click)="copyPrevious()">
-                                    {{ 'addon.mod_assign.addnewattemptfromprevious' | translate }}
-                                </ion-button>
-                                <ion-button expand="block" class="ion-text-wrap" (click)="goToEdit()">
-                                    {{ 'addon.mod_assign.addnewattempt' | translate }}
-                                </ion-button>
-                            </ng-container>
-                            <!-- Else show editsubmission. -->
-                            <ion-button expand="block" class="ion-text-wrap" *ngIf="!hasOffline &&
-                                    userSubmission && userSubmission!.status &&
-                                    userSubmission!.status != statusNew &&
-                                    userSubmission!.status != statusReopened" (click)="goToEdit()">
-                                {{ 'addon.mod_assign.editsubmission' | translate }}
-                            </ion-button>
-                        </div>
-                        <div *ngIf="unsupportedEditPlugins && unsupportedEditPlugins.length && !showErrorStatementEdit">
-                            <p class="core-danger-item">{{ 'addon.mod_assign.erroreditpluginsnotsupported' | translate }}</p>
-                            <p class="core-danger-item" *ngFor="let name of unsupportedEditPlugins">{{ name }}</p>
-                        </div>
-                        <div *ngIf="showErrorStatementEdit">
-                            <p class="core-danger-item">{{ 'addon.mod_assign.cannoteditduetostatementsubmission' | translate }}</p>
-                        </div>
-                    </ion-label>
-                </ion-item>
-
-                <!-- Submit for grading form. -->
-                <ng-container *ngIf="canSubmit">
-                    <ion-item class="ion-text-wrap" *ngIf="submissionStatement">
-                        <ion-label>
-                            <core-format-text [text]="submissionStatement" [filter]="false"></core-format-text>
-                        </ion-label>
-                        <ion-checkbox slot="end" name="submissionstatement" [(ngModel)]="acceptStatement">
-                        </ion-checkbox>
-                    </ion-item>
-                    <!-- Submit button. -->
-                    <ion-item class="ion-text-wrap" *ngIf="!showErrorStatementSubmit">
-                        <ion-label>
-                            <ion-button expand="block" class="ion-text-wrap" (click)="submitForGrading(acceptStatement)">
-                                {{ 'addon.mod_assign.submitassignment' | translate }}
-                            </ion-button>
-                            <p>{{ 'addon.mod_assign.submitassignment_help' | translate }}</p>
-                        </ion-label>
-                    </ion-item>
-                    <!-- Error because we lack submissions statement. -->
-                    <ion-item class="ion-text-wrap" *ngIf="showErrorStatementSubmit">
-                        <ion-label>
-                            <p class="core-danger-item">
-                                {{ 'addon.mod_assign.cannotsubmitduetostatementsubmission' | translate }}
                             </p>
                         </ion-label>
                     </ion-item>
-                </ng-container>
 
-                <!-- Team members that need to submit it too. -->
-                <ion-item-divider class="ion-text-wrap" *ngIf="membersToSubmit && membersToSubmit.length > 0">
-                    <ion-label>
-                        <h2>{{ 'addon.mod_assign.userswhoneedtosubmit' | translate: {$a: ''} }}</h2>
-                    </ion-label>
-                </ion-item-divider>
-                <ng-container *ngIf="membersToSubmit && membersToSubmit.length > 0 && !blindMarking">
-                    <ng-container *ngFor="let user of membersToSubmit">
-                        <ion-item class="ion-text-wrap" core-user-link [userId]="user.id" [courseId]="courseId"
-                            [attr.aria-label]="user.fullname">
-                            <core-user-avatar [user]="user" slot="start" [linkProfile]="false"></core-user-avatar>
-                            <ion-label>
-                                <h2>{{ user.fullname }}</h2>
-                            </ion-label>
-                        </ion-item>
-                    </ng-container>
-                </ng-container>
-                <ng-container *ngIf="membersToSubmit && membersToSubmit.length > 0 && blindMarking">
-                    <ng-container *ngFor="let blindId of membersToSubmitBlind">
-                        <ion-item class="ion-text-wrap">
-                            <ion-label>{{ 'addon.mod_assign.hiddenuser' | translate }} {{ blindId }}</ion-label>
-                        </ion-item>
-                    </ng-container>
-                </ng-container>
-
-                <!-- Submission is locked. -->
-                <ion-item class="ion-text-wrap" *ngIf="lastAttempt?.locked">
-                    <ion-label>
-                        <h2>{{ 'addon.mod_assign.submissionslocked' | translate }}</h2>
-                    </ion-label>
-                </ion-item>
-
-                <!-- Editing status. -->
-                <ion-item class="ion-text-wrap" *ngIf="lastAttempt && isSubmittedForGrading && lastAttempt!.caneditowner !== undefined"
-                    [ngClass]="{submissioneditable: lastAttempt!.caneditowner, submissionnoteditable: !lastAttempt!.caneditowner}">
-                    <ion-label>
-                        <h2>{{ 'addon.mod_assign.editingstatus' | translate }}</h2>
-                        <p *ngIf="lastAttempt!.caneditowner">{{ 'addon.mod_assign.submissioneditable' | translate }}</p>
-                        <p *ngIf="!lastAttempt!.caneditowner">{{ 'addon.mod_assign.submissionnoteditable' | translate }}</p>
-                    </ion-label>
-                </ion-item>
-            </ng-template>
-        </core-tab>
-
-        <!-- Grade the submission tab. -->
-        <core-tab [title]="'addon.mod_assign.grade' | translate" *ngIf="feedback || isGrading" id="grade">
-            <ng-template>
-                <!-- Current grade if method is advanced. -->
-                <ion-item class="ion-text-wrap core-grading-summary"
-                    *ngIf="feedback?.gradefordisplay && (!isGrading || grade.method != 'simple')">
-                    <ion-label>
-                        <h2>{{ 'addon.mod_assign.currentgrade' | translate }}</h2>
-                        <p>
-                            <core-format-text [text]="feedback!.gradefordisplay" [filter]="false"></core-format-text>
-                        </p>
-                    </ion-label>
-                    <ion-button slot="end" *ngIf="feedback!.advancedgrade" (click)="showAdvancedGrade()"
-                        [attr.aria-label]="'core.showadvanced' |translate">
-                        <ion-icon name="fas-search" slot="icon-only" aria-hidden="true"></ion-icon>
-                    </ion-button>
-                </ion-item>
-
-                <ng-container *ngIf="isGrading">
-                    <!-- Numeric grade.
-                        Use a text input because otherwise we cannot readthe value if it has an invalid character. -->
-                    <ion-item class="ion-text-wrap" *ngIf="grade.method == 'simple' && !grade.scale">
-                        <ion-label position="stacked">
-                            <h2>{{ 'addon.mod_assign.gradeoutof' | translate: {$a: gradeInfo!.grade} }}</h2>
-                        </ion-label>
-                        <ion-input *ngIf="!grade.disabled" type="text" [(ngModel)]="grade.grade" min="0" [max]="gradeInfo!.grade"
-                            [lang]="grade.lang">
-                        </ion-input>
-                        <p *ngIf="grade.disabled">{{ 'addon.mod_assign.gradelocked' | translate }}</p>
-                    </ion-item>
-
-                    <!-- Grade using a scale. -->
-                    <ion-item class="ion-text-wrap" *ngIf="grade.method == 'simple' && grade.scale">
+                    <ion-item class="ion-text-wrap" *ngIf="showDates && assign!.duedate && !isSubmittedForGrading">
                         <ion-label>
-                            <h2>{{ 'addon.mod_assign.grade' | translate }}</h2>
-                        </ion-label>
-                        <ion-select [(ngModel)]="grade.grade" interface="action-sheet" [disabled]="grade.disabled"
-                            [interfaceOptions]="{header: 'addon.mod_assign.grade' | translate}">
-                            <ion-select-option *ngFor="let grade of grade.scale" [value]="grade.value">
-                                {{grade.label}}
-                            </ion-select-option>
-                        </ion-select>
-                    </ion-item>
-
-                    <!-- Outcomes. -->
-                    <ion-item class="ion-text-wrap" *ngFor="let outcome of gradeInfo!.outcomes">
-                        <ion-label>
-                            <h2>{{ outcome.name }}</h2>
-                        </ion-label>
-                        <ion-select *ngIf="canSaveGrades && outcome.itemNumber" [(ngModel)]="outcome.selectedId" interface="action-sheet"
-                            [disabled]="gradeInfo!.disabled" [interfaceOptions]="{header: outcome.name }">
-                            <ion-select-option *ngFor="let grade of outcome.options" [value]="grade.value">
-                                {{grade.label}}
-                            </ion-select-option>
-                        </ion-select>
-                        <p *ngIf="!canSaveGrades || !outcome.itemNumber">{{ outcome.selected }}</p>
-                    </ion-item>
-
-                    <!-- Gradebook grade for simple grading. -->
-                    <ion-item class="ion-text-wrap" *ngIf="grade.method == 'simple'">
-                        <ion-label>
-                            <h2>{{ 'addon.mod_assign.currentgrade' | translate }}</h2>
-                            <p *ngIf="grade.gradebookGrade && !grade.scale">
-                                {{ grade.gradebookGrade }}
-                            </p>
-                            <p *ngIf="grade.gradebookGrade && grade.scale">
-                                {{ grade.scale[grade.gradebookGrade].label }}
-                            </p>
-                            <p *ngIf="!grade.gradebookGrade">-</p>
+                            <h2>{{ 'addon.mod_assign.duedate' | translate }}</h2>
+                            <p *ngIf="assign!.duedate">{{ assign!.duedate * 1000 | coreFormatDate }}</p>
+                            <p *ngIf="!assign!.duedate">{{ 'addon.mod_assign.duedateno' | translate }}</p>
                         </ion-label>
                     </ion-item>
-                </ng-container>
 
-                <ng-container *ngIf="feedback">
-                    <addon-mod-assign-feedback-plugin *ngFor="let plugin of feedback.plugins" [assign]="assign"
-                        [submission]="userSubmission" [userId]="submitId" [plugin]="plugin" [canEdit]="canSaveGrades">
-                    </addon-mod-assign-feedback-plugin>
-                </ng-container>
-
-                <!-- Workflow status. -->
-                <ion-item class="ion-text-wrap" *ngIf="workflowStatusTranslationId">
-                    <ion-label>
-                        <h2>{{ 'addon.mod_assign.markingworkflowstate' | translate }}</h2>
-                        <p>{{ workflowStatusTranslationId | translate }}</p>
-                    </ion-label>
-                </ion-item>
-
-                <!--- Apply grade to all team members. -->
-                <ion-item class="ion-text-wrap" *ngIf="assign!.teamsubmission && canSaveGrades">
-                    <ion-label>
-                        <h2>{{ 'addon.mod_assign.groupsubmissionsettings' | translate }}</h2>
-                        <p>{{ 'addon.mod_assign.applytoteam' | translate }}</p>
-                    </ion-label>
-                    <ion-toggle [(ngModel)]="grade.applyToAll"></ion-toggle>
-                </ion-item>
-
-                <!-- Attempt status. -->
-                <ng-container *ngIf="isGrading && assign!.attemptreopenmethod != attemptReopenMethodNone">
-                    <ion-item class="ion-text-wrap">
+                    <ion-item class="ion-text-wrap" *ngIf="assign!.duedate && assign!.cutoffdate && isSubmittedForGrading">
                         <ion-label>
-                            <h2>{{ 'addon.mod_assign.attemptsettings' | translate }}</h2>
+                            <h2>{{ 'addon.mod_assign.cutoffdate' | translate }}</h2>
+                            <p>{{ assign!.cutoffdate * 1000 | coreFormatDate }}</p>
+                        </ion-label>
+                    </ion-item>
+
+                    <ion-item class="ion-text-wrap" *ngIf="assign!.duedate && lastAttempt?.extensionduedate && !isSubmittedForGrading">
+                        <ion-label>
+                            <h2>{{ 'addon.mod_assign.extensionduedate' | translate }}</h2>
+                            <p>{{ lastAttempt!.extensionduedate * 1000 | coreFormatDate }}</p>
+                        </ion-label>
+                    </ion-item>
+
+                    <ion-item class="ion-text-wrap" *ngIf="currentAttempt && !isGrading">
+                        <ion-label>
+                            <h2>{{ 'addon.mod_assign.attemptnumber' | translate }}</h2>
                             <p *ngIf="assign!.maxattempts == unlimitedAttempts">
                                 {{ 'addon.mod_assign.outof' | translate :
                                 {'$a': {'current': currentAttempt, 'total': maxAttemptsText} } }}
@@ -319,53 +95,279 @@
                                 {{ 'addon.mod_assign.outof' | translate :
                                 {'$a': {'current': currentAttempt, 'total': assign!.maxattempts} } }}
                             </p>
+                        </ion-label>
+                    </ion-item>
+
+                    <!-- Add or edit submission. -->
+                    <ion-item class="ion-text-wrap" *ngIf="canEdit">
+                        <ion-label>
+                            <div *ngIf="!unsupportedEditPlugins.length && !showErrorStatementEdit">
+                                <!-- If has offline data, show edit. -->
+                                <ion-button expand="block" class="ion-text-wrap" *ngIf="hasOffline" (click)="goToEdit()">
+                                    {{ 'addon.mod_assign.editsubmission' | translate }}
+                                </ion-button>
+                                <!-- If no submission or is new, show add submission. -->
+                                <ion-button expand="block" class="ion-text-wrap" (click)="goToEdit()" *ngIf="!hasOffline &&
+                                    (!userSubmission || !userSubmission!.status || userSubmission!.status == statusNew)">
+                                    {{ 'addon.mod_assign.addsubmission' | translate }}
+                                </ion-button>
+                                <!-- If reopened, show addfromprevious and addnewattempt. -->
+                                <ng-container *ngIf="!hasOffline && userSubmission?.status == statusReopened">
+                                    <ion-button *ngIf="!isPreviousAttemptEmpty" expand="block" class="ion-text-wrap"
+                                        (click)="copyPrevious()">
+                                        {{ 'addon.mod_assign.addnewattemptfromprevious' | translate }}
+                                    </ion-button>
+                                    <ion-button expand="block" class="ion-text-wrap" (click)="goToEdit()">
+                                        {{ 'addon.mod_assign.addnewattempt' | translate }}
+                                    </ion-button>
+                                </ng-container>
+                                <!-- Else show editsubmission. -->
+                                <ion-button expand="block" class="ion-text-wrap" *ngIf="!hasOffline &&
+                                    userSubmission && userSubmission!.status &&
+                                    userSubmission!.status != statusNew &&
+                                    userSubmission!.status != statusReopened" (click)="goToEdit()">
+                                    {{ 'addon.mod_assign.editsubmission' | translate }}
+                                </ion-button>
+                            </div>
+                            <div *ngIf="unsupportedEditPlugins && unsupportedEditPlugins.length && !showErrorStatementEdit">
+                                <p class="core-danger-item">{{ 'addon.mod_assign.erroreditpluginsnotsupported' | translate }}</p>
+                                <p class="core-danger-item" *ngFor="let name of unsupportedEditPlugins">{{ name }}</p>
+                            </div>
+                            <div *ngIf="showErrorStatementEdit">
+                                <p class="core-danger-item">{{ 'addon.mod_assign.cannoteditduetostatementsubmission' | translate }}</p>
+                            </div>
+                        </ion-label>
+                    </ion-item>
+
+                    <!-- Submit for grading form. -->
+                    <ng-container *ngIf="canSubmit">
+                        <ion-item class="ion-text-wrap" *ngIf="submissionStatement">
+                            <ion-label>
+                                <core-format-text [text]="submissionStatement" [filter]="false"></core-format-text>
+                            </ion-label>
+                            <ion-checkbox slot="end" name="submissionstatement" [(ngModel)]="acceptStatement">
+                            </ion-checkbox>
+                        </ion-item>
+                        <!-- Submit button. -->
+                        <ion-item class="ion-text-wrap" *ngIf="!showErrorStatementSubmit">
+                            <ion-label>
+                                <ion-button expand="block" class="ion-text-wrap" (click)="submitForGrading(acceptStatement)">
+                                    {{ 'addon.mod_assign.submitassignment' | translate }}
+                                </ion-button>
+                                <p>{{ 'addon.mod_assign.submitassignment_help' | translate }}</p>
+                            </ion-label>
+                        </ion-item>
+                        <!-- Error because we lack submissions statement. -->
+                        <ion-item class="ion-text-wrap" *ngIf="showErrorStatementSubmit">
+                            <ion-label>
+                                <p class="core-danger-item">
+                                    {{ 'addon.mod_assign.cannotsubmitduetostatementsubmission' | translate }}
+                                </p>
+                            </ion-label>
+                        </ion-item>
+                    </ng-container>
+
+                    <!-- Team members that need to submit it too. -->
+                    <ion-item-divider class="ion-text-wrap" *ngIf="membersToSubmit && membersToSubmit.length > 0">
+                        <ion-label>
+                            <h2>{{ 'addon.mod_assign.userswhoneedtosubmit' | translate: {$a: ''} }}</h2>
+                        </ion-label>
+                    </ion-item-divider>
+                    <ng-container *ngIf="membersToSubmit && membersToSubmit.length > 0 && !blindMarking">
+                        <ng-container *ngFor="let user of membersToSubmit">
+                            <ion-item class="ion-text-wrap" core-user-link [userId]="user.id" [courseId]="courseId"
+                                [attr.aria-label]="user.fullname">
+                                <core-user-avatar [user]="user" slot="start" [linkProfile]="false"></core-user-avatar>
+                                <ion-label>
+                                    <h2>{{ user.fullname }}</h2>
+                                </ion-label>
+                            </ion-item>
+                        </ng-container>
+                    </ng-container>
+                    <ng-container *ngIf="membersToSubmit && membersToSubmit.length > 0 && blindMarking">
+                        <ng-container *ngFor="let blindId of membersToSubmitBlind">
+                            <ion-item class="ion-text-wrap">
+                                <ion-label>{{ 'addon.mod_assign.hiddenuser' | translate }} {{ blindId }}</ion-label>
+                            </ion-item>
+                        </ng-container>
+                    </ng-container>
+
+                    <!-- Submission is locked. -->
+                    <ion-item class="ion-text-wrap" *ngIf="lastAttempt?.locked">
+                        <ion-label>
+                            <h2>{{ 'addon.mod_assign.submissionslocked' | translate }}</h2>
+                        </ion-label>
+                    </ion-item>
+
+                    <!-- Editing status. -->
+                    <ion-item class="ion-text-wrap" *ngIf="lastAttempt && isSubmittedForGrading && lastAttempt!.caneditowner !== undefined"
+                        [ngClass]="{submissioneditable: lastAttempt!.caneditowner, submissionnoteditable: !lastAttempt!.caneditowner}">
+                        <ion-label>
+                            <h2>{{ 'addon.mod_assign.editingstatus' | translate }}</h2>
+                            <p *ngIf="lastAttempt!.caneditowner">{{ 'addon.mod_assign.submissioneditable' | translate }}</p>
+                            <p *ngIf="!lastAttempt!.caneditowner">{{ 'addon.mod_assign.submissionnoteditable' | translate }}</p>
+                        </ion-label>
+                    </ion-item>
+                </ng-template>
+            </core-tab>
+
+            <!-- Grade the submission tab. -->
+            <core-tab [title]="'addon.mod_assign.grade' | translate" *ngIf="feedback || isGrading" id="grade">
+                <ng-template>
+                    <!-- Current grade if method is advanced. -->
+                    <ion-item class="ion-text-wrap core-grading-summary"
+                        *ngIf="feedback?.gradefordisplay && (!isGrading || grade.method != 'simple')">
+                        <ion-label>
+                            <h2>{{ 'addon.mod_assign.currentgrade' | translate }}</h2>
                             <p>
-                                {{ 'addon.mod_assign.attemptreopenmethod' | translate }}:
-                                {{ 'addon.mod_assign.attemptreopenmethod_' + assign!.attemptreopenmethod | translate }}
+                                <core-format-text [text]="feedback!.gradefordisplay" [filter]="false"></core-format-text>
                             </p>
                         </ion-label>
+                        <ion-button slot="end" *ngIf="feedback!.advancedgrade" (click)="showAdvancedGrade()"
+                            [attr.aria-label]="'core.showadvanced' |translate">
+                            <ion-icon name="fas-search" slot="icon-only" aria-hidden="true"></ion-icon>
+                        </ion-button>
                     </ion-item>
-                    <ion-item *ngIf="canSaveGrades && allowAddAttempt">
-                        <ion-label>{{ 'addon.mod_assign.addattempt' | translate }}</ion-label>
-                        <ion-toggle [(ngModel)]="grade.addAttempt"></ion-toggle>
-                    </ion-item>
-                </ng-container>
 
-                <!-- Data about the grader (teacher who graded). -->
-                <ion-item class="ion-text-wrap" *ngIf="grader" core-user-link [userId]="grader!.id" [courseId]="courseId"
-                    [attr.aria-label]="grader!.fullname" detail="true">
-                    <core-user-avatar [user]="grader" slot="start" [linkProfile]="false"></core-user-avatar>
-                    <ion-label>
-                        <h2>{{ 'addon.mod_assign.gradedby' | translate }}</h2>
-                        <h2>{{ grader!.fullname }}</h2>
-                        <p *ngIf="feedback!.gradeddate">{{ feedback!.gradeddate * 1000 | coreFormatDate }}</p>
-                    </ion-label>
-                </ion-item>
+                    <ng-container *ngIf="isGrading">
+                        <!-- Numeric grade.
+                        Use a text input because otherwise we cannot readthe value if it has an invalid character. -->
+                        <ion-item class="ion-text-wrap" *ngIf="grade.method == 'simple' && !grade.scale">
+                            <ion-label position="stacked">
+                                <h2>{{ 'addon.mod_assign.gradeoutof' | translate: {$a: gradeInfo!.grade} }}</h2>
+                            </ion-label>
+                            <ion-input *ngIf="!grade.disabled" type="text" [(ngModel)]="grade.grade" min="0" [max]="gradeInfo!.grade"
+                                [lang]="grade.lang">
+                            </ion-input>
+                            <p *ngIf="grade.disabled">{{ 'addon.mod_assign.gradelocked' | translate }}</p>
+                        </ion-item>
 
-                <!-- Grader is hidden, display only the grade date. -->
-                <ion-item class="ion-text-wrap" *ngIf="!grader && feedback?.gradeddate">
-                    <ion-label>
-                        <h2>{{ 'addon.mod_assign.gradedon' | translate }}</h2>
-                        <p>{{ feedback!.gradeddate * 1000 | coreFormatDate }}</p>
-                    </ion-label>
-                </ion-item>
+                        <!-- Grade using a scale. -->
+                        <ion-item class="ion-text-wrap" *ngIf="grade.method == 'simple' && grade.scale">
+                            <ion-label>
+                                <h2>{{ 'addon.mod_assign.grade' | translate }}</h2>
+                            </ion-label>
+                            <ion-select [(ngModel)]="grade.grade" interface="action-sheet" [disabled]="grade.disabled"
+                                [interfaceOptions]="{header: 'addon.mod_assign.grade' | translate}">
+                                <ion-select-option *ngFor="let grade of grade.scale" [value]="grade.value">
+                                    {{grade.label}}
+                                </ion-select-option>
+                            </ion-select>
+                        </ion-item>
 
-                <!-- Warning message if cannot save grades. -->
-                <ion-card *ngIf="isGrading && !canSaveGrades" class="core-warning-card">
-                    <ion-item>
-                        <ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
+                        <!-- Outcomes. -->
+                        <ion-item class="ion-text-wrap" *ngFor="let outcome of gradeInfo!.outcomes">
+                            <ion-label>
+                                <h2>{{ outcome.name }}</h2>
+                            </ion-label>
+                            <ion-select *ngIf="canSaveGrades && outcome.itemNumber" [(ngModel)]="outcome.selectedId"
+                                interface="action-sheet" [disabled]="gradeInfo!.disabled" [interfaceOptions]="{header: outcome.name }">
+                                <ion-select-option *ngFor="let grade of outcome.options" [value]="grade.value">
+                                    {{grade.label}}
+                                </ion-select-option>
+                            </ion-select>
+                            <p *ngIf="!canSaveGrades || !outcome.itemNumber">{{ outcome.selected }}</p>
+                        </ion-item>
+
+                        <!-- Gradebook grade for simple grading. -->
+                        <ion-item class="ion-text-wrap" *ngIf="grade.method == 'simple'">
+                            <ion-label>
+                                <h2>{{ 'addon.mod_assign.currentgrade' | translate }}</h2>
+                                <p *ngIf="grade.gradebookGrade && !grade.scale">
+                                    {{ grade.gradebookGrade }}
+                                </p>
+                                <p *ngIf="grade.gradebookGrade && grade.scale">
+                                    {{ grade.scale[grade.gradebookGrade].label }}
+                                </p>
+                                <p *ngIf="!grade.gradebookGrade">-</p>
+                            </ion-label>
+                        </ion-item>
+                    </ng-container>
+
+                    <ng-container *ngIf="feedback">
+                        <addon-mod-assign-feedback-plugin *ngFor="let plugin of feedback.plugins" [assign]="assign"
+                            [submission]="userSubmission" [userId]="submitId" [plugin]="plugin" [canEdit]="canSaveGrades">
+                        </addon-mod-assign-feedback-plugin>
+                    </ng-container>
+
+                    <!-- Workflow status. -->
+                    <ion-item class="ion-text-wrap" *ngIf="workflowStatusTranslationId">
                         <ion-label>
-                            <p>{{ 'addon.mod_assign.cannotgradefromapp' | translate }}</p>
-                            <ion-button expand="block" *ngIf="gradeUrl" [href]="gradeUrl" core-link [showBrowserWarning]="false">
-                                {{ 'core.openinbrowser' | translate }}
-                                <ion-icon name="fas-external-link-alt" slot="end" aria-hidden="true"></ion-icon>
-                            </ion-button>
+                            <h2>{{ 'addon.mod_assign.markingworkflowstate' | translate }}</h2>
+                            <p>{{ workflowStatusTranslationId | translate }}</p>
                         </ion-label>
                     </ion-item>
-                </ion-card>
-            </ng-template>
-        </core-tab>
-    </core-tabs>
+
+                    <!--- Apply grade to all team members. -->
+                    <ion-item class="ion-text-wrap" *ngIf="assign!.teamsubmission && canSaveGrades">
+                        <ion-label>
+                            <h2>{{ 'addon.mod_assign.groupsubmissionsettings' | translate }}</h2>
+                            <p>{{ 'addon.mod_assign.applytoteam' | translate }}</p>
+                        </ion-label>
+                        <ion-toggle [(ngModel)]="grade.applyToAll"></ion-toggle>
+                    </ion-item>
+
+                    <!-- Attempt status. -->
+                    <ng-container *ngIf="isGrading && assign!.attemptreopenmethod != attemptReopenMethodNone">
+                        <ion-item class="ion-text-wrap">
+                            <ion-label>
+                                <h2>{{ 'addon.mod_assign.attemptsettings' | translate }}</h2>
+                                <p *ngIf="assign!.maxattempts == unlimitedAttempts">
+                                    {{ 'addon.mod_assign.outof' | translate :
+                                    {'$a': {'current': currentAttempt, 'total': maxAttemptsText} } }}
+                                </p>
+                                <p *ngIf="assign!.maxattempts != unlimitedAttempts">
+                                    {{ 'addon.mod_assign.outof' | translate :
+                                    {'$a': {'current': currentAttempt, 'total': assign!.maxattempts} } }}
+                                </p>
+                                <p>
+                                    {{ 'addon.mod_assign.attemptreopenmethod' | translate }}:
+                                    {{ 'addon.mod_assign.attemptreopenmethod_' + assign!.attemptreopenmethod | translate }}
+                                </p>
+                            </ion-label>
+                        </ion-item>
+                        <ion-item *ngIf="canSaveGrades && allowAddAttempt">
+                            <ion-label>{{ 'addon.mod_assign.addattempt' | translate }}</ion-label>
+                            <ion-toggle [(ngModel)]="grade.addAttempt"></ion-toggle>
+                        </ion-item>
+                    </ng-container>
+
+                    <!-- Data about the grader (teacher who graded). -->
+                    <ion-item class="ion-text-wrap" *ngIf="grader" core-user-link [userId]="grader!.id" [courseId]="courseId"
+                        [attr.aria-label]="grader!.fullname" detail="true">
+                        <core-user-avatar [user]="grader" slot="start" [linkProfile]="false"></core-user-avatar>
+                        <ion-label>
+                            <h2>{{ 'addon.mod_assign.gradedby' | translate }}</h2>
+                            <h2>{{ grader!.fullname }}</h2>
+                            <p *ngIf="feedback!.gradeddate">{{ feedback!.gradeddate * 1000 | coreFormatDate }}</p>
+                        </ion-label>
+                    </ion-item>
+
+                    <!-- Grader is hidden, display only the grade date. -->
+                    <ion-item class="ion-text-wrap" *ngIf="!grader && feedback?.gradeddate">
+                        <ion-label>
+                            <h2>{{ 'addon.mod_assign.gradedon' | translate }}</h2>
+                            <p>{{ feedback!.gradeddate * 1000 | coreFormatDate }}</p>
+                        </ion-label>
+                    </ion-item>
+
+                    <!-- Warning message if cannot save grades. -->
+                    <ion-card *ngIf="isGrading && !canSaveGrades" class="core-warning-card">
+                        <ion-item>
+                            <ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
+                            <ion-label>
+                                <p>{{ 'addon.mod_assign.cannotgradefromapp' | translate }}</p>
+                                <ion-button expand="block" *ngIf="gradeUrl" [href]="gradeUrl" core-link [showBrowserWarning]="false">
+                                    {{ 'core.openinbrowser' | translate }}
+                                    <ion-icon name="fas-external-link-alt" slot="end" aria-hidden="true"></ion-icon>
+                                </ion-button>
+                            </ion-label>
+                        </ion-item>
+                    </ion-card>
+                </ng-template>
+            </core-tab>
+        </core-tabs>
+    </div>
 </core-loading>
 
 <!-- Template to render some data regarding the submission status. -->
diff --git a/src/addons/mod/assign/pages/index/index.html b/src/addons/mod/assign/pages/index/index.html
index 71f69b398..2d3f9be93 100644
--- a/src/addons/mod/assign/pages/index/index.html
+++ b/src/addons/mod/assign/pages/index/index.html
@@ -15,7 +15,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
diff --git a/src/addons/mod/bigbluebuttonbn/components/index/index.html b/src/addons/mod/bigbluebuttonbn/components/index/index.html
index f3047f77a..8003d0166 100644
--- a/src/addons/mod/bigbluebuttonbn/components/index/index.html
+++ b/src/addons/mod/bigbluebuttonbn/components/index/index.html
@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="safe-area-page list-item-limited-width">
+<core-loading [hideUntil]="!showLoading">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
diff --git a/src/addons/mod/bigbluebuttonbn/pages/index/index.html b/src/addons/mod/bigbluebuttonbn/pages/index/index.html
index f6e0e524e..273ff5994 100644
--- a/src/addons/mod/bigbluebuttonbn/pages/index/index.html
+++ b/src/addons/mod/bigbluebuttonbn/pages/index/index.html
@@ -14,7 +14,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
diff --git a/src/addons/mod/book/components/index/addon-mod-book-index.html b/src/addons/mod/book/components/index/addon-mod-book-index.html
index 4727f8e6c..380582d58 100644
--- a/src/addons/mod/book/components/index/addon-mod-book-index.html
+++ b/src/addons/mod/book/components/index/addon-mod-book-index.html
@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">
+<core-loading [hideUntil]="!showLoading">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
diff --git a/src/addons/mod/book/pages/contents/contents.scss b/src/addons/mod/book/pages/contents/contents.scss
index 823126ed0..87e3729a3 100644
--- a/src/addons/mod/book/pages/contents/contents.scss
+++ b/src/addons/mod/book/pages/contents/contents.scss
@@ -1,10 +1,4 @@
 :host {
-    core-loading ::ng-deep .core-loading-content {
-        min-height: 100%;
-        display: flex;
-        flex-direction: column;
-    }
-
     .core-swipe-slides-container {
         ion-card {
             flex: none;
diff --git a/src/addons/mod/book/pages/index/index.html b/src/addons/mod/book/pages/index/index.html
index fb3db333b..5e55e1db3 100644
--- a/src/addons/mod/book/pages/index/index.html
+++ b/src/addons/mod/book/pages/index/index.html
@@ -14,7 +14,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
diff --git a/src/addons/mod/chat/components/index/addon-mod-chat-index.html b/src/addons/mod/chat/components/index/addon-mod-chat-index.html
index e9c2590d3..6e928b3fe 100644
--- a/src/addons/mod/chat/components/index/addon-mod-chat-index.html
+++ b/src/addons/mod/chat/components/index/addon-mod-chat-index.html
@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="safe-area-padding list-item-limited-width">
+<core-loading [hideUntil]="!showLoading">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
diff --git a/src/addons/mod/chat/pages/chat/chat.html b/src/addons/mod/chat/pages/chat/chat.html
index 92e022753..cc3112b5b 100644
--- a/src/addons/mod/chat/pages/chat/chat.html
+++ b/src/addons/mod/chat/pages/chat/chat.html
@@ -16,8 +16,8 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content class="has-footer">
-    <core-loading [hideUntil]="loaded" class="safe-area-padding">
+<ion-content>
+    <core-loading [hideUntil]="loaded">
         <ion-list class="addon-messages-discussion-container" aria-live="polite">
             <ng-container *ngFor="let message of messages; index as index; last as last">
 
diff --git a/src/addons/mod/chat/pages/index/index.html b/src/addons/mod/chat/pages/index/index.html
index bc5f254eb..5f2cec7ce 100644
--- a/src/addons/mod/chat/pages/index/index.html
+++ b/src/addons/mod/chat/pages/index/index.html
@@ -14,7 +14,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
diff --git a/src/addons/mod/chat/pages/session-messages/session-messages.html b/src/addons/mod/chat/pages/session-messages/session-messages.html
index 501e76cf8..9e18962a8 100644
--- a/src/addons/mod/chat/pages/session-messages/session-messages.html
+++ b/src/addons/mod/chat/pages/session-messages/session-messages.html
@@ -12,7 +12,7 @@
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshMessages($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="loaded" class="safe-area-padding">
+    <core-loading [hideUntil]="loaded">
         <ion-list class="addon-messages-discussion-container">
             <ng-container *ngFor="let message of messages; index as index;">
 
diff --git a/src/addons/mod/choice/components/index/addon-mod-choice-index.html b/src/addons/mod/choice/components/index/addon-mod-choice-index.html
index cc554ee45..19cea320a 100644
--- a/src/addons/mod/choice/components/index/addon-mod-choice-index.html
+++ b/src/addons/mod/choice/components/index/addon-mod-choice-index.html
@@ -7,66 +7,63 @@
 
 <!-- Content. -->
 <core-loading [hideUntil]="!showLoading">
-    <div class="list-item-limited-width">
-        <!-- Activity info. -->
-        <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
-            [courseId]="courseId" [hasDataToSync]="hasOffline" (completionChanged)="onCompletionChange()">
-        </core-course-module-info>
+    <!-- Activity info. -->
+    <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
+        [courseId]="courseId" [hasDataToSync]="hasOffline" (completionChanged)="onCompletionChange()">
+    </core-course-module-info>
 
-        <!-- Activity availability messages -->
-        <ion-card class="core-info-card" *ngIf="choiceNotOpenYet">
-            <ion-item>
-                <ion-icon name="fas-info-circle" slot="start" aria-hidden="true"></ion-icon>
+    <!-- Activity availability messages -->
+    <ion-card class="core-info-card" *ngIf="choiceNotOpenYet">
+        <ion-item>
+            <ion-icon name="fas-info-circle" slot="start" aria-hidden="true"></ion-icon>
+            <ion-label>
+                <p *ngIf="options.length">{{ 'addon.mod_choice.previewonly' | translate:{$a: openTimeReadable} }}</p>
+                <p *ngIf="!options.length">{{ 'addon.mod_choice.notopenyet' | translate:{$a: openTimeReadable} }}</p>
+            </ion-label>
+        </ion-item>
+    </ion-card>
+
+    <ion-card class="core-info-card" *ngIf="choiceClosed">
+        <ion-item>
+            <ion-icon name="fas-info-circle" slot="start" aria-hidden="true"></ion-icon>
+            <ion-label>
+                <p *ngIf="options.length">
+                    {{ 'addon.mod_choice.yourselection' | translate }}
+                    <core-format-text [text]="options[0].text" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
+                    </core-format-text>
+                </p>
+                <p>{{ 'addon.mod_choice.expired' | translate:{$a: closeTimeReadable} }}</p>
+            </ion-label>
+        </ion-item>
+    </ion-card>
+
+    <!-- Inform what will happen with the choices. -->
+    <ion-card class="core-info-card" *ngIf="canEdit && publishInfo && options.length">
+        <ion-item>
+            <ion-icon name="fas-info-circle" slot="start" aria-hidden="true"></ion-icon>
+            <ion-label>{{ publishInfo | translate }}</ion-label>
+        </ion-item>
+    </ion-card>
+
+    <!-- Choice options -->
+    <ion-card *ngIf="options.length && choice">
+        <ng-container *ngIf="choice.allowmultiple">
+            <ion-item class="ion-text-wrap" *ngFor="let option of options">
                 <ion-label>
-                    <p *ngIf="options.length">{{ 'addon.mod_choice.previewonly' | translate:{$a: openTimeReadable} }}</p>
-                    <p *ngIf="!options.length">{{ 'addon.mod_choice.notopenyet' | translate:{$a: openTimeReadable} }}</p>
+                    <ng-container *ngTemplateOutlet="optionLabelTemplate; context: {option: option}"></ng-container>
                 </ion-label>
+                <ion-checkbox slot="end" [(ngModel)]="option.checked" [disabled]="option.disabled || !canEdit"></ion-checkbox>
             </ion-item>
-        </ion-card>
-
-        <ion-card class="core-info-card" *ngIf="choiceClosed">
-            <ion-item>
-                <ion-icon name="fas-info-circle" slot="start" aria-hidden="true"></ion-icon>
+        </ng-container>
+        <ion-radio-group *ngIf="!choice.allowmultiple" [(ngModel)]="selectedOption.id">
+            <ion-item class="ion-text-wrap" *ngFor="let option of options">
                 <ion-label>
-                    <p *ngIf="options.length">
-                        {{ 'addon.mod_choice.yourselection' | translate }}
-                        <core-format-text [text]="options[0].text" contextLevel="module" [contextInstanceId]="module.id"
-                            [courseId]="courseId">
-                        </core-format-text>
-                    </p>
-                    <p>{{ 'addon.mod_choice.expired' | translate:{$a: closeTimeReadable} }}</p>
+                    <ng-container *ngTemplateOutlet="optionLabelTemplate; context: {option: option}"></ng-container>
                 </ion-label>
+                <ion-radio slot="end" [value]="option.id" [disabled]="option.disabled || !canEdit"></ion-radio>
             </ion-item>
-        </ion-card>
-
-        <!-- Inform what will happen with the choices. -->
-        <ion-card class="core-info-card" *ngIf="canEdit && publishInfo && options.length">
-            <ion-item>
-                <ion-icon name="fas-info-circle" slot="start" aria-hidden="true"></ion-icon>
-                <ion-label>{{ publishInfo | translate }}</ion-label>
-            </ion-item>
-        </ion-card>
-
-        <!-- Choice options -->
-        <ion-card *ngIf="options.length && choice">
-            <ng-container *ngIf="choice.allowmultiple">
-                <ion-item class="ion-text-wrap" *ngFor="let option of options">
-                    <ion-label>
-                        <ng-container *ngTemplateOutlet="optionLabelTemplate; context: {option: option}"></ng-container>
-                    </ion-label>
-                    <ion-checkbox slot="end" [(ngModel)]="option.checked" [disabled]="option.disabled || !canEdit"></ion-checkbox>
-                </ion-item>
-            </ng-container>
-            <ion-radio-group *ngIf="!choice.allowmultiple" [(ngModel)]="selectedOption.id">
-                <ion-item class="ion-text-wrap" *ngFor="let option of options">
-                    <ion-label>
-                        <ng-container *ngTemplateOutlet="optionLabelTemplate; context: {option: option}"></ng-container>
-                    </ion-label>
-                    <ion-radio slot="end" [value]="option.id" [disabled]="option.disabled || !canEdit"></ion-radio>
-                </ion-item>
-            </ion-radio-group>
-        </ion-card>
-    </div>
+        </ion-radio-group>
+    </ion-card>
     <!-- Choice results -->
     <div *ngIf="canSeeResults && choice">
         <ion-item-divider>
diff --git a/src/addons/mod/choice/pages/index/index.html b/src/addons/mod/choice/pages/index/index.html
index b5a04c2a6..82d3899af 100644
--- a/src/addons/mod/choice/pages/index/index.html
+++ b/src/addons/mod/choice/pages/index/index.html
@@ -14,7 +14,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
diff --git a/src/addons/mod/data/components/index/addon-mod-data-index.html b/src/addons/mod/data/components/index/addon-mod-data-index.html
index d8eef7e45..6a6b4724f 100644
--- a/src/addons/mod/data/components/index/addon-mod-data-index.html
+++ b/src/addons/mod/data/components/index/addon-mod-data-index.html
@@ -18,7 +18,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">
+<core-loading [hideUntil]="!showLoading">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
diff --git a/src/addons/mod/data/pages/entry/entry.html b/src/addons/mod/data/pages/entry/entry.html
index 72c1598a7..a7be272a4 100644
--- a/src/addons/mod/data/pages/entry/entry.html
+++ b/src/addons/mod/data/pages/entry/entry.html
@@ -11,13 +11,12 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!entryLoaded || !(isPullingToRefresh || !renderingEntry && !loadingRating && !loadingComments)"
         (ionRefresh)="refreshDatabase($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="entryLoaded && (isPullingToRefresh || !renderingEntry && !loadingRating && !loadingComments)"
-        class="list-item-limited-width">
+    <core-loading [hideUntil]="entryLoaded && (isPullingToRefresh || !renderingEntry && !loadingRating && !loadingComments)">
         <!-- Database entries found to be synchronized -->
         <ion-card class="core-warning-card" *ngIf="entry && entry.hasOffline">
             <ion-item>
diff --git a/src/addons/mod/data/pages/index/index.html b/src/addons/mod/data/pages/index/index.html
index ff9ed701e..4d0cd6995 100644
--- a/src/addons/mod/data/pages/index/index.html
+++ b/src/addons/mod/data/pages/index/index.html
@@ -15,7 +15,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
diff --git a/src/addons/mod/feedback/components/index/addon-mod-feedback-index.html b/src/addons/mod/feedback/components/index/addon-mod-feedback-index.html
index 38fab03e8..8a72abe19 100644
--- a/src/addons/mod/feedback/components/index/addon-mod-feedback-index.html
+++ b/src/addons/mod/feedback/components/index/addon-mod-feedback-index.html
@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">
+<core-loading [hideUntil]="!showLoading">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
diff --git a/src/addons/mod/feedback/pages/form/form.html b/src/addons/mod/feedback/pages/form/form.html
index 597335624..6ca2f58d8 100644
--- a/src/addons/mod/feedback/pages/form/form.html
+++ b/src/addons/mod/feedback/pages/form/form.html
@@ -11,8 +11,8 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content>
-    <core-loading [hideUntil]="feedbackLoaded" class="has-spacer list-item-limited-width">
+<ion-content class="limited-width">
+    <core-loading [hideUntil]="feedbackLoaded" class="has-spacer">
         <ng-container *ngIf="items && items.length">
             <ion-list class="ion-no-margin has-spacer">
                 <ion-item class="ion-text-wrap">
diff --git a/src/addons/mod/feedback/pages/index/index.html b/src/addons/mod/feedback/pages/index/index.html
index 6996000e4..091b40c1c 100644
--- a/src/addons/mod/feedback/pages/index/index.html
+++ b/src/addons/mod/feedback/pages/index/index.html
@@ -14,7 +14,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
diff --git a/src/addons/mod/folder/components/index/addon-mod-folder-index.html b/src/addons/mod/folder/components/index/addon-mod-folder-index.html
index d9e0cf63d..eea0df71e 100644
--- a/src/addons/mod/folder/components/index/addon-mod-folder-index.html
+++ b/src/addons/mod/folder/components/index/addon-mod-folder-index.html
@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">
+<core-loading [hideUntil]="!showLoading">
 
     <!-- Activity info. -->
     <core-course-module-info *ngIf="!subfolder" [module]="module" [description]="description" [component]="component"
diff --git a/src/addons/mod/folder/pages/index/index.html b/src/addons/mod/folder/pages/index/index.html
index b83a186f5..66812df13 100644
--- a/src/addons/mod/folder/pages/index/index.html
+++ b/src/addons/mod/folder/pages/index/index.html
@@ -15,7 +15,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="subfolder || activityComponent?.showLoading"
         (ionRefresh)="activityComponent?.doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
diff --git a/src/addons/mod/forum/components/post-options-menu/post-options-menu.scss b/src/addons/mod/forum/components/post-options-menu/post-options-menu.scss
index 4ef3e574f..c09597ff5 100644
--- a/src/addons/mod/forum/components/post-options-menu/post-options-menu.scss
+++ b/src/addons/mod/forum/components/post-options-menu/post-options-menu.scss
@@ -1,11 +1,4 @@
-:host {
-    core-loading:not(.core-loading-loaded) > .core-loading-container {
-        position: relative !important;
-        padding-top: 10px !important;
-        padding-bottom: 10px !important;
-        overflow: hidden;
-    }
-    core-loading > .core-loading-container .core-loading-message {
-        display: none;
-    }
+core-loading {
+    --loading-inline-min-height: 48px;
+    --loading-display-message: none;
 }
diff --git a/src/addons/mod/forum/pages/discussion/discussion.html b/src/addons/mod/forum/pages/discussion/discussion.html
index 37157efb5..542fefeda 100644
--- a/src/addons/mod/forum/pages/discussion/discussion.html
+++ b/src/addons/mod/forum/pages/discussion/discussion.html
@@ -55,12 +55,12 @@
         </core-context-menu-item>
     </core-context-menu>
 </core-navbar-buttons>
-<ion-content [core-swipe-navigation]="discussions">
+<ion-content [core-swipe-navigation]="discussions" class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!discussionLoaded" (ionRefresh)="doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
 
-    <core-loading [hideUntil]="discussionLoaded" class="list-item-limited-width">
+    <core-loading [hideUntil]="discussionLoaded">
         <!-- Discussion replies found to be synchronized -->
         <ion-card class="core-warning-card" *ngIf="postHasOffline || hasOfflineRatings">
             <ion-item>
diff --git a/src/addons/mod/glossary/pages/entry/entry.html b/src/addons/mod/glossary/pages/entry/entry.html
index 3965b0f64..ee112af6e 100644
--- a/src/addons/mod/glossary/pages/entry/entry.html
+++ b/src/addons/mod/glossary/pages/entry/entry.html
@@ -11,12 +11,12 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content [core-swipe-navigation]="entries">
+<ion-content [core-swipe-navigation]="entries" class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
 
-    <core-loading [hideUntil]="loaded" class="list-item-limited-width">
+    <core-loading [hideUntil]="loaded">
         <ng-container *ngIf="entry && loaded">
             <ion-item class="ion-text-wrap" *ngIf="showAuthor">
                 <core-user-avatar [user]="entry" slot="start"></core-user-avatar>
diff --git a/src/addons/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html b/src/addons/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html
index f12d47baf..41245df1a 100644
--- a/src/addons/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html
+++ b/src/addons/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html
@@ -16,7 +16,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="safe-area-padding">
+<core-loading [hideUntil]="!showLoading">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
diff --git a/src/addons/mod/imscp/components/index/addon-mod-imscp-index.html b/src/addons/mod/imscp/components/index/addon-mod-imscp-index.html
index 67c59580d..183e62461 100644
--- a/src/addons/mod/imscp/components/index/addon-mod-imscp-index.html
+++ b/src/addons/mod/imscp/components/index/addon-mod-imscp-index.html
@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="safe-area-padding list-item-limited-width">
+<core-loading [hideUntil]="!showLoading">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
diff --git a/src/addons/mod/imscp/pages/index/index.html b/src/addons/mod/imscp/pages/index/index.html
index 712346154..12b3a7f08 100644
--- a/src/addons/mod/imscp/pages/index/index.html
+++ b/src/addons/mod/imscp/pages/index/index.html
@@ -15,6 +15,6 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <addon-mod-imscp-index [module]="module" [courseId]="courseId" (dataRetrieved)="updateData($event)"></addon-mod-imscp-index>
 </ion-content>
diff --git a/src/addons/mod/imscp/pages/view/view.html b/src/addons/mod/imscp/pages/view/view.html
index 0611d34f8..e37142791 100644
--- a/src/addons/mod/imscp/pages/view/view.html
+++ b/src/addons/mod/imscp/pages/view/view.html
@@ -19,7 +19,7 @@
 </ion-header>
 <ion-content>
     <!-- Content. -->
-    <core-loading [hideUntil]="loaded" class="safe-area-padding core-loading-full-height">
+    <core-loading [hideUntil]="loaded">
 
         <ion-card class="core-warning-card" *ngIf="warning">
             <ion-item>
diff --git a/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html b/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html
index ea987e830..d039f0303 100644
--- a/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html
+++ b/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html
@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">
+<core-loading [hideUntil]="!showLoading">
     <core-tabs [hideUntil]="!showLoading" [selectedIndex]="selectedTab">
         <!-- Index/Preview tab. -->
         <core-tab [title]="'addon.mod_lesson.preview' | translate" (ionSelect)="indexSelected()">
diff --git a/src/addons/mod/lesson/pages/index/index.html b/src/addons/mod/lesson/pages/index/index.html
index fec01e323..f83508304 100644
--- a/src/addons/mod/lesson/pages/index/index.html
+++ b/src/addons/mod/lesson/pages/index/index.html
@@ -14,7 +14,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
diff --git a/src/addons/mod/lesson/pages/player/player.html b/src/addons/mod/lesson/pages/player/player.html
index 90b910843..f0a46750e 100644
--- a/src/addons/mod/lesson/pages/player/player.html
+++ b/src/addons/mod/lesson/pages/player/player.html
@@ -17,8 +17,8 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
-    <core-loading [hideUntil]="loaded" class="list-item-limited-width">
+<ion-content class="limited-width">
+    <core-loading [hideUntil]="loaded">
         <!-- Info messages. Only show the first one. -->
         <ion-card class="core-info-card" *ngIf="lesson && messages?.length">
             <ion-item class="ion-text-wrap">
diff --git a/src/addons/mod/lesson/pages/user-retake/user-retake.html b/src/addons/mod/lesson/pages/user-retake/user-retake.html
index 722c6a495..41e59c571 100644
--- a/src/addons/mod/lesson/pages/user-retake/user-retake.html
+++ b/src/addons/mod/lesson/pages/user-retake/user-retake.html
@@ -8,12 +8,12 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
 
-    <core-loading [hideUntil]="loaded" class="list-item-limited-width">
+    <core-loading [hideUntil]="loaded">
         <div *ngIf="student">
             <!-- Student data. -->
             <ion-item class="ion-text-wrap" core-user-link [userId]="student.id" [courseId]="courseId" [attr.aria-label]="student.fullname">
diff --git a/src/addons/mod/lti/components/index/addon-mod-lti-index.html b/src/addons/mod/lti/components/index/addon-mod-lti-index.html
index 1a9fb4164..db82dfce0 100644
--- a/src/addons/mod/lti/components/index/addon-mod-lti-index.html
+++ b/src/addons/mod/lti/components/index/addon-mod-lti-index.html
@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="safe-area-padding list-item-limited-width">
+<core-loading [hideUntil]="!showLoading">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="displayDescription && description" [component]="component"
diff --git a/src/addons/mod/lti/pages/index/index.html b/src/addons/mod/lti/pages/index/index.html
index 38ce5fc89..566f57401 100644
--- a/src/addons/mod/lti/pages/index/index.html
+++ b/src/addons/mod/lti/pages/index/index.html
@@ -15,7 +15,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
diff --git a/src/addons/mod/page/components/index/addon-mod-page-index.html b/src/addons/mod/page/components/index/addon-mod-page-index.html
index b93d43391..c629090b0 100644
--- a/src/addons/mod/page/components/index/addon-mod-page-index.html
+++ b/src/addons/mod/page/components/index/addon-mod-page-index.html
@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="safe-area-padding list-item-limited-width">
+<core-loading [hideUntil]="!showLoading">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="displayDescription && description" [component]="component"
diff --git a/src/addons/mod/page/components/index/index.scss b/src/addons/mod/page/components/index/index.scss
deleted file mode 100644
index f769c305d..000000000
--- a/src/addons/mod/page/components/index/index.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-/* Solves iframe height */
-.core-loading-content > div[padding] {
-    height: 100%;
-}
-
-core-format-text > .no-overflow {
-    display: inline;
-}
diff --git a/src/addons/mod/page/components/index/index.ts b/src/addons/mod/page/components/index/index.ts
index dd9dc2ff7..37d2f0b8e 100644
--- a/src/addons/mod/page/components/index/index.ts
+++ b/src/addons/mod/page/components/index/index.ts
@@ -27,7 +27,6 @@ import { AddonModPageHelper } from '../../services/page-helper';
 @Component({
     selector: 'addon-mod-page-index',
     templateUrl: 'addon-mod-page-index.html',
-    styleUrls: ['index.scss'],
 })
 export class AddonModPageIndexComponent extends CoreCourseModuleMainResourceComponent implements OnInit {
 
diff --git a/src/addons/mod/page/pages/index/index.html b/src/addons/mod/page/pages/index/index.html
index fc6dc2f86..8cc1affc1 100644
--- a/src/addons/mod/page/pages/index/index.html
+++ b/src/addons/mod/page/pages/index/index.html
@@ -14,7 +14,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
diff --git a/src/addons/mod/quiz/components/index/addon-mod-quiz-index.html b/src/addons/mod/quiz/components/index/addon-mod-quiz-index.html
index a8b1b7988..d8feca57d 100644
--- a/src/addons/mod/quiz/components/index/addon-mod-quiz-index.html
+++ b/src/addons/mod/quiz/components/index/addon-mod-quiz-index.html
@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">
+<core-loading [hideUntil]="!showLoading">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
diff --git a/src/addons/mod/quiz/pages/attempt/attempt.html b/src/addons/mod/quiz/pages/attempt/attempt.html
index 3df9ad96f..e7dfbdead 100644
--- a/src/addons/mod/quiz/pages/attempt/attempt.html
+++ b/src/addons/mod/quiz/pages/attempt/attempt.html
@@ -12,11 +12,11 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="loaded" class="list-item-limited-width">
+    <core-loading [hideUntil]="loaded">
         <ion-list *ngIf="attempt">
             <ion-item class="ion-text-wrap">
                 <ion-label>
diff --git a/src/addons/mod/quiz/pages/index/index.html b/src/addons/mod/quiz/pages/index/index.html
index 233973f4f..83bd934c9 100644
--- a/src/addons/mod/quiz/pages/index/index.html
+++ b/src/addons/mod/quiz/pages/index/index.html
@@ -15,7 +15,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
diff --git a/src/addons/mod/quiz/pages/player/player.html b/src/addons/mod/quiz/pages/player/player.html
index 9e787ecaf..d74bcc8b2 100644
--- a/src/addons/mod/quiz/pages/player/player.html
+++ b/src/addons/mod/quiz/pages/player/player.html
@@ -30,8 +30,8 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content>
-    <core-loading [hideUntil]="loaded" class="has-spacer list-item-limited-width">
+<ion-content class="limited-width">
+    <core-loading [hideUntil]="loaded" class="has-spacer">
         <!-- Button to start attempting. -->
         <ion-button *ngIf="!attempt" expand="block" class="ion-margin" (click)="start()">
             {{ 'addon.mod_quiz.startattempt' | translate }}
diff --git a/src/addons/mod/quiz/pages/review/review.html b/src/addons/mod/quiz/pages/review/review.html
index 43fc2206f..0ab6d7c5d 100644
--- a/src/addons/mod/quiz/pages/review/review.html
+++ b/src/addons/mod/quiz/pages/review/review.html
@@ -15,11 +15,11 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshData($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="loaded" class="list-item-limited-width">
+    <core-loading [hideUntil]="loaded">
 
         <!-- Review summary -->
         <ion-card *ngIf="attempt">
diff --git a/src/addons/mod/resource/components/index/addon-mod-resource-index.html b/src/addons/mod/resource/components/index/addon-mod-resource-index.html
index fd4d8b5b5..213d21523 100644
--- a/src/addons/mod/resource/components/index/addon-mod-resource-index.html
+++ b/src/addons/mod/resource/components/index/addon-mod-resource-index.html
@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="safe-area-padding core-loading-full-height list-item-limited-width">
+<core-loading [hideUntil]="!showLoading">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [courseId]="courseId" [description]="displayDescription && description"
diff --git a/src/addons/mod/resource/pages/index/index.html b/src/addons/mod/resource/pages/index/index.html
index 4bfe3e2a6..8413a0de5 100644
--- a/src/addons/mod/resource/pages/index/index.html
+++ b/src/addons/mod/resource/pages/index/index.html
@@ -15,7 +15,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading || activityComponent?.mode == 'iframe'"
         (ionRefresh)="activityComponent?.doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
diff --git a/src/addons/mod/scorm/components/index/addon-mod-scorm-index.html b/src/addons/mod/scorm/components/index/addon-mod-scorm-index.html
index 5d3f06b43..d2b0c257f 100644
--- a/src/addons/mod/scorm/components/index/addon-mod-scorm-index.html
+++ b/src/addons/mod/scorm/components/index/addon-mod-scorm-index.html
@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="safe-area-padding list-item-limited-width">
+<core-loading [hideUntil]="!showLoading">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
diff --git a/src/addons/mod/scorm/pages/index/index.html b/src/addons/mod/scorm/pages/index/index.html
index 00e1aa739..837e79cfb 100644
--- a/src/addons/mod/scorm/pages/index/index.html
+++ b/src/addons/mod/scorm/pages/index/index.html
@@ -14,7 +14,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
diff --git a/src/addons/mod/scorm/pages/player/player.html b/src/addons/mod/scorm/pages/player/player.html
index 343397a9b..85093fb51 100644
--- a/src/addons/mod/scorm/pages/player/player.html
+++ b/src/addons/mod/scorm/pages/player/player.html
@@ -20,7 +20,7 @@
     </ion-toolbar>
 </ion-header>
 <ion-content>
-    <core-loading [hideUntil]="loaded" class="core-loading-full-height">
+    <core-loading [hideUntil]="loaded">
         <core-iframe *ngIf="loaded && src" [src]="src" [iframeWidth]="scormWidth" [iframeHeight]="scormHeight"
             [showFullscreenOnToolbar]="true" [autoFullscreenOnRotate]="true">
         </core-iframe>
diff --git a/src/addons/mod/survey/components/index/addon-mod-survey-index.html b/src/addons/mod/survey/components/index/addon-mod-survey-index.html
index b4370e1f6..6d04fab7c 100644
--- a/src/addons/mod/survey/components/index/addon-mod-survey-index.html
+++ b/src/addons/mod/survey/components/index/addon-mod-survey-index.html
@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="safe-area-padding list-item-limited-width">
+<core-loading [hideUntil]="!showLoading">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="survey && !survey.surveydone && !hasOffline && description"
diff --git a/src/addons/mod/survey/pages/index/index.html b/src/addons/mod/survey/pages/index/index.html
index 02673c75d..38ed35fea 100644
--- a/src/addons/mod/survey/pages/index/index.html
+++ b/src/addons/mod/survey/pages/index/index.html
@@ -14,7 +14,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
diff --git a/src/addons/mod/url/components/index/addon-mod-url-index.html b/src/addons/mod/url/components/index/addon-mod-url-index.html
index 6b29fa18c..0e7fa1baa 100644
--- a/src/addons/mod/url/components/index/addon-mod-url-index.html
+++ b/src/addons/mod/url/components/index/addon-mod-url-index.html
@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">
+<core-loading [hideUntil]="!showLoading">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="displayDescription && description" [component]="component"
diff --git a/src/addons/mod/url/pages/index/index.html b/src/addons/mod/url/pages/index/index.html
index f940549ef..5de9e34ee 100644
--- a/src/addons/mod/url/pages/index/index.html
+++ b/src/addons/mod/url/pages/index/index.html
@@ -14,7 +14,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
diff --git a/src/addons/mod/wiki/components/index/addon-mod-wiki-index.html b/src/addons/mod/wiki/components/index/addon-mod-wiki-index.html
index f4fd30532..4c220849f 100644
--- a/src/addons/mod/wiki/components/index/addon-mod-wiki-index.html
+++ b/src/addons/mod/wiki/components/index/addon-mod-wiki-index.html
@@ -27,7 +27,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">
+<core-loading [hideUntil]="!showLoading">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
diff --git a/src/addons/mod/wiki/pages/index/index.html b/src/addons/mod/wiki/pages/index/index.html
index 0c013169c..fd6c31ce6 100644
--- a/src/addons/mod/wiki/pages/index/index.html
+++ b/src/addons/mod/wiki/pages/index/index.html
@@ -15,7 +15,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
diff --git a/src/addons/mod/workshop/components/assessment/addon-mod-workshop-assessment.html b/src/addons/mod/workshop/components/assessment/addon-mod-workshop-assessment.html
index 90e393f77..8c0388f09 100644
--- a/src/addons/mod/workshop/components/assessment/addon-mod-workshop-assessment.html
+++ b/src/addons/mod/workshop/components/assessment/addon-mod-workshop-assessment.html
@@ -1,4 +1,4 @@
-<core-loading [hideUntil]="loaded" class="list-item-limited-width">
+<core-loading [hideUntil]="loaded">
     <ion-item class="ion-text-wrap" [detail]="canViewAssessment && !canSelfAssess" (click)="gotoAssessment($event)"
         [button]="canViewAssessment && !canSelfAssess">
         <core-user-avatar [user]="profile" slot="start" [courseId]="courseId" [userId]="profile?.id"></core-user-avatar>
diff --git a/src/addons/mod/workshop/components/index/addon-mod-workshop-index.html b/src/addons/mod/workshop/components/index/addon-mod-workshop-index.html
index 9ccdc53bc..9b98b2660 100644
--- a/src/addons/mod/workshop/components/index/addon-mod-workshop-index.html
+++ b/src/addons/mod/workshop/components/index/addon-mod-workshop-index.html
@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">
+<core-loading [hideUntil]="!showLoading">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [hasDataToSync]="hasOffline" (completionChanged)="onCompletionChange()">
diff --git a/src/addons/mod/workshop/components/submission/addon-mod-workshop-submission.html b/src/addons/mod/workshop/components/submission/addon-mod-workshop-submission.html
index ee7f08609..f69d312a9 100644
--- a/src/addons/mod/workshop/components/submission/addon-mod-workshop-submission.html
+++ b/src/addons/mod/workshop/components/submission/addon-mod-workshop-submission.html
@@ -1,4 +1,4 @@
-<core-loading [hideUntil]="loaded" class="list-item-limited-width">
+<core-loading [hideUntil]="loaded">
     <div *ngIf="!summary">
         <ion-item class="ion-text-wrap addon-workshop-submission-title">
             <core-user-avatar [user]="profile" [courseId]="courseId" [userId]="profile?.id" slot="start">
diff --git a/src/addons/mod/workshop/pages/index/index.html b/src/addons/mod/workshop/pages/index/index.html
index c9fdc573a..b28ffdd39 100644
--- a/src/addons/mod/workshop/pages/index/index.html
+++ b/src/addons/mod/workshop/pages/index/index.html
@@ -14,7 +14,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
diff --git a/src/addons/mod/workshop/pages/submission/submission.html b/src/addons/mod/workshop/pages/submission/submission.html
index 754b7456a..294fdb3af 100644
--- a/src/addons/mod/workshop/pages/submission/submission.html
+++ b/src/addons/mod/workshop/pages/submission/submission.html
@@ -20,7 +20,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshSubmission($event.target)"
         *ngIf="!((assessmentId && access.assessingallowed) || canAddFeedback)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
diff --git a/src/addons/notes/pages/list/list.html b/src/addons/notes/pages/list/list.html
index db1ee143d..6c58feff3 100644
--- a/src/addons/notes/pages/list/list.html
+++ b/src/addons/notes/pages/list/list.html
@@ -25,12 +25,12 @@
             [closeOnClick]="false"></core-context-menu-item>
     </core-context-menu>
 </core-navbar-buttons>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!notesLoaded" (ionRefresh)="refreshNotes(false, $event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
 
-    <core-loading [hideUntil]="notesLoaded" class="list-item-limited-width">
+    <core-loading [hideUntil]="notesLoaded">
         <ion-item class="ion-text-wrap" *ngIf="user">
             <core-user-avatar [user]="user" [courseId]="courseId" slot="start" [linkProfile]="false"></core-user-avatar>
             <ion-label>
diff --git a/src/addons/privatefiles/pages/index/index.html b/src/addons/privatefiles/pages/index/index.html
index a3555462f..ec245c9cd 100644
--- a/src/addons/privatefiles/pages/index/index.html
+++ b/src/addons/privatefiles/pages/index/index.html
@@ -8,13 +8,13 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!filesLoaded || (!showPrivateFiles && !showSiteFiles)"
         (ionRefresh)="refreshData($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
 
-    <core-loading [hideUntil]="filesLoaded" *ngIf="showPrivateFiles || showSiteFiles" class="list-item-limited-width">
+    <core-loading [hideUntil]="filesLoaded" *ngIf="showPrivateFiles || showSiteFiles">
         <!-- Allow selecting the files to see: private or site. -->
         <core-combobox [selection]="root" (onChange)="rootChanged($event)" *ngIf="showPrivateFiles && showSiteFiles && !path">
             <ion-select-option class="ion-text-wrap" value="my">
diff --git a/src/addons/storagemanager/pages/course-storage/course-storage.html b/src/addons/storagemanager/pages/course-storage/course-storage.html
index 35b3f2b8f..b6353dd6c 100644
--- a/src/addons/storagemanager/pages/course-storage/course-storage.html
+++ b/src/addons/storagemanager/pages/course-storage/course-storage.html
@@ -8,8 +8,8 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content>
-    <core-loading [hideUntil]="loaded" class="list-item-limited-width">
+<ion-content class="limited-width">
+    <core-loading [hideUntil]="loaded">
         <ion-item class="ion-text-wrap">
             <ion-label>
                 <p>{{ 'addon.storagemanager.courseinfo' | translate }}</p>
diff --git a/src/addons/storagemanager/pages/courses-storage/courses-storage.html b/src/addons/storagemanager/pages/courses-storage/courses-storage.html
index 4c4f3217f..a0d9bc1eb 100644
--- a/src/addons/storagemanager/pages/courses-storage/courses-storage.html
+++ b/src/addons/storagemanager/pages/courses-storage/courses-storage.html
@@ -8,8 +8,8 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content>
-    <core-loading [hideUntil]="loaded" class="list-item-limited-width">
+<ion-content class="limited-width">
+    <core-loading [hideUntil]="loaded">
         <div class="ion-padding-horizontal ion-text-wrap" *ngIf="spaceUsage">
             <h2>{{ 'addon.storagemanager.alldata' | translate }}</h2>
         </div>
diff --git a/src/core/components/attachments/attachments.scss b/src/core/components/attachments/attachments.scss
index 4582f0e2b..c6955211f 100644
--- a/src/core/components/attachments/attachments.scss
+++ b/src/core/components/attachments/attachments.scss
@@ -1,5 +1,3 @@
-:host {
-    core-loading {
-        --loading-inline-min-height: 60px;
-    }
+core-loading {
+    --loading-inline-min-height: 60px;
 }
diff --git a/src/core/components/iframe/core-iframe.html b/src/core/components/iframe/core-iframe.html
index e9664f6d3..28ce77c89 100644
--- a/src/core/components/iframe/core-iframe.html
+++ b/src/core/components/iframe/core-iframe.html
@@ -1,5 +1,4 @@
-<div [class.core-loading-container]="loading || !safeUrl" [ngStyle]="{'width': iframeWidth, 'height': iframeHeight}">
-
+<core-loading [hideUntil]="!loading && safeUrl">
     <core-navbar-buttons slot="end" prepend *ngIf="initialized && showFullscreenOnToolbar">
         <ion-button fill="clear" (click)="toggleFullscreen()"
             [attr.aria-label]="(fullscreen ? 'core.disablefullscreen' : 'core.fullscreen') | translate">
@@ -17,8 +16,4 @@
         class="core-button-as-link core-iframe-help">
         {{ 'core.iframehelp' | translate }}
     </ion-button>
-
-    <span class="core-loading-spinner">
-        <ion-spinner *ngIf="loading" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
-    </span>
-</div>
+</core-loading>
diff --git a/src/core/components/iframe/iframe.scss b/src/core/components/iframe/iframe.scss
index 23c1cfd68..bc8a94691 100644
--- a/src/core/components/iframe/iframe.scss
+++ b/src/core/components/iframe/iframe.scss
@@ -9,27 +9,6 @@
         max-width: 100%;
         background-color: var(--ion-background-color);
     }
-
-    .core-loading-container {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        display: table;
-        height: 100%;
-        width: 100%;
-        z-index: 1;
-        margin: 0;
-        padding: 0;
-        clear: both;
-
-        .core-loading-spinner {
-            display: table-cell;
-            text-align: center;
-            vertical-align: middle;
-        }
-    }
 }
 
 :host-context(.core-iframe-fullscreen) {
diff --git a/src/core/features/course/format/singleactivity/components/core-course-format-single-activity.html b/src/core/features/course/format/singleactivity/components/core-course-format-single-activity.html
index aa42eeadb..1e960e8a8 100644
--- a/src/core/features/course/format/singleactivity/components/core-course-format-single-activity.html
+++ b/src/core/features/course/format/singleactivity/components/core-course-format-single-activity.html
@@ -1,4 +1,6 @@
-<core-dynamic-component [component]="componentClass" [data]="data"></core-dynamic-component>
+<div class="list-item-limited-width">
+    <core-dynamic-component [component]="componentClass" [data]="data"></core-dynamic-component>
+</div>
 
 <core-block-side-blocks-button slot="fixed" *ngIf="course && hasBlocks" [courseId]="course.id">
 </core-block-side-blocks-button>
diff --git a/src/core/features/course/pages/module-preview/module-preview.html b/src/core/features/course/pages/module-preview/module-preview.html
index e25f768db..642782ee5 100644
--- a/src/core/features/course/pages/module-preview/module-preview.html
+++ b/src/core/features/course/pages/module-preview/module-preview.html
@@ -18,11 +18,11 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="loaded" class="has-spacer list-item-limited-width">
+    <core-loading [hideUntil]="loaded" class="has-spacer">
         <core-course-module-info [module]="module" [courseId]="courseId" [description]="module.description" [component]="module.modname"
             [componentId]="module.id" [expandDescription]="true" [showAvailabilityInfo]="true" (completionChanged)="onCompletionChange()"
             [showManualCompletion]="showManualCompletion">
diff --git a/src/core/features/grades/pages/course/course.html b/src/core/features/grades/pages/course/course.html
index 30e043ec3..de30057bd 100644
--- a/src/core/features/grades/pages/course/course.html
+++ b/src/core/features/grades/pages/course/course.html
@@ -12,7 +12,7 @@
     <ion-refresher slot="fixed" [disabled]="!columns || !rows" (ionRefresh)="refreshGrades($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="columns && rows" class="safe-area-padding">
+    <core-loading [hideUntil]="columns && rows">
         <core-empty-box *ngIf="rows && rows.length === 0" icon="fas-chart-bar" [message]="'core.grades.nogradesreturned' | translate">
         </core-empty-box>
         <div *ngIf="rows && rows.length > 0" class="core-grades-container">
diff --git a/src/core/features/h5p/components/h5p-iframe/core-h5p-iframe.html b/src/core/features/h5p/components/h5p-iframe/core-h5p-iframe.html
index c60f30592..b09ea0ef2 100644
--- a/src/core/features/h5p/components/h5p-iframe/core-h5p-iframe.html
+++ b/src/core/features/h5p/components/h5p-iframe/core-h5p-iframe.html
@@ -1,4 +1,4 @@
-<core-loading [hideUntil]="iframeSrc" [fullscreen]="false" class="safe-area-padding">
+<core-loading [hideUntil]="iframeSrc" [fullscreen]="false">
     <core-iframe *ngIf="iframeSrc" [src]="iframeSrc" iframeHeight="auto" [allowFullscreen]="true" (loaded)="iframeLoaded()"
         [showFullscreenOnToolbar]="enableInAppFullscreen" [autoFullscreenOnRotate]="enableInAppFullscreen">
     </core-iframe>
diff --git a/src/core/features/login/pages/credentials/credentials.html b/src/core/features/login/pages/credentials/credentials.html
index e8703bdfa..94e021f17 100644
--- a/src/core/features/login/pages/credentials/credentials.html
+++ b/src/core/features/login/pages/credentials/credentials.html
@@ -15,8 +15,8 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content class="ion-padding">
-    <core-loading [hideUntil]="pageLoaded" class="list-item-limited-width">
+<ion-content class="ion-padding limited-width">
+    <core-loading [hideUntil]="pageLoaded">
         <div class="ion-text-wrap ion-text-center ion-margin-bottom">
             <div class="core-login-site-logo">
                 <!-- Show site logo or a default image. -->
diff --git a/src/core/features/login/pages/site-policy/site-policy.html b/src/core/features/login/pages/site-policy/site-policy.html
index dbef122e6..25f2f27de 100644
--- a/src/core/features/login/pages/site-policy/site-policy.html
+++ b/src/core/features/login/pages/site-policy/site-policy.html
@@ -10,7 +10,7 @@
     </ion-toolbar>
 </ion-header>
 <ion-content>
-    <core-loading [hideUntil]="policyLoaded" class="core-loading-full-height">
+    <core-loading [hideUntil]="policyLoaded">
         <ion-list *ngIf="sitePolicy">
             <ion-item class="ion-text-wrap">
                 <ion-label>
diff --git a/src/core/features/login/pages/sites/sites.html b/src/core/features/login/pages/sites/sites.html
index c1e6cadf3..6b97ae897 100644
--- a/src/core/features/login/pages/sites/sites.html
+++ b/src/core/features/login/pages/sites/sites.html
@@ -19,8 +19,8 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
-    <core-loading [hideUntil]="loaded" class="list-item-limited-width">
+<ion-content class="limited-width">
+    <core-loading [hideUntil]="loaded">
         <ion-list class="core-sitelist">
             <ion-card *ngFor="let sites of accountsList.otherSites">
                 <ion-item-divider sticky="true" *ngIf="sites[0]" class="core-sitelist-sitename">
diff --git a/src/core/features/settings/pages/licenses/licenses.html b/src/core/features/settings/pages/licenses/licenses.html
index e33be5446..1221ab37e 100644
--- a/src/core/features/settings/pages/licenses/licenses.html
+++ b/src/core/features/settings/pages/licenses/licenses.html
@@ -9,8 +9,8 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content>
-    <core-loading [hideUntil]="loaded" class="list-item-limited-width">
+<ion-content class="limited-width">
+    <core-loading [hideUntil]="loaded">
         <ion-searchbar [(ngModel)]="textFilter" (ionInput)="filterChanged($event.target)" (ionCancel)="filterChanged($event.target)"
             [placeholder]="'core.filter' | translate">
         </ion-searchbar>
diff --git a/src/core/features/settings/pages/space-usage/space-usage.html b/src/core/features/settings/pages/space-usage/space-usage.html
index 38c8c0f61..ad5ce1a50 100644
--- a/src/core/features/settings/pages/space-usage/space-usage.html
+++ b/src/core/features/settings/pages/space-usage/space-usage.html
@@ -12,11 +12,11 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher [disabled]="!loaded" (ionRefresh)="refreshData($event.target)" slot="fixed">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="loaded" class="list-item-limited-width">
+    <core-loading [hideUntil]="loaded">
         <ion-list>
             <ion-item *ngFor="let site of sites" [class.item-current]="site.id == currentSiteId">
                 <ion-label class="ion-text-wrap">
diff --git a/src/core/features/settings/pages/synchronization/synchronization.html b/src/core/features/settings/pages/synchronization/synchronization.html
index 6dc4c3d51..7e4911b89 100644
--- a/src/core/features/settings/pages/synchronization/synchronization.html
+++ b/src/core/features/settings/pages/synchronization/synchronization.html
@@ -15,8 +15,8 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
-    <core-loading [hideUntil]="sitesLoaded" class="list-item-limited-width">
+<ion-content class="limited-width">
+    <core-loading [hideUntil]="sitesLoaded">
         <ion-list>
             <ion-item-divider>
                 <ion-label>
diff --git a/src/core/features/tag/pages/index-area/index-area.html b/src/core/features/tag/pages/index-area/index-area.html
index 9cb089c17..a23e1f352 100644
--- a/src/core/features/tag/pages/index-area/index-area.html
+++ b/src/core/features/tag/pages/index-area/index-area.html
@@ -10,14 +10,12 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshData($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="loaded" class="list-item-limited-width">
-        <ng-container *ngIf="loaded">
-            <core-dynamic-component [component]="areaComponent" [data]="{items: items}"></core-dynamic-component>
-        </ng-container>
+    <core-loading [hideUntil]="loaded">
+        <core-dynamic-component [component]="areaComponent" [data]="{items: items}"></core-dynamic-component>
         <core-infinite-loading [enabled]="canLoadMore" (action)="loadMore($event)" [error]="loadMoreError">
         </core-infinite-loading>
     </core-loading>
diff --git a/src/core/features/tag/pages/search/search.html b/src/core/features/tag/pages/search/search.html
index bf4568ef6..6126aa8c3 100644
--- a/src/core/features/tag/pages/search/search.html
+++ b/src/core/features/tag/pages/search/search.html
@@ -32,7 +32,7 @@
             </ion-col>
         </ion-row>
     </ion-grid>
-    <core-loading [hideUntil]="loaded && !searching" class="safe-area-padding">
+    <core-loading [hideUntil]="loaded && !searching">
         <core-empty-box *ngIf="!cloud || !cloud!.tags || !cloud!.tags.length" icon="fas-tags"
             [message]="'core.tag.notagsfound' | translate: {$a: query}"></core-empty-box>
 
diff --git a/src/core/features/user/pages/about/about.html b/src/core/features/user/pages/about/about.html
index 62028bf62..751d3dd52 100644
--- a/src/core/features/user/pages/about/about.html
+++ b/src/core/features/user/pages/about/about.html
@@ -8,11 +8,11 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!userLoaded" (ionRefresh)="refreshUser($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="userLoaded" class="list-item-limited-width">
+    <core-loading [hideUntil]="userLoaded">
         <ion-list *ngIf="user">
             <ion-item class="ion-text-center core-user-profile-maininfo ion-text-wrap" lines="full">
                 <core-user-avatar [user]="user" [userId]="user.id" [linkProfile]="false" [checkOnline]="!canChangeProfilePicture">
diff --git a/src/core/features/user/pages/profile/profile.html b/src/core/features/user/pages/profile/profile.html
index 5dbb82b82..52d71a6cf 100644
--- a/src/core/features/user/pages/profile/profile.html
+++ b/src/core/features/user/pages/profile/profile.html
@@ -8,11 +8,11 @@
         </ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content [core-swipe-navigation]="users">
+<ion-content [core-swipe-navigation]="users" class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!userLoaded" (ionRefresh)="refreshUser($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="userLoaded" class="list-item-limited-width">
+    <core-loading [hideUntil]="userLoaded">
         <ion-list *ngIf="user && !isDeleted && isEnrolled">
             <ion-item class="ion-text-center core-user-profile-maininfo ion-text-wrap">
                 <core-user-avatar [user]="user" [userId]="user.id" [linkProfile]="false" [checkOnline]="true">
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 59edeadaf..e3db5d413 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -817,12 +817,18 @@ ion-card {
 
 ion-list.core-course-module-list-wrapper,
 .list-item-limited-width,
-.core-course-module-list-wrapper {
+.core-course-module-list-wrapper,
+ion-content.limited-width > :not([slot]) {
     max-width: var(--list-item-max-width);
     margin-left: auto !important;
     margin-right: auto !important;
 }
 
+ion-content.limited-width > :not([slot]) {
+    display: flex;
+    flex-direction: column;
+}
+
 ion-toolbar h1 img.core-bar-button-image,
 ion-toolbar h1 .core-bar-button-image img {
     padding: 4px;

From ef1222b148ffb7c80711c9e24a047d678493df7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 24 Mar 2022 16:35:42 +0100
Subject: [PATCH 5/7] MOBILE-3833 notifications: Open notifications on a
 different page

---
 .../components/actions/actions.ts             | 90 -----------------
 .../actions/addon-notifications-actions.html  |  8 --
 .../components/components.module.ts           | 31 ------
 src/addons/notifications/notifications.scss   | 72 ++------------
 src/addons/notifications/pages/list/list.html | 97 +++++++++----------
 .../notifications/pages/list/list.module.ts   |  2 -
 src/addons/notifications/pages/list/list.ts   | 67 +++++++++----
 .../pages/notification/notification.html      | 71 +++++++++-----
 .../pages/notification/notification.module.ts |  2 -
 .../pages/notification/notification.scss      | 68 +++++++++++++
 .../pages/notification/notification.ts        | 81 +++++++++++++++-
 .../services/handlers/push-click.ts           | 14 +--
 .../services/notifications-helper.ts          | 45 +++++++++
 .../notifications/services/notifications.ts   | 21 ++++
 14 files changed, 367 insertions(+), 302 deletions(-)
 delete mode 100644 src/addons/notifications/components/actions/actions.ts
 delete mode 100644 src/addons/notifications/components/actions/addon-notifications-actions.html
 delete mode 100644 src/addons/notifications/components/components.module.ts
 create mode 100644 src/addons/notifications/pages/notification/notification.scss

diff --git a/src/addons/notifications/components/actions/actions.ts b/src/addons/notifications/components/actions/actions.ts
deleted file mode 100644
index 9ee3b221a..000000000
--- a/src/addons/notifications/components/actions/actions.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-// (C) Copyright 2015 Moodle Pty Ltd.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//     http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import { Component, Input, OnInit } from '@angular/core';
-
-import { CoreSites } from '@services/sites';
-import { CoreContentLinksDelegate, CoreContentLinksAction } from '@features/contentlinks/services/contentlinks-delegate';
-
-/**
- * Component that displays the actions for a notification.
- */
-@Component({
-    selector: 'addon-notifications-actions',
-    templateUrl: 'addon-notifications-actions.html',
-})
-export class AddonNotificationsActionsComponent implements OnInit {
-
-    @Input() contextUrl?: string;
-    @Input() courseId?: number;
-    @Input() data?: Record<string, unknown>; // Extra data to handle the URL.
-
-    actions: CoreContentLinksAction[] = [];
-
-    /**
-     * Component being initialized.
-     */
-    async ngOnInit(): Promise<void> {
-        if (!this.contextUrl && (!this.data || !this.data.appurl)) {
-            // No URL, nothing to do.
-            return;
-        }
-
-        let actions: CoreContentLinksAction[] = [];
-
-        // Treat appurl first if any.
-        if (this.data?.appurl) {
-            actions = await CoreContentLinksDelegate.getActionsFor(
-                <string> this.data.appurl,
-                this.courseId,
-                undefined,
-                this.data,
-            );
-        }
-
-        if (!actions.length && this.contextUrl) {
-            // No appurl or cannot handle it. Try with contextUrl.
-            actions = await CoreContentLinksDelegate.getActionsFor(this.contextUrl, this.courseId, undefined, this.data);
-        }
-
-        if (!actions.length) {
-            // URL is not supported. Add an action to open it in browser.
-            actions.push({
-                message: 'core.view',
-                icon: 'fas-eye',
-                action: this.openInBrowser.bind(this),
-            });
-        }
-
-        this.actions = actions;
-    }
-
-    /**
-     * Default action. Open in browser.
-     *
-     * @param siteId Site ID to use.
-     */
-    protected async openInBrowser(siteId?: string): Promise<void> {
-        const url = <string> this.data?.appurl || this.contextUrl;
-
-        if (!url) {
-            return;
-        }
-
-        const site = await CoreSites.getSite(siteId);
-
-        site.openInBrowserWithAutoLogin(url);
-    }
-
-}
diff --git a/src/addons/notifications/components/actions/addon-notifications-actions.html b/src/addons/notifications/components/actions/addon-notifications-actions.html
deleted file mode 100644
index 348a2d701..000000000
--- a/src/addons/notifications/components/actions/addon-notifications-actions.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<ion-row *ngIf="actions && actions.length > 0" class="justify-content-around">
-    <ion-col *ngFor="let action of actions">
-        <ion-button fill="clear" expand="block" (click)="action.action()">
-            <ion-icon slot="start" name="{{action.icon}}" aria-hidden="true"></ion-icon>
-            {{ action.message | translate }}
-        </ion-button>
-    </ion-col>
-</ion-row>
diff --git a/src/addons/notifications/components/components.module.ts b/src/addons/notifications/components/components.module.ts
deleted file mode 100644
index 06e36bdcd..000000000
--- a/src/addons/notifications/components/components.module.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-// (C) Copyright 2015 Moodle Pty Ltd.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//     http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import { NgModule } from '@angular/core';
-import { CoreSharedModule } from '@/core/shared.module';
-
-import { AddonNotificationsActionsComponent } from './actions/actions';
-
-@NgModule({
-    declarations: [
-        AddonNotificationsActionsComponent,
-    ],
-    imports: [
-        CoreSharedModule,
-    ],
-    exports: [
-        AddonNotificationsActionsComponent,
-    ],
-})
-export class AddonNotificationsComponentsModule {}
diff --git a/src/addons/notifications/notifications.scss b/src/addons/notifications/notifications.scss
index 5285ea7f0..0583e27fa 100644
--- a/src/addons/notifications/notifications.scss
+++ b/src/addons/notifications/notifications.scss
@@ -2,6 +2,7 @@
 
 :host {
     --extra-icon-size: 16px;
+    --icon-size: 24px;
 
     ::ng-deep core-user-avatar {
         .core-avatar-extra-img,
@@ -28,71 +29,18 @@
         }
     }
 
-    .core-notification-icon {
-        width: var(--core-avatar-size);
-        height: var(--core-avatar-size);
-        @include margin(6px, 8px, 6px, 0px);
+    div.core-notification-icon {
+        img {
+            width: var(--icon-size);
+            height: var(--icon-size);
+        }
+        padding: 0.7rem;
         background: var(--background-color);
         border-radius: var(--small-radius);
     }
 
-    .item core-format-text ::ng-deep {
-        .forumpost {
-            border: 1px solid var(--gray-200);
-            width: 100%;
-            margin: 0 0 1em 0;
-
-            td {
-                padding: 10px;
-            }
-
-            .header {
-                background-color: var(--light);
-
-                .picture {
-                    width: 48px;
-                    text-align: center;
-                    @include padding-horizontal(4px, 0px);
-                    padding-top: 8px;
-
-                    img {
-                        width: 44px !important;
-                    }
-                }
-            }
-
-            .subject {
-                font-weight: 700;
-                margin-bottom: 1rem;
-            }
-        }
-
-        a {
-            text-decoration: none;
-        }
-
-        .userpicture {
-            border-radius: 50%;
-        }
-
-        .mdl-right {
-            text-align: end;
-            a {
-                display: none;
-            }
-            font {
-                font-size: 0.9em;
-            }
-        }
-
-        .commands {
-            display: none;
-        }
-
-        hr {
-            margin-top: 1.5rem;
-            margin-bottom: 1.5rem;
-            background-color: var(--gray-200);
-        }
+    .core-notification-icon {
+        --module-icon-size: var(--icon-size);
+        @include margin(6px, 8px, 6px, 0px);
     }
 }
diff --git a/src/addons/notifications/pages/list/list.html b/src/addons/notifications/pages/list/list.html
index bac0b73c5..955271699 100644
--- a/src/addons/notifications/pages/list/list.html
+++ b/src/addons/notifications/pages/list/list.html
@@ -11,69 +11,60 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!notificationsLoaded" (ionRefresh)="refreshNotifications($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
     <core-loading [hideUntil]="notificationsLoaded">
-        <div class="list-item-limited-width">
 
-            <div class="ion-padding" *ngIf="canMarkAllNotificationsAsRead">
-                <ion-button [disabled]="loadingMarkAllNotificationsAsRead" expand="block" (click)="markAllNotificationsAsRead()"
-                    fill="outline">
-                    <ion-icon slot="start" name="fas-check" aria-hidden="true" *ngIf="!loadingMarkAllNotificationsAsRead"></ion-icon>
-                    <ion-spinner slot="start" [attr.aria-label]="'core.loading' | translate" *ngIf="loadingMarkAllNotificationsAsRead">
-                    </ion-spinner>
-                    {{ 'addon.notifications.markallread' | translate }}
-                </ion-button>
-            </div>
+        <div class="ion-padding" *ngIf="canMarkAllNotificationsAsRead">
+            <ion-button [disabled]="loadingMarkAllNotificationsAsRead" expand="block" (click)="markAllNotificationsAsRead()" fill="outline">
+                <ion-icon slot="start" name="fas-check" aria-hidden="true" *ngIf="!loadingMarkAllNotificationsAsRead"></ion-icon>
+                <ion-spinner slot="start" [attr.aria-label]="'core.loading' | translate" *ngIf="loadingMarkAllNotificationsAsRead">
+                </ion-spinner>
+                {{ 'addon.notifications.markallread' | translate }}
+            </ion-button>
+        </div>
 
-            <ion-card *ngFor="let notification of notifications">
-                <ion-item class="ion-text-wrap" [attr.aria-label]="
+        <ion-item *ngFor="let notification of notifications" class="ion-text-wrap" [attr.aria-label]="
                     notification.timeread
                     ? notification.subject
-                    : 'addon.notifications.unreadnotification' | translate: {$a: notification.subject}">
-                    <core-user-avatar *ngIf="notification.useridfrom > 0" [user]="notification" slot="start"
-                        [profileUrl]="notification.profileimageurlfrom" [fullname]="notification.userfromfullname"
-                        [userId]="notification.useridfrom">
-                        <div class="core-avatar-extra-img" *ngIf="notification.iconurl && !notification.modname">
-                            <img [src]="notification.iconurl" alt="" role="presentation">
-                        </div>
-                        <core-mod-icon *ngIf="notification.modname" [modicon]="notification.iconurl" [modname]="notification.modname"
-                            [showAlt]="false">
-                        </core-mod-icon>
-                    </core-user-avatar>
+                    : 'addon.notifications.unreadnotification' | translate: {$a: notification.subject}"
+            (click)="openNotification(notification)" button [detail]="true" lines="true">
+            <core-user-avatar *ngIf="notification.useridfrom > 0" [user]="notification" slot="start"
+                [profileUrl]="notification.profileimageurlfrom" [fullname]="notification.userfromfullname"
+                [userId]="notification.useridfrom">
+                <div class="core-avatar-extra-img" *ngIf="notification.iconurl && !notification.modname">
+                    <img [src]="notification.iconurl" alt="" role="presentation">
+                </div>
+                <core-mod-icon *ngIf="notification.modname" [modicon]="notification.iconurl" [modname]="notification.modname"
+                    [showAlt]="false">
+                </core-mod-icon>
+            </core-user-avatar>
 
-                    <img *ngIf="notification.useridfrom <= 0 && notification.iconurl" [src]="notification.iconurl" alt=""
-                        role="presentation" class="core-notification-icon" slot="start">
+            <ng-container *ngIf="notification.useridfrom <= 0 && notification.iconurl">
+                <div class="core-notification-icon" *ngIf="!notification.modname" slot="start">
+                    <img [src]="notification.iconurl" alt="" role="presentation">
+                </div>
+                <core-mod-icon *ngIf="notification.modname" [modicon]="notification.iconurl" [modname]="notification.modname"
+                    [showAlt]="false" class="core-notification-icon" slot="start">
+                </core-mod-icon>
+            </ng-container>
 
-                    <ion-label>
-                        <p class="item-heading">
-                            <core-format-text [text]="notification.subject" contextLevel="system" [contextInstanceId]="0"
-                                [wsNotFiltered]="true">
-                            </core-format-text>
-                        </p>
-                        <p *ngIf="notification.useridfrom > 0">{{ notification.userfromfullname }}</p>
-                    </ion-label>
-                    <ion-note slot="end" class="ion-float-end ion-text-end">
-                        {{ notification.timecreated | coreDateDayOrTime }}
-                        <span *ngIf="!notification.timeread">
-                            <ion-icon name="fas-circle" color="primary" aria-hidden="true"></ion-icon>
-                        </span>
-                    </ion-note>
-                </ion-item>
-                <ion-item class="ion-text-wrap">
-                    <ion-label>
-                        <core-format-text [text]="notification.mobiletext | coreCreateLinks" contextLevel="system" [contextInstanceId]="0"
-                            collapsible-item>
-                        </core-format-text>
-                    </ion-label>
-                </ion-item>
-                <addon-notifications-actions [contextUrl]="notification.contexturl" [courseId]="notification.courseid"
-                    [data]="notification.customdata">
-                </addon-notifications-actions>
-            </ion-card>
-        </div>
+            <ion-label>
+                <p class="item-heading">
+                    <core-format-text [text]="notification.subject" contextLevel="system" [contextInstanceId]="0" [wsNotFiltered]="true">
+                    </core-format-text>
+                </p>
+                <p *ngIf="notification.useridfrom > 0">{{ notification.userfromfullname }}</p>
+            </ion-label>
+            <ion-note slot="end">
+                {{ notification.timecreated | coreDateDayOrTime }}
+                <span *ngIf="!notification.timeread">
+                    <ion-icon name="fas-circle" color="primary" aria-hidden="true"></ion-icon>
+                </span>
+            </ion-note>
+        </ion-item>
 
         <core-empty-box *ngIf="!notifications || notifications.length <= 0" icon="far-bell"
             [message]="'addon.notifications.therearentnotificationsyet' | translate">
diff --git a/src/addons/notifications/pages/list/list.module.ts b/src/addons/notifications/pages/list/list.module.ts
index b592079e7..bf8eb18ec 100644
--- a/src/addons/notifications/pages/list/list.module.ts
+++ b/src/addons/notifications/pages/list/list.module.ts
@@ -16,7 +16,6 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 import { CoreSharedModule } from '@/core/shared.module';
-import { AddonNotificationsComponentsModule } from '../../components/components.module';
 import { AddonNotificationsListPage } from './list';
 import { CoreMainMenuComponentsModule } from '@features/mainmenu/components/components.module';
 
@@ -31,7 +30,6 @@ const routes: Routes = [
     imports: [
         RouterModule.forChild(routes),
         CoreSharedModule,
-        AddonNotificationsComponentsModule,
         CoreMainMenuComponentsModule,
     ],
     declarations: [
diff --git a/src/addons/notifications/pages/list/list.ts b/src/addons/notifications/pages/list/list.ts
index f508814bf..5919309e9 100644
--- a/src/addons/notifications/pages/list/list.ts
+++ b/src/addons/notifications/pages/list/list.ts
@@ -30,6 +30,8 @@ import {
     AddonNotificationsNotificationToRender,
 } from '@addons/notifications/services/notifications-helper';
 import { CoreMainMenuDeepLinkManager } from '@features/mainmenu/classes/deep-link-manager';
+import { CoreNavigator } from '@services/navigator';
+import { CoreTimeUtils } from '@services/utils/time';
 
 /**
  * Page that displays the list of notifications.
@@ -50,6 +52,7 @@ export class AddonNotificationsListPage implements OnInit, OnDestroy {
 
     protected isCurrentView?: boolean;
     protected cronObserver?: CoreEventObserver;
+    protected readObserver?: CoreEventObserver;
     protected pushObserver?: Subscription;
     protected pendingRefresh = false;
 
@@ -84,6 +87,21 @@ export class AddonNotificationsListPage implements OnInit, OnDestroy {
             this.refreshNotifications();
         });
 
+        this.readObserver = CoreEvents.on(AddonNotificationsProvider.READ_CHANGED_EVENT, (data) => {
+            if (!data.id) {
+                return;
+            }
+
+            const notification = this.notifications.find((notification) => notification.id === data.id);
+            if (!notification) {
+                return;
+            }
+
+            notification.read = true;
+            notification.timeread = data.time;
+            this.loadMarkAllAsReadButton();
+        });
+
         const deepLinkManager = new CoreMainMenuDeepLinkManager();
         deepLinkManager.treatLink();
     }
@@ -91,7 +109,7 @@ export class AddonNotificationsListPage implements OnInit, OnDestroy {
     /**
      * Convenience function to get notifications. Gets unread notifications first.
      *
-     * @param refreh Whether we're refreshing data.
+     * @param refresh Whether we're refreshing data.
      * @return Resolved when done.
      */
     protected async fetchNotifications(refresh?: boolean): Promise<void> {
@@ -110,7 +128,7 @@ export class AddonNotificationsListPage implements OnInit, OnDestroy {
             }
             this.canLoadMore = result.canLoadMore;
 
-            this.markNotificationsAsRead(notifications);
+            await this.loadMarkAllAsReadButton();
         } catch (error) {
             CoreDomUtils.showErrorModalDefault(error, 'addon.notifications.errorgetnotifications', true);
             this.loadMoreError = true; // Set to prevent infinite calls with infinite-loading.
@@ -129,7 +147,9 @@ export class AddonNotificationsListPage implements OnInit, OnDestroy {
 
         await CoreUtils.ignoreErrors(AddonNotifications.markAllNotificationsAsRead());
 
-        CoreEvents.trigger(AddonNotificationsProvider.READ_CHANGED_EVENT, {}, CoreSites.getCurrentSiteId());
+        CoreEvents.trigger(AddonNotificationsProvider.READ_CHANGED_EVENT, {
+            time: CoreTimeUtils.timestamp(),
+        }, CoreSites.getCurrentSiteId());
 
         // All marked as read, refresh the list.
         this.notificationsLoaded = false;
@@ -140,26 +160,25 @@ export class AddonNotificationsListPage implements OnInit, OnDestroy {
     /**
      * Mark notifications as read.
      *
-     * @param notifications Array of notification objects.
+     * @param notification Array of notification objects.
+     * @return Promise resolved when done.
      */
-    protected async markNotificationsAsRead(notifications: AddonNotificationsNotificationToRender[]): Promise<void> {
-        if (notifications.length > 0) {
-            const promises = notifications.map(async (notification) => {
-                if (notification.read) {
-                    // Already read, don't mark it.
-                    return;
-                }
+    protected async markNotificationAsRead(notification: AddonNotificationsNotificationToRender): Promise<void> {
+        const updated = await AddonNotificationsHelper.markNotificationAsRead(notification);
 
-                await AddonNotifications.markNotificationRead(notification.id);
-            });
-
-            await CoreUtils.ignoreErrors(Promise.all(promises));
-
-            await CoreUtils.ignoreErrors(AddonNotifications.invalidateNotificationsList());
-
-            CoreEvents.trigger(AddonNotificationsProvider.READ_CHANGED_EVENT, {}, CoreSites.getCurrentSiteId());
+        if (!updated) {
+            return;
         }
 
+        await this.loadMarkAllAsReadButton();
+    }
+
+    /**
+     * Load mark all notifications as read button.
+     *
+     * @return Promise resolved when done.
+     */
+    protected async loadMarkAllAsReadButton(): Promise<void> {
         // Check if mark all as read should be displayed (there are unread notifications).
         try {
             this.loadingMarkAllNotificationsAsRead = true;
@@ -201,6 +220,15 @@ export class AddonNotificationsListPage implements OnInit, OnDestroy {
         }
     }
 
+    /**
+     * Open Notification page.
+     *
+     * @param notification Notification to open.
+     */
+    openNotification(notification: AddonNotificationsNotificationToRender): void {
+        CoreNavigator.navigate('../notification', { params: { notification } });
+    }
+
     /**
      * User entered the page.
      */
@@ -229,6 +257,7 @@ export class AddonNotificationsListPage implements OnInit, OnDestroy {
      */
     ngOnDestroy(): void {
         this.cronObserver?.off();
+        this.readObserver?.off();
         this.pushObserver?.unsubscribe();
     }
 
diff --git a/src/addons/notifications/pages/notification/notification.html b/src/addons/notifications/pages/notification/notification.html
index c0566dee0..b5acae1bd 100644
--- a/src/addons/notifications/pages/notification/notification.html
+++ b/src/addons/notifications/pages/notification/notification.html
@@ -4,34 +4,61 @@
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
         <ion-title>
-            <h2>{{ 'addon.notifications.notifications' | translate }}</h2>
+            <h1>{{ 'addon.notifications.notifications' | translate }}</h1>
         </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
     <core-loading [hideUntil]="loaded">
-        <ion-item class="ion-text-wrap" [attr.aria-label]="subject">
-            <core-user-avatar *ngIf="userIdFrom > 0" slot="start" [userId]="userIdFrom" [profileUrl]="profileImageUrlFrom"
-                [fullname]="userFromFullName">
-                <div class="core-avatar-extra-img" *ngIf="iconUrl && !modname">
-                    <img [src]="iconUrl" alt="" role="presentation">
-                </div>
-                <core-mod-icon *ngIf="modname" [modicon]="iconUrl" [modname]="modname" [showAlt]="false">
-                </core-mod-icon>
-            </core-user-avatar>
+        <div class="list-item-limited-width">
+            <ion-card>
 
-            <img *ngIf="userIdFrom <= 0 && iconUrl" [src]="iconUrl" alt="" role="presentation" class="core-notification-icon" slot="start">
+                <ion-item class="ion-text-wrap">
+                    <core-user-avatar *ngIf="userIdFrom > 0" slot="start" [userId]="userIdFrom" [profileUrl]="profileImageUrlFrom"
+                        [fullname]="userFromFullName">
+                        <div class="core-avatar-extra-img" *ngIf="iconUrl && !modname">
+                            <img [src]="iconUrl" alt="" role="presentation">
+                        </div>
+                        <core-mod-icon *ngIf="modname" [modicon]="iconUrl" [modname]="modname" [showAlt]="false">
+                        </core-mod-icon>
+                    </core-user-avatar>
 
-            <ion-label>
-                <p class="item-heading">{{ subject }}</p>
-                <p *ngIf="userIdFrom > 0">{{ userFromFullName }}</p>
-            </ion-label>
-        </ion-item>
-        <ion-item class="ion-text-wrap">
-            <ion-label>
-                <core-format-text [text]="content | coreCreateLinks" contextLevel="system" [contextInstanceId]="0">
-                </core-format-text>
-            </ion-label>
-        </ion-item>
+                    <ng-container *ngIf="userIdFrom <= 0 && iconUrl">
+                        <div class="core-notification-icon" *ngIf="!modname" slot="start">
+                            <img [src]="iconUrl" alt="" role="presentation">
+                        </div>
+                        <core-mod-icon *ngIf="modname" [modicon]="iconUrl" [modname]="modname" [showAlt]="false"
+                            class="core-notification-icon" slot="start">
+                        </core-mod-icon>
+                    </ng-container>
+
+                    <ion-label>
+                        <ion-card-subtitle *ngIf="userIdFrom > 0">{{ userFromFullName }}</ion-card-subtitle>
+                        <ion-card-title>
+                            <core-format-text [text]="subject" contextLevel="system" [contextInstanceId]="0" [wsNotFiltered]="true">
+                            </core-format-text>
+                        </ion-card-title>
+                    </ion-label>
+                    <ion-note slot="end" *ngIf="timecreated">
+                        {{ timecreated | coreDateDayOrTime }}
+                    </ion-note>
+                </ion-item>
+                <ion-item class="ion-text-wrap">
+                    <ion-label>
+                        <core-format-text [text]="content | coreCreateLinks" contextLevel="system" [contextInstanceId]="0">
+                        </core-format-text>
+                    </ion-label>
+                </ion-item>
+            </ion-card>
+        </div>
+
+        <div collapsible-footer appearOnBottom *ngIf="loaded && actions && actions.length > 0" slot="fixed">
+            <div class="list-item-limited-width adaptable-buttons-row">
+                <ion-button expand="block" (click)="action.action()" *ngFor="let action of actions">
+                    <ion-icon slot="start" name="{{action.icon}}" aria-hidden="true"></ion-icon>
+                    {{ action.message | translate }}
+                </ion-button>
+            </div>
+        </div>
     </core-loading>
 </ion-content>
diff --git a/src/addons/notifications/pages/notification/notification.module.ts b/src/addons/notifications/pages/notification/notification.module.ts
index b316d8bd4..e16e2860b 100644
--- a/src/addons/notifications/pages/notification/notification.module.ts
+++ b/src/addons/notifications/pages/notification/notification.module.ts
@@ -16,7 +16,6 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 import { CoreSharedModule } from '@/core/shared.module';
-import { AddonNotificationsComponentsModule } from '../../components/components.module';
 import { AddonNotificationsNotificationPage } from './notification';
 
 const routes: Routes = [
@@ -30,7 +29,6 @@ const routes: Routes = [
     imports: [
         RouterModule.forChild(routes),
         CoreSharedModule,
-        AddonNotificationsComponentsModule,
     ],
     declarations: [
         AddonNotificationsNotificationPage,
diff --git a/src/addons/notifications/pages/notification/notification.scss b/src/addons/notifications/pages/notification/notification.scss
new file mode 100644
index 000000000..e296eadb9
--- /dev/null
+++ b/src/addons/notifications/pages/notification/notification.scss
@@ -0,0 +1,68 @@
+@import "~theme/globals";
+
+:host {
+
+    h2 {
+        font-weight: bold;
+    }
+
+    core-format-text ::ng-deep {
+        .forumpost {
+            border: 1px solid var(--gray-200);
+            width: 100%;
+            margin: 0 0 1em 0;
+
+            td {
+                padding: 10px;
+            }
+
+            .header {
+                background-color: var(--light);
+
+                .picture {
+                    width: 48px;
+                    text-align: center;
+                    @include padding-horizontal(4px, 0px);
+                    padding-top: 8px;
+
+                    img {
+                        width: 44px !important;
+                    }
+                }
+            }
+
+            .subject {
+                font-weight: 700;
+                margin-bottom: 1rem;
+            }
+        }
+
+        a {
+            text-decoration: none;
+        }
+
+        .userpicture {
+            border-radius: 50%;
+        }
+
+        .mdl-right {
+            text-align: end;
+            a {
+                display: none;
+            }
+            font {
+                font-size: 0.9em;
+            }
+        }
+
+        .commands {
+            display: none;
+        }
+
+        hr {
+            margin-top: 1.5rem;
+            margin-bottom: 1.5rem;
+            background-color: var(--gray-200);
+        }
+    }
+}
diff --git a/src/addons/notifications/pages/notification/notification.ts b/src/addons/notifications/pages/notification/notification.ts
index 9fb04f294..23282d713 100644
--- a/src/addons/notifications/pages/notification/notification.ts
+++ b/src/addons/notifications/pages/notification/notification.ts
@@ -19,7 +19,9 @@ import {
     AddonNotificationsNotificationToRender,
 } from '@addons/notifications/services/notifications-helper';
 import { Component, OnInit } from '@angular/core';
+import { CoreContentLinksAction, CoreContentLinksDelegate } from '@features/contentlinks/services/contentlinks-delegate';
 import { CoreNavigator } from '@services/navigator';
+import { CoreSites } from '@services/sites';
 import { CoreDomUtils } from '@services/utils/dom';
 import { CoreUtils } from '@services/utils/utils';
 
@@ -29,7 +31,7 @@ import { CoreUtils } from '@services/utils/utils';
 @Component({
     selector: 'page-addon-notifications-notification',
     templateUrl: 'notification.html',
-    styleUrls: ['../../notifications.scss'],
+    styleUrls: ['../../notifications.scss', 'notification.scss'],
 })
 export class AddonNotificationsNotificationPage implements OnInit {
 
@@ -41,12 +43,19 @@ export class AddonNotificationsNotificationPage implements OnInit {
     iconUrl?: string; // Icon URL.
     modname?: string; // Module name.
     loaded = false;
+    timecreated = 0;
+
+    // Actions data.
+    actions: CoreContentLinksAction[] = [];
+    contextUrl?: string;
+    courseId?: number;
+    actionsData?: Record<string, unknown>; // Extra data to handle the URL.
 
     /**
      * @inheritdoc
      */
     async ngOnInit(): Promise<void> {
-        let notification: AddonNotificationsNotificationToRender | AddonNotificationsNotificationData;
+        let notification: AddonNotificationsNotification;
 
         try {
             notification = CoreNavigator.getRequiredRouteParam('notification');
@@ -85,6 +94,8 @@ export class AddonNotificationsNotificationPage implements OnInit {
                     this.modname = modname;
                 }
             }
+            this.timecreated = notification.timecreated;
+
         } else {
             this.subject = notification.title || '';
             this.content = notification.message || '';
@@ -93,7 +104,73 @@ export class AddonNotificationsNotificationPage implements OnInit {
             this.userFromFullName = notification.userfromfullname;
         }
 
+        await this.loadActions(notification);
+        AddonNotificationsHelper.markNotificationAsRead(notification);
+
         this.loaded = true;
     }
 
+    /**
+     * Load notification actions
+     *
+     * @param notification Notification.
+     * @return Promise resolved when done.
+     */
+    async loadActions(notification: AddonNotificationsNotification): Promise<void> {
+        if (!notification.contexturl && (!notification.customdata || !notification.customdata.appurl)) {
+            // No URL, nothing to do.
+            return;
+        }
+
+        let actions: CoreContentLinksAction[] = [];
+        this.actionsData = notification.customdata;
+        this.contextUrl = notification.contexturl;
+        this.courseId = 'courseid' in notification ? notification.courseid : undefined;
+
+        // Treat appurl first if any.
+        if (this.actionsData?.appurl) {
+            actions = await CoreContentLinksDelegate.getActionsFor(
+                <string> this.actionsData.appurl,
+                this.courseId,
+                undefined,
+                this.actionsData,
+            );
+        }
+
+        if (!actions.length && this.contextUrl) {
+            // No appurl or cannot handle it. Try with contextUrl.
+            actions = await CoreContentLinksDelegate.getActionsFor(this.contextUrl, this.courseId, undefined, this.actionsData);
+        }
+
+        if (!actions.length) {
+            // URL is not supported. Add an action to open it in browser.
+            actions.push({
+                message: 'core.view',
+                icon: 'fas-eye',
+                action: this.openInBrowser.bind(this),
+            });
+        }
+
+        this.actions = actions;
+    }
+
+    /**
+     * Default action. Open in browser.
+     *
+     * @param siteId Site ID to use.
+     */
+    protected async openInBrowser(siteId?: string): Promise<void> {
+        const url = <string> this.actionsData?.appurl || this.contextUrl;
+
+        if (!url) {
+            return;
+        }
+
+        const site = await CoreSites.getSite(siteId);
+
+        site.openInBrowserWithAutoLogin(url);
+    }
+
 }
+
+type AddonNotificationsNotification = AddonNotificationsNotificationToRender | AddonNotificationsNotificationData;
diff --git a/src/addons/notifications/services/handlers/push-click.ts b/src/addons/notifications/services/handlers/push-click.ts
index 2312b4e75..3fc1c4d0d 100644
--- a/src/addons/notifications/services/handlers/push-click.ts
+++ b/src/addons/notifications/services/handlers/push-click.ts
@@ -18,12 +18,12 @@ import { CoreNavigator } from '@services/navigator';
 import { CoreTextUtils } from '@services/utils/text';
 import { CoreUtils } from '@services/utils/utils';
 import { makeSingleton } from '@singletons';
-import { CoreEvents } from '@singletons/events';
 import { CorePushNotificationsClickHandler } from '@features/pushnotifications/services/push-delegate';
 import { CorePushNotificationsNotificationBasicData } from '@features/pushnotifications/services/pushnotifications';
 import { CoreContentLinksHelper } from '@features/contentlinks/services/contentlinks-helper';
-import { AddonNotifications, AddonNotificationsProvider } from '../notifications';
+import { AddonNotifications } from '../notifications';
 import { AddonNotificationsMainMenuHandlerService } from './mainmenu';
+import { AddonNotificationsHelper } from '../notifications-helper';
 
 /**
  * Handler for non-messaging push notifications clicks.
@@ -64,15 +64,7 @@ export class AddonNotificationsPushClickHandlerService implements CorePushNotifi
      * @return Promise resolved when done.
      */
     protected async markAsRead(notification: AddonNotificationsNotificationData): Promise<void> {
-        const notifId = notification.savedmessageid || notification.id;
-
-        if (!notifId) {
-            return;
-        }
-
-        await CoreUtils.ignoreErrors(AddonNotifications.markNotificationRead(notifId, notification.site));
-
-        CoreEvents.trigger(AddonNotificationsProvider.READ_CHANGED_EVENT, {}, notification.site);
+        await CoreUtils.ignoreErrors(AddonNotificationsHelper.markNotificationAsRead(notification));
     }
 
     /**
diff --git a/src/addons/notifications/services/notifications-helper.ts b/src/addons/notifications/services/notifications-helper.ts
index 8eb24bfdc..38d79ddc6 100644
--- a/src/addons/notifications/services/notifications-helper.ts
+++ b/src/addons/notifications/services/notifications-helper.ts
@@ -18,13 +18,18 @@ import { CoreUtils } from '@services/utils/utils';
 import { makeSingleton } from '@singletons';
 import { AddonMessageOutputDelegate } from '@addons/messageoutput/services/messageoutput-delegate';
 import {
+    AddonNotifications,
     AddonNotificationsNotificationMessageFormatted,
     AddonNotificationsPreferences,
     AddonNotificationsPreferencesComponent,
     AddonNotificationsPreferencesNotification,
     AddonNotificationsPreferencesNotificationProcessor,
     AddonNotificationsPreferencesProcessor,
+    AddonNotificationsProvider,
 } from './notifications';
+import { CoreEvents } from '@singletons/events';
+import { AddonNotificationsNotificationData } from './handlers/push-click';
+import { CoreTimeUtils } from '@services/utils/time';
 
 /**
  * Service that provides some helper functions for notifications.
@@ -115,6 +120,46 @@ export class AddonNotificationsHelperProvider {
         return result;
     }
 
+    /**
+     * Mark notification as read, trigger event and invalidate data.
+     *
+     * @param notification Notification object.
+     * @return Promise resolved when done.
+     */
+    async markNotificationAsRead(
+        notification: AddonNotificationsNotificationMessageFormatted | AddonNotificationsNotificationData,
+        siteId?: string,
+    ): Promise<boolean> {
+        if ('read' in notification && (notification.read || notification.timeread > 0)) {
+            // Already read, don't mark it.
+            return false;
+        }
+
+        const notifId = 'savedmessageid' in notification ? notification.savedmessageid || notification.id : notification.id;
+        if (!notifId) {
+            return false;
+        }
+
+        siteId = 'site' in notification ? notification.site : siteId;
+
+        await CoreUtils.ignoreErrors(AddonNotifications.markNotificationRead(notifId, siteId));
+
+        const time = CoreTimeUtils.timestamp();
+        if ('read' in notification) {
+            notification.read = true;
+            notification.timeread = time;
+        }
+
+        await CoreUtils.ignoreErrors(AddonNotifications.invalidateNotificationsList());
+
+        CoreEvents.trigger(AddonNotificationsProvider.READ_CHANGED_EVENT, {
+            id: notifId,
+            time,
+        }, siteId);
+
+        return true;
+    }
+
 }
 
 export const AddonNotificationsHelper = makeSingleton(AddonNotificationsHelperProvider);
diff --git a/src/addons/notifications/services/notifications.ts b/src/addons/notifications/services/notifications.ts
index 1fab101db..d6426b01a 100644
--- a/src/addons/notifications/services/notifications.ts
+++ b/src/addons/notifications/services/notifications.ts
@@ -24,6 +24,19 @@ import { CoreLogger } from '@singletons/logger';
 import { makeSingleton } from '@singletons';
 import { CoreCourseModuleDelegate } from '@features/course/services/module-delegate';
 
+declare module '@singletons/events' {
+
+    /**
+     * Augment CoreEventsData interface with events specific to this service.
+     *
+     * @see https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation
+     */
+    export interface CoreEventsData {
+        [AddonNotificationsProvider.READ_CHANGED_EVENT]: AddonNotificationsReadChangedEvent;
+    }
+
+}
+
 const ROOT_CACHE_KEY = 'mmaNotifications:';
 
 /**
@@ -577,3 +590,11 @@ export enum AddonNotificationsGetReadType {
     READ = 1,
     BOTH = 2,
 }
+
+/**
+ * Event triggered when one or more notifications are read.
+ */
+export type AddonNotificationsReadChangedEvent = {
+    id?: number; // Set to the single id notification read. Undefined if multiple.
+    time: number; // Time of the change.
+};

From 6255c86708073ed5f2e353b925d2e2517e8e845f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 25 Mar 2022 15:51:15 +0100
Subject: [PATCH 6/7] MOBILE-3833 styles: Unify toast colors

---
 src/theme/theme.base.scss  | 1 -
 src/theme/theme.light.scss | 6 ++++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index e3db5d413..ebf03452b 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -501,7 +501,6 @@ ion-loading {
 
 // Toasts.
 ion-toast {
-    --button-color: var(--primary-tint);
     @include media-breakpoint-down(sm) {
         &::part(container) {
             flex-direction: column;
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index 284d216cb..21e9485e1 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -237,6 +237,12 @@
         }
     }
 
+    ion-toast {
+        --color: var(--ion-color-step-50);
+        --button-color: var(--primary);
+        --background: var(--ion-color-step-800);
+    }
+
     --core-tabs-background: var(--white);
     --core-tab-background: var(--core-tabs-background);
     --core-tab-color: var(--subdued-text-color);

From c64f0b935381bf60aa8951a68516d836561c3c78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Mon, 28 Mar 2022 11:59:38 +0200
Subject: [PATCH 7/7] MOBILE-3833 notifications: Update styles

---
 src/addons/notifications/pages/list/list.html |  33 ++---
 src/addons/notifications/pages/list/list.scss |  72 +++++++++++
 src/addons/notifications/pages/list/list.ts   |  18 +--
 .../pages/notification/notification.html      |  67 +++++------
 .../pages/notification/notification.scss      | 113 ++++++++++--------
 5 files changed, 188 insertions(+), 115 deletions(-)
 create mode 100644 src/addons/notifications/pages/list/list.scss

diff --git a/src/addons/notifications/pages/list/list.html b/src/addons/notifications/pages/list/list.html
index 955271699..f208df1ae 100644
--- a/src/addons/notifications/pages/list/list.html
+++ b/src/addons/notifications/pages/list/list.html
@@ -17,20 +17,11 @@
     </ion-refresher>
     <core-loading [hideUntil]="notificationsLoaded">
 
-        <div class="ion-padding" *ngIf="canMarkAllNotificationsAsRead">
-            <ion-button [disabled]="loadingMarkAllNotificationsAsRead" expand="block" (click)="markAllNotificationsAsRead()" fill="outline">
-                <ion-icon slot="start" name="fas-check" aria-hidden="true" *ngIf="!loadingMarkAllNotificationsAsRead"></ion-icon>
-                <ion-spinner slot="start" [attr.aria-label]="'core.loading' | translate" *ngIf="loadingMarkAllNotificationsAsRead">
-                </ion-spinner>
-                {{ 'addon.notifications.markallread' | translate }}
-            </ion-button>
-        </div>
-
         <ion-item *ngFor="let notification of notifications" class="ion-text-wrap" [attr.aria-label]="
                     notification.timeread
                     ? notification.subject
                     : 'addon.notifications.unreadnotification' | translate: {$a: notification.subject}"
-            (click)="openNotification(notification)" button [detail]="true" lines="true">
+            (click)="openNotification(notification)" button [detail]="false" lines="full">
             <core-user-avatar *ngIf="notification.useridfrom > 0" [user]="notification" slot="start"
                 [profileUrl]="notification.profileimageurlfrom" [fullname]="notification.userfromfullname"
                 [userId]="notification.useridfrom">
@@ -56,13 +47,12 @@
                     <core-format-text [text]="notification.subject" contextLevel="system" [contextInstanceId]="0" [wsNotFiltered]="true">
                     </core-format-text>
                 </p>
-                <p *ngIf="notification.useridfrom > 0">{{ notification.userfromfullname }}</p>
+                <p>{{ notification.timecreated | coreTimeAgo }}<ng-container *ngIf="notification.useridfrom > 0"> · {{
+                        notification.userfromfullname }}</ng-container>
+                </p>
             </ion-label>
-            <ion-note slot="end">
-                {{ notification.timecreated | coreDateDayOrTime }}
-                <span *ngIf="!notification.timeread">
-                    <ion-icon name="fas-circle" color="primary" aria-hidden="true"></ion-icon>
-                </span>
+            <ion-note slot="end" *ngIf="!notification.timeread">
+                <ion-icon name="fas-circle" color="primary" aria-hidden="true"></ion-icon>
             </ion-note>
         </ion-item>
 
@@ -72,4 +62,15 @@
         <core-infinite-loading [enabled]="canLoadMore" (action)="loadMoreNotifications($event)" [error]="loadMoreError">
         </core-infinite-loading>
     </core-loading>
+
+
+    <div class="mark-all-as-read" slot="fixed" collapsible-footer appearOnBottom>
+        <ion-chip *ngIf="notificationsLoaded && canMarkAllNotificationsAsRead" [disabled]="loadingMarkAllNotificationsAsRead"
+            color="primary" (click)="markAllNotificationsAsRead()">
+            <ion-icon name="fas-eye" aria-hidden="true" *ngIf="!loadingMarkAllNotificationsAsRead"></ion-icon>
+            <ion-spinner [attr.aria-label]="'core.loading' | translate" *ngIf="loadingMarkAllNotificationsAsRead">
+            </ion-spinner>
+            {{ 'addon.notifications.markallread' | translate }}
+        </ion-chip>
+    </div>
 </ion-content>
diff --git a/src/addons/notifications/pages/list/list.scss b/src/addons/notifications/pages/list/list.scss
new file mode 100644
index 000000000..4ac957b62
--- /dev/null
+++ b/src/addons/notifications/pages/list/list.scss
@@ -0,0 +1,72 @@
+@import "~theme/globals";
+
+ion-item {
+    ion-label {
+        margin-top: 8px;
+        margin-bottom: 8px;
+        p.item-heading {
+            font-size: 14px;
+            -webkit-line-clamp: 3;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            -webkit-box-orient: vertical;
+            display: -webkit-box;
+        }
+        p {
+            font-size: 12px;
+        }
+    }
+
+    ion-note {
+        margin: 0;
+        @include padding-horizontal(8px, 0);
+        padding-top: 12px;
+
+        ion-icon {
+            font-size: 6px;
+            vertical-align: middle;
+        }
+    }
+
+    [slot=start] {
+        align-self: start;
+        margin-top: 16px;
+    }
+
+    --icon-size: 16px;
+    --extra-icon-size: 12px;
+    --core-avatar-size: 32px;
+
+    div.core-notification-icon,
+    core-mod-icon.core-notification-icon {
+        padding: 8px;
+    }
+}
+
+.mark-all-as-read {
+    padding-bottom: 16px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    background: transparent;
+    box-shadow: none;
+    pointer-events: none;
+
+    ion-chip.ion-color {
+        pointer-events: all;
+        margin: 0 auto;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
+
+        ion-spinner {
+            width: 16px;
+            height: 16px;
+            @include margin-horizontal(0, 8px);
+        }
+    }
+}
+
+
+ion-content::part(scroll) {
+    padding-bottom: 44px;
+}
diff --git a/src/addons/notifications/pages/list/list.ts b/src/addons/notifications/pages/list/list.ts
index 5919309e9..d8b29c4de 100644
--- a/src/addons/notifications/pages/list/list.ts
+++ b/src/addons/notifications/pages/list/list.ts
@@ -39,7 +39,7 @@ import { CoreTimeUtils } from '@services/utils/time';
 @Component({
     selector: 'page-addon-notifications-list',
     templateUrl: 'list.html',
-    styleUrls: ['../../notifications.scss'],
+    styleUrls: ['list.scss', '../../notifications.scss'],
 })
 export class AddonNotificationsListPage implements OnInit, OnDestroy {
 
@@ -157,22 +157,6 @@ export class AddonNotificationsListPage implements OnInit, OnDestroy {
         await this.refreshNotifications();
     }
 
-    /**
-     * Mark notifications as read.
-     *
-     * @param notification Array of notification objects.
-     * @return Promise resolved when done.
-     */
-    protected async markNotificationAsRead(notification: AddonNotificationsNotificationToRender): Promise<void> {
-        const updated = await AddonNotificationsHelper.markNotificationAsRead(notification);
-
-        if (!updated) {
-            return;
-        }
-
-        await this.loadMarkAllAsReadButton();
-    }
-
     /**
      * Load mark all notifications as read button.
      *
diff --git a/src/addons/notifications/pages/notification/notification.html b/src/addons/notifications/pages/notification/notification.html
index b5acae1bd..9c2254c43 100644
--- a/src/addons/notifications/pages/notification/notification.html
+++ b/src/addons/notifications/pages/notification/notification.html
@@ -11,45 +11,42 @@
 <ion-content>
     <core-loading [hideUntil]="loaded">
         <div class="list-item-limited-width">
-            <ion-card>
 
-                <ion-item class="ion-text-wrap">
-                    <core-user-avatar *ngIf="userIdFrom > 0" slot="start" [userId]="userIdFrom" [profileUrl]="profileImageUrlFrom"
-                        [fullname]="userFromFullName">
-                        <div class="core-avatar-extra-img" *ngIf="iconUrl && !modname">
-                            <img [src]="iconUrl" alt="" role="presentation">
-                        </div>
-                        <core-mod-icon *ngIf="modname" [modicon]="iconUrl" [modname]="modname" [showAlt]="false">
-                        </core-mod-icon>
-                    </core-user-avatar>
+            <ion-item class="ion-text-wrap core-notification-title" lines="full">
+                <core-user-avatar *ngIf="userIdFrom > 0" slot="start" [userId]="userIdFrom" [profileUrl]="profileImageUrlFrom"
+                    [fullname]="userFromFullName">
+                    <div class="core-avatar-extra-img" *ngIf="iconUrl && !modname">
+                        <img [src]="iconUrl" alt="" role="presentation">
+                    </div>
+                    <core-mod-icon *ngIf="modname" [modicon]="iconUrl" [modname]="modname" [showAlt]="false">
+                    </core-mod-icon>
+                </core-user-avatar>
 
-                    <ng-container *ngIf="userIdFrom <= 0 && iconUrl">
-                        <div class="core-notification-icon" *ngIf="!modname" slot="start">
-                            <img [src]="iconUrl" alt="" role="presentation">
-                        </div>
-                        <core-mod-icon *ngIf="modname" [modicon]="iconUrl" [modname]="modname" [showAlt]="false"
-                            class="core-notification-icon" slot="start">
-                        </core-mod-icon>
-                    </ng-container>
+                <ng-container *ngIf="userIdFrom <= 0 && iconUrl">
+                    <div class="core-notification-icon" *ngIf="!modname" slot="start">
+                        <img [src]="iconUrl" alt="" role="presentation">
+                    </div>
+                    <core-mod-icon *ngIf="modname" [modicon]="iconUrl" [modname]="modname" [showAlt]="false" class="core-notification-icon"
+                        slot="start">
+                    </core-mod-icon>
+                </ng-container>
 
-                    <ion-label>
-                        <ion-card-subtitle *ngIf="userIdFrom > 0">{{ userFromFullName }}</ion-card-subtitle>
-                        <ion-card-title>
-                            <core-format-text [text]="subject" contextLevel="system" [contextInstanceId]="0" [wsNotFiltered]="true">
-                            </core-format-text>
-                        </ion-card-title>
-                    </ion-label>
-                    <ion-note slot="end" *ngIf="timecreated">
-                        {{ timecreated | coreDateDayOrTime }}
-                    </ion-note>
-                </ion-item>
-                <ion-item class="ion-text-wrap">
-                    <ion-label>
-                        <core-format-text [text]="content | coreCreateLinks" contextLevel="system" [contextInstanceId]="0">
+                <ion-label>
+                    <p class="item-heading">
+                        <core-format-text [text]="subject" contextLevel="system" [contextInstanceId]="0" [wsNotFiltered]="true">
                         </core-format-text>
-                    </ion-label>
-                </ion-item>
-            </ion-card>
+                    </p>
+                    <p>{{ timecreated | coreTimeAgo }}<ng-container *ngIf="userIdFrom > 0"> · {{
+                            userFromFullName }}</ng-container>
+                    </p>
+                </ion-label>
+            </ion-item>
+            <ion-item class="ion-text-wrap core-notification-body">
+                <ion-label>
+                    <core-format-text [text]="content | coreCreateLinks" contextLevel="system" [contextInstanceId]="0">
+                    </core-format-text>
+                </ion-label>
+            </ion-item>
         </div>
 
         <div collapsible-footer appearOnBottom *ngIf="loaded && actions && actions.length > 0" slot="fixed">
diff --git a/src/addons/notifications/pages/notification/notification.scss b/src/addons/notifications/pages/notification/notification.scss
index e296eadb9..05f459851 100644
--- a/src/addons/notifications/pages/notification/notification.scss
+++ b/src/addons/notifications/pages/notification/notification.scss
@@ -2,67 +2,86 @@
 
 :host {
 
-    h2 {
-        font-weight: bold;
+    .core-notification-title {
+        [slot=start] {
+            align-self: start;
+            margin-top: 16px;
+        }
+        p.item-heading {
+            font-size: 16px;
+        }
+        p {
+            font-size: 12px;
+        }
     }
 
-    core-format-text ::ng-deep {
-        .forumpost {
-            border: 1px solid var(--gray-200);
-            width: 100%;
-            margin: 0 0 1em 0;
+    .core-notification-body {
+        core-format-text {
+            font-size: 14px;
+        }
 
-            td {
-                padding: 10px;
-            }
+        h2 {
+            font-weight: bold;
+        }
 
-            .header {
-                background-color: var(--light);
+        core-format-text ::ng-deep {
+            .forumpost {
+                border: 1px solid var(--gray-200);
+                width: 100%;
+                margin: 0 0 1em 0;
 
-                .picture {
-                    width: 48px;
-                    text-align: center;
-                    @include padding-horizontal(4px, 0px);
-                    padding-top: 8px;
+                td {
+                    padding: 10px;
+                }
 
-                    img {
-                        width: 44px !important;
+                .header {
+                    background-color: var(--light);
+
+                    .picture {
+                        width: 48px;
+                        text-align: center;
+                        @include padding-horizontal(4px, 0px);
+                        padding-top: 8px;
+
+                        img {
+                            width: 44px !important;
+                        }
                     }
                 }
+
+                .subject {
+                    font-weight: 700;
+                    margin-bottom: 1rem;
+                }
             }
 
-            .subject {
-                font-weight: 700;
-                margin-bottom: 1rem;
-            }
-        }
-
-        a {
-            text-decoration: none;
-        }
-
-        .userpicture {
-            border-radius: 50%;
-        }
-
-        .mdl-right {
-            text-align: end;
             a {
+                text-decoration: none;
+            }
+
+            .userpicture {
+                border-radius: 50%;
+            }
+
+            .mdl-right {
+                text-align: end;
+                a {
+                    display: none;
+                }
+                font {
+                    font-size: 0.9em;
+                }
+            }
+
+            .commands {
                 display: none;
             }
-            font {
-                font-size: 0.9em;
+
+            hr {
+                margin-top: 1.5rem;
+                margin-bottom: 1.5rem;
+                background-color: var(--gray-200);
             }
         }
-
-        .commands {
-            display: none;
-        }
-
-        hr {
-            margin-top: 1.5rem;
-            margin-bottom: 1.5rem;
-            background-color: var(--gray-200);
-        }
     }
 }