From 56e51e9e60fcb9bb92708720bba30ab602af383b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 17 Nov 2021 11:46:37 +0100
Subject: [PATCH 1/9] MOBILE-3810 ionic: Prevent modal from opening twice

---
 src/core/services/utils/dom.ts | 34 +++++++++++++++++++++++-----------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/core/services/utils/dom.ts b/src/core/services/utils/dom.ts
index bc52b22fe..c23675e5c 100644
--- a/src/core/services/utils/dom.ts
+++ b/src/core/services/utils/dom.ts
@@ -71,6 +71,7 @@ export class CoreDomUtilsProvider {
     protected instances: WeakMap<Element, unknown> = new WeakMap(); // Store component/directive instances indexed by element.
     protected debugDisplay = false; // Whether to display debug messages. Store it in a variable to make it synchronous.
     protected displayedAlerts: Record<string, HTMLIonAlertElement> = {}; // To prevent duplicated alerts.
+    protected displayedModals: Record<string, HTMLIonModalElement> = {}; // To prevent duplicated modals.
     protected activeLoadingModals: CoreIonLoadingElement[] = [];
     protected logger: CoreLogger;
 
@@ -1690,26 +1691,37 @@ export class CoreDomUtilsProvider {
     async openModal<T = unknown>(
         options: OpenModalOptions,
     ): Promise<T | undefined> {
-
         const { waitForDismissCompleted, closeOnNavigate, ...modalOptions } = options;
         const listenCloseEvents = closeOnNavigate ?? true; // Default to true.
 
-        const modal = await ModalController.create(modalOptions);
+        // TODO: Improve this if we need two modals with same component open at the same time.
+        const modalId = <string> Md5.hashAsciiStr(options.component?.toString() || '');
+
+        const modal = this.displayedModals[modalId]
+            ? this.displayedModals[modalId]
+            : await ModalController.create(modalOptions);
 
         let navSubscription: Subscription | undefined;
-        if (listenCloseEvents) {
-            // Listen navigation events to close modals.
-            navSubscription = Router.events
-                .pipe(filter(event => event instanceof NavigationStart))
-                .subscribe(async () => {
-                    modal.dismiss();
-                });
-        }
 
-        await modal.present();
+        if (!this.displayedModals[modalId]) {
+            // Store the modal and remove it when dismissed.
+            this.displayedModals[modalId] = modal;
+
+            if (listenCloseEvents) {
+                // Listen navigation events to close modals.
+                navSubscription = Router.events
+                    .pipe(filter(event => event instanceof NavigationStart))
+                    .subscribe(async () => {
+                        modal.dismiss();
+                    });
+            }
+
+            await modal.present();
+        }
 
         const result = waitForDismissCompleted ? await modal.onDidDismiss<T>() : await modal.onWillDismiss<T>();
         navSubscription?.unsubscribe();
+        delete this.displayedModals[modalId];
 
         if (result?.data) {
             return result?.data;

From 8a3ae5e081c0651ebf48d6b0f2fb6e6646aefa3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 16 Nov 2021 14:10:43 +0100
Subject: [PATCH 2/9] MOBILE-3810 module: Fix getIconSrc on course module
 handler

---
 .../mod/resource/services/handlers/module.ts  | 28 ++++++++++++++++++-
 src/core/components/mod-icon/mod-icon.ts      |  4 +--
 .../course/services/module-delegate.ts        |  8 ++++--
 3 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/addons/mod/resource/services/handlers/module.ts b/src/addons/mod/resource/services/handlers/module.ts
index 69a3d2ce8..275ea61f7 100644
--- a/src/addons/mod/resource/services/handlers/module.ts
+++ b/src/addons/mod/resource/services/handlers/module.ts
@@ -15,7 +15,7 @@
 import { CoreConstants } from '@/core/constants';
 import { Injectable, Type } from '@angular/core';
 import { CoreModuleHandlerBase } from '@features/course/classes/module-base-handler';
-import { CoreCourse } from '@features/course/services/course';
+import { CoreCourse, CoreCourseWSModule } from '@features/course/services/course';
 import { CoreCourseModule } from '@features/course/services/course-helper';
 import { CoreCourseModuleHandler, CoreCourseModuleHandlerData } from '@features/course/services/module-delegate';
 import { CoreCourseModulePrefetchDelegate } from '@features/course/services/module-prefetch-delegate';
@@ -226,6 +226,32 @@ export class AddonModResourceModuleHandlerService extends CoreModuleHandlerBase
         };
     }
 
+    /**
+     * @inheritdoc
+     */
+    async getIconSrc(module?: CoreCourseWSModule): Promise<string | undefined> {
+        if (!module) {
+            return;
+        }
+        let mimetypeIcon = '';
+
+        if ('contentsinfo' in module && module.contentsinfo) {
+            // No need to use the list of files.
+            const mimetype = module.contentsinfo.mimetypes[0];
+            if (mimetype) {
+                mimetypeIcon = CoreMimetypeUtils.getMimetypeIcon(mimetype);
+            }
+
+        } else if (module.contents && module.contents[0]) {
+            const files = module.contents;
+            const file = files[0];
+
+            mimetypeIcon = CoreMimetypeUtils.getFileIcon(file.filename || '');
+        }
+
+        return await CoreCourse.getModuleIconSrc(module.modname, module.modicon, mimetypeIcon);
+    }
+
     /**
      * @inheritdoc
      */
diff --git a/src/core/components/mod-icon/mod-icon.ts b/src/core/components/mod-icon/mod-icon.ts
index eba805215..c9c6b70ac 100644
--- a/src/core/components/mod-icon/mod-icon.ts
+++ b/src/core/components/mod-icon/mod-icon.ts
@@ -15,7 +15,7 @@
 import { Component, Input, OnChanges, OnInit, SimpleChange } from '@angular/core';
 import { CoreCourse } from '@features/course/services/course';
 
-const assetsPath = 'assets/img/mod/';
+const assetsPath = 'assets/img/';
 const fallbackModName = 'external-tool';
 
 /**
@@ -51,7 +51,7 @@ export class CoreModIconComponent implements OnInit, OnChanges {
      * @inheritdoc
      */
     ngOnChanges(changes: { [name: string]: SimpleChange }): void {
-        if (changes && changes.modicon && changes.modicon.previousValue) {
+        if (changes && changes.modicon && changes.modicon.previousValue !== undefined) {
             this.setIcon();
         }
     }
diff --git a/src/core/features/course/services/module-delegate.ts b/src/core/features/course/services/module-delegate.ts
index f967c89a5..e5f918d1f 100644
--- a/src/core/features/course/services/module-delegate.ts
+++ b/src/core/features/course/services/module-delegate.ts
@@ -80,9 +80,10 @@ export interface CoreCourseModuleHandler extends CoreDelegateHandler {
     /**
      * Get the icon src for the module.
      *
+     * @param module: Module to get the icon from.
      * @return The icon src.
      */
-    getIconSrc?(module: CoreCourseWSModule): Promise<string> | string | undefined;
+    getIconSrc?(module?: CoreCourseWSModule): Promise<string | undefined> | string | undefined;
 
     /**
      * Check if this type of module supports a certain feature.
@@ -343,10 +344,11 @@ export class CoreCourseModuleDelegateService extends CoreDelegate<CoreCourseModu
      *
      * @param modname The name of the module type.
      * @param modicon The mod icon string.
+     * @param module The module to use.
      * @return Promise resolved with the icon src.
      */
-    async getModuleIconSrc(modname: string, modicon?: string): Promise<string> {
-        const icon = await this.executeFunctionOnEnabled<Promise<string>>(modname, 'getIconSrc');
+    async getModuleIconSrc(modname: string, modicon?: string, module?: CoreCourseWSModule): Promise<string> {
+        const icon = await this.executeFunctionOnEnabled<Promise<string>>(modname, 'getIconSrc', [module]);
 
         return icon || await CoreCourse.getModuleIconSrc(modname, modicon) || '';
     }

From dace9898d04967d4871bde0220a44bcb3f83971f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 16 Nov 2021 12:58:46 +0100
Subject: [PATCH 3/9] MOBILE-3810 module: Add basic info to
 core-course-module-info

---
 .../index/addon-mod-assign-index.html         | 67 +++++++---------
 .../index/addon-mod-book-index.html           | 25 +++---
 .../index/addon-mod-chat-index.html           | 16 ++--
 .../index/addon-mod-choice-index.html         | 31 ++++----
 .../index/addon-mod-data-index.html           | 27 +++----
 .../index/addon-mod-feedback-index.html       | 39 ++++------
 .../index/addon-mod-folder-index.html         | 17 ++--
 .../mod/forum/components/index/index.html     | 77 ++++++++-----------
 .../index/addon-mod-glossary-index.html       | 30 ++++----
 .../index/addon-mod-h5pactivity-index.html    | 24 +++---
 .../index/addon-mod-imscp-index.html          | 11 ++-
 .../index/addon-mod-lesson-index.html         | 26 +++----
 .../components/index/addon-mod-lti-index.html | 17 ++--
 .../index/addon-mod-page-index.html           | 16 ++--
 .../index/addon-mod-quiz-index.html           | 62 +++++++--------
 .../index/addon-mod-resource-index.html       | 18 ++---
 .../index/addon-mod-scorm-index.html          | 26 +++----
 .../index/addon-mod-survey-index.html         | 45 +++++------
 .../components/index/addon-mod-url-index.html | 16 ++--
 .../index/addon-mod-wiki-index.html           | 33 ++++----
 src/addons/mod/wiki/pages/index/index.ts      |  4 +-
 .../index/addon-mod-workshop-index.html       | 40 ++++++----
 .../course/classes/main-resource-component.ts |  4 +-
 .../module-description/module-description.ts  |  4 +-
 .../module-info/core-course-module-info.html  | 53 +++++++++----
 .../module-info/course-module-info.scss       |  6 +-
 .../components/module-info/module-info.ts     | 35 ++++++++-
 .../core-course-unsupported-module.html       |  5 +-
 28 files changed, 365 insertions(+), 409 deletions(-)

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 ef0cd7d5d..1efbaa292 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
@@ -1,15 +1,14 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <core-context-menu>
-        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate"
-            [href]="externalUrl" iconAction="fas-external-link-alt" [showBrowserWarning]="false">
+        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate" [href]="externalUrl"
+            iconAction="fas-external-link-alt" [showBrowserWarning]="false">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="assign && (description || (assign.introattachments && assign.introattachments.length))"
-            [priority]="800" [content]="'core.moduleintro' | translate" (action)="expandDescription()"
-            iconAction="fas-arrow-right">
+            [priority]="800" [content]="'core.moduleintro' | translate" (action)="expandDescription()" iconAction="fas-arrow-right">
         </core-context-menu-item>
-        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}"
-            iconAction="far-newspaper" (action)="gotoBlog()">
+        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}" iconAction="far-newspaper"
+            (action)="gotoBlog()">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="loaded && !hasOffline && isOnline" [priority]="700" [content]="'core.refresh' | translate"
             (action)="doRefresh(null, $event)" [iconAction]="refreshIcon" [closeOnClick]="false">
@@ -31,26 +30,15 @@
 <core-loading [hideUntil]="loaded">
 
     <!-- Activity info. -->
-    <core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"
-        (completionChanged)="onCompletionChange()">
+    <core-course-module-info [module]="module" (completionChanged)="onCompletionChange()" [description]="description"
+        [component]="component" [componentId]="componentId" [courseId]="courseId">
+        <ion-list inset="true" description *ngIf="assign && assign.introattachments && assign.introattachments.length">
+            <core-file *ngFor="let file of assign.introattachments" [file]="file" [component]="component" [componentId]="componentId">
+            </core-file>
+        </ion-list>
     </core-course-module-info>
 
-    <!-- Description and intro attachments. -->
-    <ion-card *ngIf="description">
-        <ion-item class="ion-text-wrap">
-            <ion-label>
-                <core-format-text [text]="description" [component]="component" [componentId]="componentId" maxHeight="120"
-                    contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId"
-                    (onClick)="expandDescription($event)">
-                </core-format-text>
-            </ion-label>
-        </ion-item>
-    </ion-card>
 
-    <ion-card *ngIf="assign && assign.introattachments && assign.introattachments.length">
-        <core-file *ngFor="let file of assign.introattachments" [file]="file" [component]="component" [componentId]="componentId">
-        </core-file>
-    </ion-card>
 
     <!-- Assign has something offline. -->
     <ion-card class="core-warning-card" *ngIf="hasOffline">
@@ -90,8 +78,7 @@
             </ion-item>
 
             <!-- Summary of all submissions. -->
-            <ion-item class="ion-text-wrap" *ngIf="summary && summary.participantcount" (click)="goToSubmissionList()" detail="true"
-                button>
+            <ion-item class="ion-text-wrap" *ngIf="summary && summary.participantcount" (click)="goToSubmissionList()" detail="true" button>
                 <ion-label>
                     <h2 *ngIf="assign.teamsubmission">{{ 'addon.mod_assign.numberofteams' | translate }}</h2>
                     <h2 *ngIf="!assign.teamsubmission">{{ 'addon.mod_assign.numberofparticipants' | translate }}</h2>
@@ -109,48 +96,48 @@
 
             <!-- Summary of submissions with draft status. -->
             <ion-item class="ion-text-wrap" *ngIf="assign.submissiondrafts && summary && summary.submissionsenabled"
-                [class.hide-detail]="!summary.submissiondraftscount"
-                detail="true"
-                [button]="summary.submissiondraftscount"
+                [class.hide-detail]="!summary.submissiondraftscount" detail="true" [button]="summary.submissiondraftscount"
                 (click)="goToSubmissionList(submissionStatusDraft, !!summary.submissiondraftscount)">
-                <ion-label><h2>{{ 'addon.mod_assign.numberofdraftsubmissions' | translate }}</h2></ion-label>
+                <ion-label>
+                    <h2>{{ 'addon.mod_assign.numberofdraftsubmissions' | translate }}</h2>
+                </ion-label>
                 <ion-badge slot="end" color="primary">
                     <span aria-hidden="true">{{ summary.submissiondraftscount }}</span>
                     <span class="sr-only">
                         {{ 'addon.mod_assign.numberofdraftsubmissionscountdescription' | translate:
-                            {count: summary.submissiondraftscount} }}
+                        {count: summary.submissiondraftscount} }}
                     </span>
                 </ion-badge>
             </ion-item>
 
             <!-- Summary of submissions with submitted status. -->
             <ion-item class="ion-text-wrap" *ngIf="summary && summary.submissionsenabled"
-                [class.hide-detail]="!summary.submissionssubmittedcount"
-                detail="true"
-                [button]="summary.submissionssubmittedcount"
+                [class.hide-detail]="!summary.submissionssubmittedcount" detail="true" [button]="summary.submissionssubmittedcount"
                 (click)="goToSubmissionList(submissionStatusSubmitted, !!summary.submissionssubmittedcount)">
-                <ion-label><h2>{{ 'addon.mod_assign.numberofsubmittedassignments' | translate }}</h2></ion-label>
+                <ion-label>
+                    <h2>{{ 'addon.mod_assign.numberofsubmittedassignments' | translate }}</h2>
+                </ion-label>
                 <ion-badge slot="end" color="primary">
                     <span aria-hidden="true">{{ summary.submissionssubmittedcount }}</span>
                     <span class="sr-only">
                         {{ 'addon.mod_assign.numberofsubmittedassignmentscountdescription' | translate:
-                            {count: summary.submissionssubmittedcount} }}
+                        {count: summary.submissionssubmittedcount} }}
                     </span>
                 </ion-badge>
             </ion-item>
 
             <!-- Summary of submissions that need grading. -->
             <ion-item class="ion-text-wrap" *ngIf="summary && summary.submissionsenabled && !assign.teamsubmission"
-                [class.hide-detail]="!needsGradingAvailable"
-                detail="true"
-                [button]="needsGradingAvailable"
+                [class.hide-detail]="!needsGradingAvailable" detail="true" [button]="needsGradingAvailable"
                 (click)="goToSubmissionList(needGrading, needsGradingAvailable)">
-                <ion-label><h2>{{ 'addon.mod_assign.numberofsubmissionsneedgrading' | translate }}</h2></ion-label>
+                <ion-label>
+                    <h2>{{ 'addon.mod_assign.numberofsubmissionsneedgrading' | translate }}</h2>
+                </ion-label>
                 <ion-badge slot="end" color="primary">
                     <span aria-hidden="true">{{ summary.submissionsneedgradingcount }}</span>
                     <span class="sr-only">
                         {{ 'addon.mod_assign.numberofsubmissionsneedgradingcountdescription' | translate:
-                            {count: summary.submissionsneedgradingcount} }}
+                        {count: summary.submissionsneedgradingcount} }}
                     </span>
                 </ion-badge>
             </ion-item>
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 7be6e735b..f6f090647 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
@@ -4,12 +4,12 @@
         <ion-icon name="fas-bookmark" slot="icon-only" aria-hidden="true"></ion-icon>
     </ion-button>
     <core-context-menu>
-        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate"
-            [href]="externalUrl" iconAction="fas-external-link-alt" [showBrowserWarning]="false"></core-context-menu-item>
+        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate" [href]="externalUrl"
+            iconAction="fas-external-link-alt" [showBrowserWarning]="false"></core-context-menu-item>
         <core-context-menu-item *ngIf="description" [priority]="800" [content]="'core.moduleintro' | translate"
             (action)="expandDescription()" iconAction="fas-arrow-right"></core-context-menu-item>
-        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}"
-            iconAction="far-newspaper" (action)="gotoBlog()"></core-context-menu-item>
+        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}" iconAction="far-newspaper"
+            (action)="gotoBlog()"></core-context-menu-item>
         <core-context-menu-item [priority]="700" [content]="'core.refresh' | translate" (action)="doRefresh(null, $event)"
             [iconAction]="refreshIcon" [closeOnClick]="false"></core-context-menu-item>
         <core-context-menu-item *ngIf="prefetchStatusIcon" [priority]="600" [content]="prefetchText" (action)="prefetch($event)"
@@ -24,13 +24,10 @@
 <core-loading [hideUntil]="loaded">
 
     <!-- Activity info. -->
-    <core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"
-        (completionChanged)="onCompletionChange()">
+    <core-course-module-info [module]="module" (completionChanged)="onCompletionChange()" [description]="description"
+        [component]="component" [componentId]="componentId" [courseId]="courseId">
     </core-course-module-info>
 
-    <core-course-module-description [description]="description" [component]="component" [componentId]="componentId"
-        contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId"></core-course-module-description>
-
     <ion-card class="core-warning-card" *ngIf="warning">
         <ion-item>
             <ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
@@ -39,9 +36,8 @@
     </ion-card>
 
     <div class="ion-padding safe-area-padding-horizontal">
-        <core-navigation-bar *ngIf="displayNavBar" [previous]="previousChapter?.id"
-            [previousTitle]="previousNavBarTitle" [next]="nextChapter?.id" [nextTitle]="nextNavBarTitle"
-            (action)="changeChapter($event)">
+        <core-navigation-bar *ngIf="displayNavBar" [previous]="previousChapter?.id" [previousTitle]="previousNavBarTitle"
+            [next]="nextChapter?.id" [nextTitle]="nextNavBarTitle" (action)="changeChapter($event)">
         </core-navigation-bar>
 
         <core-format-text [component]="component" [componentId]="componentId" [text]="chapterContent" contextLevel="module"
@@ -51,9 +47,8 @@
             <core-tag-list [tags]="tags"></core-tag-list>
         </div>
 
-        <core-navigation-bar *ngIf="displayNavBar" [previous]="previousChapter?.id"
-            [previousTitle]="previousNavBarTitle" [next]="nextChapter?.id" [nextTitle]="nextNavBarTitle"
-            (action)="changeChapter($event)"></core-navigation-bar>
+        <core-navigation-bar *ngIf="displayNavBar" [previous]="previousChapter?.id" [previousTitle]="previousNavBarTitle"
+            [next]="nextChapter?.id" [nextTitle]="nextNavBarTitle" (action)="changeChapter($event)"></core-navigation-bar>
     </div>
 
 </core-loading>
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 8f1069746..93265acea 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
@@ -1,14 +1,14 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <core-context-menu>
-        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate"
-            [href]="externalUrl" iconAction="fas-external-link-alt" [showBrowserWarning]="false">
+        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate" [href]="externalUrl"
+            iconAction="fas-external-link-alt" [showBrowserWarning]="false">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="description" [priority]="800" [content]="'core.moduleintro' | translate"
             (action)="expandDescription()" iconAction="fas-arrow-right">
         </core-context-menu-item>
-        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}"
-            iconAction="far-newspaper" (action)="gotoBlog()">
+        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}" iconAction="far-newspaper"
+            (action)="gotoBlog()">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="loaded && isOnline" [priority]="700" [content]="'core.refresh' | translate"
             (action)="doRefresh(null, $event)" [iconAction]="refreshIcon" [closeOnClick]="false">
@@ -27,14 +27,10 @@
 <core-loading [hideUntil]="loaded" class="safe-area-padding">
 
     <!-- Activity info. -->
-    <core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"
-        (completionChanged)="onCompletionChange()">
+    <core-course-module-info [module]="module" (completionChanged)="onCompletionChange()" [description]="description"
+        [component]="component" [componentId]="componentId" [courseId]="courseId">
     </core-course-module-info>
 
-    <core-course-module-description [description]="description" [component]="component" [componentId]="componentId"
-        contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-    </core-course-module-description>
-
     <ion-card *ngIf="chatInfo" class="core-info-card">
         <ion-item>
             <ion-icon name="fas-clock" slot="start" aria-hidden="true"></ion-icon>
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 60a41827e..f0e2aa0f5 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
@@ -1,14 +1,14 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <core-context-menu>
-        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate"
-            [href]="externalUrl" iconAction="fas-external-link-alt" [showBrowserWarning]="false">
+        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate" [href]="externalUrl"
+            iconAction="fas-external-link-alt" [showBrowserWarning]="false">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="description" [priority]="800" [content]="'core.moduleintro' | translate"
             (action)="expandDescription()" iconAction="fas-arrow-right">
         </core-context-menu-item>
-        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}"
-            iconAction="far-newspaper" (action)="gotoBlog()">
+        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}" iconAction="far-newspaper"
+            (action)="gotoBlog()">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="loaded && !hasOffline && isOnline" [priority]="700" [content]="'core.refresh' | translate"
             (action)="doRefresh(null, $event)" [iconAction]="refreshIcon" [closeOnClick]="false">
@@ -29,14 +29,10 @@
 <core-loading [hideUntil]="loaded">
 
     <!-- Activity info. -->
-    <core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"
-        (completionChanged)="onCompletionChange()">
+    <core-course-module-info [module]="module" (completionChanged)="onCompletionChange()" [description]="description"
+        [component]="component" [componentId]="componentId" [courseId]="courseId">
     </core-course-module-info>
 
-    <core-course-module-description [description]="description" [component]="component" [componentId]="componentId"
-        contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-    </core-course-module-description>
-
     <!-- Activity availability messages -->
     <ion-card class="core-info-card" *ngIf="choiceNotOpenYet">
         <ion-item>
@@ -54,8 +50,7 @@
             <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 [text]="options[0].text" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
                     </core-format-text>
                 </p>
                 <p>{{ 'addon.mod_choice.expired' | translate:{$a: closeTimeReadable} }}</p>
@@ -145,10 +140,12 @@
                                 </p>
                             </ion-label>
                         </ion-item-divider>
-                        <ion-item *ngFor="let user of result.userresponses" core-user-link [courseId]="courseId"
-                            [userId]="user.userid" [attr.aria-label]="user.fullname" class="ion-text-wrap">
+                        <ion-item *ngFor="let user of result.userresponses" core-user-link [courseId]="courseId" [userId]="user.userid"
+                            [attr.aria-label]="user.fullname" class="ion-text-wrap">
                             <core-user-avatar [user]="user" slot="start" [courseId]="courseId"></core-user-avatar>
-                            <ion-label><p>{{user.fullname}}</p></ion-label>
+                            <ion-label>
+                                <p>{{user.fullname}}</p>
+                            </ion-label>
                         </ion-item>
                     </ion-item-group>
                 </ion-col>
@@ -159,7 +156,9 @@
     <ion-card class="core-info-card" *ngIf="!canSeeResults && !choiceNotOpenYet">
         <ion-item>
             <ion-icon name="fas-info-circle" slot="start" aria-hidden="true"></ion-icon>
-            <ion-label><p>{{ 'addon.mod_choice.noresultsviewable' | translate }}</p></ion-label>
+            <ion-label>
+                <p>{{ 'addon.mod_choice.noresultsviewable' | translate }}</p>
+            </ion-label>
         </ion-item>
     </ion-card>
 </core-loading>
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 7f8633b5d..f8a993361 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
@@ -4,28 +4,27 @@
         <ion-icon name="fas-search" slot="icon-only" aria-hidden="true"></ion-icon>
     </ion-button>
     <core-context-menu>
-        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate"
-            [href]="externalUrl" iconAction="fas-external-link-alt" [showBrowserWarning]="false">
+        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate" [href]="externalUrl"
+            iconAction="fas-external-link-alt" [showBrowserWarning]="false">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="description" [priority]="800" [content]="'core.moduleintro' | translate"
             (action)="expandDescription()" iconAction="fas-arrow-right">
         </core-context-menu-item>
-        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}"
-            iconAction="far-newspaper" (action)="gotoBlog()">
+        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}" iconAction="far-newspaper"
+            (action)="gotoBlog()">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="loaded && !(hasOffline || hasOfflineRatings) && isOnline" [priority]="700"
-            [content]="'core.refresh' | translate" (action)="doRefresh(null, $event)" [iconAction]="refreshIcon"
-            [closeOnClick]="false">
+            [content]="'core.refresh' | translate" (action)="doRefresh(null, $event)" [iconAction]="refreshIcon" [closeOnClick]="false">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="loaded && (hasOffline || hasOfflineRatings) && isOnline" [priority]="600"
             [content]="'core.settings.synchronizenow' | translate" (action)="doRefresh(null, $event, true)" [iconAction]="syncIcon"
             [closeOnClick]="false">
         </core-context-menu-item>
-        <core-context-menu-item [priority]="500" *ngIf="canAdd" [content]="'addon.mod_data.addentries' | translate"
-            iconAction="fas-plus" (action)="gotoAddEntries()">
+        <core-context-menu-item [priority]="500" *ngIf="canAdd" [content]="'addon.mod_data.addentries' | translate" iconAction="fas-plus"
+            (action)="gotoAddEntries()">
         </core-context-menu-item>
-        <core-context-menu-item [priority]="400" *ngIf="firstEntry" [content]="'addon.mod_data.single' | translate"
-            iconAction="fas-file" (action)="gotoEntry(firstEntry)">
+        <core-context-menu-item [priority]="400" *ngIf="firstEntry" [content]="'addon.mod_data.single' | translate" iconAction="fas-file"
+            (action)="gotoEntry(firstEntry)">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="prefetchStatusIcon" [priority]="300" [content]="prefetchText" (action)="prefetch($event)"
             [iconAction]="prefetchStatusIcon" [closeOnClick]="false">
@@ -40,14 +39,10 @@
 <core-loading [hideUntil]="loaded">
 
     <!-- Activity info. -->
-    <core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"
-        (completionChanged)="onCompletionChange()">
+    <core-course-module-info [module]="module" (completionChanged)="onCompletionChange()" [description]="description"
+        [component]="component" [componentId]="componentId" [courseId]="courseId">
     </core-course-module-info>
 
-    <core-course-module-description [description]="description" [component]="component" [componentId]="componentId"
-        contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-    </core-course-module-description>
-
     <!-- Data done in offline but not synchronized -->
     <ion-card class="core-warning-card" *ngIf="hasOffline || hasOfflineRatings">
         <ion-item>
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 124241f10..b6852c689 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
@@ -1,14 +1,14 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <core-context-menu>
-        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate"
-            [href]="externalUrl" iconAction="fas-external-link-alt" [showBrowserWarning]="false">
+        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate" [href]="externalUrl"
+            iconAction="fas-external-link-alt" [showBrowserWarning]="false">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="description" [priority]="800" [content]="'core.moduleintro' | translate"
             (action)="expandDescription()" iconAction="fas-arrow-right">
         </core-context-menu-item>
-        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}"
-            iconAction="far-newspaper" (action)="gotoBlog()">
+        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}" iconAction="far-newspaper"
+            (action)="gotoBlog()">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="loaded && !hasOffline && isOnline" [priority]="700" [content]="'core.refresh' | translate"
             (action)="doRefresh(null, $event)" [iconAction]="refreshIcon" [closeOnClick]="false">
@@ -29,22 +29,18 @@
 <core-loading [hideUntil]="loaded">
 
     <!-- Activity info. -->
-    <core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"
-        (completionChanged)="onCompletionChange()">
+    <core-course-module-info [module]="module" (completionChanged)="onCompletionChange()" [description]="description"
+        [component]="component" [componentId]="componentId" [courseId]="courseId">
     </core-course-module-info>
 
-    <core-course-module-description [description]="description" [component]="component" [componentId]="componentId"
-        contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-    </core-course-module-description>
-
     <core-tabs [hideUntil]="tabsReady" [selectedIndex]="firstSelectedTab">
         <core-tab [title]="'addon.mod_feedback.overview' | translate" id="overview" (ionSelect)="tabChanged('overview')">
             <ng-template>
                 <ng-container *ngTemplateOutlet="tabOverview"></ng-container>
             </ng-template>
         </core-tab>
-        <core-tab *ngIf="showAnalysis && access && access.canviewreports" id="analysis"
-            [title]="'addon.mod_feedback.analysis' | translate" (ionSelect)="tabChanged('analysis')">
+        <core-tab *ngIf="showAnalysis && access && access.canviewreports" id="analysis" [title]="'addon.mod_feedback.analysis' | translate"
+            (ionSelect)="tabChanged('analysis')">
             <ng-template>
                 <ng-container *ngTemplateOutlet="tabAnalysis"></ng-container>
             </ng-template>
@@ -73,10 +69,8 @@
                 </ion-select-option>
             </ion-select>
         </ion-item>
-        <ion-item class="ion-text-wrap" (click)="openRespondents()"
-            [class.hide-detail]="!(access.canviewreports && completedCount > 0)"
-            detail="true"
-            [button]="access.canviewreports && completedCount > 0">
+        <ion-item class="ion-text-wrap" (click)="openRespondents()" [class.hide-detail]="!(access.canviewreports && completedCount > 0)"
+            detail="true" [button]="access.canviewreports && completedCount > 0">
             <ion-label>
                 <h2>{{ 'addon.mod_feedback.completed_feedbacks' | translate }}</h2>
             </ion-label>
@@ -87,8 +81,8 @@
                 </span>
             </ion-badge>
         </ion-item>
-        <ion-item class="ion-text-wrap" *ngIf="!access.isanonymous && access.canviewreports" (click)="openNonRespondents()"
-            detail="true" button>
+        <ion-item class="ion-text-wrap" *ngIf="!access.isanonymous && access.canviewreports" (click)="openNonRespondents()" detail="true"
+            button>
             <ion-label>
                 <h2>{{ 'addon.mod_feedback.show_nonrespondents' | translate }}</h2>
             </ion-label>
@@ -208,12 +202,12 @@
                     <ion-label>
                         <p class="item-heading">
                             {{item.num}}. <core-format-text [component]="component" [componentId]="componentId" [text]="item.name"
-                            contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
+                                contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
                             </core-format-text>
                         </p>
                         <p>
-                            <core-format-text [component]="component" [componentId]="componentId" [text]="item.label"
-                                contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
+                            <core-format-text [component]="component" [componentId]="componentId" [text]="item.label" contextLevel="module"
+                                [contextInstanceId]="module.id" [courseId]="courseId">
                             </core-format-text>
                         </p>
                         <ng-container [ngSwitch]="item.templateName">
@@ -232,8 +226,7 @@
                             </ng-container>
                             <ng-container *ngSwitchCase="'chart'">
                                 <core-chart [type]="item.chartType" [data]="item.chartData" [labels]="item.labels" height="300"
-                                    contextLevel="module" [contextInstanceId]="module.id" [wsNotFiltered]="true"
-                                    [courseId]="courseId">
+                                    contextLevel="module" [contextInstanceId]="module.id" [wsNotFiltered]="true" [courseId]="courseId">
                                 </core-chart>
                                 <p *ngIf="item.average">
                                     {{ 'addon.mod_feedback.average' | translate }}: {{item.average | number : '1.2-2'}}
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 4763418b3..e44e8a1b7 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
@@ -1,14 +1,14 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <core-context-menu>
-        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate"
-            [href]="externalUrl" iconAction="fas-external-link-alt" [showBrowserWarning]="false">
+        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate" [href]="externalUrl"
+            iconAction="fas-external-link-alt" [showBrowserWarning]="false">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="description" [priority]="800" [content]="'core.moduleintro' | translate"
             (action)="expandDescription()" iconAction="fas-arrow-right">
         </core-context-menu-item>
-        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}"
-             iconAction="far-newspaper" (action)="gotoBlog()">
+        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}" iconAction="far-newspaper"
+            (action)="gotoBlog()">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="!subfolder" [priority]="700" [content]="'core.refresh' | translate"
             (action)="doRefresh(null, $event)" [iconAction]="refreshIcon" [closeOnClick]="false">
@@ -26,14 +26,11 @@
 <core-loading [hideUntil]="loaded">
 
     <!-- Activity info. -->
-    <core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"
-        (completionChanged)="onCompletionChange()">
+    <core-course-module-info [module]="module" (completionChanged)="onCompletionChange()" [description]="description"
+        [component]="component" [componentId]="componentId" [courseId]="courseId">
+        <h3 *ngIf="subfolder" title>{{subfolder.filename}}</h3>
     </core-course-module-info>
 
-    <core-course-module-description [description]="description" [component]="component" [componentId]="componentId"
-        contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-    </core-course-module-description>
-
     <ion-list *ngIf="contents && (contents.files.length + contents.folders.length > 0)">
         <ng-container *ngFor="let folder of contents.folders">
             <ion-item class="item-file" (click)="openFolder(folder)" detail="true" button>
diff --git a/src/addons/mod/forum/components/index/index.html b/src/addons/mod/forum/components/index/index.html
index 3703497a6..642a96d2f 100644
--- a/src/addons/mod/forum/components/index/index.html
+++ b/src/addons/mod/forum/components/index/index.html
@@ -1,38 +1,30 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <core-context-menu>
-        <core-context-menu-item *ngIf="externalUrl"
-            [priority]="900" [content]="'core.openinbrowser' | translate" [href]="externalUrl" iconAction="fas-external-link-alt"
-            [showBrowserWarning]="false">
+        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate" [href]="externalUrl"
+            iconAction="fas-external-link-alt" [showBrowserWarning]="false">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="description" [priority]="800" [content]="'core.moduleintro' | translate"
             (action)="expandDescription()" iconAction="fas-arrow-right">
         </core-context-menu-item>
-        <core-context-menu-item *ngIf="blog"
-            [priority]="750" content="{{'addon.blog.blog' | translate}}" iconAction="far-newspaper" (action)="gotoBlog()">
+        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}" iconAction="far-newspaper"
+            (action)="gotoBlog()">
         </core-context-menu-item>
-        <core-context-menu-item
-            *ngIf="discussions.loaded && !(hasOffline || hasOfflineRatings) && isOnline"
-            [priority]="700" [content]="'addon.mod_forum.refreshdiscussions' | translate" [iconAction]="refreshIcon" [closeOnClick]="false"
+        <core-context-menu-item *ngIf="discussions.loaded && !(hasOffline || hasOfflineRatings) && isOnline" [priority]="700"
+            [content]="'addon.mod_forum.refreshdiscussions' | translate" [iconAction]="refreshIcon" [closeOnClick]="false"
             (action)="doRefresh(null, $event)">
         </core-context-menu-item>
-        <core-context-menu-item
-            *ngIf="discussions.loaded && (hasOffline || hasOfflineRatings) && isOnline"
-            [priority]="600" [content]="'core.settings.synchronizenow' | translate" [iconAction]="syncIcon" [closeOnClick]="false"
+        <core-context-menu-item *ngIf="discussions.loaded && (hasOffline || hasOfflineRatings) && isOnline" [priority]="600"
+            [content]="'core.settings.synchronizenow' | translate" [iconAction]="syncIcon" [closeOnClick]="false"
             (action)="doRefresh(null, $event, true)">
         </core-context-menu-item>
-        <core-context-menu-item *ngIf="prefetchStatusIcon"
-            [priority]="500" [content]="prefetchText" [iconAction]="prefetchStatusIcon" [closeOnClick]="false"
-            (action)="prefetch($event)">
+        <core-context-menu-item *ngIf="prefetchStatusIcon" [priority]="500" [content]="prefetchText" [iconAction]="prefetchStatusIcon"
+            [closeOnClick]="false" (action)="prefetch($event)">
         </core-context-menu-item>
-        <core-context-menu-item *ngIf="size"
-            iconDescription="fas-archive" iconAction="fas-trash"
-            [priority]="400" [content]="'core.clearstoreddata' | translate:{$a: size}" [closeOnClick]="false"
-            (action)="removeFiles($event)">
+        <core-context-menu-item *ngIf="size" iconDescription="fas-archive" iconAction="fas-trash" [priority]="400"
+            [content]="'core.clearstoreddata' | translate:{$a: size}" [closeOnClick]="false" (action)="removeFiles($event)">
         </core-context-menu-item>
-        <core-context-menu-item *ngIf="sortingAvailable"
-            iconAction="fas-sort"
-            [priority]="300" [content]="'core.sort' | translate"
+        <core-context-menu-item *ngIf="sortingAvailable" iconAction="fas-sort" [priority]="300" [content]="'core.sort' | translate"
             (action)="showSortOrderSelector()">
         </core-context-menu-item>
     </core-context-menu>
@@ -46,15 +38,16 @@
 
     <core-loading [hideUntil]="discussions.loaded">
         <!-- Activity info. -->
-        <core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"
-            (completionChanged)="onCompletionChange()">
+        <core-course-module-info [module]="module" (completionChanged)="onCompletionChange()"
+            [description]="forum && forum.type != 'single' && description" [component]="component"
+            [componentId]="componentId" [courseId]="courseId">
+            <ion-item>
+                <ion-label>
+                    {{descriptionNote}}
+                </ion-label>
+            </ion-item>
         </core-course-module-info>
 
-        <core-course-module-description *ngIf="forum && forum.type != 'single'"
-            [description]="description" [component]="component" [componentId]="componentId" [note]="descriptionNote"
-            contextLevel="module" [contextInstanceId]="module && module.id" [courseId]="courseId">
-        </core-course-module-description>
-
         <!-- Forum discussions found to be synchronized -->
         <ion-card class="core-warning-card" *ngIf="hasOffline || hasOfflineRatings">
             <ion-item>
@@ -72,23 +65,17 @@
         </ion-card>
 
         <ng-container *ngIf="forum">
-            <core-empty-box *ngIf="discussions.empty" icon="far-comments"
-                [message]="'addon.mod_forum.forumnodiscussionsyet' | translate">
+            <core-empty-box *ngIf="discussions.empty" icon="far-comments" [message]="'addon.mod_forum.forumnodiscussionsyet' | translate">
             </core-empty-box>
 
             <div *ngIf="!discussions.empty && sortingAvailable && selectedSortOrder" class="ion-text-wrap">
-                <core-combobox
-                    [modalOptions]="sortOrderSelectorModalOptions"
-                    listboxId="addon-mod-forum-sort-selector"
-                    [label]="('core.sort' | translate)"
-                    (onChange)="setSortOrder($event)"
-                    [selection]="selectedSortOrder.label | translate"
+                <core-combobox [modalOptions]="sortOrderSelectorModalOptions" listboxId="addon-mod-forum-sort-selector"
+                    [label]="('core.sort' | translate)" (onChange)="setSortOrder($event)" [selection]="selectedSortOrder.label | translate"
                     interface="modal">
                 </core-combobox>
             </div>
 
-            <ion-item *ngFor="let discussion of discussions.items"
-                class="addon-mod-forum-discussion" detail="true"
+            <ion-item *ngFor="let discussion of discussions.items" class="addon-mod-forum-discussion" detail="true"
                 [lines]="discussion.groupname && 'none'" [attr.aria-current]="discussions.getItemAriaCurrent(discussion)"
                 (click)="discussions.select(discussion)" button>
                 <ion-label>
@@ -98,15 +85,12 @@
                                 [attr.aria-label]="'addon.mod_forum.discussionpinned' | translate"></ion-icon>
                             <ion-icon name="fas-star" class="addon-forum-star" *ngIf="!discussion.pinned && discussion.starred"
                                 [attr.aria-label]="'addon.mod_forum.favourites' | translate"></ion-icon>
-                            <core-format-text
-                                [text]="discussion.subject"
-                                contextLevel="module" [contextInstanceId]="module && module.id" [courseId]="courseId">
+                            <core-format-text [text]="discussion.subject" contextLevel="module" [contextInstanceId]="module && module.id"
+                                [courseId]="courseId">
                             </core-format-text>
                         </p>
-                        <ion-button *ngIf="canPin || discussion.canlock || discussion.canfavourite"
-                            fill="clear" color="dark"
-                            [attr.aria-label]="('core.displayoptions' | translate)"
-                            (click)="showOptionsMenu($event, discussion)">
+                        <ion-button *ngIf="canPin || discussion.canlock || discussion.canfavourite" fill="clear" color="dark"
+                            [attr.aria-label]="('core.displayoptions' | translate)" (click)="showOptionsMenu($event, discussion)">
                             <ion-icon name="ellipsis-vertical" slot="icon-only" aria-hidden="true">
                             </ion-icon>
                         </ion-button>
@@ -158,8 +142,7 @@
                 </ion-label>
             </ion-item>
 
-            <core-infinite-loading
-                [enabled]="discussions.onlineLoaded && !discussions.completed" [error]="discussions.fetchFailed"
+            <core-infinite-loading [enabled]="discussions.onlineLoaded && !discussions.completed" [error]="discussions.fetchFailed"
                 (action)="fetchMoreDiscussions($event)">
             </core-infinite-loading>
         </ng-container>
diff --git a/src/addons/mod/glossary/components/index/addon-mod-glossary-index.html b/src/addons/mod/glossary/components/index/addon-mod-glossary-index.html
index 02b9e0405..61cee7db8 100644
--- a/src/addons/mod/glossary/components/index/addon-mod-glossary-index.html
+++ b/src/addons/mod/glossary/components/index/addon-mod-glossary-index.html
@@ -10,18 +10,17 @@
     </ion-button>
 
     <core-context-menu>
-        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate"
-            [href]="externalUrl" iconAction="fas-external-link-alt" [showBrowserWarning]="false">
+        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate" [href]="externalUrl"
+            iconAction="fas-external-link-alt" [showBrowserWarning]="false">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="description" [priority]="800" [content]="'core.moduleintro' | translate"
             (action)="expandDescription()" iconAction="fas-arrow-right">
         </core-context-menu-item>
-        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}"
-            iconAction="far-newspaper" (action)="gotoBlog()">
+        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}" iconAction="far-newspaper"
+            (action)="gotoBlog()">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="loaded && !(hasOffline || hasOfflineRatings) && isOnline" [priority]="700"
-            [content]="'core.refresh' | translate" (action)="doRefresh(null, $event)" [iconAction]="refreshIcon"
-            [closeOnClick]="false">
+            [content]="'core.refresh' | translate" (action)="doRefresh(null, $event)" [iconAction]="refreshIcon" [closeOnClick]="false">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="loaded && (hasOffline || hasOfflineRatings) && isOnline" [priority]="600"
             (action)="doRefresh(null, $event, true)" [content]="'core.settings.synchronizenow' | translate" [iconAction]="syncIcon"
@@ -51,14 +50,10 @@
 
     <core-loading [hideUntil]="loaded">
         <!-- Activity info. -->
-        <core-course-module-info *ngIf="showCompletion && !isSearch" [module]="module" [showManualCompletion]="true"
-            (completionChanged)="onCompletionChange()">
+        <core-course-module-info *ngIf="!isSearch" [module]="module" (completionChanged)="onCompletionChange()" [description]="description"
+            [component]="component" [componentId]="componentId" [courseId]="courseId">
         </core-course-module-info>
 
-        <core-course-module-description *ngIf="!isSearch" [description]="description" [component]="component" [componentId]="componentId"
-            contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-        </core-course-module-description>
-
         <!-- Has offline data to be synchronized -->
         <ion-card class="core-warning-card" *ngIf="hasOffline || hasOfflineRatings">
             <ion-item>
@@ -69,7 +64,9 @@
 
         <ion-list *ngIf="!isSearch && entries.offlineEntries.length > 0">
             <ion-item-divider>
-                <ion-label><h2>{{ 'addon.mod_glossary.entriestobesynced' | translate }}</h2></ion-label>
+                <ion-label>
+                    <h2>{{ 'addon.mod_glossary.entriestobesynced' | translate }}</h2>
+                </ion-label>
             </ion-item-divider>
             <ion-item *ngFor="let entry of entries.offlineEntries" (click)="entries.select(entry)" detail="false" button
                 [attr.aria-current]="entries.getItemAriaCurrent(entry)">
@@ -84,11 +81,12 @@
         <ion-list *ngIf="entries.onlineEntries.length > 0">
             <ng-container *ngFor="let entry of entries.onlineEntries; let index = index">
                 <ion-item-divider *ngIf="getDivider && showDivider(entry, entries.onlineEntries[index - 1])">
-                    <ion-label><h2>{{ getDivider!(entry) }}</h2></ion-label>
+                    <ion-label>
+                        <h2>{{ getDivider!(entry) }}</h2>
+                    </ion-label>
                 </ion-item-divider>
 
-                <ion-item button (click)="entries.select(entry)" [attr.aria-current]="entries.getItemAriaCurrent(entry)"
-                    detail="false">
+                <ion-item button (click)="entries.select(entry)" [attr.aria-current]="entries.getItemAriaCurrent(entry)" detail="false">
                     <ion-label>
                         <core-format-text [text]="entry.concept" contextLevel="module" [contextInstanceId]="glossary!.coursemodule"
                             [courseId]="courseId">
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 ca3d3524f..1811b5b44 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
@@ -5,18 +5,17 @@
             [priority]="1000" [content]="'addon.mod_h5pactivity.review_my_attempts' | translate" (action)="viewMyAttempts()"
             iconAction="stats-chart">
         </core-context-menu-item>
-        <core-context-menu-item *ngIf="canViewAllAttempts"
-            [priority]="1000" [content]="'addon.mod_h5pactivity.review_attempts' | translate" (action)="viewAllAttempts()"
-            iconAction="stats-chart">
+        <core-context-menu-item *ngIf="canViewAllAttempts" [priority]="1000" [content]="'addon.mod_h5pactivity.review_attempts' | translate"
+            (action)="viewAllAttempts()" iconAction="stats-chart">
         </core-context-menu-item>
-        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate"
-            [href]="externalUrl" iconAction="fas-external-link-alt" [showBrowserWarning]="false">
+        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate" [href]="externalUrl"
+            iconAction="fas-external-link-alt" [showBrowserWarning]="false">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="description" [priority]="800" [content]="'core.moduleintro' | translate"
             (action)="expandDescription()" iconAction="fas-arrow-right">
         </core-context-menu-item>
-        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}"
-            iconAction="far-newspaper" (action)="gotoBlog()">
+        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}" iconAction="far-newspaper"
+            (action)="gotoBlog()">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="loaded && !hasOffline && isOnline" [priority]="700" [content]="'core.refresh' | translate"
             (action)="doRefresh(null, $event)" [iconAction]="refreshIcon" [closeOnClick]="false">
@@ -37,14 +36,10 @@
 <core-loading [hideUntil]="loaded" class="safe-area-padding">
 
     <!-- Activity info. -->
-    <core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"
-        (completionChanged)="onCompletionChange()">
+    <core-course-module-info [module]="module" (completionChanged)="onCompletionChange()" [description]="description"
+        [component]="component" [componentId]="componentId" [courseId]="courseId">
     </core-course-module-info>
 
-    <core-course-module-description [description]="description" [component]="component" [componentId]="componentId"
-        contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-    </core-course-module-description>
-
     <!-- Offline data stored. -->
     <ion-card class="core-warning-card" *ngIf="hasOffline">
         <ion-item>
@@ -79,8 +74,7 @@
         </ion-item>
 
         <!-- Button to download the package. -->
-        <ion-button *ngIf="!downloading && needsDownload" class="ion-text-wrap ion-margin" expand="block"
-            (click)="downloadAndPlay($event)">
+        <ion-button *ngIf="!downloading && needsDownload" class="ion-text-wrap ion-margin" expand="block" (click)="downloadAndPlay($event)">
             {{ 'addon.mod_h5pactivity.downloadh5pfile' | translate }}
         </ion-button>
 
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 98901925b..4f15b3bc9 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
@@ -4,14 +4,14 @@
         <ion-icon name="fas-bookmark" slot="icon-only" aria-hidden="true"></ion-icon>
     </ion-button>
     <core-context-menu>
-        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate"
-            [href]="externalUrl" iconAction="fas-external-link-alt" [showBrowserWarning]="false">
+        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate" [href]="externalUrl"
+            iconAction="fas-external-link-alt" [showBrowserWarning]="false">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="description" [priority]="800" [content]="'core.moduleintro' | translate"
             (action)="expandDescription()" iconAction="fas-arrow-right">
         </core-context-menu-item>
-        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}"
-            iconAction="far-newspaper" (action)="gotoBlog()">
+        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}" iconAction="far-newspaper"
+            (action)="gotoBlog()">
         </core-context-menu-item>
         <core-context-menu-item [priority]="700" [content]="'core.refresh' | translate" (action)="doRefresh(null, $event)"
             [iconAction]="refreshIcon" [closeOnClick]="false">
@@ -29,8 +29,7 @@
 <core-loading [hideUntil]="loaded" class="safe-area-padding">
 
     <!-- Activity info. -->
-    <core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"
-        (completionChanged)="onCompletionChange()">
+    <core-course-module-info [module]="module" (completionChanged)="onCompletionChange()">
     </core-course-module-info>
 
     <ion-card class="core-warning-card" *ngIf="warning">
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 d8948ccbb..aa28071e4 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
@@ -1,14 +1,14 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <core-context-menu>
-        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate"
-            [href]="externalUrl" iconAction="fas-external-link-alt" [showBrowserWarning]="false">
+        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate" [href]="externalUrl"
+            iconAction="fas-external-link-alt" [showBrowserWarning]="false">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="description" [priority]="800" [content]="'core.moduleintro' | translate"
             (action)="expandDescription()" iconAction="fas-arrow-right">
         </core-context-menu-item>
-        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}"
-            iconAction="far-newspaper" (action)="gotoBlog()">
+        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}" iconAction="far-newspaper"
+            (action)="gotoBlog()">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="loaded && !hasOffline && isOnline" [priority]="700" [content]="'core.refresh' | translate"
             (action)="doRefresh(null, $event)" [iconAction]="refreshIcon" [closeOnClick]="false">
@@ -33,14 +33,10 @@
             <ng-template>
 
                 <!-- Activity info. -->
-                <core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"
-                    (completionChanged)="onCompletionChange()">
+                <core-course-module-info [module]="module" (completionChanged)="onCompletionChange()" [description]="description"
+                    [component]="component" [componentId]="componentId" [courseId]="courseId">
                 </core-course-module-info>
 
-                <core-course-module-description [description]="description" [component]="component" [componentId]="componentId"
-                    contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-                </core-course-module-description>
-
                 <!-- Prevent access messages. Only show the first one. -->
                 <ion-card class="core-info-card" *ngIf="lesson && preventReasons.length">
                     <ion-item>
@@ -132,13 +128,11 @@
 
                             <ng-container *ngIf="!leftDuringTimed && !finishedOffline">
                                 <!-- User hasn't left during the session, show a start button. -->
-                                <ion-button class="ion-text-wrap ion-margin" expand="block" *ngIf="!canManage"
-                                    (click)="start(false)">
+                                <ion-button class="ion-text-wrap ion-margin" expand="block" *ngIf="!canManage" (click)="start(false)">
                                     {{ 'core.start' | translate }}
                                     <ion-icon name="fas-chevron-right" slot="end" aria-hidden="true"></ion-icon>
                                 </ion-button>
-                                <ion-button class="ion-text-wrap ion-margin" expand="block" *ngIf="canManage"
-                                    (click)="start(false)">
+                                <ion-button class="ion-text-wrap ion-margin" expand="block" *ngIf="canManage" (click)="start(false)">
                                     {{ 'addon.mod_lesson.preview' | translate }}
                                     <ion-icon name="fas-search" slot="end" aria-hidden="true"></ion-icon>
                                 </ion-button>
@@ -295,8 +289,8 @@
                             <ion-card-title>{{ 'addon.mod_lesson.overview' | translate }}</ion-card-title>
                         </ion-card-header>
 
-                        <ion-item class="ion-text-wrap" *ngFor="let student of overview.students" button
-                            (click)="openRetake(student.id)" detail="true">
+                        <ion-item class="ion-text-wrap" *ngFor="let student of overview.students" button (click)="openRetake(student.id)"
+                            detail="true">
                             <core-user-avatar [user]="student" slot="start" [userId]="student.id" [courseId]="courseId">
                             </core-user-avatar>
                             <ion-label>
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 184f09284..ef10e579e 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
@@ -1,14 +1,14 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <core-context-menu>
-        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate"
-            [href]="externalUrl" iconAction="fas-external-link-alt" [showBrowserWarning]="false">
+        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate" [href]="externalUrl"
+            iconAction="fas-external-link-alt" [showBrowserWarning]="false">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="description" [priority]="800" [content]="'core.moduleintro' | translate"
             (action)="expandDescription()" iconAction="fas-arrow-right">
         </core-context-menu-item>
-        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}"
-            iconAction="far-newspaper" (action)="gotoBlog()">
+        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}" iconAction="far-newspaper"
+            (action)="gotoBlog()">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="loaded && isOnline" [priority]="700" [content]="'core.refresh' | translate"
             (action)="doRefresh(null, $event)" [iconAction]="refreshIcon" [closeOnClick]="false">
@@ -20,14 +20,11 @@
 <core-loading [hideUntil]="loaded" class="safe-area-padding">
 
     <!-- Activity info. -->
-    <core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"
-        (completionChanged)="onCompletionChange()">
+    <core-course-module-info [module]="module" (completionChanged)="onCompletionChange()"
+        [description]="lti && lti.showdescriptionlaunch && description" [component]="component" [componentId]="componentId"
+        [courseId]="courseId">
     </core-course-module-info>
 
-    <core-course-module-description *ngIf="lti && lti.showdescriptionlaunch" [description]="description" [component]="component"
-        [componentId]="componentId" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-    </core-course-module-description>
-
     <div class="ion-padding">
         <ion-button expand="block" (click)="launch()">
             <ion-icon name="fas-external-link-alt" slot="start" aria-hidden="true"></ion-icon>
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 fcc229d26..2dcb76d66 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
@@ -1,14 +1,14 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <core-context-menu>
-        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate"
-            [href]="externalUrl" iconAction="fas-external-link-alt" [showBrowserWarning]="false">
+        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate" [href]="externalUrl"
+            iconAction="fas-external-link-alt" [showBrowserWarning]="false">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="description" [priority]="800" [content]="'core.moduleintro' | translate"
             (action)="expandDescription()" iconAction="fas-arrow-right">
         </core-context-menu-item>
-        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}"
-            iconAction="far-newspaper" (action)="gotoBlog()">
+        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}" iconAction="far-newspaper"
+            (action)="gotoBlog()">
         </core-context-menu-item>
         <core-context-menu-item [priority]="700" [content]="'core.refresh' | translate" (action)="doRefresh(null, $event)"
             [iconAction]="refreshIcon" [closeOnClick]="false">
@@ -26,14 +26,10 @@
 <core-loading [hideUntil]="loaded" class="safe-area-padding">
 
     <!-- Activity info. -->
-    <core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"
-        (completionChanged)="onCompletionChange()">
+    <core-course-module-info [module]="module" (completionChanged)="onCompletionChange()" [description]="displayDescription && description"
+        [component]="component" [componentId]="componentId" [courseId]="courseId">
     </core-course-module-info>
 
-    <core-course-module-description *ngIf="displayDescription" [description]="description" [component]="component"
-        [componentId]="componentId" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-    </core-course-module-description>
-
     <ion-card class="core-warning-card" *ngIf="warning">
         <ion-item>
             <ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
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 94e4bcc51..519746fe0 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
@@ -1,14 +1,14 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <core-context-menu>
-        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate"
-            [href]="externalUrl" iconAction="fas-external-link-alt" [showBrowserWarning]="false">
+        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate" [href]="externalUrl"
+            iconAction="fas-external-link-alt" [showBrowserWarning]="false">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="description" [priority]="800" [content]="'core.moduleintro' | translate"
             (action)="expandDescription()" iconAction="fas-arrow-right">
         </core-context-menu-item>
-        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}"
-            [iconAction]="'far-newspaper'" (action)="gotoBlog()">
+        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}" [iconAction]="'far-newspaper'"
+            (action)="gotoBlog()">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="loaded && !hasOffline && isOnline" [priority]="700" [content]="'core.refresh' | translate"
             (action)="doRefresh(null, $event)" [iconAction]="refreshIcon" [closeOnClick]="false">
@@ -29,19 +29,17 @@
 <core-loading [hideUntil]="loaded">
 
     <!-- Activity info. -->
-    <core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"
-        (completionChanged)="onCompletionChange()">
+    <core-course-module-info [module]="module" (completionChanged)="onCompletionChange()" [description]="description"
+        [component]="component" [componentId]="componentId" [courseId]="courseId">
     </core-course-module-info>
 
-    <core-course-module-description [description]="description" [component]="component" [componentId]="componentId"
-        contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-    </core-course-module-description>
-
     <!-- Access rules description messages. -->
     <ion-card *ngIf="gradeMethodReadable || accessRules.length || syncTime">
         <ion-list>
             <ion-item class="ion-text-wrap" *ngFor="let rule of accessRules">
-                <ion-label><p>{{ rule }}</p></ion-label>
+                <ion-label>
+                    <p>{{ rule }}</p>
+                </ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap" *ngIf="gradeMethodReadable">
                 <ion-label>
@@ -55,7 +53,7 @@
                     <p>{{ 'addon.mod_quiz.outof' | translate: { $a: {
                         grade: bestGrade.gradetopass,
                         maxgrade: quiz.gradeFormatted
-                    } } }}</p>
+                        } } }}</p>
                 </ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap" *ngIf="syncTime">
@@ -96,15 +94,9 @@
             </ion-item>
             <div role="rowgroup">
                 <!-- List of attempts. -->
-                <ion-item
-                    button
-                    detail="true"
-                    *ngFor="let attempt of attempts"
-                    class="ion-text-wrap"
-                    [ngClass]='{"addon-mod_quiz-highlighted": attempt.highlightGrade}'
-                    [attr.aria-label]="'core.seemoredetail' | translate"
-                    (click)="viewAttempt(attempt.id)"
-                >
+                <ion-item button detail="true" *ngFor="let attempt of attempts" class="ion-text-wrap"
+                    [ngClass]='{"addon-mod_quiz-highlighted": attempt.highlightGrade}' [attr.aria-label]="'core.seemoredetail' | translate"
+                    (click)="viewAttempt(attempt.id)">
                     <ion-label>
                         <ion-row class="ion-align-items-center" role="row">
                             <ion-col class="ion-text-center" *ngIf="quiz.showAttemptColumn && attempt.preview" role="cell">
@@ -142,17 +134,21 @@
             <ion-item class="ion-text-wrap" *ngIf="gradebookFeedback">
                 <ion-label>
                     <p class="item-heading">{{ 'addon.mod_quiz.comment' | translate }}</p>
-                    <p><core-format-text [component]="component" [componentId]="componentId" [text]="gradebookFeedback"
-                        contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-                    </core-format-text></p>
+                    <p>
+                        <core-format-text [component]="component" [componentId]="componentId" [text]="gradebookFeedback"
+                            contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
+                        </core-format-text>
+                    </p>
                 </ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap" *ngIf="quiz.showFeedbackColumn && overallFeedback">
                 <ion-label>
                     <p class="item-heading">{{ 'addon.mod_quiz.overallfeedback' | translate }}</p>
-                    <p><core-format-text [component]="component" [componentId]="componentId" [text]="overallFeedback"
-                        contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-                    </core-format-text></p>
+                    <p>
+                        <core-format-text [component]="component" [componentId]="componentId" [text]="overallFeedback" contextLevel="module"
+                            [contextInstanceId]="module.id" [courseId]="courseId">
+                        </core-format-text>
+                    </p>
                 </ion-label>
             </ion-item>
         </ion-list>
@@ -163,10 +159,14 @@
         <ion-list>
             <!-- Error messages. -->
             <ion-item class="ion-text-wrap core-danger-item addon-mod_quiz-prevent-messages" *ngFor="let message of preventMessages">
-                <ion-label><p>{{ message }}</p></ion-label>
+                <ion-label>
+                    <p>{{ message }}</p>
+                </ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap core-danger-item addon-mod_quiz-no-questions" *ngIf="quiz.hasquestions === 0">
-                <ion-label><p>{{ 'addon.mod_quiz.noquestions' | translate }}</p></ion-label>
+                <ion-label>
+                    <p>{{ 'addon.mod_quiz.noquestions' | translate }}</p>
+                </ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap core-danger-item addon-mod_quiz-unsupported-questions"
                 *ngIf="!hasSupportedQuestions && unsupportedQuestions.length">
@@ -226,7 +226,9 @@
 
             <!-- Spinner shown while downloading or calculating. -->
             <ion-item class="ion-text-center" *ngIf="showStatusSpinner">
-                <ion-label><ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner></ion-label>
+                <ion-label>
+                    <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+                </ion-label>
             </ion-item>
         </ion-list>
     </ion-card>
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 704d31dd1..4c8e7daf6 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
@@ -1,12 +1,12 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <core-context-menu>
-        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate"
-            [href]="externalUrl" iconAction="fas-external-link-alt" [showBrowserWarning]="false"></core-context-menu-item>
+        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate" [href]="externalUrl"
+            iconAction="fas-external-link-alt" [showBrowserWarning]="false"></core-context-menu-item>
         <core-context-menu-item *ngIf="description" [priority]="800" [content]="'core.moduleintro' | translate"
             (action)="expandDescription()" iconAction="fas-arrow-right"></core-context-menu-item>
-        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}"
-            iconAction="far-newspaper" (action)="gotoBlog()"></core-context-menu-item>
+        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}" iconAction="far-newspaper"
+            (action)="gotoBlog()"></core-context-menu-item>
         <core-context-menu-item [priority]="700" [content]="'core.refresh' | translate" (action)="doRefresh(null, $event)"
             [iconAction]="refreshIcon" [closeOnClick]="false"></core-context-menu-item>
         <core-context-menu-item *ngIf="prefetchStatusIcon" [priority]="600" [content]="prefetchText" (action)="prefetch($event)"
@@ -21,15 +21,11 @@
 <core-loading [hideUntil]="loaded" class="safe-area-padding core-loading-fullheight">
 
     <!-- Activity info. -->
-    <core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"
-        (completionChanged)="onCompletionChange()">
+    <core-course-module-info [module]="module" [courseId]="courseId" (completionChanged)="onCompletionChange()"
+        [description]="mode != 'iframe' && (mode != 'embedded' || displayDescription) && description" [component]="component"
+        [componentId]="componentId">
     </core-course-module-info>
 
-    <core-course-module-description *ngIf="mode != 'iframe' && (mode != 'embedded' || displayDescription)"
-        [description]="description" [component]="component" [componentId]="componentId" contextLevel="module"
-        [contextInstanceId]="module.id" [courseId]="courseId">
-    </core-course-module-description>
-
     <ion-card class="core-warning-card" *ngIf="warning">
         <ion-item>
             <ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
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 23c75ba08..58f417175 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
@@ -1,14 +1,14 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <core-context-menu>
-        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate"
-            [href]="externalUrl" iconAction="fas-external-link-alt" [showBrowserWarning]="false">
+        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate" [href]="externalUrl"
+            iconAction="fas-external-link-alt" [showBrowserWarning]="false">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="description" [priority]="800" [content]="'core.moduleintro' | translate"
             (action)="expandDescription()" iconAction="fas-arrow-right">
         </core-context-menu-item>
-        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}"
-            iconAction="far-newspaper" (action)="gotoBlog()">
+        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}" iconAction="far-newspaper"
+            (action)="gotoBlog()">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="loaded && !hasOffline && isOnline" [priority]="700" [content]="'core.refresh' | translate"
             (action)="doRefresh(null, $event)" [iconAction]="refreshIcon" [closeOnClick]="false">
@@ -29,14 +29,10 @@
 <core-loading [hideUntil]="loaded" class="safe-area-padding">
 
     <!-- Activity info. -->
-    <core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"
-        (completionChanged)="onCompletionChange()">
+    <core-course-module-info [module]="module" (completionChanged)="onCompletionChange()" [description]="description"
+        [component]="component" [componentId]="componentId" [courseId]="courseId">
     </core-course-module-info>
 
-    <core-course-module-description [description]="description" [component]="component" [componentId]="componentId"
-        contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-    </core-course-module-description>
-
     <!-- Warning message. -->
     <ion-card class="core-info-card" *ngIf="scorm && scorm.warningMessage">
         <ion-item>
@@ -134,8 +130,8 @@
             <ion-list>
                 <ion-item class="ion-text-wrap" *ngIf="organizations.length > 1">
                     <ion-label>{{ 'addon.mod_scorm.organizations' | translate }}</ion-label>
-                    <ion-select [(ngModel)]="currentOrganization.identifier" (ionChange)="loadOrganization()"
-                        interface="action-sheet" [interfaceOptions]="{header: 'addon.mod_scorm.organizations' | translate}">
+                    <ion-select [(ngModel)]="currentOrganization.identifier" (ionChange)="loadOrganization()" interface="action-sheet"
+                        [interfaceOptions]="{header: 'addon.mod_scorm.organizations' | translate}">
                         <ion-select-option *ngFor="let org of organizations" [value]="org.identifier">
                             {{ org.title }}
                         </ion-select-option>
@@ -155,8 +151,7 @@
                         <p>{{ currentOrganization.title }}</p>
                         <div *ngFor="let sco of toc" class="core-padding-{{sco.level}} addon-mod_scorm-type-{{sco.scormtype}}">
                             <p *ngIf="sco.isvisible">
-                                <ion-icon *ngIf="sco.icon" [name]="sco.icon.icon" [attr.aria-label]="sco.icon.description"
-                                    slot="start">
+                                <ion-icon *ngIf="sco.icon" [name]="sco.icon.icon" [attr.aria-label]="sco.icon.description" slot="start">
                                 </ion-icon>
                                 <button class="as-link" *ngIf="sco.prereq && sco.launch" (click)="open($event, false, sco.id)">
                                     <core-format-text [text]="sco.title" contextLevel="module" [contextInstanceId]="module.id"
@@ -205,8 +200,7 @@
             <ion-list>
                 <ng-container *ngIf="!downloading && !skip">
                     <!-- Create new attempt -->
-                    <ion-item class="ion-text-wrap"
-                        *ngIf="!scorm.forcenewattempt && numAttempts > 0 && !incomplete && attemptsLeft > 0">
+                    <ion-item class="ion-text-wrap" *ngIf="!scorm.forcenewattempt && numAttempts > 0 && !incomplete && attemptsLeft > 0">
                         <ion-label>{{ 'addon.mod_scorm.newattempt' | translate }}</ion-label>
                         <ion-checkbox slot="end" name="newAttempt" [(ngModel)]="startNewAttempt">
                         </ion-checkbox>
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 5bf012e3e..16ebaa871 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
@@ -1,21 +1,21 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <core-context-menu>
-        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate"
-            [href]="externalUrl" iconAction="fas-external-link-alt" [showBrowserWarning]="false">
+        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate" [href]="externalUrl"
+            iconAction="fas-external-link-alt" [showBrowserWarning]="false">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="description" [priority]="800" [content]="'core.moduleintro' | translate"
             (action)="expandDescription()" iconAction="fas-arrow-right">
         </core-context-menu-item>
-        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}"
-            iconAction="far-newspaper" (action)="gotoBlog()">
+        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}" iconAction="far-newspaper"
+            (action)="gotoBlog()">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="loaded && !hasOffline && isOnline" [priority]="700" [content]="'core.refresh' | translate"
             (action)="doRefresh(null, $event)" [iconAction]="refreshIcon" [closeOnClick]="false">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="loaded && hasOffline && isOnline" [priority]="600"
-            [content]="'core.settings.synchronizenow' | translate" (action)="doRefresh(null, $event, true)"
-            [iconAction]="syncIcon" [closeOnClick]="false">
+            [content]="'core.settings.synchronizenow' | translate" (action)="doRefresh(null, $event, true)" [iconAction]="syncIcon"
+            [closeOnClick]="false">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="prefetchStatusIcon" [priority]="500" [content]="prefetchText" (action)="prefetch($event)"
             [iconAction]="prefetchStatusIcon" [closeOnClick]="false">
@@ -30,15 +30,11 @@
 <core-loading [hideUntil]="loaded" class="safe-area-padding">
 
     <!-- Activity info. -->
-    <core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"
-        (completionChanged)="onCompletionChange()">
+    <core-course-module-info [module]="module" (completionChanged)="onCompletionChange()"
+        [description]="survey && !survey.surveydone && !hasOffline && description" [component]="component"
+        [componentId]="componentId" [courseId]="courseId">
     </core-course-module-info>
 
-    <core-course-module-description *ngIf="survey && !survey.surveydone && !hasOffline" [description]="description"
-        [component]="component" [componentId]="componentId" contextLevel="module" [contextInstanceId]="module.id"
-        [courseId]="courseId">
-    </core-course-module-description>
-
     <!-- Survey already done -->
     <ion-card class="ion-padding" *ngIf="survey && survey.surveydone">
         <p class="ion-padding">{{ 'addon.mod_survey.surveycompletednograph' | translate }}</p>
@@ -63,7 +59,7 @@
             <ng-container *ngFor="let question of questions; let questionIndex=index; let isEven=even;"
                 class="ion-no-padding ion-text-wrap">
                 <!-- Parent question (Category header) -->
-                <ng-container *ngIf="question.multiArray?.length" >
+                <ng-container *ngIf="question.multiArray?.length">
                     <h3 class="ion-padding-horizontal" [class.ion-padding-top]="questionIndex == 1">{{ question.text }}</h3>
                     <ion-row class="ion-align-items-center ion-hide-md-down ion-padding">
                         <ion-col size="7" class="ion-padding">{{ 'addon.mod_survey.responses' | translate }}</ion-col>
@@ -73,15 +69,16 @@
                         </ion-col>
                     </ion-row>
                     <ion-item class="ion-text-wrap addon-mod_survey-question" [class.even]="isEven" lines="full">
-                        <ion-label><p>{{ question.intro }}</p></ion-label>
+                        <ion-label>
+                            <p>{{ question.intro }}</p>
+                        </ion-label>
                     </ion-item>
                 </ng-container>
 
                 <!-- Subquestion -->
                 <ng-container *ngIf="question.parent !== 0">
                     <ion-radio-group [(ngModel)]="answers[question.name]" [required]="question.required" [name]="question.name">
-                        <ion-row *ngIf="question.parent !== 0" class="ion-align-items-center ion-padding-horizontal"
-                            [class.even]="isEven">
+                        <ion-row *ngIf="question.parent !== 0" class="ion-align-items-center ion-padding-horizontal" [class.even]="isEven">
 
                             <ion-col size="7">
                                 <ion-label id="addon-mod_survey-{{question.id}}">
@@ -93,19 +90,17 @@
 
                             <!-- Tablet view: radio buttons -->
                             <ion-col class="ion-hide-md-down ion-text-center" size="1"
-                                *ngFor="let option of question.optionsArray; let value=index;"
-                                >
+                                *ngFor="let option of question.optionsArray; let value=index;">
                                 <!-- Empty slot to avoid errors on migration tslint checks -->
                                 <ion-radio [value]="value + 1" [attr.aria-label]="question.num + '. '+question.text + ': ' + option">
                                 </ion-radio>
                             </ion-col>
                             <ion-col class="ion-hide-md-up" size="5">
                                 <ion-select class="ion-padding" [(ngModel)]="answers[question.name]" [required]="question.required"
-                                    [attr.aria-labelledby]="'addon-mod_survey-'+question.id" interface="action-sheet"
-                                    [name]="question.name" [interfaceOptions]="{header: question.text}">
+                                    [attr.aria-labelledby]="'addon-mod_survey-'+question.id" interface="action-sheet" [name]="question.name"
+                                    [interfaceOptions]="{header: question.text}">
                                     <ion-select-option value="-1" selected disabled>{{ 'core.choose' | translate }}</ion-select-option>
-                                    <ion-select-option *ngFor="let option of question.optionsArray; let value=index;"
-                                        [value]="value +1">
+                                    <ion-select-option *ngFor="let option of question.optionsArray; let value=index;" [value]="value +1">
                                         {{option}}
                                     </ion-select-option>
                                 </ion-select>
@@ -126,8 +121,8 @@
                         </ion-col>
                         <ion-col size="5">
                             <ion-select class="ion-padding" [(ngModel)]="answers[question.name]" [required]="question.required"
-                                [attr.aria-labelledby]="'addon-mod_survey-'+question.id" interface="action-sheet"
-                                [name]="question.name" [interfaceOptions]="{header: question.text}">
+                                [attr.aria-labelledby]="'addon-mod_survey-'+question.id" interface="action-sheet" [name]="question.name"
+                                [interfaceOptions]="{header: question.text}">
                                 <ion-select-option *ngFor="let option of question.optionsArray; let value=index;" [value]="value">
                                     {{option}}
                                 </ion-select-option>
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 722bdfafd..491e186eb 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
@@ -1,12 +1,12 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <core-context-menu>
-        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate"
-            [href]="externalUrl" iconAction="fas-external-link-alt" [showBrowserWarning]="false"></core-context-menu-item>
+        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate" [href]="externalUrl"
+            iconAction="fas-external-link-alt" [showBrowserWarning]="false"></core-context-menu-item>
         <core-context-menu-item *ngIf="description" [priority]="800" [content]="'core.moduleintro' | translate"
             (action)="expandDescription()" iconAction="fas-arrow-right"></core-context-menu-item>
-        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}"
-            iconAction="far-newspaper" (action)="gotoBlog()"></core-context-menu-item>
+        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}" iconAction="far-newspaper"
+            (action)="gotoBlog()"></core-context-menu-item>
         <core-context-menu-item [priority]="700" [content]="'core.refresh' | translate" (action)="doRefresh(null, $event)"
             [iconAction]="refreshIcon" [closeOnClick]="false"></core-context-menu-item>
     </core-context-menu>
@@ -16,14 +16,10 @@
 <core-loading [hideUntil]="loaded" class="core-loading-fullheight">
 
     <!-- Activity info. -->
-    <core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"
-        (completionChanged)="onCompletionChange()">
+    <core-course-module-info [module]="module" (completionChanged)="onCompletionChange()" [description]="displayDescription && description"
+        [component]="component" [componentId]="componentId" [courseId]="courseId">
     </core-course-module-info>
 
-    <core-course-module-description *ngIf="displayDescription" [description]="description" [component]="component"
-        [componentId]="componentId" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-    </core-course-module-description>
-
     <div *ngIf="shouldIframe || (shouldEmbed && isOther)" class="addon-mod_url-embedded-url">
         <core-iframe [src]="url"></core-iframe>
     </div>
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 07a1a2638..5eecab5a1 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
@@ -1,8 +1,8 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <!-- Select subwiki. -->
-    <ion-button *ngIf="subwikiData.count > 1" (click)="showSubwikiPicker($event)"
-        [attr.aria-label]="'addon.mod_wiki.subwiki' | translate" aria-haspopup="true">
+    <ion-button *ngIf="subwikiData.count > 1" (click)="showSubwikiPicker($event)" [attr.aria-label]="'addon.mod_wiki.subwiki' | translate"
+        aria-haspopup="true">
         <ion-icon *ngIf="!groupWiki" name="fas-user" aria-hidden="true"></ion-icon>
         <ion-icon *ngIf="groupWiki" name="fas-users" aria-hidden="true"></ion-icon>
     </ion-button>
@@ -13,18 +13,17 @@
     </ion-button>
 
     <core-context-menu>
-        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate"
-            [href]="externalUrl" iconAction="fas-external-link-alt" [showBrowserWarning]="false">
+        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate" [href]="externalUrl"
+            iconAction="fas-external-link-alt" [showBrowserWarning]="false">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="description" [priority]="800" [content]="'core.moduleintro' | translate"
             (action)="expandDescription()" iconAction="fas-arrow-right">
         </core-context-menu-item>
-        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}"
-            iconAction="far-newspaper" (action)="gotoBlog()">
+        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}" iconAction="far-newspaper"
+            (action)="gotoBlog()">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="loaded && !hasOffline && isOnline && !pageIsOffline" [priority]="700"
-            [content]="'core.refresh' | translate" (action)="doRefresh(null, $event)" [iconAction]="refreshIcon"
-            [closeOnClick]="false">
+            [content]="'core.refresh' | translate" (action)="doRefresh(null, $event)" [iconAction]="refreshIcon" [closeOnClick]="false">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="loaded && isOnline && (hasOffline || pageIsOffline)" [priority]="600"
             [content]="'core.settings.synchronizenow' | translate" (action)="doRefresh(null, $event, true)" [iconAction]="syncIcon"
@@ -33,8 +32,8 @@
         <core-context-menu-item *ngIf="canEdit && (isOnline || pageIsOffline)" [priority]="590" [content]="'core.edit' | translate"
             iconAction="fas-edit" (action)="goToEditPage()">
         </core-context-menu-item>
-        <core-context-menu-item *ngIf="canEdit" [priority]="580" [content]="'addon.mod_wiki.createpage' | translate"
-            iconAction="fas-plus" (action)="goToNewPage()">
+        <core-context-menu-item *ngIf="canEdit" [priority]="580" [content]="'addon.mod_wiki.createpage' | translate" iconAction="fas-plus"
+            (action)="goToNewPage()">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="prefetchStatusIcon" [priority]="500" [content]="prefetchText" (action)="prefetch($event)"
             [iconAction]="prefetchStatusIcon" [closeOnClick]="false">
@@ -49,15 +48,12 @@
 <core-loading [hideUntil]="loaded">
 
     <!-- Activity info. -->
-    <core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"
-        (completionChanged)="onCompletionChange()">
+    <core-course-module-info [module]="module" (completionChanged)="onCompletionChange()" [description]="description"
+        [component]="component" [componentId]="componentId" [courseId]="courseId">
+        <h3 *ngIf="pageTitle" title>{{pageTitle}}</h3>
     </core-course-module-info>
 
-    <div *ngIf="description || pageIsOffline || hasOffline || pageWarning">
-        <core-course-module-description [description]="description" [component]="component" [componentId]="componentId"
-            contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-        </core-course-module-description>
-
+    <div *ngIf="pageIsOffline || hasOffline || pageWarning">
         <!-- Wiki has something offline. -->
         <ion-card class="core-warning-card" *ngIf="pageIsOffline || hasOffline">
             <ion-item>
@@ -82,8 +78,7 @@
             <core-format-text *ngIf="pageContent" [component]="component" [componentId]="componentId" [text]="pageContent"
                 contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
             </core-format-text>
-            <core-empty-box *ngIf="!pageContent" icon="fas-file-alt" [message]="'addon.mod_wiki.nocontent' | translate"
-                inline="true">
+            <core-empty-box *ngIf="!pageContent" icon="fas-file-alt" [message]="'addon.mod_wiki.nocontent' | translate" inline="true">
             </core-empty-box>
         </article>
 
diff --git a/src/addons/mod/wiki/pages/index/index.ts b/src/addons/mod/wiki/pages/index/index.ts
index 3b6058055..e98a10c9f 100644
--- a/src/addons/mod/wiki/pages/index/index.ts
+++ b/src/addons/mod/wiki/pages/index/index.ts
@@ -52,9 +52,7 @@ export class AddonModWikiIndexPage extends CoreCourseModuleMainActivityPage<Addo
     }
 
     /**
-     * Update some data based on the data received.
-     *
-     * @param data The data received.
+     * @inheritdoc
      */
     updateData(data: { name: string } | string): void {
         if (typeof data == 'string') {
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 d06955e61..35f7cac49 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
@@ -1,14 +1,14 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <core-context-menu>
-        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate"
-            [href]="externalUrl" iconAction="fas-external-link-alt" [showBrowserWarning]="false">
+        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate" [href]="externalUrl"
+            iconAction="fas-external-link-alt" [showBrowserWarning]="false">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="description" [priority]="800" [content]="'core.moduleintro' | translate"
             (action)="expandDescription()" iconAction="fas-arrow-right">
         </core-context-menu-item>
-        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}"
-            iconAction="far-newspaper" (action)="gotoBlog()">
+        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}" iconAction="far-newspaper"
+            (action)="gotoBlog()">
         </core-context-menu-item>
         <core-context-menu-item *ngIf="loaded && !hasOffline && isOnline" [priority]="700" [content]="'core.refresh' | translate"
             (action)="doRefresh(null, $event)" [iconAction]="refreshIcon" [closeOnClick]="false">
@@ -22,15 +22,15 @@
         </core-context-menu-item>
         <core-context-menu-item *ngIf="size" [priority]="200" [content]="'core.clearstoreddata' | translate:{$a: size}"
             iconDescription="fas-archive" (action)="removeFiles($event)" iconAction="fas-trash" [closeOnClick]="false">
-        </core-context-menu-item>    </core-context-menu>
+        </core-context-menu-item>
+    </core-context-menu>
 </core-navbar-buttons>
 
 <!-- Content. -->
 <core-loading [hideUntil]="loaded">
 
     <!-- Activity info. -->
-    <core-course-module-info *ngIf="showCompletion" [module]="module" [showManualCompletion]="true"
-        (completionChanged)="onCompletionChange()">
+    <core-course-module-info [module]="module" (completionChanged)="onCompletionChange()">
     </core-course-module-info>
 
     <ion-card *ngIf="phases">
@@ -87,9 +87,8 @@
                 <ion-item class="ion-text-wrap">
                     <ion-label>
                         <h2>{{ 'addon.mod_workshop.conclusion' | translate }}</h2>
-                        <core-format-text fullOnClick="true" [component]="component" [componentId]="module.id"
-                            [text]="workshop!.conclusion" contextLevel="module" [contextInstanceId]="module.id"
-                            [courseId]="courseId">
+                        <core-format-text fullOnClick="true" [component]="component" [componentId]="module.id" [text]="workshop!.conclusion"
+                            contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
                         </core-format-text>
                     </ion-label>
                 </ion-item>
@@ -97,7 +96,9 @@
 
             <ion-card *ngIf="userGrades">
                 <ion-item-divider class="ion-text-wrap">
-                    <ion-label><h2>{{ 'addon.mod_workshop.yourgrades' | translate }}</h2></ion-label>
+                    <ion-label>
+                        <h2>{{ 'addon.mod_workshop.yourgrades' | translate }}</h2>
+                    </ion-label>
                 </ion-item-divider>
                 <ion-item class="ion-text-wrap" *ngIf="userGrades.submissionlongstrgrade">
                     <ion-label>
@@ -120,8 +121,7 @@
                 <ion-label>
                     <h2>{{ 'addon.mod_workshop.areainstructauthors' | translate }}</h2>
                     <core-format-text fullOnClick="true" [component]="component" [componentId]="module.id"
-                        [text]="workshop!.instructauthors" contextLevel="module" [contextInstanceId]="module.id"
-                        [courseId]="courseId">
+                        [text]="workshop!.instructauthors" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
                     </core-format-text>
                 </ion-label>
             </ion-item>
@@ -166,7 +166,9 @@
         <ng-container *ngIf="workshop!.phase >= PHASE_CLOSED">
             <ion-card *ngIf="publishedSubmissions && publishedSubmissions.length">
                 <ion-item-divider class="ion-text-wrap">
-                    <ion-label><h2>{{ 'addon.mod_workshop.publishedsubmissions' | translate }}</h2></ion-label>
+                    <ion-label>
+                        <h2>{{ 'addon.mod_workshop.publishedsubmissions' | translate }}</h2>
+                    </ion-label>
                 </ion-item-divider>
                 <ng-container *ngFor="let submission of publishedSubmissions">
                     <addon-mod-workshop-submission [submission]="submission" [courseId]="workshop!.course" [module]="module"
@@ -192,10 +194,14 @@
 
             <ion-card *ngIf="canAssess">
                 <ion-item-divider class="ion-text-wrap">
-                    <ion-label><h2>{{ 'addon.mod_workshop.assignedassessments' | translate }}</h2></ion-label>
+                    <ion-label>
+                        <h2>{{ 'addon.mod_workshop.assignedassessments' | translate }}</h2>
+                    </ion-label>
                 </ion-item-divider>
                 <ion-item class="ion-text-wrap" *ngIf="!assessments || !assessments.length">
-                    <ion-label><p>{{ 'addon.mod_workshop.assignedassessmentsnone' | translate }}</p></ion-label>
+                    <ion-label>
+                        <p>{{ 'addon.mod_workshop.assignedassessmentsnone' | translate }}</p>
+                    </ion-label>
                 </ion-item>
                 <ng-container *ngFor="let assessment of (assessments || [])">
                     <addon-mod-workshop-submission [submission]="assessment.submission" [assessment]="assessment"
@@ -203,7 +209,7 @@
                         class="core-as-item">
                     </addon-mod-workshop-submission>
                 </ng-container>
-            </ion-card >
+            </ion-card>
         </ng-container>
 
         <!-- MULTIPLE PHASES SUBMISSION OR GREATER only teachers -->
diff --git a/src/core/features/course/classes/main-resource-component.ts b/src/core/features/course/classes/main-resource-component.ts
index e01d48d86..722907a73 100644
--- a/src/core/features/course/classes/main-resource-component.ts
+++ b/src/core/features/course/classes/main-resource-component.ts
@@ -70,7 +70,6 @@ export class CoreCourseModuleMainResourceComponent implements OnInit, OnDestroy,
     isDestroyed = false; // Whether the component is destroyed, used when calling fillContextMenu.
     contextMenuStatusObserver?: CoreEventObserver; // Observer of package status, used when calling fillContextMenu.
     contextFileStatusObserver?: CoreEventObserver; // Observer of file status, used when calling fillContextMenu.
-    showCompletion = false; // Whether to show completion inside the activity.
 
     protected fetchContentDefaultError = 'core.course.errorgetmodule'; // Default error to show when loading contents.
     protected isCurrentView = false; // Whether the component is in the current view.
@@ -80,6 +79,7 @@ export class CoreCourseModuleMainResourceComponent implements OnInit, OnDestroy,
     protected completionObserver?: CoreEventObserver;
     protected logger: CoreLogger;
     protected debouncedUpdateModule?: () => void; // Update the module after a certain time.
+    protected showCompletion = false; // Whether to show completion inside the activity.
 
     constructor(
         @Optional() @Inject('') loggerName: string = 'CoreCourseModuleMainResourceComponent',
@@ -97,7 +97,7 @@ export class CoreCourseModuleMainResourceComponent implements OnInit, OnDestroy,
         this.componentId = this.module.id;
         this.externalUrl = this.module.url;
         this.courseId = this.courseId || this.module.course!;
-        this.showCompletion = !!CoreSites.getCurrentSite()?.isVersionGreaterEqualThan('3.11');
+        this.showCompletion = !!CoreSites.getRequiredCurrentSite().isVersionGreaterEqualThan('3.11');
 
         if (this.showCompletion) {
             CoreCourseHelper.calculateModuleCompletionData(this.module, this.courseId);
diff --git a/src/core/features/course/components/module-description/module-description.ts b/src/core/features/course/components/module-description/module-description.ts
index d5fcf1139..6fc2ed236 100644
--- a/src/core/features/course/components/module-description/module-description.ts
+++ b/src/core/features/course/components/module-description/module-description.ts
@@ -28,7 +28,9 @@ import { Component, Input } from '@angular/core';
  *
  * Example usage:
  *
- * <core-course-module-description [description]="myDescription"></core-course-module-description
+ * <core-course-module-description [description]="myDescription"></core-course-module-description>
+ *
+ * @deprecated since 4.0 use core-course-module-info
  */
 @Component({
     selector: 'core-course-module-description',
diff --git a/src/core/features/course/components/module-info/core-course-module-info.html b/src/core/features/course/components/module-info/core-course-module-info.html
index d69b3148a..acd0b90e5 100644
--- a/src/core/features/course/components/module-info/core-course-module-info.html
+++ b/src/core/features/course/components/module-info/core-course-module-info.html
@@ -1,18 +1,37 @@
-<ion-card *ngIf="module.dates?.length || (module.completiondata && (module.completiondata.isautomatic || showManualCompletion))">
-    <ion-item class="ion-text-wrap">
-        <ion-label>
-            <!-- Activity dates. -->
-            <div *ngIf="module.dates && module.dates.length" class="core-module-dates">
-                <p *ngFor="let date of module.dates">
-                    <strong>{{ date.label }}</strong> {{ date.timestamp * 1000 | coreFormatDate:'strftimedatetime' }}
-                </p>
-            </div>
+<ion-item class="ion-text-wrap" lines="none">
+    <core-mod-icon slot="start" [modicon]="modicon" [modname]="module.modname" [componentId]="module.instance">
+    </core-mod-icon>
+    <ion-label>
+        <h2>
+            <core-format-text [text]="module.name" contextLevel="module" [component]="component" [componentId]="componentId"
+                [contextInstanceId]="module.id" [courseId]="courseId">
+            </core-format-text>
+        </h2>
+        <ng-content select="[title]"></ng-content>
+    </ion-label>
+</ion-item>
+<ion-item class="ion-text-wrap" *ngIf="description" lines="none">
+    <ion-label>
+        <core-format-text [text]="description" [component]="component" [componentId]="componentId" contextLevel="module"
+            [contextInstanceId]="module.id" [courseId]="courseId" maxHeight="120">
+        </core-format-text>
+    </ion-label>
+</ion-item>
+<ng-content select="[description]"></ng-content>
+<ion-item class="ion-text-wrap" lines="none" *ngIf="showCompletion && (module.dates?.length || module.completiondata)">
+    <ion-label>
+        <!-- Activity dates. -->
+        <div *ngIf="module.dates && module.dates.length" class="core-module-dates">
+            <p *ngFor="let date of module.dates">
+                <strong>{{ date.label }}</strong> {{ date.timestamp * 1000 | coreFormatDate:'strftimedatetime' }}
+            </p>
+        </div>
 
-            <!-- Module completion. -->
-            <core-course-module-completion *ngIf="module.completiondata" [completion]="module.completiondata"
-                [moduleName]="module.name" [moduleId]="module.id" [showCompletionConditions]="true"
-                [showManualCompletion]="showManualCompletion" (completionChanged)="completionChanged.emit($event)">
-            </core-course-module-completion>
-        </ion-label>
-    </ion-item>
-</ion-card>
+        <!-- Module completion. -->
+        <core-course-module-completion *ngIf="module.completiondata" [completion]="module.completiondata" [moduleName]="module.name"
+            [moduleId]="module.id" [showCompletionConditions]="true" [showManualCompletion]="true"
+            (completionChanged)="completionChanged.emit($event)">
+        </core-course-module-completion>
+    </ion-label>
+</ion-item>
+<ng-content></ng-content>
diff --git a/src/core/features/course/components/module-info/course-module-info.scss b/src/core/features/course/components/module-info/course-module-info.scss
index ddf0beb55..a4d1bf7e1 100644
--- a/src/core/features/course/components/module-info/course-module-info.scss
+++ b/src/core/features/course/components/module-info/course-module-info.scss
@@ -2,5 +2,9 @@
 
 :host {
     display: block;
+    box-shadow: 0px 3px 3px rgba(var(--drop-shadow));
+    margin-bottom: 8px;
+    background-color: var(--contrast-background);
+    
     @include padding-horizontal(var(--ion-safe-area-left), var(--ion-safe-area-right));
-}
\ No newline at end of file
+}
diff --git a/src/core/features/course/components/module-info/module-info.ts b/src/core/features/course/components/module-info/module-info.ts
index 254ad3c7c..13cbd4e40 100644
--- a/src/core/features/course/components/module-info/module-info.ts
+++ b/src/core/features/course/components/module-info/module-info.ts
@@ -12,21 +12,48 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { CoreCourseModule, CoreCourseModuleCompletionData } from '@features/course/services/course-helper';
+import { CoreCourseModuleDelegate } from '@features/course/services/module-delegate';
+import { CoreSites } from '@services/sites';
 
 /**
- * Display info about a module: dates and completion.
+ * Display info about a module:
+ *
+ * Description:
+ * Module descriptions are shortened by default, allowing the user to see the full description by clicking in it.
+ *
+ * Completion dates, status and buttons.
+ *
+ * You can add also add custom information that will be included at the end.
  */
 @Component({
     selector: 'core-course-module-info',
     templateUrl: 'core-course-module-info.html',
     styleUrls: ['course-module-info.scss'],
 })
-export class CoreCourseModuleInfoComponent {
+export class CoreCourseModuleInfoComponent implements OnInit {
 
     @Input() module!: CoreCourseModule; // The module to render.
-    @Input() showManualCompletion = false; // Whether to show manual completion.
+    @Input() courseId!: number; // The courseId the module belongs to.
+
+    @Input() component!: string; // Component for format text directive.
+    @Input() componentId!: string | number; // Component ID to use in conjunction with the component.
+
+    @Input() description?: string | false; // The description to display. If false, no description will be shown.
+
     @Output() completionChanged = new EventEmitter<CoreCourseModuleCompletionData>(); // Notify when completion changes.
 
+    modicon = '';
+    showCompletion = false; // Whether to show completion.
+
+    /**
+     * @inheritdoc
+     */
+    async ngOnInit(): Promise<void> {
+        this.modicon = await CoreCourseModuleDelegate.getModuleIconSrc(this.module.modname, this.module.modicon, this.module);
+
+        this.showCompletion = CoreSites.getRequiredCurrentSite().isVersionGreaterEqualThan('3.11');
+    }
+
 }
diff --git a/src/core/features/course/components/unsupported-module/core-course-unsupported-module.html b/src/core/features/course/components/unsupported-module/core-course-unsupported-module.html
index 10fb79074..4e27e6c44 100644
--- a/src/core/features/course/components/unsupported-module/core-course-unsupported-module.html
+++ b/src/core/features/course/components/unsupported-module/core-course-unsupported-module.html
@@ -1,7 +1,6 @@
 <div class="ion-padding">
-    <core-course-module-description [description]="module?.description" contextLevel="module"
-        [contextInstanceId]="module?.id" [courseId]="courseId">
-    </core-course-module-description>
+    <core-course-module-info [description]="module?.description" [courseId]="courseId" [module]="module">
+    </core-course-module-info>
 
     <h2 *ngIf="!isDisabledInSite && isSupportedByTheApp">{{ 'core.whoops' | translate }}</h2>
     <h2 *ngIf="isDisabledInSite || !isSupportedByTheApp">{{ 'core.uhoh' | translate }}</h2>

From f31fc5a6df2ec8a21212141a302745450ee6494d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 17 Nov 2021 11:46:37 +0100
Subject: [PATCH 4/9] MOBILE-3810 format-text: Remove format text full view and
 review toggle

---
 .../addon-mod-assign-feedback-plugin.html     |   6 +-
 .../addon-mod-assign-submission-plugin.html   |   6 +-
 .../addon-mod-assign-feedback-comments.html   |  15 +-
 ...ddon-mod-assign-submission-onlinetext.html |  17 +--
 .../index/addon-mod-workshop-index.html       |   8 +-
 src/core/directives/format-text.ts            | 128 ++++++++----------
 .../core-course-module-description.html       |   7 +-
 .../module-info/core-course-module-info.html  |   2 +-
 .../components/module/core-course-module.html |  64 +++------
 .../course/pages/preview/preview.html         |  66 ++++-----
 .../courses/pages/categories/categories.html  |   2 +-
 .../courses/services/courses-helper.ts        |   2 +-
 .../features/grades/pages/grade/grade.html    |  27 ++--
 src/core/services/utils/text.ts               |   2 +-
 src/theme/components/format-text.scss         |  88 ++++++------
 src/theme/theme.base.scss                     |   2 +-
 16 files changed, 212 insertions(+), 230 deletions(-)

diff --git a/src/addons/mod/assign/components/feedback-plugin/addon-mod-assign-feedback-plugin.html b/src/addons/mod/assign/components/feedback-plugin/addon-mod-assign-feedback-plugin.html
index 0c6116e3c..fce2551b7 100644
--- a/src/addons/mod/assign/components/feedback-plugin/addon-mod-assign-feedback-plugin.html
+++ b/src/addons/mod/assign/components/feedback-plugin/addon-mod-assign-feedback-plugin.html
@@ -1,4 +1,3 @@
-
 <core-dynamic-component [component]="pluginComponent" [data]="data">
     <!-- This content will be replaced by the component if found. -->
     <core-loading [hideUntil]="pluginLoaded">
@@ -9,9 +8,8 @@
                     {{ 'addon.mod_assign.feedbacknotsupported' | translate }}
                 </ion-badge>
                 <p *ngIf="text">
-                    <core-format-text [component]="component" [componentId]="assign.cmid" [maxHeight]="80" [fullOnClick]="true"
-                        [fullTitle]="plugin.name" [text]="text" contextLevel="module" [contextInstanceId]="assign.cmid"
-                        [courseId]="assign.course">
+                    <core-format-text [component]="component" [componentId]="assign.cmid" [maxHeight]="120" [text]="text"
+                        contextLevel="module" [contextInstanceId]="assign.cmid" [courseId]="assign.course">
                     </core-format-text>
                 </p>
                 <core-file *ngFor="let file of files" [file]="file" [component]="component" [componentId]="assign.cmid"
diff --git a/src/addons/mod/assign/components/submission-plugin/addon-mod-assign-submission-plugin.html b/src/addons/mod/assign/components/submission-plugin/addon-mod-assign-submission-plugin.html
index 9ec50a95c..0359f704c 100644
--- a/src/addons/mod/assign/components/submission-plugin/addon-mod-assign-submission-plugin.html
+++ b/src/addons/mod/assign/components/submission-plugin/addon-mod-assign-submission-plugin.html
@@ -1,4 +1,3 @@
-
 <core-dynamic-component [component]="pluginComponent" [data]="data">
     <!-- This content will be replaced by the component if found. -->
     <core-loading [hideUntil]="pluginLoaded">
@@ -9,9 +8,8 @@
                     {{ 'addon.mod_assign.submissionnotsupported' | translate }}
                 </ion-badge>
                 <p *ngIf="text">
-                    <core-format-text [component]="component" [componentId]="assign.cmid" [maxHeight]="80" [fullOnClick]="true"
-                        [fullTitle]="plugin.name" [text]="text" contextLevel="module" [contextInstanceId]="assign.cmid"
-                        [courseId]="assign.course">
+                    <core-format-text [component]="component" [componentId]="assign.cmid" [maxHeight]="120" [text]="text"
+                        contextLevel="module" [contextInstanceId]="assign.cmid" [courseId]="assign.course">
                     </core-format-text>
                 </p>
                 <core-file *ngFor="let file of files" [file]="file" [component]="component" [componentId]="assign.cmid"
diff --git a/src/addons/mod/assign/feedback/comments/component/addon-mod-assign-feedback-comments.html b/src/addons/mod/assign/feedback/comments/component/addon-mod-assign-feedback-comments.html
index b56fbcdd8..4a125adc0 100644
--- a/src/addons/mod/assign/feedback/comments/component/addon-mod-assign-feedback-comments.html
+++ b/src/addons/mod/assign/feedback/comments/component/addon-mod-assign-feedback-comments.html
@@ -3,16 +3,14 @@
     <ion-label>
         <h2>{{ plugin.name }}</h2>
         <p>
-            <core-format-text [component]="component" [componentId]="assign.cmid" [maxHeight]="80" [fullOnClick]="true"
-                [fullTitle]="plugin.name" [text]="text" contextLevel="module" [contextInstanceId]="assign.cmid"
-                [courseId]="assign.course">
+            <core-format-text [component]="component" [componentId]="assign.cmid" [maxHeight]="120" [text]="text" contextLevel="module"
+                [contextInstanceId]="assign.cmid" [courseId]="assign.course">
             </core-format-text>
         </p>
     </ion-label>
     <div slot="end">
         <div class="ion-text-end">
-            <ion-button fill="clear" *ngIf="canEdit" (click)="editComment()" color="dark"
-                [attr.aria-label]="'core.edit' | translate">
+            <ion-button fill="clear" *ngIf="canEdit" (click)="editComment()" color="dark" [attr.aria-label]="'core.edit' | translate">
                 <ion-icon name="fas-pen" slot="icon-only" aria-hidden="true"></ion-icon>
             </ion-button>
         </div>
@@ -25,9 +23,8 @@
 <!-- Edit -->
 <ion-item class="ion-text-wrap" *ngIf="edit && loaded">
     <ion-label class="sr-only">{{ plugin.name }}</ion-label>
-    <core-rich-text-editor [control]="control" [placeholder]="plugin.name"
-        name="assignfeedbackcomments_editor" [component]="component" [componentId]="assign.cmid" [autoSave]="true"
-        contextLevel="module" [contextInstanceId]="assign.cmid" elementId="assignfeedbackcomments_editor"
-        [draftExtraParams]="{userid: userId, action: 'grade'}">
+    <core-rich-text-editor [control]="control" [placeholder]="plugin.name" name="assignfeedbackcomments_editor" [component]="component"
+        [componentId]="assign.cmid" [autoSave]="true" contextLevel="module" [contextInstanceId]="assign.cmid"
+        elementId="assignfeedbackcomments_editor" [draftExtraParams]="{userid: userId, action: 'grade'}">
     </core-rich-text-editor>
 </ion-item>
diff --git a/src/addons/mod/assign/submission/onlinetext/component/addon-mod-assign-submission-onlinetext.html b/src/addons/mod/assign/submission/onlinetext/component/addon-mod-assign-submission-onlinetext.html
index 6660c6c4f..f17a5dca5 100644
--- a/src/addons/mod/assign/submission/onlinetext/component/addon-mod-assign-submission-onlinetext.html
+++ b/src/addons/mod/assign/submission/onlinetext/component/addon-mod-assign-submission-onlinetext.html
@@ -4,9 +4,8 @@
         <h2>{{ plugin.name }}</h2>
         <p *ngIf="words">{{ 'addon.mod_assign.numwords' | translate: {'$a': words} }}</p>
         <p>
-            <core-format-text [component]="component" [componentId]="assign.cmid" [maxHeight]="80" [fullOnClick]="true"
-                [fullTitle]="plugin.name" [text]="text" contextLevel="module" [contextInstanceId]="assign.cmid"
-                [courseId]="assign.course">
+            <core-format-text [component]="component" [componentId]="assign.cmid" [maxHeight]="120" [text]="text" contextLevel="module"
+                [contextInstanceId]="assign.cmid" [courseId]="assign.course">
             </core-format-text>
         </p>
     </ion-label>
@@ -15,7 +14,9 @@
 <!-- Edit -->
 <div *ngIf="edit && loaded">
     <ion-item-divider class="ion-text-wrap" sticky="true">
-        <ion-label><h2>{{ plugin.name }}</h2></ion-label>
+        <ion-label>
+            <h2>{{ plugin.name }}</h2>
+        </ion-label>
     </ion-item-divider>
     <ion-item class="ion-text-wrap" *ngIf="wordLimitEnabled && words >= 0">
         <ion-label>
@@ -25,10 +26,10 @@
     </ion-item>
     <ion-item class="ion-text-wrap">
         <ion-label class="sr-only">{{ plugin.name }}</ion-label>
-        <core-rich-text-editor [control]="control" [placeholder]="plugin.name"
-            name="onlinetext_editor_text" (contentChanged)="onChange($event)" [component]="component"
-            [componentId]="assign.cmid" [autoSave]="true" contextLevel="module" [contextInstanceId]="assign.cmid"
-            elementId="onlinetext_editor" [draftExtraParams]="{userid: currentUserId, action: 'editsubmission'}">
+        <core-rich-text-editor [control]="control" [placeholder]="plugin.name" name="onlinetext_editor_text"
+            (contentChanged)="onChange($event)" [component]="component" [componentId]="assign.cmid" [autoSave]="true" contextLevel="module"
+            [contextInstanceId]="assign.cmid" elementId="onlinetext_editor"
+            [draftExtraParams]="{userid: currentUserId, action: 'editsubmission'}">
         </core-rich-text-editor>
     </ion-item>
 </div>
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 35f7cac49..4004119c0 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
@@ -87,7 +87,7 @@
                 <ion-item class="ion-text-wrap">
                     <ion-label>
                         <h2>{{ 'addon.mod_workshop.conclusion' | translate }}</h2>
-                        <core-format-text fullOnClick="true" [component]="component" [componentId]="module.id" [text]="workshop!.conclusion"
+                        <core-format-text [maxHeight]="120" [component]="component" [componentId]="module.id" [text]="workshop!.conclusion"
                             contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
                         </core-format-text>
                     </ion-label>
@@ -120,8 +120,8 @@
             <ion-item class="ion-text-wrap">
                 <ion-label>
                     <h2>{{ 'addon.mod_workshop.areainstructauthors' | translate }}</h2>
-                    <core-format-text fullOnClick="true" [component]="component" [componentId]="module.id"
-                        [text]="workshop!.instructauthors" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
+                    <core-format-text [maxHeight]="120" [component]="component" [componentId]="module.id" [text]="workshop!.instructauthors"
+                        contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
                     </core-format-text>
                 </ion-label>
             </ion-item>
@@ -184,7 +184,7 @@
                 <ion-item class="ion-text-wrap">
                     <ion-label>
                         <h2>{{ 'addon.mod_workshop.areainstructreviewers' | translate }}</h2>
-                        <core-format-text fullOnClick="true" [component]="component" [componentId]="module.id"
+                        <core-format-text [maxHeight]="120" [component]="component" [componentId]="module.id"
                             [text]="workshop!.instructreviewers" contextLevel="module" [contextInstanceId]="module.id"
                             [courseId]="courseId">
                         </core-format-text>
diff --git a/src/core/directives/format-text.ts b/src/core/directives/format-text.ts
index ea1ed3e5e..10c220e72 100644
--- a/src/core/directives/format-text.ts
+++ b/src/core/directives/format-text.ts
@@ -61,8 +61,6 @@ export class CoreFormatTextDirective implements OnChanges {
     @Input() adaptImg?: boolean | string = true; // Whether to adapt images to screen width.
     @Input() clean?: boolean | string; // Whether all the HTML tags should be removed.
     @Input() singleLine?: boolean | string; // Whether new lines should be removed (all text in single line). Only if clean=true.
-    @Input() fullOnClick?: boolean | string; // Whether it should open a new page with the full contents on click.
-    @Input() fullTitle?: string; // Title to use in full view. Defaults to "Description".
     @Input() highlight?: string; // Text to highlight.
     @Input() filter?: boolean | string; // Whether to filter the text. If not defined, true if contextLevel and instanceId are set.
     @Input() contextLevel?: string; // The context level of the text.
@@ -73,6 +71,8 @@ export class CoreFormatTextDirective implements OnChanges {
     @Input() openLinksInApp?: boolean; // Whether links should be opened in InAppBrowser.
     @Input() hideIfEmpty = false; // If true, the tag will contain nothing if text is empty.
 
+    @Input() fullOnClick?: boolean | string; // @deprecated on 4.0 Won't do anything.
+    @Input() fullTitle?: string; // @deprecated on 4.0 Won't do anything..
     /**
      * Max height in pixels to render the content box. It should be 50 at least to make sense.
      * Using this parameter will force display: block to calculate height better.
@@ -84,10 +84,11 @@ export class CoreFormatTextDirective implements OnChanges {
     @Output() onClick: EventEmitter<void> = new EventEmitter(); // Called when clicked.
 
     protected element: HTMLElement;
-    protected showMoreDisplayed = false;
+    protected expanded = false;
     protected loadingChangedListener?: CoreEventObserver;
     protected emptyText = '';
     protected contentSpan: HTMLElement;
+    protected toggleExpandEnabled = false;
 
     constructor(
         element: ElementRef,
@@ -114,11 +115,12 @@ export class CoreFormatTextDirective implements OnChanges {
     }
 
     /**
-     * Detect changes on input properties.
+     * @inheritdoc
      */
     ngOnChanges(changes: { [name: string]: SimpleChange }): void {
         if (changes.text || changes.filter || changes.contextLevel || changes.contextInstanceId) {
-            this.hideShowMore();
+            this.setExpandButtonEnabled(false);
+
             this.formatAndRenderContents();
         }
     }
@@ -267,37 +269,61 @@ export class CoreFormatTextDirective implements OnChanges {
         this.element.style.maxHeight = initialMaxHeight;
 
         // If cannot calculate height, shorten always.
-        if (!height || height > this.maxHeight) {
-            if (!this.showMoreDisplayed) {
-                this.displayShowMore();
-            }
-        } else if (this.showMoreDisplayed) {
-            this.hideShowMore();
-        }
+        this.setExpandButtonEnabled(!height || height > this.maxHeight);
     }
 
     /**
-     * Display the "Show more" in the element.
+     * Sets if expand button is enabled or not.
+     *
+     * @param enable Wether enable or disable.
      */
-    protected displayShowMore(): void {
-        const expandInFullview = CoreUtils.isTrueOrOne(this.fullOnClick) || false;
-        const showMoreButton = document.createElement('ion-button');
+    protected setExpandButtonEnabled(enable: boolean): void {
+        this.toggleExpandEnabled = enable;
+        this.element.classList.toggle('core-text-formatted', enable);
 
-        showMoreButton.classList.add('core-show-more');
-        showMoreButton.setAttribute('fill', 'clear');
-        showMoreButton.innerHTML = Translate.instant('core.showmore');
-        this.element.appendChild(showMoreButton);
-
-        if (expandInFullview) {
-            this.element.classList.add('core-expand-in-fullview');
-        } else {
-            showMoreButton.setAttribute('aria-expanded', 'false');
+        if (!enable || this.element.querySelector('ion-button.core-format-text-toggle'))  {
+            return;
         }
-        this.element.classList.add('core-text-formatted');
-        this.element.classList.add('core-shortened');
-        this.element.style.maxHeight = this.maxHeight + 'px';
 
-        this.showMoreDisplayed = true;
+        // Add expand/collapse buttons
+        const toggleButton = document.createElement('ion-button');
+        toggleButton.classList.add('core-format-text-toggle');
+        toggleButton.setAttribute('fill', 'clear');
+
+        const toggleText = document.createElement('span');
+        toggleText.classList.add('core-format-text-toggle-text');
+        toggleButton.appendChild(toggleText);
+
+        const expandArrow = document.createElement('span');
+        expandArrow.classList.add('core-format-text-arrow');
+        toggleButton.appendChild(expandArrow);
+
+        this.element.appendChild(toggleButton);
+
+        this.toggleExpand(this.expanded);
+    }
+
+    /**
+     * Expand or collapse text.
+     *
+     * @param expand Wether expand or collapse text. If undefined, will toggle.
+     */
+    protected toggleExpand(expand?: boolean): void {
+        if (expand === undefined) {
+            expand = !this.expanded;
+        }
+        this.expanded = expand;
+        this.element.classList.toggle('core-text-format-expanded', expand);
+        this.element.classList.toggle('core-text-format-collapsed', !expand);
+        this.element.style.maxHeight = expand ? '' : this.maxHeight + 'px';
+
+        const toggleButton = this.element.querySelector('ion-button.core-format-text-toggle');
+        const toggleText = toggleButton?.querySelector('.core-format-text-toggle-text');
+        if (!toggleButton || !toggleText) {
+            return;
+        }
+        toggleText.innerHTML = expand ? Translate.instant('core.showless') : Translate.instant('core.showmore');
+        toggleButton.setAttribute('aria-expanded', expand ? 'true' : 'false');
     }
 
     /**
@@ -321,9 +347,7 @@ export class CoreFormatTextDirective implements OnChanges {
             return;
         }
 
-        const expandInFullview = CoreUtils.isTrueOrOne(this.fullOnClick) || false;
-
-        if (!expandInFullview && !this.showMoreDisplayed) {
+        if (!this.toggleExpandEnabled) {
             // Nothing to do on click, just stop.
             return;
         }
@@ -331,28 +355,7 @@ export class CoreFormatTextDirective implements OnChanges {
         e.preventDefault();
         e.stopPropagation();
 
-        if (!expandInFullview) {
-            // Change class.
-            this.element.classList.toggle('core-shortened');
-
-            return;
-        } else {
-            // Open a new state with the contents.
-            const filter = typeof this.filter != 'undefined' ? CoreUtils.isTrueOrOne(this.filter) : undefined;
-
-            CoreTextUtils.viewText(
-                this.fullTitle || Translate.instant('core.description'),
-                this.text,
-                {
-                    component: this.component,
-                    componentId: this.componentId,
-                    filter: filter,
-                    contextLevel: this.contextLevel,
-                    instanceId: this.contextInstanceId,
-                    courseId: this.courseId,
-                },
-            );
-        }
+        this.toggleExpand();
     }
 
     /**
@@ -361,6 +364,7 @@ export class CoreFormatTextDirective implements OnChanges {
     protected finishRender(): void {
         // Show the element again.
         this.element.classList.remove('core-format-text-loading');
+
         // Emit the afterRender output.
         this.afterRender.emit();
     }
@@ -393,7 +397,7 @@ export class CoreFormatTextDirective implements OnChanges {
 
         this.contentSpan.innerHTML = ''; // Remove current contents.
         if (this.maxHeight && result.div.innerHTML != '' &&
-                (this.fullOnClick || (window.innerWidth < 576 || window.innerHeight < 576))) { // Don't collapse in big screens.
+                (window.innerWidth < 576 || window.innerHeight < 576)) { // Don't collapse in big screens.
 
             // Move the children to the current element to be able to calculate the height.
             CoreDomUtils.moveChildren(result.div, this.contentSpan);
@@ -655,20 +659,6 @@ export class CoreFormatTextDirective implements OnChanges {
         return CoreDomUtils.getElementHeight(element) || 0;
     }
 
-    /**
-     * "Hide" the "Show more" in the element if it's shown.
-     */
-    protected hideShowMore(): void {
-        const showMoreButton = this.element.querySelector('ion-button.core-show-more');
-        showMoreButton?.remove();
-
-        this.element.classList.remove('core-expand-in-fullview');
-        this.element.classList.remove('core-text-formatted');
-        this.element.classList.remove('core-shortened');
-        this.element.style.maxHeight = '';
-        this.showMoreDisplayed = false;
-    }
-
     /**
      * Add media adapt class and apply CoreExternalContentDirective to the media element and its sources and tracks.
      *
diff --git a/src/core/features/course/components/module-description/core-course-module-description.html b/src/core/features/course/components/module-description/core-course-module-description.html
index e07546c5a..0f6d34c0a 100644
--- a/src/core/features/course/components/module-description/core-course-module-description.html
+++ b/src/core/features/course/components/module-description/core-course-module-description.html
@@ -1,9 +1,8 @@
 <ion-card *ngIf="description">
     <ion-item class="ion-text-wrap">
         <ion-label>
-            <core-format-text [text]="description" [component]="component" [componentId]="componentId"
-                [maxHeight]="showFull && showFull !== 'false' ? 0 : 120" fullOnClick="true" [contextLevel]="contextLevel"
-                [contextInstanceId]="contextInstanceId" [courseId]="courseId">
+            <core-format-text [text]="description" [component]="component" [componentId]="componentId" [maxHeight]="120"
+                [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId">
             </core-format-text>
         </ion-label>
     </ion-item>
@@ -12,4 +11,4 @@
             <ion-note slot="end">{{ note }}</ion-note>
         </ion-label>
     </ion-item>
-</ion-card>
\ No newline at end of file
+</ion-card>
diff --git a/src/core/features/course/components/module-info/core-course-module-info.html b/src/core/features/course/components/module-info/core-course-module-info.html
index acd0b90e5..8aac777b4 100644
--- a/src/core/features/course/components/module-info/core-course-module-info.html
+++ b/src/core/features/course/components/module-info/core-course-module-info.html
@@ -13,7 +13,7 @@
 <ion-item class="ion-text-wrap" *ngIf="description" lines="none">
     <ion-label>
         <core-format-text [text]="description" [component]="component" [componentId]="componentId" contextLevel="module"
-            [contextInstanceId]="module.id" [courseId]="courseId" maxHeight="120">
+            [contextInstanceId]="module.id" [courseId]="courseId" [maxHeight]="120">
         </core-format-text>
     </ion-label>
 </ion-item>
diff --git a/src/core/features/course/components/module/core-course-module.html b/src/core/features/course/components/module/core-course-module.html
index 630c19e11..ea1bec5df 100644
--- a/src/core/features/course/components/module/core-course-module.html
+++ b/src/core/features/course/components/module/core-course-module.html
@@ -1,17 +1,12 @@
 <ng-container *ngIf="module.handlerData && module.visibleoncoursepage !== 0">
     <ng-container *ngIf="!module.handlerData.loading">
-        <ion-item
-            id="core-course-module-{{module.id}}"
+        <ion-item id="core-course-module-{{module.id}}"
             class="ion-text-wrap core-course-module-handler core-module-main-item {{module.handlerData.class}}"
-            (click)="moduleClicked($event)"
-            [attr.aria-label]="module.handlerData.a11yTitle"
-            [ngClass]="{
+            (click)="moduleClicked($event)" [attr.aria-label]="module.handlerData.a11yTitle" [ngClass]="{
                 'has-module-info': hasInfo,
                 'item-media': module.handlerData.icon,
                 'item-dimmed': module.visible === 0 || module.uservisible === false
-            }"
-            [button]="module.handlerData.action && module.uservisible"
-            detail="false">
+            }" [button]="module.handlerData.action && module.uservisible" detail="false">
 
             <core-mod-icon slot="start" *ngIf="module.handlerData.icon" [modicon]="module.handlerData.icon" [modname]="module.modname"
                 [componentId]="module.instance">
@@ -23,11 +18,8 @@
                         [courseId]="courseId" [attr.aria-label]="module.handlerData.a11yTitle + ', ' + modNameTranslated">
                     </core-format-text>
                 </p>
-                <ion-badge
-                    *ngIf="module.handlerData.extraBadge"
-                    [color]="module.handlerData.extraBadgeColor"
-                    class="ion-text-wrap ion-text-start"
-                >
+                <ion-badge *ngIf="module.handlerData.extraBadge" [color]="module.handlerData.extraBadgeColor"
+                    class="ion-text-wrap ion-text-start">
                     <span [innerHTML]="module.handlerData.extraBadge"></span>
                 </ion-badge>
                 <ion-badge *ngIf="module.visible === 0 && (!section || section.visible)" class="ion-text-wrap">
@@ -47,12 +39,8 @@
                 </ion-badge>
             </ion-label>
             <!-- Buttons. -->
-            <div
-                slot="end"
-                *ngIf="module.uservisible !== false"
-                class="buttons core-module-buttons"
-                [ngClass]="{'core-button-completion': module.completiondata && showLegacyCompletion}"
-            >
+            <div slot="end" *ngIf="module.uservisible !== false" class="buttons core-module-buttons"
+                [ngClass]="{'core-button-completion': module.completiondata && showLegacyCompletion}">
                 <!-- Module completion (legacy). -->
                 <core-course-module-completion-legacy *ngIf="module.completiondata && showLegacyCompletion"
                     [completion]="module.completiondata" [moduleName]="module.name" [moduleId]="module.id"
@@ -60,31 +48,24 @@
                 </core-course-module-completion-legacy>
 
                 <div class="core-module-buttons-more">
-                    <core-download-refresh [status]="downloadStatus" [enabled]="downloadEnabled"
-                        [canTrustDownload]="true" [loading]="spinner || module.handlerData.spinner"
-                        (action)="download($event)" size="small">
+                    <core-download-refresh [status]="downloadStatus" [enabled]="downloadEnabled" [canTrustDownload]="true"
+                        [loading]="spinner || module.handlerData.spinner" (action)="download($event)" size="small">
                     </core-download-refresh>
 
                     <!-- Buttons defined by the module handler. -->
                     <ion-button fill="clear" *ngFor="let button of module.handlerData.buttons" color="dark" size="small"
                         [hidden]="button.hidden || spinner || module.handlerData.spinner" class="core-animate-show-hide"
-                        (click)="buttonClicked($event, button)"
-                        [attr.aria-label]="button.label | translate:{$a: module.handlerData.title}">
+                        (click)="buttonClicked($event, button)" [attr.aria-label]="button.label | translate:{$a: module.handlerData.title}">
                         <ion-icon [name]="button.icon" slot="icon-only" aria-hidden="true"></ion-icon>
                     </ion-button>
                 </div>
             </div>
         </ion-item>
-        <ion-item
-            *ngIf="hasInfo"
-            id="core-course-module-{{module.id}}-info"
-            class="ion-text-wrap core-course-module-handler core-module-module-info {{module.handlerData.class}}"
-            [ngClass]="{
+        <ion-item *ngIf="hasInfo" id="core-course-module-{{module.id}}-info"
+            class="ion-text-wrap core-course-module-handler core-module-module-info {{module.handlerData.class}}" [ngClass]="{
                 'item-media': module.handlerData.icon,
                 'item-dimmed': module.visible === 0 || module.uservisible === false
-            }"
-            detail="false"
-        >
+            }" detail="false">
             <ion-label>
                 <!-- Activity dates. -->
                 <div *ngIf="showActivityDates && module.dates && module.dates.length" class="core-module-dates">
@@ -94,12 +75,12 @@
                 </div>
 
                 <!-- Module completion. -->
-                <core-course-module-completion *ngIf="module.completiondata" [completion]="module.completiondata"
-                    [moduleName]="module.name" [moduleId]="module.id" [showCompletionConditions]="showCompletionConditions"
+                <core-course-module-completion *ngIf="module.completiondata" [completion]="module.completiondata" [moduleName]="module.name"
+                    [moduleId]="module.id" [showCompletionConditions]="showCompletionConditions"
                     [showManualCompletion]="showManualCompletion" (completionChanged)="completionChanged.emit($event)">
                 </core-course-module-completion>
 
-                <core-format-text class="core-module-description" *ngIf="module.description" maxHeight="80" [text]="module.description"
+                <core-format-text class="core-module-description" *ngIf="module.description" [maxHeight]="80" [text]="module.description"
                     contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
                 </core-format-text>
             </ion-label>
@@ -107,14 +88,11 @@
     </ng-container>
 
     <!-- Loading. -->
-    <ion-item *ngIf="module.handlerData.loading"
-        role="status"
-        class="ion-text-wrap"
-        id="core-course-module-{{module.id}}"
+    <ion-item *ngIf="module.handlerData.loading" role="status" class="ion-text-wrap" id="core-course-module-{{module.id}}"
         [attr.aria-label]="module.handlerData.a11yTitle"
-        [ngClass]="['core-course-module-handler', 'core-module-loading', module.handlerData.class]"
-        detail="false"
-    >
-        <ion-label><ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner></ion-label>
+        [ngClass]="['core-course-module-handler', 'core-module-loading', module.handlerData.class]" detail="false">
+        <ion-label>
+            <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+        </ion-label>
     </ion-item>
 </ng-container>
diff --git a/src/core/features/course/pages/preview/preview.html b/src/core/features/course/pages/preview/preview.html
index a69893d67..49a16a7ab 100644
--- a/src/core/features/course/pages/preview/preview.html
+++ b/src/core/features/course/pages/preview/preview.html
@@ -15,7 +15,7 @@
     <core-loading [hideUntil]="dataLoaded">
         <div *ngIf="courseImageUrl" class="core-course-thumb-parallax">
             <div (click)="openCourse()" class="core-course-thumb">
-                <img [src]="courseImageUrl" core-external-content alt=""/>
+                <img [src]="courseImageUrl" core-external-content alt="" />
             </div>
         </div>
         <div class="core-course-thumb-parallax-content" *ngIf="course">
@@ -27,8 +27,10 @@
                         <core-format-text [text]="course.fullname" contextLevel="course" [contextInstanceId]="course.id">
                         </core-format-text>
                     </h2>
-                    <p *ngIf="course.categoryname"><core-format-text [text]="course.categoryname"
-                        contextLevel="coursecat" [contextInstanceId]="course.categoryid"></core-format-text></p>
+                    <p *ngIf="course.categoryname">
+                        <core-format-text [text]="course.categoryname" contextLevel="coursecat" [contextInstanceId]="course.categoryid">
+                        </core-format-text>
+                    </p>
                     <p *ngIf="course.startdate">
                         {{course.startdate * 1000 | coreFormatDate:"strftimedatefullshort" }}
                         <span *ngIf="course.enddate"> - {{course.enddate * 1000 | coreFormatDate:"strftimedatefullshort" }}</span>
@@ -38,7 +40,7 @@
 
             <ion-item class="ion-text-wrap" *ngIf="course.summary" detail="false">
                 <ion-label>
-                    <core-format-text [text]="course.summary" maxHeight="120" contextLevel="course" [contextInstanceId]="course.id">
+                    <core-format-text [text]="course.summary" [maxHeight]="120" contextLevel="course" [contextInstanceId]="course.id">
                     </core-format-text>
                 </ion-label>
             </ion-item>
@@ -51,8 +53,7 @@
                 </ion-item-divider>
                 <ion-item class="ion-text-wrap" *ngFor="let contact of course.contacts" core-user-link [userId]="contact.id"
                     [courseId]="isEnrolled ? course.id : null" [attr.aria-label]="'core.viewprofile' | translate" detail="true">
-                    <core-user-avatar [user]="contact" slot="start" [userId]="contact.id"
-                        [courseId]="isEnrolled ? course.id : null">
+                    <core-user-avatar [user]="contact" slot="start" [userId]="contact.id" [courseId]="isEnrolled ? course.id : null">
                     </core-user-avatar>
                     <ion-label>
                         <p class="item-heading">{{contact.fullname}}</p>
@@ -63,20 +64,20 @@
 
             <ion-item class="ion-text-wrap" *ngIf="course.customfields">
                 <ion-label>
-                <ng-container *ngFor="let field of course.customfields">
-                    <div *ngIf="field.value"
-                        class="core-customfield core-customfield_{{field.type}} core-customfield_{{field.shortname}}">
-                        <span class="core-customfieldname">
-                            <core-format-text [text]="field.name" contextLevel="course" [contextInstanceId]="course.id">
-                            </core-format-text>
-                        </span><span class="core-customfieldseparator">: </span>
-                        <span class="core-customfieldvalue">
-                            <core-format-text [text]="field.value" maxHeight="120" contextLevel="course"
-                            [contextInstanceId]="course.id">
-                            </core-format-text>
-                        </span>
-                    </div>
-                </ng-container>
+                    <ng-container *ngFor="let field of course.customfields">
+                        <div *ngIf="field.value"
+                            class="core-customfield core-customfield_{{field.type}} core-customfield_{{field.shortname}}">
+                            <span class="core-customfieldname">
+                                <core-format-text [text]="field.name" contextLevel="course" [contextInstanceId]="course.id">
+                                </core-format-text>
+                            </span><span class="core-customfieldseparator">: </span>
+                            <span class="core-customfieldvalue">
+                                <core-format-text [text]="field.value" [maxHeight]="120" contextLevel="course"
+                                    [contextInstanceId]="course.id">
+                                </core-format-text>
+                            </span>
+                        </div>
+                    </ng-container>
                 </ion-label>
             </ion-item>
 
@@ -100,19 +101,19 @@
                 </ion-label>
             </ion-item>
             <ion-item *ngIf="!isEnrolled && !selfEnrolInstances.length && !paypalEnabled">
-                <ion-label><p>{{ 'core.courses.notenrollable' | translate }}</p></ion-label>
+                <ion-label>
+                    <p>{{ 'core.courses.notenrollable' | translate }}</p>
+                </ion-label>
             </ion-item>
             <ion-item *ngIf="canAccessCourse && downloadCourseEnabled" (click)="prefetchCourse()" detail="false"
-                    [attr.aria-label]="prefetchCourseData.statusTranslatable | translate" button>
+                [attr.aria-label]="prefetchCourseData.statusTranslatable | translate" button>
                 <ion-icon *ngIf="(prefetchCourseData.status != statusDownloaded) && !prefetchCourseData.loading"
                     [name]="prefetchCourseData.icon" slot="start" aria-hidden="true">
                 </ion-icon>
-                <ion-icon *ngIf="(prefetchCourseData.status == statusDownloaded) && !prefetchCourseData.loading"
-                    slot="start" [name]="prefetchCourseData.icon" color="success"
-                    aria-hidden="true" role="status">
+                <ion-icon *ngIf="(prefetchCourseData.status == statusDownloaded) && !prefetchCourseData.loading" slot="start"
+                    [name]="prefetchCourseData.icon" color="success" aria-hidden="true" role="status">
                 </ion-icon>
-                <ion-spinner *ngIf="prefetchCourseData.loading" slot="start"
-                    [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+                <ion-spinner *ngIf="prefetchCourseData.loading" slot="start" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
                 <ion-label>
                     <h2 *ngIf="prefetchCourseData.status != statusDownloaded">{{ 'core.course.downloadcourse' | translate }}</h2>
                     <h2 *ngIf="prefetchCourseData.status == statusDownloaded">{{ 'core.course.refreshcourse' | translate }}</h2>
@@ -121,12 +122,15 @@
             <ion-item button (click)="openCourse()" [attr.aria-label]="course.fullname" *ngIf="!avoidOpenCourse && canAccessCourse"
                 detail="true">
                 <ion-icon name="fas-briefcase" slot="start" aria-hidden="true"></ion-icon>
-                <ion-label><h2>{{ 'core.course.contents' | translate }}</h2></ion-label>
+                <ion-label>
+                    <h2>{{ 'core.course.contents' | translate }}</h2>
+                </ion-label>
             </ion-item>
-            <ion-item [href]="courseUrl" core-link [attr.aria-label]="course.fullname" button detail="false"
-                [showBrowserWarning]="false">
+            <ion-item [href]="courseUrl" core-link [attr.aria-label]="course.fullname" button detail="false" [showBrowserWarning]="false">
                 <ion-icon name="fas-external-link-alt" slot="start" aria-hidden="true"></ion-icon>
-                <ion-label><h2>{{ 'core.openinbrowser' | translate }}</h2></ion-label>
+                <ion-label>
+                    <h2>{{ 'core.openinbrowser' | translate }}</h2>
+                </ion-label>
             </ion-item>
         </div>
     </core-loading>
diff --git a/src/core/features/courses/pages/categories/categories.html b/src/core/features/courses/pages/categories/categories.html
index 495001569..0baf6bdff 100644
--- a/src/core/features/courses/pages/categories/categories.html
+++ b/src/core/features/courses/pages/categories/categories.html
@@ -31,7 +31,7 @@
                     </core-format-text>
                 </p>
                 <p *ngIf="currentCategory.description">
-                    <core-format-text [text]="currentCategory.description" maxHeight="60" contextLevel="coursecat"
+                    <core-format-text [text]="currentCategory.description" [maxHeight]="120" contextLevel="coursecat"
                         [contextInstanceId]="currentCategory.id"></core-format-text>
                 </p>
             </ion-label>
diff --git a/src/core/features/courses/services/courses-helper.ts b/src/core/features/courses/services/courses-helper.ts
index 3cf1a014d..df8e4e92c 100644
--- a/src/core/features/courses/services/courses-helper.ts
+++ b/src/core/features/courses/services/courses-helper.ts
@@ -251,7 +251,7 @@ export class CoreCoursesHelperProvider {
             case 'lastaccess':
                 courses.sort((a, b) => (b.lastaccess || 0) - (a.lastaccess || 0));
                 break;
-            // @todo Time modified property is not defined in CoreEnrolledCourseDataWithOptions, so it won't do nothing.
+            // @todo Time modified property is not defined in CoreEnrolledCourseDataWithOptions, so it Won't do anything.
             // case 'timemodified':
             //    courses.sort((a, b) => b.timemodified - a.timemodified);
             //    break;
diff --git a/src/core/features/grades/pages/grade/grade.html b/src/core/features/grades/pages/grade/grade.html
index 9abe2b1f3..f565c8388 100644
--- a/src/core/features/grades/pages/grade/grade.html
+++ b/src/core/features/grades/pages/grade/grade.html
@@ -14,26 +14,29 @@
         <core-empty-box *ngIf="!grade" icon="fas-chart-bar" [message]="'core.grades.nogradesreturned' | translate"></core-empty-box>
 
         <ion-list *ngIf="grade">
-            <ion-item *ngIf="grade.itemname && grade.link" class="ion-text-wrap" detail="true" [href]="grade.link" core-link
-            capture="true">
+            <ion-item *ngIf="grade.itemname && grade.link" class="ion-text-wrap" detail="true" [href]="grade.link" core-link capture="true">
                 <ion-icon *ngIf="grade.icon" name="{{grade.icon}}" slot="start" [attr.aria-label]="grade.iconAlt"></ion-icon>
-                <img *ngIf="grade.image && !grade.itemmodule" [src]="grade.image && grade.itemmodule" slot="start" [alt]="grade.iconAlt"/>
+                <img *ngIf="grade.image && !grade.itemmodule" [src]="grade.image && grade.itemmodule" slot="start" [alt]="grade.iconAlt" />
                 <core-mod-icon *ngIf="grade.image && grade.itemmodule" [modicon]="grade.image" slot="start" [modname]="grade.itemmodule">
                 </core-mod-icon>
                 <ion-label>
-                    <h2><core-format-text [text]="grade.itemname" contextLevel="course" [contextInstanceId]="courseId">
-                    </core-format-text></h2>
+                    <h2>
+                        <core-format-text [text]="grade.itemname" contextLevel="course" [contextInstanceId]="courseId">
+                        </core-format-text>
+                    </h2>
                 </ion-label>
             </ion-item>
 
-            <ion-item *ngIf="grade.itemname && !grade.link" class="ion-text-wrap" >
+            <ion-item *ngIf="grade.itemname && !grade.link" class="ion-text-wrap">
                 <ion-icon *ngIf="grade.icon" name="{{grade.icon}}" slot="start" [attr.aria-label]="grade.iconAlt"></ion-icon>
-                <img *ngIf="grade.image && !grade.itemmodule" [src]="grade.image" slot="start" [alt]="grade.iconAlt"/>
+                <img *ngIf="grade.image && !grade.itemmodule" [src]="grade.image" slot="start" [alt]="grade.iconAlt" />
                 <core-mod-icon *ngIf="grade.image && grade.itemmodule" [modicon]="grade.image" slot="start" [modname]="grade.itemmodule">
                 </core-mod-icon>
                 <ion-label>
-                    <h2><core-format-text [text]="grade.itemname" contextLevel="course" [contextInstanceId]="courseId">
-                    </core-format-text></h2>
+                    <h2>
+                        <core-format-text [text]="grade.itemname" contextLevel="course" [contextInstanceId]="courseId">
+                        </core-format-text>
+                    </h2>
                 </ion-label>
             </ion-item>
 
@@ -89,8 +92,10 @@
             <ion-item class="ion-text-wrap" *ngIf="grade.feedback">
                 <ion-label>
                     <h2>{{ 'core.grades.feedback' | translate}}</h2>
-                    <p><core-format-text [fullTitle]="'core.grades.feedback' | translate" maxHeight="60" fullOnClick="true"
-                        [text]="grade.feedback" contextLevel="course" [contextInstanceId]="courseId"></core-format-text></p>
+                    <p>
+                        <core-format-text [maxHeight]="120" [text]="grade.feedback" contextLevel="course" [contextInstanceId]="courseId">
+                        </core-format-text>
+                    </p>
                 </ion-label>
             </ion-item>
 
diff --git a/src/core/services/utils/text.ts b/src/core/services/utils/text.ts
index 2ea31bf2b..362298e18 100644
--- a/src/core/services/utils/text.ts
+++ b/src/core/services/utils/text.ts
@@ -571,7 +571,7 @@ export class CoreTextUtilsProvider {
 
         const regex = new RegExp('(' + searchText + ')', 'gi');
 
-        return text.replace(regex, '<span class="matchtext">$1</span>');
+        return text.replace(regex, '<mark class="matchtext">$1</mark>');
     }
 
     /**
diff --git a/src/theme/components/format-text.scss b/src/theme/components/format-text.scss
index 204c0612b..7ac616332 100644
--- a/src/theme/components/format-text.scss
+++ b/src/theme/components/format-text.scss
@@ -51,11 +51,15 @@ core-format-text {
             display: inline;
         }
 
-        .core-show-more {
+        .core-format-text-toggle {
             display: none !important;
         }
     }
 
+    .core-format-text-toggle {
+        display: none;
+    }
+
     .core-format-text-content {
         opacity: 1;
         @include core-transition(opacity, 200ms);
@@ -84,30 +88,45 @@ core-format-text {
             cursor: pointer;
             pointer-events: auto;
 
-            .core-show-more {
-                display: none;
+            .core-format-text-toggle {
+                display: block;
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                text-align: center;
+                z-index: 7;
+                text-transform: none;
+                text-align: end;
+                font-size: 14px;
+                background-color: var(--core-format-text-background);
+                color: var(--text-color);
+                margin: 0;
+
+                
+                .core-format-text-arrow {
+                    width: var(--a11y-min-target-size);
+                    height: var(--a11y-min-target-size);
+
+                    background-position: center;
+                    background-repeat: no-repeat;
+                    background-size: 14px 14px;
+                    @include core-transition(transform, 500ms);
+
+                    @include push-arrow-color(626262, true);
+
+                    @include darkmode() {
+                        @include push-arrow-color(ffffff, true);
+                    }
+                }
             }
 
-            &:not(.core-shortened) {
-                max-height: none !important;
-            }
-
-            &.core-shortened {
+            &.core-text-format-collapsed {
                 overflow: hidden;
                 min-height: 50px;
 
-                .core-show-more {
-                    text-transform: none;
-                    text-align: end;
-                    font-size: 14px;
-                    display: block;
-                    position: absolute;
-                    @include position(null, 0, 0, null);
-                    z-index: 7;
-                    background-color: var(--core-format-text-background);
-                    color: var(--text-color);
-                    @include padding(null, null, null, 10px);
-                    margin: 0;
+                .core-format-text-arrow {
+                    transform: rotate(90deg);
                 }
 
                 &:before {
@@ -115,26 +134,19 @@ core-format-text {
                     height: 100%;
                     position: absolute;
                     @include position(null, 0, 0, 0);
-                    background: -webkit-linear-gradient(top, rgba(var(--core-format-text-background-gradient-rgb), 0) calc(100% - 50px), rgba(var(--core-format-text-background-gradient-rgb), 1) calc(100% - 15px));
-                    background: linear-gradient(to bottom, rgba(var(--core-format-text-background-gradient-rgb), 0) calc(100% - 50px), rgba(var(--core-format-text-background-gradient-rgb), 1) calc(100% - 15px));
+                    background: -webkit-linear-gradient(top, rgba(var(--core-format-text-background-gradient-rgb), 0) calc(100% - 60px), rgba(var(--core-format-text-background-gradient-rgb), 1) calc(100% - 40px));
+                    background: linear-gradient(to bottom, rgba(var(--core-format-text-background-gradient-rgb), 0) calc(100% - 60px), rgba(var(--core-format-text-background-gradient-rgb), 1) calc(100% - 40px));
                     z-index: 6;
                 }
             }
-        }
 
-        &.core-expand-in-fullview {
-            cursor: pointer;
+            &.core-text-format-expanded {
+                max-height: none !important;
 
-            .core-show-more {
-                @include push-arrow-color(626262, true);
-                @include padding-horizontal(null, 5px);
-                @include background-position(end, 5px, center);
+                padding-bottom: 50px; // So the Show less button can fit.
 
-                background-repeat: no-repeat;
-                background-size: 14px 14px;
-
-                @include darkmode() {
-                    @include push-arrow-color(ffffff, true);
+                .core-format-text-arrow {
+                    transform: rotate(-90deg);
                 }
             }
         }
@@ -143,10 +155,10 @@ core-format-text {
     @if ($core-format-text-never-shorten) {
         &[maxHeight],
         &[ng-reflect-max-height] {
-            &.core-text-formatted.core-shortened {
+            &.core-text-formatted.core-text-format-expanded {
                 max-height: none !important;
 
-                .core-show-more {
+                .core-format-text-toggle {
                     display: none !important;
                 }
 
@@ -354,7 +366,7 @@ core-rich-text-editor .core-rte-editor {
         height: 30px;
         display: inline-block;
         border: 1px solid var(--gray-dark);
-        background: var(--background-contrast);
+        background: var(--contrast-background);
         padding: 6px 8px;
         border-radius: 4px;
         margin-left: 2px;
@@ -363,7 +375,7 @@ core-rich-text-editor .core-rte-editor {
     }
 
     select {
-        background-color: var(--background-contrast);
+        background-color: var(--contrast-background);
         background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
         background-repeat: no-repeat, repeat;
         background-position: right .7em top 50%, 0 0;
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index c7150accd..12b4b04a1 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -848,7 +848,7 @@ core-block ion-item-divider .core-button-spinner {
 
 // Text formats.
 // Highlight text.
-.matchtext {
+mark, .matchtext {
     background-color: var(--text-hightlight-background-color);
 }
 

From a0687821aea8933d60e6babbd78081f52b2f2949 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 17 Nov 2021 11:46:37 +0100
Subject: [PATCH 5/9] MOBILE-3810 module: Add data to sync to module info

---
 .../components/index/addon-mod-assign-index.html     | 12 +-----------
 .../components/index/addon-mod-choice-index.html     | 10 +---------
 .../data/components/index/addon-mod-data-index.html  | 10 +---------
 .../components/index/addon-mod-feedback-index.html   | 10 +---------
 src/addons/mod/forum/components/index/index.html     | 12 ++----------
 .../components/index/addon-mod-glossary-index.html   | 10 +---------
 .../index/addon-mod-h5pactivity-index.html           | 10 +---------
 .../components/index/addon-mod-lesson-index.html     | 10 +---------
 .../quiz/components/index/addon-mod-quiz-index.html  | 11 ++---------
 .../components/index/addon-mod-scorm-index.html      | 10 +---------
 .../components/index/addon-mod-survey-index.html     | 12 ++----------
 .../components/index/addon-mod-workshop-index.html   | 10 +---------
 .../module-info/core-course-module-info.html         |  8 ++++++++
 .../components/module-info/course-module-info.scss   |  1 +
 .../course/components/module-info/module-info.ts     |  6 ++++++
 .../features/courses/pages/dashboard/dashboard.ts    |  1 -
 16 files changed, 30 insertions(+), 113 deletions(-)

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 1efbaa292..fd835cefd 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
@@ -31,23 +31,13 @@
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" (completionChanged)="onCompletionChange()" [description]="description"
-        [component]="component" [componentId]="componentId" [courseId]="courseId">
+        [component]="component" [componentId]="componentId" [courseId]="courseId" [hasDataToSync]="hasOffline">
         <ion-list inset="true" description *ngIf="assign && assign.introattachments && assign.introattachments.length">
             <core-file *ngFor="let file of assign.introattachments" [file]="file" [component]="component" [componentId]="componentId">
             </core-file>
         </ion-list>
     </core-course-module-info>
 
-
-
-    <!-- Assign has something offline. -->
-    <ion-card class="core-warning-card" *ngIf="hasOffline">
-        <ion-item>
-            <ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
-            <ion-label>{{ 'core.hasdatatosync' | translate: {$a: moduleName} }}</ion-label>
-        </ion-item>
-    </ion-card>
-
     <!-- User can view all submissions (teacher). -->
     <ng-container *ngIf="assign && canViewAllSubmissions">
         <ion-list class="core-list-align-detail-right">
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 f0e2aa0f5..a767fe487 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
@@ -30,7 +30,7 @@
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" (completionChanged)="onCompletionChange()" [description]="description"
-        [component]="component" [componentId]="componentId" [courseId]="courseId">
+        [component]="component" [componentId]="componentId" [courseId]="courseId" [hasDataToSync]="hasOffline">
     </core-course-module-info>
 
     <!-- Activity availability messages -->
@@ -58,14 +58,6 @@
         </ion-item>
     </ion-card>
 
-    <!-- Choice done in offline but not synchronized -->
-    <ion-card class="core-warning-card" *ngIf="hasOffline">
-        <ion-item>
-            <ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
-            <ion-label>{{ 'core.hasdatatosync' | translate:{$a: moduleName} }}</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>
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 f8a993361..8a1f45d10 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
@@ -40,17 +40,9 @@
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" (completionChanged)="onCompletionChange()" [description]="description"
-        [component]="component" [componentId]="componentId" [courseId]="courseId">
+        [component]="component" [componentId]="componentId" [courseId]="courseId" [hasDataToSync]="hasOffline || hasOfflineRatings">
     </core-course-module-info>
 
-    <!-- Data done in offline but not synchronized -->
-    <ion-card class="core-warning-card" *ngIf="hasOffline || hasOfflineRatings">
-        <ion-item>
-            <ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
-            <ion-label>{{ 'core.hasdatatosync' | translate: {$a: moduleName} }}</ion-label>
-        </ion-item>
-    </ion-card>
-
     <ion-item class="ion-text-wrap" *ngIf="groupInfo && (groupInfo.separateGroups || groupInfo.visibleGroups)">
         <ion-label id="addon-data-groupslabel">
             <ng-container *ngIf="groupInfo.separateGroups">{{'core.groupsseparate' | translate }}</ng-container>
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 b6852c689..aacd8344e 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
@@ -30,7 +30,7 @@
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" (completionChanged)="onCompletionChange()" [description]="description"
-        [component]="component" [componentId]="componentId" [courseId]="courseId">
+        [component]="component" [componentId]="componentId" [courseId]="courseId" [hasDataToSync]="hasOffline">
     </core-course-module-info>
 
     <core-tabs [hideUntil]="tabsReady" [selectedIndex]="firstSelectedTab">
@@ -106,14 +106,6 @@
     <core-loading [hideUntil]="tabsLoaded.overview">
         <ng-container *ngTemplateOutlet="basicInfo"></ng-container>
 
-        <!-- Feedback done in offline but not synchronized -->
-        <ion-card class="core-warning-card" *ngIf="hasOffline">
-            <ion-item>
-                <ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
-                <ion-label>{{ 'core.hasdatatosync' | translate:{$a: moduleName} }}</ion-label>
-            </ion-item>
-        </ion-card>
-
         <ion-card class="core-info-card" *ngIf="access && access.cancomplete && !access.isopen">
             <ion-item>
                 <ion-icon name="fas-question-circle" slot="start" aria-hidden="true"></ion-icon>
diff --git a/src/addons/mod/forum/components/index/index.html b/src/addons/mod/forum/components/index/index.html
index 642a96d2f..e61fce1ef 100644
--- a/src/addons/mod/forum/components/index/index.html
+++ b/src/addons/mod/forum/components/index/index.html
@@ -39,8 +39,8 @@
     <core-loading [hideUntil]="discussions.loaded">
         <!-- Activity info. -->
         <core-course-module-info [module]="module" (completionChanged)="onCompletionChange()"
-            [description]="forum && forum.type != 'single' && description" [component]="component"
-            [componentId]="componentId" [courseId]="courseId">
+            [description]="forum && forum.type != 'single' && description" [component]="component" [componentId]="componentId"
+            [courseId]="courseId" [hasDataToSync]="hasOffline || hasOfflineRatings">
             <ion-item>
                 <ion-label>
                     {{descriptionNote}}
@@ -48,14 +48,6 @@
             </ion-item>
         </core-course-module-info>
 
-        <!-- Forum discussions found to be synchronized -->
-        <ion-card class="core-warning-card" *ngIf="hasOffline || hasOfflineRatings">
-            <ion-item>
-                <ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
-                <ion-label>{{ 'core.hasdatatosync' | translate:{$a: moduleName} }}</ion-label>
-            </ion-item>
-        </ion-card>
-
         <!-- Cut-off date or due date message -->
         <ion-card class="core-info-card" *ngIf="availabilityMessage">
             <ion-item>
diff --git a/src/addons/mod/glossary/components/index/addon-mod-glossary-index.html b/src/addons/mod/glossary/components/index/addon-mod-glossary-index.html
index 61cee7db8..b0095c394 100644
--- a/src/addons/mod/glossary/components/index/addon-mod-glossary-index.html
+++ b/src/addons/mod/glossary/components/index/addon-mod-glossary-index.html
@@ -51,17 +51,9 @@
     <core-loading [hideUntil]="loaded">
         <!-- Activity info. -->
         <core-course-module-info *ngIf="!isSearch" [module]="module" (completionChanged)="onCompletionChange()" [description]="description"
-            [component]="component" [componentId]="componentId" [courseId]="courseId">
+            [component]="component" [componentId]="componentId" [courseId]="courseId" [hasDataToSync]="hasOffline || hasOfflineRatings">
         </core-course-module-info>
 
-        <!-- Has offline data to be synchronized -->
-        <ion-card class="core-warning-card" *ngIf="hasOffline || hasOfflineRatings">
-            <ion-item>
-                <ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
-                <ion-label>{{ 'core.hasdatatosync' | translate:{$a: moduleName} }}</ion-label>
-            </ion-item>
-        </ion-card>
-
         <ion-list *ngIf="!isSearch && entries.offlineEntries.length > 0">
             <ion-item-divider>
                 <ion-label>
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 1811b5b44..4c7b7cd88 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
@@ -37,17 +37,9 @@
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" (completionChanged)="onCompletionChange()" [description]="description"
-        [component]="component" [componentId]="componentId" [courseId]="courseId">
+        [component]="component" [componentId]="componentId" [courseId]="courseId" [hasDataToSync]="hasOffline">
     </core-course-module-info>
 
-    <!-- Offline data stored. -->
-    <ion-card class="core-warning-card" *ngIf="hasOffline">
-        <ion-item>
-            <ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
-            <ion-label>{{ 'core.hasdatatosync' | translate: {$a: moduleName} }}</ion-label>
-        </ion-item>
-    </ion-card>
-
     <!-- Offline disabled. -->
     <ion-card class="core-warning-card" *ngIf="!siteCanDownload && playing">
         <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 aa28071e4..a9eeb2a60 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
@@ -34,7 +34,7 @@
 
                 <!-- Activity info. -->
                 <core-course-module-info [module]="module" (completionChanged)="onCompletionChange()" [description]="description"
-                    [component]="component" [componentId]="componentId" [courseId]="courseId">
+                    [component]="component" [componentId]="componentId" [courseId]="courseId" [hasDataToSync]="hasOffline">
                 </core-course-module-info>
 
                 <!-- Prevent access messages. Only show the first one. -->
@@ -45,14 +45,6 @@
                     </ion-item>
                 </ion-card>
 
-                <!-- Lesson has data to be synchronized -->
-                <ion-card class="core-warning-card" *ngIf="hasOffline">
-                    <ion-item>
-                        <ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
-                        <ion-label>{{ 'core.hasdatatosync' | translate: {$a: moduleName} }}</ion-label>
-                    </ion-item>
-                </ion-card>
-
                 <!-- Input password for protected lessons. -->
                 <ion-card *ngIf="askPassword">
                     <form (ngSubmit)="submitPassword($event, passwordinput)" #passwordForm>
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 519746fe0..cf49f5b7b 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
@@ -30,7 +30,8 @@
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" (completionChanged)="onCompletionChange()" [description]="description"
-        [component]="component" [componentId]="componentId" [courseId]="courseId">
+        [component]="component" [componentId]="componentId" [courseId]="courseId"
+        [hasDataToSync]="buttonText && hasOffline && !showStatusSpinner">
     </core-course-module-info>
 
     <!-- Access rules description messages. -->
@@ -194,14 +195,6 @@
                 </ion-label>
             </ion-item>
 
-            <!-- Quiz has data to be synchronized -->
-            <ion-card class="core-warning-card" *ngIf="buttonText && hasOffline && !showStatusSpinner">
-                <ion-item class="ion-text-wrap">
-                    <ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
-                    <ion-label>{{ 'core.hasdatatosync' | translate: {$a: moduleName} }}</ion-label>
-                </ion-item>
-            </ion-card>
-
             <!-- Other warnings. -->
             <ion-item class="core-warning-item ion-text-wrap" *ngIf="hasSupportedQuestions && unsupportedQuestions.length">
                 <ion-label>
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 58f417175..f184db40a 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
@@ -30,7 +30,7 @@
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" (completionChanged)="onCompletionChange()" [description]="description"
-        [component]="component" [componentId]="componentId" [courseId]="courseId">
+        [component]="component" [componentId]="componentId" [courseId]="courseId" [hasDataToSync]="!errorMessage && hasOffline">
     </core-course-module-info>
 
     <!-- Warning message. -->
@@ -113,14 +113,6 @@
             </ion-list>
         </ion-card>
 
-        <!-- Synchronization warning. -->
-        <ion-card class="core-warning-card" *ngIf="!errorMessage && hasOffline">
-            <ion-item>
-                <ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
-                <ion-label>{{ 'core.hasdatatosync' | translate: {$a: moduleName} }}</ion-label>
-            </ion-item>
-        </ion-card>
-
         <!-- TOC. -->
         <ion-card *ngIf="scorm && organizations && !skip &&
             ((scorm.displaycoursestructure && organizations.length) || organizations.length > 1)" class="addon-mod_scorm-toc">
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 16ebaa871..b5042fbf5 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
@@ -31,8 +31,8 @@
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" (completionChanged)="onCompletionChange()"
-        [description]="survey && !survey.surveydone && !hasOffline && description" [component]="component"
-        [componentId]="componentId" [courseId]="courseId">
+        [description]="survey && !survey.surveydone && !hasOffline && description" [component]="component" [componentId]="componentId"
+        [courseId]="courseId" [hasDataToSync]="hasOffline">
     </core-course-module-info>
 
     <!-- Survey already done -->
@@ -44,14 +44,6 @@
         </ion-button>
     </ion-card>
 
-    <!-- Survey done in offline but not synchronized -->
-    <ion-card class="core-warning-card" *ngIf="hasOffline">
-        <ion-item>
-            <ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
-            <ion-label>{{ 'core.hasdatatosync' | translate: {$a: moduleName} }}</ion-label>
-        </ion-item>
-    </ion-card>
-
     <!-- Survey questions -->
     <form *ngIf="survey && !survey.surveydone && !hasOffline && questions && questions.length">
 
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 4004119c0..1aedc639d 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
@@ -30,7 +30,7 @@
 <core-loading [hideUntil]="loaded">
 
     <!-- Activity info. -->
-    <core-course-module-info [module]="module" (completionChanged)="onCompletionChange()">
+    <core-course-module-info [module]="module" (completionChanged)="onCompletionChange()" [hasDataToSync]="hasOffline">
     </core-course-module-info>
 
     <ion-card *ngIf="phases">
@@ -60,14 +60,6 @@
         </ng-container>
     </ion-card>
 
-    <!-- Has something offline. -->
-    <ion-card class="core-warning-card" *ngIf="hasOffline">
-        <ion-item>
-            <ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
-            <ion-label>{{ 'core.hasdatatosync' | translate: {$a: moduleName} }}</ion-label>
-        </ion-item>
-    </ion-card>
-
     <!-- Description (setup phase only) -->
     <ion-card *ngIf="description && workshop && workshop!.phase == PHASE_SETUP">
         <ion-item class="ion-text-wrap">
diff --git a/src/core/features/course/components/module-info/core-course-module-info.html b/src/core/features/course/components/module-info/core-course-module-info.html
index 8aac777b4..a169e3604 100644
--- a/src/core/features/course/components/module-info/core-course-module-info.html
+++ b/src/core/features/course/components/module-info/core-course-module-info.html
@@ -35,3 +35,11 @@
     </ion-label>
 </ion-item>
 <ng-content></ng-content>
+
+<!-- Activity has something offline. -->
+<ion-card class="core-warning-card" *ngIf="hasDataToSync">
+    <ion-item>
+        <ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
+        <ion-label>{{ 'core.hasdatatosync' | translate: {$a: moduleNameTranslated} }}</ion-label>
+    </ion-item>
+</ion-card>
diff --git a/src/core/features/course/components/module-info/course-module-info.scss b/src/core/features/course/components/module-info/course-module-info.scss
index a4d1bf7e1..0a0b5bce7 100644
--- a/src/core/features/course/components/module-info/course-module-info.scss
+++ b/src/core/features/course/components/module-info/course-module-info.scss
@@ -4,6 +4,7 @@
     display: block;
     box-shadow: 0px 3px 3px rgba(var(--drop-shadow));
     margin-bottom: 8px;
+    padding-bottom: 1px; // To allow margins inside.
     background-color: var(--contrast-background);
     
     @include padding-horizontal(var(--ion-safe-area-left), var(--ion-safe-area-right));
diff --git a/src/core/features/course/components/module-info/module-info.ts b/src/core/features/course/components/module-info/module-info.ts
index 13cbd4e40..063ebc88f 100644
--- a/src/core/features/course/components/module-info/module-info.ts
+++ b/src/core/features/course/components/module-info/module-info.ts
@@ -13,6 +13,7 @@
 // limitations under the License.
 
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { CoreCourse } from '@features/course/services/course';
 import { CoreCourseModule, CoreCourseModuleCompletionData } from '@features/course/services/course-helper';
 import { CoreCourseModuleDelegate } from '@features/course/services/module-delegate';
 import { CoreSites } from '@services/sites';
@@ -42,10 +43,13 @@ export class CoreCourseModuleInfoComponent implements OnInit {
 
     @Input() description?: string | false; // The description to display. If false, no description will be shown.
 
+    @Input() hasDataToSync = false; // If the activity has any data to be synced.
+
     @Output() completionChanged = new EventEmitter<CoreCourseModuleCompletionData>(); // Notify when completion changes.
 
     modicon = '';
     showCompletion = false; // Whether to show completion.
+    moduleNameTranslated = '';
 
     /**
      * @inheritdoc
@@ -53,6 +57,8 @@ export class CoreCourseModuleInfoComponent implements OnInit {
     async ngOnInit(): Promise<void> {
         this.modicon = await CoreCourseModuleDelegate.getModuleIconSrc(this.module.modname, this.module.modicon, this.module);
 
+        this.moduleNameTranslated = CoreCourse.translateModuleName(this.module.modname || '');
+
         this.showCompletion = CoreSites.getRequiredCurrentSite().isVersionGreaterEqualThan('3.11');
     }
 
diff --git a/src/core/features/courses/pages/dashboard/dashboard.ts b/src/core/features/courses/pages/dashboard/dashboard.ts
index 2b7448a0b..e86d2d72a 100644
--- a/src/core/features/courses/pages/dashboard/dashboard.ts
+++ b/src/core/features/courses/pages/dashboard/dashboard.ts
@@ -109,7 +109,6 @@ export class CoreCoursesDashboardPage implements OnInit, OnDestroy {
             this.blocks = [];
         }
 
-        // this.dashboardEnabled = this.blockDelegate.hasSupportedBlock(this.blocks);
         this.loaded = true;
     }
 

From 57b5266198d315263b7e9af0a085e0c0cb63c84d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 17 Nov 2021 11:46:37 +0100
Subject: [PATCH 6/9] MOBILE-3810 tabs: Disabled top tabs hide on scroll

---
 src/core/classes/tabs.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/core/classes/tabs.ts b/src/core/classes/tabs.ts
index d77ca5b4d..d2b593398 100644
--- a/src/core/classes/tabs.ts
+++ b/src/core/classes/tabs.ts
@@ -43,8 +43,9 @@ export class CoreTabsBaseComponent<T extends CoreTabBase> implements OnInit, Aft
 
     // Minimum tab's width.
     protected static readonly MIN_TAB_WIDTH = 107;
-    // Max height that allows tab hiding.
-    protected static readonly MAX_HEIGHT_TO_HIDE_TABS = 768;
+    // @todo [4.0]
+    // Max height that allows tab hiding. WARNING: Hide tabs on scroll disabled. If confirmed, remove the associated code.
+    protected static readonly MAX_HEIGHT_TO_HIDE_TABS = 0;
 
     @Input() selectedIndex = 0; // Index of the tab to select.
     @Input() hideUntil = false; // Determine when should the contents be shown.
@@ -179,7 +180,7 @@ export class CoreTabsBaseComponent<T extends CoreTabBase> implements OnInit, Aft
     }
 
     /**
-     * Detect changes on input properties.
+     * @inheritdoc
      */
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     ngOnChanges(changes: Record<string, SimpleChange>): void {

From d8718c5eaae68dc3f48b83d10ce995746c45b1af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 19 Nov 2021 13:20:00 +0100
Subject: [PATCH 7/9] MOBILE-3810 core: Collapsible headers

---
 src/addons/mod/assign/pages/index/index.html  |   2 +-
 src/addons/mod/book/pages/index/index.html    |   5 +-
 src/addons/mod/chat/pages/index/index.html    |   2 +-
 src/addons/mod/choice/pages/index/index.html  |   2 +-
 src/addons/mod/data/pages/index/index.html    |   2 +-
 .../mod/feedback/pages/index/index.html       |   2 +-
 .../index/addon-mod-folder-index.html         |   3 +-
 src/addons/mod/folder/pages/index/index.html  |   2 +-
 src/addons/mod/forum/pages/index/index.html   |   2 +-
 .../mod/glossary/pages/index/index.html       |   2 +-
 .../mod/h5pactivity/pages/index/index.html    |   2 +-
 src/addons/mod/imscp/pages/index/index.html   |   2 +-
 src/addons/mod/lesson/pages/index/index.html  |   5 +-
 src/addons/mod/lti/pages/index/index.html     |   2 +-
 src/addons/mod/page/pages/index/index.html    |   2 +-
 src/addons/mod/quiz/pages/index/index.html    |   2 +-
 .../mod/resource/pages/index/index.html       |   5 +-
 src/addons/mod/scorm/pages/index/index.html   |   2 +-
 src/addons/mod/survey/pages/index/index.html  |   2 +-
 src/addons/mod/url/pages/index/index.html     |   2 +-
 src/addons/mod/wiki/components/index/index.ts |  19 +-
 src/addons/mod/wiki/pages/index/index.html    |   6 +-
 src/addons/mod/wiki/pages/index/index.ts      |   7 +-
 .../mod/workshop/pages/index/index.html       |   2 +-
 src/core/classes/tabs.ts                      |   6 +-
 .../components/split-view/split-view.scss     |   3 +-
 src/core/directives/collapsible-header.ts     | 257 ++++++++++++++++++
 src/core/directives/directives.module.ts      |   3 +
 .../module-info/core-course-module-info.html  |   6 +-
 .../core-course-unsupported-module.html       |   6 +-
 .../unsupported-module.html                   |   2 +-
 src/theme/globals.mixins.scss                 |  12 +-
 src/theme/theme.base.scss                     | 138 +++++++---
 33 files changed, 424 insertions(+), 93 deletions(-)
 create mode 100644 src/core/directives/collapsible-header.ts

diff --git a/src/addons/mod/assign/pages/index/index.html b/src/addons/mod/assign/pages/index/index.html
index 8e1a710bc..c64cbdfdd 100644
--- a/src/addons/mod/assign/pages/index/index.html
+++ b/src/addons/mod/assign/pages/index/index.html
@@ -1,4 +1,4 @@
-<ion-header>
+<ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
diff --git a/src/addons/mod/book/pages/index/index.html b/src/addons/mod/book/pages/index/index.html
index 495b0b976..2d7faf457 100644
--- a/src/addons/mod/book/pages/index/index.html
+++ b/src/addons/mod/book/pages/index/index.html
@@ -1,4 +1,4 @@
-<ion-header>
+<ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
@@ -17,7 +17,6 @@
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
 
-    <addon-mod-book-index [module]="module" [courseId]="courseId" [initialChapterId]="chapterId"
-        (dataRetrieved)="updateData($event)">
+    <addon-mod-book-index [module]="module" [courseId]="courseId" [initialChapterId]="chapterId" (dataRetrieved)="updateData($event)">
     </addon-mod-book-index>
 </ion-content>
diff --git a/src/addons/mod/chat/pages/index/index.html b/src/addons/mod/chat/pages/index/index.html
index b228480b8..de71fbf74 100644
--- a/src/addons/mod/chat/pages/index/index.html
+++ b/src/addons/mod/chat/pages/index/index.html
@@ -1,4 +1,4 @@
-<ion-header>
+<ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
diff --git a/src/addons/mod/choice/pages/index/index.html b/src/addons/mod/choice/pages/index/index.html
index 9497c99fb..6f8b727cd 100644
--- a/src/addons/mod/choice/pages/index/index.html
+++ b/src/addons/mod/choice/pages/index/index.html
@@ -1,4 +1,4 @@
-<ion-header>
+<ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
diff --git a/src/addons/mod/data/pages/index/index.html b/src/addons/mod/data/pages/index/index.html
index 669549eb4..5d0caa151 100644
--- a/src/addons/mod/data/pages/index/index.html
+++ b/src/addons/mod/data/pages/index/index.html
@@ -1,4 +1,4 @@
-<ion-header>
+<ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
diff --git a/src/addons/mod/feedback/pages/index/index.html b/src/addons/mod/feedback/pages/index/index.html
index f7c6c173a..8eb3987ad 100644
--- a/src/addons/mod/feedback/pages/index/index.html
+++ b/src/addons/mod/feedback/pages/index/index.html
@@ -1,4 +1,4 @@
-<ion-header>
+<ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
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 e44e8a1b7..cb1093a10 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
@@ -26,9 +26,8 @@
 <core-loading [hideUntil]="loaded">
 
     <!-- Activity info. -->
-    <core-course-module-info [module]="module" (completionChanged)="onCompletionChange()" [description]="description"
+    <core-course-module-info *ngIf="!subfolder" [module]="module" (completionChanged)="onCompletionChange()" [description]="description"
         [component]="component" [componentId]="componentId" [courseId]="courseId">
-        <h3 *ngIf="subfolder" title>{{subfolder.filename}}</h3>
     </core-course-module-info>
 
     <ion-list *ngIf="contents && (contents.files.length + contents.folders.length > 0)">
diff --git a/src/addons/mod/folder/pages/index/index.html b/src/addons/mod/folder/pages/index/index.html
index 198e37e5f..a3d8d8626 100644
--- a/src/addons/mod/folder/pages/index/index.html
+++ b/src/addons/mod/folder/pages/index/index.html
@@ -1,4 +1,4 @@
-<ion-header>
+<ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
diff --git a/src/addons/mod/forum/pages/index/index.html b/src/addons/mod/forum/pages/index/index.html
index c98bfc3a1..c72371b3f 100644
--- a/src/addons/mod/forum/pages/index/index.html
+++ b/src/addons/mod/forum/pages/index/index.html
@@ -1,4 +1,4 @@
-<ion-header>
+<ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
diff --git a/src/addons/mod/glossary/pages/index/index.html b/src/addons/mod/glossary/pages/index/index.html
index 2183e2bf6..c1b066a21 100644
--- a/src/addons/mod/glossary/pages/index/index.html
+++ b/src/addons/mod/glossary/pages/index/index.html
@@ -1,4 +1,4 @@
-<ion-header>
+<ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
diff --git a/src/addons/mod/h5pactivity/pages/index/index.html b/src/addons/mod/h5pactivity/pages/index/index.html
index 2f3d19f98..1001692cf 100644
--- a/src/addons/mod/h5pactivity/pages/index/index.html
+++ b/src/addons/mod/h5pactivity/pages/index/index.html
@@ -1,4 +1,4 @@
-<ion-header>
+<ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
diff --git a/src/addons/mod/imscp/pages/index/index.html b/src/addons/mod/imscp/pages/index/index.html
index fd8b7e083..98a8c22b2 100644
--- a/src/addons/mod/imscp/pages/index/index.html
+++ b/src/addons/mod/imscp/pages/index/index.html
@@ -1,4 +1,4 @@
-<ion-header>
+<ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
diff --git a/src/addons/mod/lesson/pages/index/index.html b/src/addons/mod/lesson/pages/index/index.html
index 4c5603526..ba95ea502 100644
--- a/src/addons/mod/lesson/pages/index/index.html
+++ b/src/addons/mod/lesson/pages/index/index.html
@@ -1,4 +1,4 @@
-<ion-header>
+<ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
@@ -17,7 +17,6 @@
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
 
-    <addon-mod-lesson-index [module]="module" [courseId]="courseId" [group]="group" [action]="action"
-        (dataRetrieved)="updateData($event)">
+    <addon-mod-lesson-index [module]="module" [courseId]="courseId" [group]="group" [action]="action" (dataRetrieved)="updateData($event)">
     </addon-mod-lesson-index>
 </ion-content>
diff --git a/src/addons/mod/lti/pages/index/index.html b/src/addons/mod/lti/pages/index/index.html
index bd9a3da32..f742d5232 100644
--- a/src/addons/mod/lti/pages/index/index.html
+++ b/src/addons/mod/lti/pages/index/index.html
@@ -1,4 +1,4 @@
-<ion-header>
+<ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
diff --git a/src/addons/mod/page/pages/index/index.html b/src/addons/mod/page/pages/index/index.html
index 464a81a0b..a5db017ea 100644
--- a/src/addons/mod/page/pages/index/index.html
+++ b/src/addons/mod/page/pages/index/index.html
@@ -1,4 +1,4 @@
-<ion-header>
+<ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
diff --git a/src/addons/mod/quiz/pages/index/index.html b/src/addons/mod/quiz/pages/index/index.html
index 9fcb5b5c2..2cbf6b449 100644
--- a/src/addons/mod/quiz/pages/index/index.html
+++ b/src/addons/mod/quiz/pages/index/index.html
@@ -1,4 +1,4 @@
-<ion-header>
+<ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
diff --git a/src/addons/mod/resource/pages/index/index.html b/src/addons/mod/resource/pages/index/index.html
index 0a03b540b..d86648348 100644
--- a/src/addons/mod/resource/pages/index/index.html
+++ b/src/addons/mod/resource/pages/index/index.html
@@ -1,4 +1,4 @@
-<ion-header>
+<ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
@@ -14,8 +14,7 @@
     </ion-toolbar>
 </ion-header>
 <ion-content>
-    <ion-refresher slot="fixed"
-        [disabled]="!activityComponent?.loaded || activityComponent?.mode == 'iframe'"
+    <ion-refresher slot="fixed" [disabled]="!activityComponent?.loaded || activityComponent?.mode == 'iframe'"
         (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/index/index.html b/src/addons/mod/scorm/pages/index/index.html
index 8b0a62177..2e3a4ded7 100644
--- a/src/addons/mod/scorm/pages/index/index.html
+++ b/src/addons/mod/scorm/pages/index/index.html
@@ -1,4 +1,4 @@
-<ion-header>
+<ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
diff --git a/src/addons/mod/survey/pages/index/index.html b/src/addons/mod/survey/pages/index/index.html
index e4c9e1717..8d0ffd272 100644
--- a/src/addons/mod/survey/pages/index/index.html
+++ b/src/addons/mod/survey/pages/index/index.html
@@ -1,4 +1,4 @@
-<ion-header>
+<ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
diff --git a/src/addons/mod/url/pages/index/index.html b/src/addons/mod/url/pages/index/index.html
index 6b546f69f..b93cbc153 100644
--- a/src/addons/mod/url/pages/index/index.html
+++ b/src/addons/mod/url/pages/index/index.html
@@ -1,4 +1,4 @@
-<ion-header>
+<ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
diff --git a/src/addons/mod/wiki/components/index/index.ts b/src/addons/mod/wiki/components/index/index.ts
index 8bbd2a3a8..1ae8303a8 100644
--- a/src/addons/mod/wiki/components/index/index.ts
+++ b/src/addons/mod/wiki/components/index/index.ts
@@ -135,6 +135,8 @@ export class AddonModWikiIndexComponent extends CoreCourseModuleMainActivityComp
         }
 
         if (!this.wiki) {
+            CoreNavigator.back();
+
             return;
         }
 
@@ -143,7 +145,7 @@ export class AddonModWikiIndexComponent extends CoreCourseModuleMainActivityComp
                 await AddonModWiki.logView(this.wiki.id, this.wiki.name);
 
                 CoreCourse.checkModuleCompletion(this.courseId, this.module.completiondata);
-            } catch (error) {
+            } catch {
                 // Ignore errors.
             }
         } else {
@@ -210,7 +212,7 @@ export class AddonModWikiIndexComponent extends CoreCourseModuleMainActivityComp
     /**
      * @inheritdoc
      */
-    protected async fetchContent(refresh: boolean = false, sync: boolean = false, showErrors: boolean = false): Promise<void> {
+    protected async fetchContent(refresh = false, sync = false, showErrors = false): Promise<void> {
         try {
             // Get the wiki instance.
             this.wiki = await AddonModWiki.getWiki(this.courseId, this.module.id);
@@ -219,6 +221,7 @@ export class AddonModWikiIndexComponent extends CoreCourseModuleMainActivityComp
                 // Page not loaded yet, emit the data to update the page title.
                 this.dataRetrieved.emit(this.wiki);
             }
+
             AddonModWiki.wikiPageOpened(this.wiki.id, this.currentPath);
 
             if (sync) {
@@ -299,14 +302,14 @@ export class AddonModWikiIndexComponent extends CoreCourseModuleMainActivityComp
 
         // No page ID but we received a title. This means we're trying to load an offline page.
         try {
-            const title = this.pageTitle || this.wiki!.firstpagetitle!;
+            const title = this.pageTitle || this.wiki?.firstpagetitle || '';
 
             const offlinePage = await AddonModWikiOffline.getNewPage(
                 title,
-                this.currentSubwiki!.id,
-                this.currentSubwiki!.wikiid,
-                this.currentSubwiki!.userid,
-                this.currentSubwiki!.groupid,
+                this.currentSubwiki?.id,
+                this.currentSubwiki?.wikiid,
+                this.currentSubwiki?.userid,
+                this.currentSubwiki?.groupid,
             );
 
             this.pageIsOffline = true;
@@ -321,7 +324,7 @@ export class AddonModWikiIndexComponent extends CoreCourseModuleMainActivityComp
                     this.currentPage = data.pageId;
 
                     // Stop listening for new page events.
-                    this.newPageObserver!.off();
+                    this.newPageObserver?.off();
                     this.newPageObserver = undefined;
 
                     await this.showLoadingAndFetch(true, false);
diff --git a/src/addons/mod/wiki/pages/index/index.html b/src/addons/mod/wiki/pages/index/index.html
index fab061635..e8db7c3b0 100644
--- a/src/addons/mod/wiki/pages/index/index.html
+++ b/src/addons/mod/wiki/pages/index/index.html
@@ -1,4 +1,4 @@
-<ion-header>
+<ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
@@ -7,6 +7,10 @@
             <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module?.id" [courseId]="courseId">
             </core-format-text>
         </h1>
+        <p>
+            <core-format-text [text]="pageTitle" contextLevel="module" [contextInstanceId]="module?.id" [courseId]="courseId">
+            </core-format-text>
+        </p>
 
         <ion-buttons slot="end">
             <!-- The buttons defined by the component will be added in here. -->
diff --git a/src/addons/mod/wiki/pages/index/index.ts b/src/addons/mod/wiki/pages/index/index.ts
index e98a10c9f..0d374feaa 100644
--- a/src/addons/mod/wiki/pages/index/index.ts
+++ b/src/addons/mod/wiki/pages/index/index.ts
@@ -47,8 +47,6 @@ export class AddonModWikiIndexPage extends CoreCourseModuleMainActivityPage<Addo
         this.subwikiId = CoreNavigator.getRouteNumberParam('subwikiId');
         this.userId = CoreNavigator.getRouteNumberParam('userId');
         this.groupId = CoreNavigator.getRouteNumberParam('groupId');
-
-        this.title = this.pageTitle || this.module.name;
     }
 
     /**
@@ -57,10 +55,9 @@ export class AddonModWikiIndexPage extends CoreCourseModuleMainActivityPage<Addo
     updateData(data: { name: string } | string): void {
         if (typeof data == 'string') {
             // We received the title to display.
-            this.title = data;
+            this.pageTitle = data;
         } else {
-            // We received a wiki instance.
-            this.title = this.pageTitle || data.name || this.title;
+            super.updateData(data);
         }
     }
 
diff --git a/src/addons/mod/workshop/pages/index/index.html b/src/addons/mod/workshop/pages/index/index.html
index 409e997b4..e408424a4 100644
--- a/src/addons/mod/workshop/pages/index/index.html
+++ b/src/addons/mod/workshop/pages/index/index.html
@@ -1,4 +1,4 @@
-<ion-header>
+<ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
diff --git a/src/core/classes/tabs.ts b/src/core/classes/tabs.ts
index d2b593398..b03b8f827 100644
--- a/src/core/classes/tabs.ts
+++ b/src/core/classes/tabs.ts
@@ -26,7 +26,7 @@ import {
     SimpleChange,
 } from '@angular/core';
 import { IonSlides } from '@ionic/angular';
-import { BackButtonEvent } from '@ionic/core';
+import { BackButtonEvent, ScrollDetail } from '@ionic/core';
 import { Subscription } from 'rxjs';
 
 import { Platform, Translate } from '@singletons';
@@ -625,8 +625,8 @@ export class CoreTabsBaseComponent<T extends CoreTabBase> implements OnInit, Aft
 
         content.scrollEvents = true;
         this.scrollElements[id] = scroll;
-        content.addEventListener('ionScroll', (e: CustomEvent): void => {
-            this.showHideTabs(parseInt(e.detail.scrollTop, 10), scroll);
+        content.addEventListener('ionScroll', (e: CustomEvent<ScrollDetail>): void => {
+            this.showHideTabs(e.detail.scrollTop, scroll);
         });
     }
 
diff --git a/src/core/components/split-view/split-view.scss b/src/core/components/split-view/split-view.scss
index 1524a38c6..deb84173f 100644
--- a/src/core/components/split-view/split-view.scss
+++ b/src/core/components/split-view/split-view.scss
@@ -15,14 +15,13 @@
     left: 0;
     display: flex;
     position: absolute;
-    inset: 0;
     flex-direction: row;
     flex-wrap: nowrap;
     contain: strict;
 
     .menu,
     .content-outlet {
-        top: 0;
+        top: var(--offset-top);
         right: 0;
         bottom: 0;
         left: 0;
diff --git a/src/core/directives/collapsible-header.ts b/src/core/directives/collapsible-header.ts
new file mode 100644
index 000000000..11191f7c6
--- /dev/null
+++ b/src/core/directives/collapsible-header.ts
@@ -0,0 +1,257 @@
+// (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 { Directive, ElementRef, OnDestroy } from '@angular/core';
+import { ScrollDetail } from '@ionic/core';
+import { CoreUtils } from '@services/utils/utils';
+import { Platform } from '@singletons';
+import { CoreEventObserver, CoreEvents } from '@singletons/events';
+import { CoreMath } from '@singletons/math';
+
+/**
+ * Directive to make ion-header collapsible.
+ * Ion content should have h1 tag inside.
+ *
+ * Example usage:
+ *
+ * <ion-header collapsible>
+ */
+@Directive({
+    selector: 'ion-header[collapsible]',
+})
+export class CoreCollapsibleHeaderDirective implements OnDestroy {
+
+    protected scrollElement?: HTMLElement;
+    protected loadingObserver: CoreEventObserver;
+    protected content?: HTMLIonContentElement | null;
+    protected header: HTMLIonHeaderElement;
+    protected titleTopDifference = 1;
+    protected h1StartDifference = 0;
+    protected headerH1FontSize = 0;
+    protected contentH1FontSize = 0;
+    protected headerSubHeadingFontSize = 0;
+    protected contentSubHeadingFontSize = 0;
+    protected subHeadingStartDifference = 0;
+
+    constructor(el: ElementRef) {
+        this.header = el.nativeElement;
+
+        this.loadingObserver = CoreEvents.on(CoreEvents.CORE_LOADING_CHANGED, async (data) => {
+            const loadingId = await this.getLoadingId();
+            if (loadingId && data.loaded && data.uniqueId == loadingId) {
+                // Remove event when loading is done.
+                this.loadingObserver.off();
+
+                // Wait to render.
+                await CoreUtils.nextTick();
+                this.setupRealTitle();
+            }
+        });
+    }
+
+    /**
+     * Gets the loading content id to wait for the loading to finish.
+     *
+     * @TODO: If no core-loading is present, load directly. Take into account content needs to be initialized.
+     *
+     * @return Promise resolved with Loading Id, if any.
+     */
+    protected async getLoadingId(): Promise<string | undefined> {
+        if (!this.content) {
+            this.content = this.header.parentElement?.querySelector('ion-content:not(.disable-scroll-y)');
+
+            if (!this.content) {
+                this.cannotCollapse();
+
+                return;
+            }
+        }
+
+        return this.content.querySelector('core-loading .core-loading-content')?.id;
+    }
+
+    /**
+     * Call this function when header is not collapsible.
+     */
+    protected cannotCollapse(): void {
+        this.loadingObserver.off();
+        this.header.classList.add('core-header-collapsed');
+    }
+
+    /**
+     * Gets the real title on ion content to watch scroll.
+     *
+     * @return Promise resolved when done.
+     */
+    protected async setupRealTitle(): Promise<void> {
+
+        if (!this.content) {
+            this.cannotCollapse();
+
+            return;
+        }
+
+        const title = this.content.querySelector<HTMLElement>('.collapsible-title, h1');
+        const contentH1 = this.content.querySelector<HTMLElement>('h1');
+        const headerH1 = this.header.querySelector<HTMLElement>('h1');
+        if (!title || !contentH1 || !headerH1) {
+            this.cannotCollapse();
+
+            return;
+        }
+
+        this.titleTopDifference = contentH1.getBoundingClientRect().top - headerH1.getBoundingClientRect().top;
+
+        // Split view part.
+        const contentAux = this.header.parentElement?.querySelector<HTMLElement>('ion-content.disable-scroll-y');
+        if (contentAux) {
+            if (contentAux.querySelector('core-split-view.menu-and-content')) {
+                this.cannotCollapse();
+                title.remove();
+
+                return;
+            }
+            contentAux.style.setProperty('--offset-top', this.header.clientHeight + 'px');
+        }
+
+        const headerH1Styles = getComputedStyle(headerH1);
+        const contentH1Styles = getComputedStyle(contentH1);
+
+        if (Platform.isRTL) {
+            this.h1StartDifference = contentH1.getBoundingClientRect().right -
+                (headerH1.getBoundingClientRect().right - parseFloat(headerH1Styles.paddingRight));
+        } else {
+            this.h1StartDifference = contentH1.getBoundingClientRect().left -
+                (headerH1.getBoundingClientRect().left + parseFloat(headerH1Styles.paddingLeft));
+        }
+
+        this.headerH1FontSize = parseFloat(headerH1Styles.fontSize);
+        this.contentH1FontSize = parseFloat(contentH1Styles.fontSize);
+
+        // Transfer font styles.
+        Array.from(headerH1Styles).forEach((styleName) => {
+            if (styleName != 'font-size' && (styleName.startsWith('font-') || styleName.startsWith('letter-'))) {
+                contentH1.style.setProperty(styleName, headerH1Styles.getPropertyValue(styleName));
+            }
+        });
+        contentH1.style.setProperty(
+            '--max-width',
+            (parseFloat(headerH1Styles.width)
+                -parseFloat(headerH1Styles.paddingLeft)
+                -parseFloat(headerH1Styles.paddingRight)
+                +'px'),
+        );
+
+        contentH1.setAttribute('aria-hidden', 'true');
+
+        // Add something under the hood to change the page background.
+        let color = getComputedStyle(title).getPropertyValue('backgroundColor').trim();
+        if (color == '') {
+            color = getComputedStyle(title).getPropertyValue('--background').trim();
+        }
+
+        const underHeader = document.createElement('div');
+        underHeader.classList.add('core-underheader');
+        underHeader.style.setProperty('height', this.header.clientHeight + 'px');
+        underHeader.style.setProperty('background', color);
+        this.content.shadowRoot?.querySelector('#background-content')?.prepend(underHeader);
+
+        this.content.style.setProperty('--offset-top', this.header.clientHeight + 'px');
+
+        // Subheading.
+        const headerSubHeading = this.header.querySelector<HTMLElement>('h2,.subheading');
+        const contentSubHeading = title.querySelector<HTMLElement>('h2,.subheading');
+        if (headerSubHeading && contentSubHeading) {
+            const headerSubHeadingStyles = getComputedStyle(headerSubHeading);
+            this.headerSubHeadingFontSize = parseFloat(headerSubHeadingStyles.fontSize);
+
+            const contentSubHeadingStyles = getComputedStyle(contentSubHeading);
+            this.contentSubHeadingFontSize = parseFloat(contentSubHeadingStyles.fontSize);
+
+            if (Platform.isRTL) {
+                this.subHeadingStartDifference = contentSubHeading.getBoundingClientRect().right -
+                    (headerSubHeading.getBoundingClientRect().right - parseFloat(headerSubHeadingStyles.paddingRight));
+            } else {
+                this.subHeadingStartDifference = contentSubHeading.getBoundingClientRect().left -
+                    (headerSubHeading.getBoundingClientRect().left + parseFloat(headerSubHeadingStyles.paddingLeft));
+            }
+
+            contentSubHeading.setAttribute('aria-hidden', 'true');
+        }
+
+        this.content.scrollEvents = true;
+        this.content.addEventListener('ionScroll', (e: CustomEvent<ScrollDetail>): void => {
+            this.onScroll(title, contentH1, contentSubHeading, e.detail);
+        });
+    }
+
+    /**
+     * On scroll function.
+     *
+     * @param title Title on ion content.
+     * @param contentH1 Heading 1 of title, if found.
+     * @param scrollDetail Event details.
+     */
+    protected onScroll(
+        title: HTMLElement,
+        contentH1: HTMLElement,
+        contentSubheading: HTMLElement | null,
+        scrollDetail: ScrollDetail,
+    ): void {
+        const progress = CoreMath.clamp(scrollDetail.scrollTop / this.titleTopDifference, 0, 1);
+        const collapsed = progress >= 1;
+
+        // Check total collapse.
+        this.header.classList.toggle('core-header-collapsed', collapsed);
+        title.classList.toggle('collapsible-title-collapsed', collapsed);
+        title.classList.toggle('collapsible-title-collapse-started', scrollDetail.scrollTop > 0);
+
+        if (collapsed) {
+            contentH1.style.transform = 'translateX(-' + this.h1StartDifference + 'px)';
+            contentH1.style.setProperty('font-size', this.headerH1FontSize + 'px');
+
+            if (contentSubheading) {
+                contentSubheading.style.transform = 'translateX(-' + this.subHeadingStartDifference + 'px)';
+                contentSubheading.style.setProperty('font-size', this.headerSubHeadingFontSize + 'px');
+            }
+
+            return;
+        }
+
+        // Zoom font-size out.
+        const newFontSize = this.contentH1FontSize - ((this.contentH1FontSize - this.headerH1FontSize) * progress);
+        contentH1.style.setProperty('font-size', newFontSize + 'px');
+
+        // Move.
+        const newStart = - this.h1StartDifference * progress;
+        contentH1.style.transform = 'translateX(' + newStart + 'px)';
+
+        if (contentSubheading) {
+            const newFontSize = this.contentSubHeadingFontSize -
+                ((this.contentSubHeadingFontSize - this.headerSubHeadingFontSize) * progress);
+            contentSubheading.style.setProperty('font-size', newFontSize + 'px');
+
+            const newStart = - this.subHeadingStartDifference * progress;
+            contentSubheading.style.transform = 'translateX(' + newStart + 'px)';
+        }
+    }
+
+    /**
+     * @inheritdoc
+     */
+    ngOnDestroy(): void {
+        this.loadingObserver.off();
+    }
+
+}
diff --git a/src/core/directives/directives.module.ts b/src/core/directives/directives.module.ts
index 84a102748..e1d6dc959 100644
--- a/src/core/directives/directives.module.ts
+++ b/src/core/directives/directives.module.ts
@@ -27,6 +27,7 @@ import { CoreUserLinkDirective } from './user-link';
 import { CoreAriaButtonClickDirective } from './aria-button';
 import { CoreOnResizeDirective } from './on-resize';
 import { CoreDownloadFileDirective } from './download-file';
+import { CoreCollapsibleHeaderDirective } from './collapsible-header';
 
 @NgModule({
     declarations: [
@@ -43,6 +44,7 @@ import { CoreDownloadFileDirective } from './download-file';
         CoreAriaButtonClickDirective,
         CoreOnResizeDirective,
         CoreDownloadFileDirective,
+        CoreCollapsibleHeaderDirective,
     ],
     exports: [
         CoreAutoFocusDirective,
@@ -58,6 +60,7 @@ import { CoreDownloadFileDirective } from './download-file';
         CoreAriaButtonClickDirective,
         CoreOnResizeDirective,
         CoreDownloadFileDirective,
+        CoreCollapsibleHeaderDirective,
     ],
 })
 export class CoreDirectivesModule {}
diff --git a/src/core/features/course/components/module-info/core-course-module-info.html b/src/core/features/course/components/module-info/core-course-module-info.html
index a169e3604..7afb15368 100644
--- a/src/core/features/course/components/module-info/core-course-module-info.html
+++ b/src/core/features/course/components/module-info/core-course-module-info.html
@@ -1,12 +1,12 @@
-<ion-item class="ion-text-wrap" lines="none">
+<ion-item class="ion-text-wrap collapsible-title" lines="none">
     <core-mod-icon slot="start" [modicon]="modicon" [modname]="module.modname" [componentId]="module.instance">
     </core-mod-icon>
     <ion-label>
-        <h2>
+        <h1>
             <core-format-text [text]="module.name" contextLevel="module" [component]="component" [componentId]="componentId"
                 [contextInstanceId]="module.id" [courseId]="courseId">
             </core-format-text>
-        </h2>
+        </h1>
         <ng-content select="[title]"></ng-content>
     </ion-label>
 </ion-item>
diff --git a/src/core/features/course/components/unsupported-module/core-course-unsupported-module.html b/src/core/features/course/components/unsupported-module/core-course-unsupported-module.html
index 4e27e6c44..6b7fe1848 100644
--- a/src/core/features/course/components/unsupported-module/core-course-unsupported-module.html
+++ b/src/core/features/course/components/unsupported-module/core-course-unsupported-module.html
@@ -1,7 +1,7 @@
-<div class="ion-padding">
-    <core-course-module-info [description]="module?.description" [courseId]="courseId" [module]="module">
-    </core-course-module-info>
+<core-course-module-info [description]="module?.description" [courseId]="courseId" [module]="module">
+</core-course-module-info>
 
+<div class="ion-padding">
     <h2 *ngIf="!isDisabledInSite && isSupportedByTheApp">{{ 'core.whoops' | translate }}</h2>
     <h2 *ngIf="isDisabledInSite || !isSupportedByTheApp">{{ 'core.uhoh' | translate }}</h2>
 
diff --git a/src/core/features/course/pages/unsupported-module/unsupported-module.html b/src/core/features/course/pages/unsupported-module/unsupported-module.html
index 417963a21..c5e22195d 100644
--- a/src/core/features/course/pages/unsupported-module/unsupported-module.html
+++ b/src/core/features/course/pages/unsupported-module/unsupported-module.html
@@ -1,4 +1,4 @@
-<ion-header>
+<ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
diff --git a/src/theme/globals.mixins.scss b/src/theme/globals.mixins.scss
index c871f18b3..84089a4dd 100644
--- a/src/theme/globals.mixins.scss
+++ b/src/theme/globals.mixins.scss
@@ -23,12 +23,12 @@
     // border: var(--a11y-focus-width) solid var(--a11y-focus-color);
 }
 
-@mixin core-transition($where: all, $time: 500ms) {
-    -webkit-transition: $where $time ease-in-out;
-    -moz-transition: $where $time ease-in-out;
-    -ms-transition: $where $time ease-in-out;
-    -o-transition: $where $time ease-in-out;
-    transition: $where $time ease-in-out;
+@mixin core-transition($property: all, $duration: 500ms, $timing-function: ease-in-out) {
+    -webkit-transition: $property $duration $timing-function;
+    -moz-transition: $property $duration $timing-function;
+    -ms-transition: $property $duration $timing-function;
+    -o-transition: $property $duration $timing-function;
+    transition: $property $duration $timing-function;
 }
 
 @mixin push-arrow-color($color: dedede, $flip-rtl: false) {
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 12b4b04a1..4b9278132 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -119,45 +119,50 @@ body {
     }
 }
 
-// Some styles taken from ion-title
-ion-header h1,
-ion-header h2 {
-    display: block;
-    transform: translateZ(0);
-    --color: initial;
-    color: var(--color);
-    margin: 0;
-    width: 100%;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    pointer-events: auto;
+ion-header ion-title{
+    h1, h2, .subheading {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        margin: 0;
+    }
 
     .filter_mathjaxloader_equation div {
         display: inline !important;
     }
 }
 
-ion-app.md ion-header h1,
-ion-app.md ion-header h2 {
+ion-app.md ion-header ion-title{
     @include padding(0, 20px);
-    font-size: 20px;
-    font-weight: 500;
-    letter-spacing: .0125em;
+
+    h1, h2, .subheading {
+        font-size: 20px;
+        font-weight: 500;
+        letter-spacing: .0125em;
+    }
+
+    h1 + h2,
+    h1 + .subheading {
+        font-size: 14px;
+        font-weight: 400;
+    }
 }
 
-ion-app.ios ion-header h1,
-ion-app.ios ion-header h2 {
-    @include position(0, null, null, 0);
-    @include padding(0, 90px, 0);
+ion-app.ios ion-header ion-title {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
 
-    position: absolute;
-    text-align: center;
-    font-size: 17px;
-    font-weight: 600;
-    line-height: var(--core-header-toolbar-height);
-    box-sizing: border-box;
-    pointer-events: none;
+    h1, h2, .subheading {
+        font-size: 17px;
+        font-weight: 600;
+    }
+
+    h1 + h2,
+    h1 + .subheading {
+        font-size: 14px;
+        font-weight: 400;
+    }
 }
 
 
@@ -901,9 +906,13 @@ ion-back-button.md::part(text) {
     display: none;
 }
 
-// Hide close button because when present is read on voice over.
-ion-fab[core-fab] ion-fab-button::part(close-icon) {
-    display: none;
+ion-fab[core-fab] {
+    position: fixed;
+    
+    // Hide close button because when present is read on voice over.
+    ion-fab-button::part(close-icon) {
+        display: none;
+    }
 }
 
 .core-media-adapt-width {
@@ -1166,4 +1175,67 @@ iframe {
 
 ion-grid.core-no-grid > ion-row {
     display: block;
-}
\ No newline at end of file
+}
+
+ion-header[collapsible] {
+    @include core-transition(all, 500ms);
+
+    ion-title {
+        @include core-transition(opacity, 0ms);
+    }
+
+    &:not(.core-header-collapsed) {
+        ion-toolbar {
+            --core-header-toolbar-background: rgba(255, 255, 255, 0);
+            --core-header-toolbar-border-width: 0;
+        }
+
+        ion-title, &::after {
+            opacity: 0;
+            z-index: 0;
+        }
+    }
+}
+
+.collapsible-title {
+    overflow: visible;
+    *, h1, h2, .subheading {
+        @include core-transition(all, 200ms, linear);
+    }
+
+    ion-label {
+        overflow: visible !important;
+    }
+
+    h1, h2, .subheading {
+        --max-width: none;
+    }
+}
+
+ion-app.ios .collapsible-title h1 {
+    font-weight: 600; // Default heading weight.
+}
+ion-app.md .collapsible-title h1 {
+    font-weight: 500; // Default heading weight.
+    letter-spacing: .0125em;
+}
+
+.collapsible-title.collapsible-title-collapsed {
+    ion-label, h1, h2, .subheading {
+        opacity: 0;
+    }
+}
+
+.collapsible-title.collapsible-title-collapse-started {
+    * {
+        opacity: 0;
+    }
+    ion-label, h1, h2, .subheading {
+        opacity: 1;
+    }
+    h1, h2, .subheading {
+        max-width: var(--max-width);
+        white-space: nowrap;
+        overflow: hidden;
+    }
+}

From ccfad3b1acee41f59702aa6a7334991224005c38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 23 Nov 2021 15:06:01 +0100
Subject: [PATCH 8/9] MOBILE-3810 core: Wrap header titles with ion-title

---
 .../pages/issued-badge/issued-badge.html      |  45 +++++---
 .../badges/pages/user-badges/user-badges.html |   7 +-
 src/addons/blog/pages/entries/entries.html    |  14 +--
 .../reminder-time-modal.html                  |  10 +-
 src/addons/calendar/pages/day/day.html        |  12 +-
 .../calendar/pages/edit-event/edit-event.html |  32 +++---
 src/addons/calendar/pages/event/event.html    |  52 ++++-----
 src/addons/calendar/pages/index/index.html    |  25 ++---
 .../calendar/pages/settings/settings.html     |   4 +-
 .../pages/competencies/competencies.html      |   4 +-
 .../pages/competency/competency.html          |  22 ++--
 .../competencysummary/competencysummary.html  |   8 +-
 .../coursecompetencies.html                   |  29 ++---
 src/addons/competency/pages/plan/plan.html    |  19 ++--
 .../competency/pages/planlist/planlist.html   |  10 +-
 .../coursecompletion/pages/report/report.html |  16 ++-
 .../airnotifier/pages/devices/devices.html    |   9 +-
 .../conversation-info/conversation-info.html  |  10 +-
 .../messages/pages/contacts-35/contacts.html  |  25 +++--
 .../messages/pages/contacts/contacts.html     |  16 +--
 .../messages/pages/discussion/discussion.html |  72 ++++++------
 .../pages/discussions-35/discussions.html     |  28 +++--
 .../group-conversations.html                  | 106 +++++++++---------
 src/addons/messages/pages/search/search.html  |  22 ++--
 .../messages/pages/settings/settings.html     |  57 +++++-----
 .../edit-feedback-modal.html                  |   7 +-
 src/addons/mod/assign/pages/edit/edit.html    |  10 +-
 src/addons/mod/assign/pages/index/index.html  |  10 +-
 .../submission-list/submission-list.html      |  10 +-
 .../submission-review/submission-review.html  |  10 +-
 src/addons/mod/book/components/toc/toc.html   |  10 +-
 src/addons/mod/book/pages/index/index.html    |  10 +-
 .../components/users-modal/users-modal.html   |  10 +-
 src/addons/mod/chat/pages/chat/chat.html      |  18 +--
 src/addons/mod/chat/pages/index/index.html    |  10 +-
 .../session-messages/session-messages.html    |   9 +-
 .../mod/chat/pages/sessions/sessions.html     |   4 +-
 src/addons/mod/choice/pages/index/index.html  |  10 +-
 .../mod/data/components/search/search.html    |  17 ++-
 src/addons/mod/data/pages/edit/edit.html      |  10 +-
 src/addons/mod/data/pages/entry/entry.html    |  31 ++---
 src/addons/mod/data/pages/index/index.html    |  10 +-
 .../mod/feedback/pages/attempt/attempt.html   |  16 +--
 src/addons/mod/feedback/pages/form/form.html  |  51 ++++-----
 .../mod/feedback/pages/index/index.html       |  10 +-
 .../pages/nonrespondents/nonrespondents.html  |   8 +-
 .../pages/respondents/respondents.html        |  12 +-
 src/addons/mod/folder/pages/index/index.html  |  10 +-
 .../sort-order-selector.html                  |   4 +-
 .../forum/pages/discussion/discussion.html    |  90 +++++++--------
 src/addons/mod/forum/pages/index/index.html   |  10 +-
 .../pages/new-discussion/new-discussion.html  |  35 +++---
 src/addons/mod/glossary/pages/edit/edit.html  |  31 ++---
 .../mod/glossary/pages/entry/entry.html       |  34 +++---
 .../mod/glossary/pages/index/index.html       |  10 +-
 .../attempt-results/attempt-results.html      |  38 +++----
 .../mod/h5pactivity/pages/index/index.html    |  10 +-
 .../pages/user-attempts/user-attempts.html    |  12 +-
 .../pages/users-attempts/users-attempts.html  |  12 +-
 src/addons/mod/imscp/components/toc/toc.html  |   4 +-
 src/addons/mod/imscp/pages/index/index.html   |  10 +-
 .../components/menu-modal/menu-modal.html     |  21 ++--
 .../password-modal/password-modal.html        |   9 +-
 src/addons/mod/lesson/pages/index/index.html  |  10 +-
 .../mod/lesson/pages/player/player.html       |  75 ++++++-------
 .../lesson/pages/user-retake/user-retake.html |  29 ++---
 src/addons/mod/lti/pages/index/index.html     |  10 +-
 src/addons/mod/page/pages/index/index.html    |  10 +-
 .../navigation-modal/navigation-modal.html    |  13 ++-
 .../preflight-modal/preflight-modal.html      |   5 +-
 .../mod/quiz/pages/attempt/attempt.html       |  16 +--
 src/addons/mod/quiz/pages/index/index.html    |  10 +-
 src/addons/mod/quiz/pages/player/player.html  |  41 ++++---
 src/addons/mod/quiz/pages/review/review.html  |  14 +--
 .../mod/resource/pages/index/index.html       |  10 +-
 src/addons/mod/scorm/components/toc/toc.html  |   7 +-
 src/addons/mod/scorm/pages/index/index.html   |  10 +-
 src/addons/mod/scorm/pages/player/player.html |  14 ++-
 src/addons/mod/survey/pages/index/index.html  |   8 +-
 src/addons/mod/url/pages/index/index.html     |   8 +-
 .../index/addon-mod-wiki-index.html           |   4 +-
 src/addons/mod/wiki/components/map/map.html   |  11 +-
 src/addons/mod/wiki/pages/edit/edit.html      |  21 ++--
 src/addons/mod/wiki/pages/index/index.html    |  18 +--
 .../mod/workshop/components/phase/phase.html  |  11 +-
 .../workshop/pages/assessment/assessment.html |  31 ++---
 .../edit-submission/edit-submission.html      |   9 +-
 .../mod/workshop/pages/index/index.html       |  10 +-
 .../workshop/pages/submission/submission.html |  34 +++---
 .../notes/components/add/add-modal.html       |   7 +-
 src/addons/notes/pages/list/list.html         |  25 +++--
 src/addons/notifications/pages/list/list.html |  18 +--
 .../pages/notification/notification.html      |   7 +-
 .../pages/settings/settings.html              |  16 ++-
 .../privatefiles/pages/index/index.html       |  12 +-
 .../pages/course-storage/course-storage.html  |  11 +-
 .../courses-storage/courses-storage.html      |  11 +-
 .../components/side-blocks/side-blocks.html   |   4 +-
 .../comments/pages/viewer/viewer.html         |  39 +++----
 .../choose-site-modal/choose-site-modal.html  |  14 +--
 .../section-selector/section-selector.html    |  10 +-
 .../features/course/pages/index/index.html    |   8 +-
 .../pages/list-mod-type/list-mod-type.html    |  13 ++-
 .../course/pages/preview/preview.html         |   8 +-
 .../unsupported-module.html                   |  10 +-
 .../self-enrol-password.html                  |  15 +--
 .../courses/pages/categories/categories.html  |  10 +-
 .../features/courses/pages/list/list.html     |  25 +++--
 src/core/features/courses/pages/my/my.html    |   4 +-
 .../capture-media/capture-media.html          |  10 +-
 .../features/grades/pages/course/course.html  |  47 +++-----
 .../grades/pages/courses/courses.html         |  30 ++---
 .../features/grades/pages/grade/grade.html    |   4 +-
 .../login/components/site-help/site-help.html |  11 +-
 .../site-onboarding/site-onboarding.html      |   2 +-
 .../login/components/sites/sites.html         |   4 +-
 .../change-password/change-password.html      |   4 +-
 .../login/pages/credentials/credentials.html  |  38 ++++---
 .../pages/email-signup/email-signup.html      |  32 ++++--
 .../forgotten-password.html                   |  12 +-
 .../login/pages/reconnect/reconnect.html      |  22 ++--
 .../login/pages/site-policy/site-policy.html  |  16 ++-
 src/core/features/login/pages/site/site.html  |  17 +--
 .../features/login/pages/sites/sites.html     |   4 +-
 .../components/user-menu/user-menu.html       |  10 +-
 .../features/mainmenu/pages/home/home.html    |  13 ++-
 .../features/mainmenu/pages/more/more.html    |   8 +-
 .../components/ratings/ratings-modal.html     |   4 +-
 .../features/settings/pages/about/about.html  |  36 +++---
 src/core/features/settings/pages/dev/dev.html |  22 +++-
 .../settings/pages/deviceinfo/deviceinfo.html |  11 +-
 .../settings/pages/general/general.html       |   8 +-
 .../features/settings/pages/index/index.html  |   8 +-
 .../settings/pages/licenses/licenses.html     |   4 +-
 .../features/settings/pages/site/site.html    |   7 +-
 .../pages/space-usage/space-usage.html        |   4 +-
 .../synchronization/synchronization.html      |   4 +-
 .../components/list-modal/list-modal.html     |  13 +--
 .../pages/choose-site/choose-site.html        |  11 +-
 .../features/sharedfiles/pages/list/list.html |   8 +-
 .../pages/module-index/module-index.html      |   4 +-
 .../pages/plugin-page/plugin-page.html        |  11 +-
 .../tag/pages/index-area/index-area.html      |   8 +-
 src/core/features/tag/pages/index/index.html  |   7 +-
 .../features/tag/pages/search/search.html     |   9 +-
 src/core/features/user/pages/about/about.html |   4 +-
 .../features/user/pages/profile/profile.html  |   7 +-
 .../viewer/components/image/image.html        |   4 +-
 .../components/qr-scanner/qr-scanner.html     |   4 +-
 .../features/viewer/components/text/text.html |   9 +-
 .../features/viewer/pages/iframe/iframe.html  |   4 +-
 151 files changed, 1334 insertions(+), 1154 deletions(-)

diff --git a/src/addons/badges/pages/issued-badge/issued-badge.html b/src/addons/badges/pages/issued-badge/issued-badge.html
index 0a80b561d..d4865c4c9 100644
--- a/src/addons/badges/pages/issued-badge/issued-badge.html
+++ b/src/addons/badges/pages/issued-badge/issued-badge.html
@@ -3,8 +3,10 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1 *ngIf="badge">{{ badge.name }}</h1>
-        <h1 *ngIf="!badge">{{ 'addon.badges.badges' | translate }}</h1>
+        <ion-title>
+            <h1 *ngIf="badge">{{ badge.name }}</h1>
+            <h1 *ngIf="!badge">{{ 'addon.badges.badges' | translate }}</h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
@@ -54,8 +56,8 @@
                     <ion-label>
                         <h2>{{ 'addon.badges.contact' | translate}}</h2>
                         <p><a href="mailto:{{badge.issuercontact}}" core-link auto-login="no" [showBrowserWarning]="false">
-                            {{ badge.issuercontact }}
-                        </a></p>
+                                {{ badge.issuercontact }}
+                            </a></p>
                     </ion-label>
                 </ion-item>
             </ion-item-group>
@@ -100,8 +102,8 @@
                     <ion-label>
                         <h2>{{ 'addon.badges.imageauthoremail' | translate}}</h2>
                         <p><a href="mailto:{{badge.imageauthoremail}}" core-link auto-login="no" [showBrowserWarning]="false">
-                            {{ badge.imageauthoremail }}
-                        </a></p>
+                                {{ badge.imageauthoremail }}
+                            </a></p>
                     </ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="badge.imageauthorurl">
@@ -157,7 +159,9 @@
             <!-- Endorsement -->
             <ion-item-group *ngIf="badge.endorsement">
                 <ion-item-divider>
-                    <ion-label><h2>{{ 'addon.badges.bendorsement' | translate}}</h2></ion-label>
+                    <ion-label>
+                        <h2>{{ 'addon.badges.bendorsement' | translate}}</h2>
+                    </ion-label>
                 </ion-item-divider>
                 <ion-item class="ion-text-wrap" *ngIf="badge.endorsement.issuername">
                     <ion-label>
@@ -169,8 +173,7 @@
                     <ion-label>
                         <h2>{{ 'addon.badges.issueremail' | translate}}</h2>
                         <p>
-                            <a href="mailto:{{badge.endorsement.issueremail}}" core-link auto-login="no"
-                                [showBrowserWarning]="false">
+                            <a href="mailto:{{badge.endorsement.issueremail}}" core-link auto-login="no" [showBrowserWarning]="false">
                                 {{ badge.endorsement.issueremail }}
                             </a>
                         </p>
@@ -205,27 +208,39 @@
             <!-- Related badges -->
             <ion-item-group *ngIf="badge.relatedbadges">
                 <ion-item-divider>
-                    <ion-label><h2>{{ 'addon.badges.relatedbages' | translate}}</h2></ion-label>
+                    <ion-label>
+                        <h2>{{ 'addon.badges.relatedbages' | translate}}</h2>
+                    </ion-label>
                 </ion-item-divider>
                 <ion-item class="ion-text-wrap" *ngFor="let relatedBadge of badge.relatedbadges">
-                    <ion-label><h2>{{ relatedBadge.name }}</h2></ion-label>
+                    <ion-label>
+                        <h2>{{ relatedBadge.name }}</h2>
+                    </ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="badge.relatedbadges.length == 0">
-                    <ion-label><h2>{{ 'addon.badges.norelated' | translate}}</h2></ion-label>
+                    <ion-label>
+                        <h2>{{ 'addon.badges.norelated' | translate}}</h2>
+                    </ion-label>
                 </ion-item>
             </ion-item-group>
 
             <!-- Competencies alignment -->
             <ion-item-group *ngIf="badge.alignment">
                 <ion-item-divider>
-                    <ion-label><h2>{{ 'addon.badges.alignment' | translate}}</h2></ion-label>
+                    <ion-label>
+                        <h2>{{ 'addon.badges.alignment' | translate}}</h2>
+                    </ion-label>
                 </ion-item-divider>
                 <ion-item class="ion-text-wrap" *ngFor="let alignment of badge.alignment" [href]="alignment.targeturl" core-link
                     auto-login="no">
-                    <ion-label><h2>{{ alignment.targetname }}</h2></ion-label>
+                    <ion-label>
+                        <h2>{{ alignment.targetname }}</h2>
+                    </ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="badge.alignment.length == 0">
-                    <ion-label><h2>{{ 'addon.badges.noalignment' | translate}}</h2></ion-label>
+                    <ion-label>
+                        <h2>{{ 'addon.badges.noalignment' | translate}}</h2>
+                    </ion-label>
                 </ion-item>
             </ion-item-group>
         </ng-container>
diff --git a/src/addons/badges/pages/user-badges/user-badges.html b/src/addons/badges/pages/user-badges/user-badges.html
index a04a3e761..8b872cbea 100644
--- a/src/addons/badges/pages/user-badges/user-badges.html
+++ b/src/addons/badges/pages/user-badges/user-badges.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ 'addon.badges.badges' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'addon.badges.badges' | translate }}</h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
@@ -12,8 +14,7 @@
             <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
         </ion-refresher>
         <core-loading [hideUntil]="badges.loaded">
-            <core-empty-box *ngIf="badges.empty" icon="fas-trophy"
-                [message]="'addon.badges.nobadges' | translate">
+            <core-empty-box *ngIf="badges.empty" icon="fas-trophy" [message]="'addon.badges.nobadges' | translate">
             </core-empty-box>
 
             <ion-list *ngIf="!badges.empty" class="ion-no-margin">
diff --git a/src/addons/blog/pages/entries/entries.html b/src/addons/blog/pages/entries/entries.html
index 60d027fcb..550ee3fd2 100644
--- a/src/addons/blog/pages/entries/entries.html
+++ b/src/addons/blog/pages/entries/entries.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ title | translate }}</h1>
+        <ion-title>
+            <h1>{{ title | translate }}</h1>
+        </ion-title>
         <ion-buttons slot="end">
             <core-user-menu-button></core-user-menu-button>
         </ion-buttons>
@@ -18,8 +20,7 @@
             <ion-label>{{ 'addon.blog.showonlyyourentries' | translate }}</ion-label>
             <ion-toggle [(ngModel)]="onlyMyEntries" (ionChange)="onlyMyEntriesToggleChanged(onlyMyEntries)"></ion-toggle>
         </ion-item>
-        <core-empty-box *ngIf="entries && entries.length == 0" icon="far-newspaper"
-            [message]="'addon.blog.noentriesyet' | translate">
+        <core-empty-box *ngIf="entries && entries.length == 0" icon="far-newspaper" [message]="'addon.blog.noentriesyet' | translate">
         </core-empty-box>
         <ng-container *ngFor="let entry of entries">
             <ion-card *ngIf="!onlyMyEntries || entry.userid == currentUserId">
@@ -27,8 +28,7 @@
                     <core-user-avatar [user]="entry.user" slot="start" [courseId]="entry.courseid"></core-user-avatar>
                     <ion-label>
                         <p class="item-heading">
-                            <core-format-text [text]="entry.subject" [contextLevel]="contextLevel"
-                                [contextInstanceId]="contextInstanceId">
+                            <core-format-text [text]="entry.subject" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId">
                             </core-format-text>
                             <ion-note class="ion-float-end ion-padding-start ion-text-end">
                                 {{ 'addon.blog.' + entry.publishTranslated! | translate}}
@@ -68,8 +68,8 @@
                 </ion-card-content>
                 <div class="ion-text-center ion-margin-bottom" *ngIf="entry.lastmodified > entry.created">
                     <ion-note>
-                        <ion-icon name="fas-clock"
-                            [attr.aria-label]="'core.lastmodified' | translate"></ion-icon> {{entry.lastmodified | coreTimeAgo}}
+                        <ion-icon name="fas-clock" [attr.aria-label]="'core.lastmodified' | translate"></ion-icon> {{entry.lastmodified |
+                        coreTimeAgo}}
                     </ion-note>
                 </div>
             </ion-card>
diff --git a/src/addons/calendar/components/reminder-time-modal/reminder-time-modal.html b/src/addons/calendar/components/reminder-time-modal/reminder-time-modal.html
index ad47dee3a..cdf45cb20 100644
--- a/src/addons/calendar/components/reminder-time-modal/reminder-time-modal.html
+++ b/src/addons/calendar/components/reminder-time-modal/reminder-time-modal.html
@@ -1,6 +1,8 @@
 <ion-header>
     <ion-toolbar>
-        <h2>{{ 'addon.calendar.reminders' | translate }}</h2>
+        <ion-title>
+            <h2>{{ 'addon.calendar.reminders' | translate }}</h2>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-times" aria-hidden="true"></ion-icon>
@@ -36,15 +38,13 @@
 
             <div class="flex-row">
                 <!-- Input to enter the value. -->
-                <ion-input type="number" name="customvalue" [(ngModel)]="customValue" [disabled]="radioValue != 'custom'"
-                    placeholder="10">
+                <ion-input type="number" name="customvalue" [(ngModel)]="customValue" [disabled]="radioValue != 'custom'" placeholder="10">
                 </ion-input>
 
                 <!-- Units. -->
                 <label class="accesshide" for="reminderUnits">{{ 'addon.calendar.units' | translate }}</label>
                 <ion-select id="reminderUnits" name="customunits" [(ngModel)]="customUnits" interface="action-sheet"
-                    [disabled]="radioValue != 'custom'" slot="end"
-                    [interfaceOptions]="{header: 'addon.calendar.units' | translate}">
+                    [disabled]="radioValue != 'custom'" slot="end" [interfaceOptions]="{header: 'addon.calendar.units' | translate}">
                     <ion-select-option *ngFor="let option of customUnitsOptions" [value]="option.value">
                         {{ option.label | translate }}
                     </ion-select-option>
diff --git a/src/addons/calendar/pages/day/day.html b/src/addons/calendar/pages/day/day.html
index 7580d07b1..ef0fe2306 100644
--- a/src/addons/calendar/pages/day/day.html
+++ b/src/addons/calendar/pages/day/day.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ 'addon.calendar.calendarevents' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'addon.calendar.calendarevents' | translate }}</h1>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="openFilter($event)" [attr.aria-label]="'core.filter' | translate">
                 <ion-icon slot="icon-only" name="fas-filter" aria-hidden="true"></ion-icon>
@@ -13,8 +15,8 @@
                     iconAction="fas-calendar-day" (action)="goToCurrentDay()">
                 </core-context-menu-item>
                 <core-context-menu-item [hidden]="!loaded || !hasOffline || !isOnline" [priority]="400"
-                    [content]="'core.settings.synchronizenow' | translate" (action)="doRefresh(undefined, $event)"
-                    [iconAction]="syncIcon" [closeOnClick]="false">
+                    [content]="'core.settings.synchronizenow' | translate" (action)="doRefresh(undefined, $event)" [iconAction]="syncIcon"
+                    [closeOnClick]="false">
                 </core-context-menu-item>
             </core-context-menu>
         </ion-buttons>
@@ -60,7 +62,7 @@
         <ion-list *ngIf="filteredEvents && filteredEvents.length" class="ion-no-margin">
             <ng-container *ngFor="let event of filteredEvents">
                 <ion-item class="addon-calendar-event ion-text-wrap" [attr.aria-label]="event.name" (click)="gotoEvent(event.id)"
-                [class.item-dimmed]="event.ispast" [ngClass]="['addon-calendar-eventtype-'+event.eventtype]" button detail="true">
+                    [class.item-dimmed]="event.ispast" [ngClass]="['addon-calendar-eventtype-'+event.eventtype]" button detail="true">
                     <core-mod-icon *ngIf="event.moduleIcon" [modicon]="event.moduleIcon" slot="start" [showAlt]="false"
                         [modname]="event.modname" [componentId]="event.instance">
                     </core-mod-icon>
@@ -74,7 +76,7 @@
                         </span>
                         <p class="item-heading">
                             <core-format-text [text]="event.name" [contextLevel]="event.contextLevel"
-                            [contextInstanceId]="event.contextInstanceId"></core-format-text>
+                                [contextInstanceId]="event.contextInstanceId"></core-format-text>
                         </p>
                         <p [innerHTML]="event.formattedtime"></p>
                     </ion-label>
diff --git a/src/addons/calendar/pages/edit-event/edit-event.html b/src/addons/calendar/pages/edit-event/edit-event.html
index 469fc2e7c..0ba264922 100644
--- a/src/addons/calendar/pages/edit-event/edit-event.html
+++ b/src/addons/calendar/pages/edit-event/edit-event.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ title | translate }}</h1>
+        <ion-title>
+            <h1>{{ title | translate }}</h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
@@ -40,12 +42,8 @@
                     <p class="item-heading" [core-mark-required]="true">{{ 'addon.calendar.eventkind' | translate }}</p>
                 </ion-label>
                 <p *ngIf="eventTypes.length == 1" slot="end">{{eventTypes[0].name | translate }}</p>
-                <ion-select
-                    *ngIf="eventTypes.length > 1"
-                    formControlName="eventtype"
-                    interface="action-sheet"
-                    [interfaceOptions]="{header: 'addon.calendar.eventkind' | translate}"
-                >
+                <ion-select *ngIf="eventTypes.length > 1" formControlName="eventtype" interface="action-sheet"
+                    [interfaceOptions]="{header: 'addon.calendar.eventkind' | translate}">
                     <ion-select-option *ngFor="let type of eventTypes" [value]="type.value">
                         {{ type.name | translate }}
                     </ion-select-option>
@@ -83,8 +81,7 @@
                     <ion-label>
                         <p class="item-heading" [core-mark-required]="true">{{ 'core.course' | translate }}</p>
                     </ion-label>
-                    <ion-select formControlName="groupcourseid"
-                        interface="action-sheet" [placeholder]="'core.noselection' | translate"
+                    <ion-select formControlName="groupcourseid" interface="action-sheet" [placeholder]="'core.noselection' | translate"
                         (ionChange)="groupCourseSelected()" [interfaceOptions]="{header: 'core.course' | translate}">
                         <ion-select-option *ngFor="let course of courses" [value]="course.id">
                             {{ course.fullname }}
@@ -93,7 +90,9 @@
                 </ion-item>
                 <!-- The course has no groups. -->
                 <ion-item class="ion-text-wrap core-danger-item" *ngIf="!loadingGroups && courseGroupSet && !groups.length">
-                    <ion-label><p>{{ 'core.coursenogroups' | translate }}</p></ion-label>
+                    <ion-label>
+                        <p>{{ 'core.coursenogroups' | translate }}</p>
+                    </ion-label>
                 </ion-item>
                 <!-- Select the group. -->
                 <ion-item class="ion-text-wrap" *ngIf="!loadingGroups && groups.length > 0">
@@ -128,8 +127,7 @@
                     <ion-label>
                         <p>{{ reminder.label }}</p>
                     </ion-label>
-                    <ion-button fill="clear" (click)="removeReminder(reminder)" [attr.aria-label]="'core.delete' | translate"
-                        slot="end">
+                    <ion-button fill="clear" (click)="removeReminder(reminder)" [attr.aria-label]="'core.delete' | translate" slot="end">
                         <ion-icon name="fas-trash" color="danger" slot="icon-only" aria-hidden="true"></ion-icon>
                     </ion-button>
                 </ion-item>
@@ -158,8 +156,7 @@
                     <ion-item *ngIf="form.controls.duration.value === 1">
                         <ion-label position="stacked"></ion-label>
                         <ion-datetime formControlName="timedurationuntil" [max]="maxDate" [min]="minDate"
-                            [placeholder]="'addon.calendar.durationuntil' | translate"
-                            [displayFormat]="dateFormat" display-timezone="utc">
+                            [placeholder]="'addon.calendar.durationuntil' | translate" [displayFormat]="dateFormat" display-timezone="utc">
                         </ion-datetime>
                     </ion-item>
                     <ion-item lines="none">
@@ -171,8 +168,7 @@
                     <ion-item *ngIf="form.controls.duration.value === 2">
                         <ion-label class="sr-only">{{ 'addon.calendar.durationminutes' | translate }}</ion-label>
                         <ion-input type="number" name="timedurationminutes" slot="end"
-                            [placeholder]="'addon.calendar.durationminutes' | translate"
-                            formControlName="timedurationminutes"></ion-input>
+                            [placeholder]="'addon.calendar.durationminutes' | translate" formControlName="timedurationminutes"></ion-input>
                     </ion-item>
                 </ion-radio-group>
             </div>
@@ -223,8 +219,8 @@
                     <p class="item-heading">{{ 'core.description' | translate }}</p>
                 </ion-label>
                 <core-rich-text-editor [control]="descriptionControl" [attr.aria-label]="'core.description' | translate"
-                    [placeholder]="'core.description' | translate" name="description" [component]="component"
-                    [componentId]="eventId" [autoSave]="false"></core-rich-text-editor>
+                    [placeholder]="'core.description' | translate" name="description" [component]="component" [componentId]="eventId"
+                    [autoSave]="false"></core-rich-text-editor>
             </ion-item>
 
             <!-- Location. -->
diff --git a/src/addons/calendar/pages/event/event.html b/src/addons/calendar/pages/event/event.html
index e2279bd11..8744742c3 100644
--- a/src/addons/calendar/pages/event/event.html
+++ b/src/addons/calendar/pages/event/event.html
@@ -3,30 +3,31 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1 *ngIf="event">
-            <core-mod-icon *ngIf="event.moduleIcon" [modicon]="event.moduleIcon" [showAlt]="false"
-                [modname]="event.modulename" [componentId]="event.instance"></core-mod-icon>
-            <ion-icon *ngIf="event.eventIcon && !event.moduleIcon" [name]="event.eventIcon" aria-hidden="true"></ion-icon>
-            <!-- Add the icon title so accessibility tools read it. -->
-            <span class="sr-only">
-                {{ 'addon.calendar.type' + event.formattedType | translate }}
-                <span class="sr-only" *ngIf="event.moduleIcon && event.iconTitle">{{ event.iconTitle }}</span>
-            </span>
-            <core-format-text [text]="event.name" [contextLevel]="event.contextLevel"
-                [contextInstanceId]="event.contextInstanceId"></core-format-text>
-        </h1>
+        <ion-title>
+            <h1 *ngIf="event">
+                <core-mod-icon *ngIf="event.moduleIcon" [modicon]="event.moduleIcon" [showAlt]="false" [modname]="event.modulename"
+                    [componentId]="event.instance"></core-mod-icon>
+                <ion-icon *ngIf="event.eventIcon && !event.moduleIcon" [name]="event.eventIcon" aria-hidden="true"></ion-icon>
+                <!-- Add the icon title so accessibility tools read it. -->
+                <span class="sr-only">
+                    {{ 'addon.calendar.type' + event.formattedType | translate }}
+                    <span class="sr-only" *ngIf="event.moduleIcon && event.iconTitle">{{ event.iconTitle }}</span>
+                </span>
+                <core-format-text [text]="event.name" [contextLevel]="event.contextLevel" [contextInstanceId]="event.contextInstanceId">
+                </core-format-text>
+            </h1>
+        </ion-title>
         <ion-buttons slot="end">
             <core-context-menu>
-                <core-context-menu-item [hidden]="!eventLoaded || (!hasOffline && event && !event.deleted) || !isOnline"
-                    [priority]="400" [content]="'core.settings.synchronizenow' | translate" (action)="doRefresh(undefined, $event, true)"
+                <core-context-menu-item [hidden]="!eventLoaded || (!hasOffline && event && !event.deleted) || !isOnline" [priority]="400"
+                    [content]="'core.settings.synchronizenow' | translate" (action)="doRefresh(undefined, $event, true)"
                     [iconAction]="syncIcon" [closeOnClick]="false">
                 </core-context-menu-item>
-                <core-context-menu-item [hidden]="!event || !event.canedit || event.deleted || (!canEdit && event.id > 0)"
-                    [priority]="300" [content]="'core.edit' | translate" (action)="openEdit()" iconAction="fas-edit">
+                <core-context-menu-item [hidden]="!event || !event.canedit || event.deleted || (!canEdit && event.id > 0)" [priority]="300"
+                    [content]="'core.edit' | translate" (action)="openEdit()" iconAction="fas-edit">
                 </core-context-menu-item>
                 <core-context-menu-item [hidden]="!event || !event.candelete || event.deleted" [priority]="200"
-                    [content]="'core.delete' | translate" (action)="deleteEvent()"
-                    iconAction="fas-trash"></core-context-menu-item>
+                    [content]="'core.delete' | translate" (action)="deleteEvent()" iconAction="fas-trash"></core-context-menu-item>
                 <core-context-menu-item [hidden]="!event || !event.deleted" [priority]="200" [content]="'core.restore' | translate"
                     (action)="undoDelete()" iconAction="fas-undo-alt"></core-context-menu-item>
             </core-context-menu>
@@ -52,7 +53,7 @@
                     <ion-label>
                         <h2>{{ 'addon.calendar.when' | translate }}</h2>
                         <core-format-text [text]="event.formattedtime" [contextLevel]="event.contextLevel"
-                        [contextInstanceId]="event.contextInstanceId"></core-format-text>
+                            [contextInstanceId]="event.contextInstanceId"></core-format-text>
                     </ion-label>
                     <ion-note slot="end" *ngIf="event.deleted">
                         <ion-icon name="fas-trash" aria-hidden="true"></ion-icon> {{ 'core.deletedoffline' | translate }}
@@ -82,8 +83,10 @@
                 <ion-item class="ion-text-wrap" *ngIf="categoryPath">
                     <ion-label>
                         <h2>{{ 'core.category' | translate}}</h2>
-                        <p><core-format-text [text]="categoryPath" contextLevel="coursecat"
-                            [contextInstanceId]="event.categoryid"></core-format-text></p>
+                        <p>
+                            <core-format-text [text]="categoryPath" contextLevel="coursecat" [contextInstanceId]="event.categoryid">
+                            </core-format-text>
+                        </p>
                     </ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="event.description">
@@ -123,13 +126,12 @@
                 </ion-label>
             </ion-item>
             <ng-container *ngFor="let reminder of reminders">
-                <ion-item *ngIf="reminder.timestamp > 0" class="ion-text-wrap"
-                    [class.item-dimmed]="reminder.timestamp <= currentTime">
+                <ion-item *ngIf="reminder.timestamp > 0" class="ion-text-wrap" [class.item-dimmed]="reminder.timestamp <= currentTime">
                     <ion-label>
                         <p>{{ reminder.label }}</p>
                     </ion-label>
-                    <ion-button fill="clear" (click)="cancelNotification(reminder.id, $event)"
-                        [attr.aria-label]="'core.delete' | translate" slot="end" *ngIf="reminder.timestamp > currentTime">
+                    <ion-button fill="clear" (click)="cancelNotification(reminder.id, $event)" [attr.aria-label]="'core.delete' | translate"
+                        slot="end" *ngIf="reminder.timestamp > currentTime">
                         <ion-icon name="fas-trash" color="danger" slot="icon-only" aria-hidden="true"></ion-icon>
                     </ion-button>
                 </ion-item>
diff --git a/src/addons/calendar/pages/index/index.html b/src/addons/calendar/pages/index/index.html
index b67f85700..8675bca95 100644
--- a/src/addons/calendar/pages/index/index.html
+++ b/src/addons/calendar/pages/index/index.html
@@ -3,24 +3,24 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ (showCalendar ? 'addon.calendar.calendarevents' : 'addon.calendar.upcomingevents') | translate }}</h1>
+        <ion-title>
+            <h1>{{ (showCalendar ? 'addon.calendar.calendarevents' : 'addon.calendar.upcomingevents') | translate }}</h1>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="openFilter($event)" [attr.aria-label]="'core.filter' | translate">
                 <ion-icon slot="icon-only" name="fas-filter" aria-hidden="true"></ion-icon>
             </ion-button>
             <core-context-menu>
-                <core-context-menu-item *ngIf="showCalendar" [priority]="800"
-                [content]="'addon.calendar.upcomingevents' | translate" iconAction="fas-th-list"
-                (action)="toggleDisplay()"></core-context-menu-item>
-                <core-context-menu-item *ngIf="!showCalendar" [priority]="800"
-                [content]="'addon.calendar.monthlyview' | translate" iconAction="fas-calendar-alt"
-                (action)="toggleDisplay()"></core-context-menu-item>
-                <core-context-menu-item [hidden]="!notificationsEnabled" [priority]="600"
-                [content]="'core.settings.settings' | translate" (action)="openSettings()" iconAction="fas-cogs">
+                <core-context-menu-item *ngIf="showCalendar" [priority]="800" [content]="'addon.calendar.upcomingevents' | translate"
+                    iconAction="fas-th-list" (action)="toggleDisplay()"></core-context-menu-item>
+                <core-context-menu-item *ngIf="!showCalendar" [priority]="800" [content]="'addon.calendar.monthlyview' | translate"
+                    iconAction="fas-calendar-alt" (action)="toggleDisplay()"></core-context-menu-item>
+                <core-context-menu-item [hidden]="!notificationsEnabled" [priority]="600" [content]="'core.settings.settings' | translate"
+                    (action)="openSettings()" iconAction="fas-cogs">
                 </core-context-menu-item>
                 <core-context-menu-item [hidden]="!loaded || !hasOffline || !isOnline" [priority]="400"
-                [content]="'core.settings.synchronizenow' | translate" (action)="doRefresh(undefined, $event, true)"
-                [iconAction]="syncIcon" [closeOnClick]="false"></core-context-menu-item>
+                    [content]="'core.settings.synchronizenow' | translate" (action)="doRefresh(undefined, $event, true)"
+                    [iconAction]="syncIcon" [closeOnClick]="false"></core-context-menu-item>
             </core-context-menu>
             <core-user-menu-button></core-user-menu-button>
         </ion-buttons>
@@ -43,8 +43,7 @@
         [displayNavButtons]="showCalendar" (onEventClicked)="gotoEvent($event)" (onDayClicked)="gotoDay($event)">
     </addon-calendar-calendar>
 
-    <addon-calendar-upcoming-events *ngIf="loadUpcoming" [hidden]="showCalendar" [filter]="filter"
-        (onEventClicked)="gotoEvent($event)">
+    <addon-calendar-upcoming-events *ngIf="loadUpcoming" [hidden]="showCalendar" [filter]="filter" (onEventClicked)="gotoEvent($event)">
     </addon-calendar-upcoming-events>
 
     <!-- Create a calendar event. -->
diff --git a/src/addons/calendar/pages/settings/settings.html b/src/addons/calendar/pages/settings/settings.html
index 8ebb4f579..d8982f79b 100644
--- a/src/addons/calendar/pages/settings/settings.html
+++ b/src/addons/calendar/pages/settings/settings.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ 'core.settings.settings' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'core.settings.settings' | translate }}</h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
diff --git a/src/addons/competency/pages/competencies/competencies.html b/src/addons/competency/pages/competencies/competencies.html
index c2b651541..911270667 100644
--- a/src/addons/competency/pages/competencies/competencies.html
+++ b/src/addons/competency/pages/competencies/competencies.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ title }}</h1>
+        <ion-title>
+            <h1>{{ title }}</h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
diff --git a/src/addons/competency/pages/competency/competency.html b/src/addons/competency/pages/competency/competency.html
index cc34b86b0..d70e9e806 100644
--- a/src/addons/competency/pages/competency/competency.html
+++ b/src/addons/competency/pages/competency/competency.html
@@ -3,9 +3,11 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1 *ngIf="competency">
-            {{ competency.competency.competency.shortname }} <small>{{ competency.competency.competency.idnumber }}</small>
-        </h1>
+        <ion-title>
+            <h1 *ngIf="competency">
+                {{ competency.competency.competency.shortname }} <small>{{ competency.competency.competency.idnumber }}</small>
+            </h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
@@ -16,7 +18,9 @@
         <ion-card *ngIf="user">
             <ion-item class="ion-text-wrap">
                 <core-user-avatar [user]="user" slot="start"></core-user-avatar>
-                <ion-label><h2>{{ user.fullname }}</h2></ion-label>
+                <ion-label>
+                    <h2>{{ user.fullname }}</h2>
+                </ion-label>
             </ion-item>
         </ion-card>
 
@@ -32,11 +36,9 @@
                 <ion-label>
                     <p class="item-heading">{{ 'addon.competency.path' | translate }}</p>
                     <p>
-                        <a *ngIf="competency.competency.comppath.showlinks"
-                            [href]="competency.competency.comppath.pluginbaseurl + '/competencies.php?competencyframeworkid=' +
+                        <a *ngIf="competency.competency.comppath.showlinks" [href]="competency.competency.comppath.pluginbaseurl + '/competencies.php?competencyframeworkid=' +
                             competency.competency.comppath.framework.id + '&pagecontextid=' +
-                            competency.competency.comppath.pagecontextid"
-                            core-link>
+                            competency.competency.comppath.pagecontextid" core-link>
                             {{ competency.competency.comppath.framework.name }}
                         </a>
                         <ng-container *ngIf="!competency.competency.comppath.showlinks">
@@ -129,7 +131,9 @@
                 </ion-item>
                 <ion-item class="ion-text-wrap">
                     <ion-label>
-                        <p><ion-badge color="dark">{{ evidence.gradename }}</ion-badge></p>
+                        <p>
+                            <ion-badge color="dark">{{ evidence.gradename }}</ion-badge>
+                        </p>
                         <p class="ion-margin-top" *ngIf="evidence.description">{{ evidence.description }}</p>
                         <blockquote *ngIf="evidence.note">{{ evidence.note }}</blockquote>
                     </ion-label>
diff --git a/src/addons/competency/pages/competencysummary/competencysummary.html b/src/addons/competency/pages/competencysummary/competencysummary.html
index 664344804..1467f6e50 100644
--- a/src/addons/competency/pages/competencysummary/competencysummary.html
+++ b/src/addons/competency/pages/competencysummary/competencysummary.html
@@ -3,9 +3,11 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1 *ngIf="competency">
-            {{ competency.competency.shortname }} <small>{{ competency.competency.idnumber }}</small>
-        </h1>
+        <ion-title>
+            <h1 *ngIf="competency">
+                {{ competency.competency.shortname }} <small>{{ competency.competency.idnumber }}</small>
+            </h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
diff --git a/src/addons/competency/pages/coursecompetencies/coursecompetencies.html b/src/addons/competency/pages/coursecompetencies/coursecompetencies.html
index a0e2f63e3..fa1cf08bc 100644
--- a/src/addons/competency/pages/coursecompetencies/coursecompetencies.html
+++ b/src/addons/competency/pages/coursecompetencies/coursecompetencies.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ 'addon.competency.coursecompetencies' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'addon.competency.coursecompetencies' | translate }}</h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
@@ -24,7 +26,7 @@
                 <ion-label>
                     <span id="addon-competency-course-{{courseId}}-progress">
                         {{ 'addon.competency.xcompetenciesproficientoutofyincourse' | translate: {$a:
-                            {x: competencies.statistics.proficientcompetencycount, y: competencies.statistics.competencycount} } }}
+                        {x: competencies.statistics.proficientcompetencycount, y: competencies.statistics.competencycount} } }}
                     </span>
                     <core-progress-bar [progress]="competencies.statistics.proficientcompetencypercentage"
                         ariaDescribedBy="addon-competency-course-{{courseId}}-progress">
@@ -48,13 +50,15 @@
             {{ 'addon.competency.coursecompetencies' | translate }}
         </h2>
         <ion-card *ngIf="user">
-             <ion-item class="ion-text-wrap">
+            <ion-item class="ion-text-wrap">
                 <core-user-avatar [user]="user" slot="start"></core-user-avatar>
-               <ion-label><h2>{{ user.fullname }}</h2></ion-label>
+                <ion-label>
+                    <h2>{{ user.fullname }}</h2>
+                </ion-label>
             </ion-item>
         </ion-card>
-        <core-empty-box *ngIf="competencies && competencies.statistics.competencycount == 0"
-            icon="fas-award" message="{{ 'addon.competency.nocompetenciesincourse' | translate }}">
+        <core-empty-box *ngIf="competencies && competencies.statistics.competencycount == 0" icon="fas-award"
+            message="{{ 'addon.competency.nocompetenciesincourse' | translate }}">
         </core-empty-box>
 
         <div *ngIf="competencies">
@@ -81,10 +85,9 @@
                         <div>
                             <p class="item-heading">{{ 'addon.competency.path' | translate }}</p>
                             <p>
-                                <a *ngIf="competency.comppath.showlinks"
-                                    [href]="competency.comppath.pluginbaseurl + '/competencies.php?competencyframeworkid=' +
-                                    competency.comppath.framework.id + '&pagecontextid=' + competency.comppath.pagecontextid"
-                                    core-link [title]="competency.comppath.framework.name">
+                                <a *ngIf="competency.comppath.showlinks" [href]="competency.comppath.pluginbaseurl + '/competencies.php?competencyframeworkid=' +
+                                    competency.comppath.framework.id + '&pagecontextid=' + competency.comppath.pagecontextid" core-link
+                                    [title]="competency.comppath.framework.name">
                                     {{ competency.comppath.framework.name }}
                                 </a>
                                 <ng-container *ngIf="!competency.comppath.showlinks">
@@ -103,7 +106,7 @@
                         </div>
                         <div *ngIf="competencies.statistics.canmanagecoursecompetencies">
                             <p class="item-heading">{{ 'addon.competency.uponcoursecompletion' | translate }}</p>
-                             <ng-container *ngFor="let ruleoutcome of competency.ruleoutcomeoptions">
+                            <ng-container *ngFor="let ruleoutcome of competency.ruleoutcomeoptions">
                                 <span *ngIf="ruleoutcome.selected">{{ ruleoutcome.text }}</span>
                             </ng-container>
                         </div>
@@ -131,8 +134,8 @@
                             <ion-item class="ion-text-wrap" *ngFor="let plan of competency.plans" [href]="plan.url"
                                 [attr.aria-label]="plan.name" core-link capture="true">
                                 <ion-label>
-                                   <core-format-text [text]="plan.name" contextLevel="user" [contextInstanceId]="plan.userid">
-                                   </core-format-text>
+                                    <core-format-text [text]="plan.name" contextLevel="user" [contextInstanceId]="plan.userid">
+                                    </core-format-text>
                                 </ion-label>
                             </ion-item>
                         </div>
diff --git a/src/addons/competency/pages/plan/plan.html b/src/addons/competency/pages/plan/plan.html
index edebcf7ba..ff5035a62 100644
--- a/src/addons/competency/pages/plan/plan.html
+++ b/src/addons/competency/pages/plan/plan.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1 *ngIf="plan">{{plan.plan.name}}</h1>
+        <ion-title>
+            <h1 *ngIf="plan">{{plan.plan.name}}</h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
@@ -18,14 +20,13 @@
                     <h2>{{ user.fullname }}</h2>
                 </ion-label>
             </ion-item>
-       </ion-card>
+        </ion-card>
         <ion-card *ngIf="plan">
             <ion-list>
                 <ion-item class="ion-text-wrap" *ngIf="plan.plan.description" lines="none">
                     <ion-label>
                         <p>
-                            <core-format-text [text]="plan.plan.description" contextLevel="user"
-                                [contextInstanceId]="plan.plan.userid">
+                            <core-format-text [text]="plan.plan.description" contextLevel="user" [contextInstanceId]="plan.plan.userid">
                             </core-format-text>
                         </p>
                     </ion-label>
@@ -53,7 +54,7 @@
                         <p class="item-heading">{{ 'addon.competency.progress' | translate }}</p>
                         <p>
                             {{ 'addon.competency.xcompetenciesproficientoutofy' | translate:
-                                {$a: {x: plan.proficientcompetencycount, y: plan.competencycount} } }}
+                            {$a: {x: plan.proficientcompetencycount, y: plan.competencycount} } }}
                         </p>
                         <core-progress-bar [progress]="plan.proficientcompetencypercentage"
                             [text]="plan.proficientcompetencypercentageformatted"
@@ -74,15 +75,15 @@
                     </ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngFor="let competency of plan.competencies"
-                    (click)="openCompetency(competency.competency.id)"
-                    [attr.aria-label]="competency.competency.shortname" detail="true" button>
+                    (click)="openCompetency(competency.competency.id)" [attr.aria-label]="competency.competency.shortname" detail="true"
+                    button>
                     <ion-label>
                         <p class="item-heading">{{competency.competency.shortname}} <em>{{competency.competency.idnumber}}</em></p>
                     </ion-label>
                     <ion-badge *ngIf="competency.usercompetencyplan" slot="end"
                         [color]="competency.usercompetencyplan.proficiency ? 'success' : 'danger'">
-                            {{ competency.usercompetencyplan.gradename }}
-                        </ion-badge>
+                        {{ competency.usercompetencyplan.gradename }}
+                    </ion-badge>
                     <ion-badge *ngIf="!competency.usercompetencyplan" slot="end"
                         [color]="competency.usercompetency.proficiency ? 'success' : 'danger'">
                         {{ competency.usercompetency.gradename }}
diff --git a/src/addons/competency/pages/planlist/planlist.html b/src/addons/competency/pages/planlist/planlist.html
index 1b037fe48..214120779 100644
--- a/src/addons/competency/pages/planlist/planlist.html
+++ b/src/addons/competency/pages/planlist/planlist.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ 'addon.competency.userplans' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'addon.competency.userplans' | translate }}</h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
@@ -16,8 +18,8 @@
 
             </core-empty-box>
             <ion-list *ngIf="!plans.empty" class="ion-no-margin">
-                <ion-item class="ion-text-wrap" *ngFor="let plan of plans.items" [attr.aria-label]="plan.name"
-                    (click)="plans.select(plan)" [attr.aria-current]="plans.getItemAriaCurrent(plan)" button detail="true">
+                <ion-item class="ion-text-wrap" *ngFor="let plan of plans.items" [attr.aria-label]="plan.name" (click)="plans.select(plan)"
+                    [attr.aria-current]="plans.getItemAriaCurrent(plan)" button detail="true">
                     <ion-label>
                         <p class="item-heading">{{ plan.name }}</p>
                         <p *ngIf="plan.duedate > 0">
@@ -30,4 +32,4 @@
             </ion-list>
         </core-loading>
     </core-split-view>
-    </ion-content>
+</ion-content>
diff --git a/src/addons/coursecompletion/pages/report/report.html b/src/addons/coursecompletion/pages/report/report.html
index bc71b97f4..4c29301db 100644
--- a/src/addons/coursecompletion/pages/report/report.html
+++ b/src/addons/coursecompletion/pages/report/report.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ 'addon.coursecompletion.coursecompletion' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'addon.coursecompletion.coursecompletion' | translate }}</h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
@@ -28,14 +30,18 @@
         </ion-card>
         <ion-card *ngIf="completion && tracked">
             <ion-item-divider>
-                <ion-label><h2>{{ 'addon.coursecompletion.requiredcriteria' | translate }}</h2></ion-label>
+                <ion-label>
+                    <h2>{{ 'addon.coursecompletion.requiredcriteria' | translate }}</h2>
+                </ion-label>
             </ion-item-divider>
             <ion-item class="ion-hide-md-up ion-text-wrap" *ngFor="let criteria of completion.completions">
                 <ion-label>
                     <p class="item-heading">
                         <core-format-text clean="true" [text]="criteria.details.criteria" [filter]="false"></core-format-text>
                     </p>
-                    <p><core-format-text clean="true" [text]="criteria.details.requirement" [filter]="false"></core-format-text></p>
+                    <p>
+                        <core-format-text clean="true" [text]="criteria.details.requirement" [filter]="false"></core-format-text>
+                    </p>
                 </ion-label>
                 <strong slot="end">{{ criteria.status }}</strong>
             </ion-item>
@@ -73,7 +79,9 @@
         </ion-card>
         <ion-card *ngIf="showSelfComplete && tracked">
             <ion-item-divider>
-                <ion-label><h2>{{ 'addon.coursecompletion.manualselfcompletion' | translate }}</h2></ion-label>
+                <ion-label>
+                    <h2>{{ 'addon.coursecompletion.manualselfcompletion' | translate }}</h2>
+                </ion-label>
             </ion-item-divider>
             <ion-item>
                 <ion-label>
diff --git a/src/addons/messageoutput/airnotifier/pages/devices/devices.html b/src/addons/messageoutput/airnotifier/pages/devices/devices.html
index 02ea186de..255e061b5 100644
--- a/src/addons/messageoutput/airnotifier/pages/devices/devices.html
+++ b/src/addons/messageoutput/airnotifier/pages/devices/devices.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ 'addon.messageoutput_airnotifier.processorsettingsdesc' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'addon.messageoutput_airnotifier.processorsettingsdesc' | translate }}</h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
@@ -21,10 +23,7 @@
                     <p>{{ device.platform }} {{ device.version }}</p>
                 </ion-label>
                 <core-button-with-spinner [loading]="device.updating" slot="end">
-                    <ion-toggle
-                        [(ngModel)]="device.enable"
-                        (ngModelChange)="enableDevice(device, device.enable)"
-                    >
+                    <ion-toggle [(ngModel)]="device.enable" (ngModelChange)="enableDevice(device, device.enable)">
                     </ion-toggle>
                 </core-button-with-spinner>
             </ion-item>
diff --git a/src/addons/messages/components/conversation-info/conversation-info.html b/src/addons/messages/components/conversation-info/conversation-info.html
index 8a311ea57..59f120624 100644
--- a/src/addons/messages/components/conversation-info/conversation-info.html
+++ b/src/addons/messages/components/conversation-info/conversation-info.html
@@ -1,6 +1,8 @@
 <ion-header>
     <ion-toolbar>
-        <h2>{{ 'addon.messages.groupinfo' | translate }}</h2>
+        <ion-title>
+            <h2>{{ 'addon.messages.groupinfo' | translate }}</h2>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon name="fas-times" slot="icon-only" aria-hidden="true"></ion-icon>
@@ -18,7 +20,7 @@
             <ion-label>
                 <div class="large-avatar">
                     <img class="avatar" [src]="conversation!.imageurl" core-external-content [alt]="conversation!.name"
-                    onError="this.src='assets/img/group-avatar.png'">
+                        onError="this.src='assets/img/group-avatar.png'">
                 </div>
                 <h2>
                     <core-format-text [text]="conversation!.name" contextLevel="system" [contextInstanceId]="0"></core-format-text>
@@ -32,8 +34,8 @@
             </ion-label>
         </ion-item>
 
-        <ion-item class="ion-text-wrap addon-messages-conversation-item" *ngFor="let member of members"
-            (click)="closeModal(member.id)" detail="true" button>
+        <ion-item class="ion-text-wrap addon-messages-conversation-item" *ngFor="let member of members" (click)="closeModal(member.id)"
+            detail="true" button>
             <core-user-avatar [user]="member" [linkProfile]="false" [checkOnline]="member.showonlinestatus" slot="start">
             </core-user-avatar>
             <ion-label>
diff --git a/src/addons/messages/pages/contacts-35/contacts.html b/src/addons/messages/pages/contacts-35/contacts.html
index 21e96c278..285f07231 100644
--- a/src/addons/messages/pages/contacts-35/contacts.html
+++ b/src/addons/messages/pages/contacts-35/contacts.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ 'addon.messages.contacts' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'addon.messages.contacts' | translate }}</h1>
+        </ion-title>
         <ion-buttons slot="end">
         </ion-buttons>
     </ion-toolbar>
@@ -14,9 +16,8 @@
             <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
         </ion-refresher>
 
-        <core-search-box (onSubmit)="search($event)" (onClear)="clearSearch()"
-            [placeholder]="'addon.messages.contactname' | translate" autocorrect="off" spellcheck="false" lengthCheck="2"
-            [disabled]="!loaded" searchArea="AddonMessagesContacts"></core-search-box>
+        <core-search-box (onSubmit)="search($event)" (onClear)="clearSearch()" [placeholder]="'addon.messages.contactname' | translate"
+            autocorrect="off" spellcheck="false" lengthCheck="2" [disabled]="!loaded" searchArea="AddonMessagesContacts"></core-search-box>
 
         <core-loading [hideUntil]="loaded" [message]="loadingMessage">
             <core-empty-box *ngIf="!hasContacts && searchString == ''" icon="fas-address-book"
@@ -28,17 +29,23 @@
             <ion-list *ngFor="let contactType of contactTypes" class="ion-no-margin">
                 <ng-container *ngIf="contacts[contactType] && (contacts[contactType].length > 0 || contactType === searchType)">
                     <ion-item-divider>
-                        <ion-label><p class="item-heading">{{ 'addon.messages.type_' + contactType | translate }}</p></ion-label>
-                        <ion-note slot="end" class="ion-padding-end"><ion-badge>{{ contacts[contactType].length }}</ion-badge></ion-note>
+                        <ion-label>
+                            <p class="item-heading">{{ 'addon.messages.type_' + contactType | translate }}</p>
+                        </ion-label>
+                        <ion-note slot="end" class="ion-padding-end">
+                            <ion-badge>{{ contacts[contactType].length }}</ion-badge>
+                        </ion-note>
                     </ion-item-divider>
                     <ng-container *ngFor="let contact of contacts[contactType]">
                         <!-- Don't show deleted users -->
                         <ion-item class="ion-text-wrap addon-messages-conversation-item"
-                            *ngIf="contact.profileimageurl || contact.profileimageurlsmall"
-                            [attr.aria-label]="contact.fullname" (click)="gotoDiscussion(contact.id)" detail="true" button
+                            *ngIf="contact.profileimageurl || contact.profileimageurlsmall" [attr.aria-label]="contact.fullname"
+                            (click)="gotoDiscussion(contact.id)" detail="true" button
                             [attr.aria-current]="contact.id == discussionUserId ? 'page' : 'false'">
                             <core-user-avatar [user]="contact" slot="start" [checkOnline]="contact.showonlinestatus"></core-user-avatar>
-                            <ion-label><p class="item-heading">{{ contact.fullname }}</p></ion-label>
+                            <ion-label>
+                                <p class="item-heading">{{ contact.fullname }}</p>
+                            </ion-label>
                         </ion-item>
                     </ng-container>
                 </ng-container>
diff --git a/src/addons/messages/pages/contacts/contacts.html b/src/addons/messages/pages/contacts/contacts.html
index 26e59ea71..8a3cacd95 100644
--- a/src/addons/messages/pages/contacts/contacts.html
+++ b/src/addons/messages/pages/contacts/contacts.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ 'addon.messages.contacts' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'addon.messages.contacts' | translate }}</h1>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="gotoSearch()" [attr.aria-label]="'addon.messages.searchcombined' | translate">
                 <ion-icon name="fas-search" slot="icon-only" aria-hidden="true"></ion-icon>
@@ -26,8 +28,8 @@
                             <ion-item class="ion-text-wrap addon-messages-conversation-item" (click)="selectUser(contact.id)" button
                                 *ngFor="let contact of confirmedContacts" [attr.aria-label]="contact.fullname" detail="true"
                                 [attr.aria-current]="contact.id == selectedUserId ? 'page' : 'false'">
-                                <core-user-avatar slot="start" [user]="contact"
-                                    [checkOnline]="contact.showonlinestatus" [linkProfile]="false">
+                                <core-user-avatar slot="start" [user]="contact" [checkOnline]="contact.showonlinestatus"
+                                    [linkProfile]="false">
                                 </core-user-avatar>
                                 <ion-label>
                                     <p class="item-heading">
@@ -45,8 +47,8 @@
                             [message]="'addon.messages.nocontactsgetstarted' | translate">
                         </core-empty-box>
 
-                        <core-infinite-loading [enabled]="confirmedCanLoadMore" (action)="loadMore($event)"
-                            [error]="confirmedLoadMoreError" position="bottom">
+                        <core-infinite-loading [enabled]="confirmedCanLoadMore" (action)="loadMore($event)" [error]="confirmedLoadMoreError"
+                            position="bottom">
                         </core-infinite-loading>
                     </core-loading>
                 </ng-template>
@@ -77,8 +79,8 @@
                         <core-empty-box *ngIf="!requests.length" icon="far-address-book"
                             [message]="'addon.messages.nocontactrequests' | translate">
                         </core-empty-box>
-                        <core-infinite-loading [enabled]="requestsCanLoadMore" (action)="loadMore($event)"
-                            [error]="requestsLoadMoreError" position="bottom">
+                        <core-infinite-loading [enabled]="requestsCanLoadMore" (action)="loadMore($event)" [error]="requestsLoadMoreError"
+                            position="bottom">
                         </core-infinite-loading>
                     </core-loading>
                 </ng-template>
diff --git a/src/addons/messages/pages/discussion/discussion.html b/src/addons/messages/pages/discussion/discussion.html
index f38237550..06978fd47 100644
--- a/src/addons/messages/pages/discussion/discussion.html
+++ b/src/addons/messages/pages/discussion/discussion.html
@@ -3,59 +3,56 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <img *ngIf="loaded && !otherMember && conversationImage" class="core-bar-button-image" [src]="conversationImage"
-                alt="" onError="this.src='assets/img/group-avatar.png'" core-external-content role="presentation"
-                [siteId]="siteId || null">
-            <core-user-avatar *ngIf="loaded && otherMember" class="core-bar-button-image" [user]="otherMember"
-                [linkProfile]="false" [checkOnline]="otherMember.showonlinestatus">
-            </core-user-avatar>
-            <core-format-text [text]="title" contextLevel="system" [contextInstanceId]="0"></core-format-text>
-            <ion-icon *ngIf="conversation && conversation.isfavourite" name="fas-star"
-                [attr.aria-label]="'core.favourites' | translate">
-            </ion-icon>
-            <ion-icon *ngIf="conversation && conversation.ismuted" name="fas-bell-slash"
-                [attr.aria-label]="'addon.messages.mutedconversation' | translate">
-            </ion-icon>
-        </h1>
+        <ion-title>
+            <h1>
+                <img *ngIf="loaded && !otherMember && conversationImage" class="core-bar-button-image" [src]="conversationImage" alt=""
+                    onError="this.src='assets/img/group-avatar.png'" core-external-content role="presentation" [siteId]="siteId || null">
+                <core-user-avatar *ngIf="loaded && otherMember" class="core-bar-button-image" [user]="otherMember" [linkProfile]="false"
+                    [checkOnline]="otherMember.showonlinestatus">
+                </core-user-avatar>
+                <core-format-text [text]="title" contextLevel="system" [contextInstanceId]="0"></core-format-text>
+                <ion-icon *ngIf="conversation && conversation.isfavourite" name="fas-star"
+                    [attr.aria-label]="'core.favourites' | translate">
+                </ion-icon>
+                <ion-icon *ngIf="conversation && conversation.ismuted" name="fas-bell-slash"
+                    [attr.aria-label]="'addon.messages.mutedconversation' | translate">
+                </ion-icon>
+            </h1>
+        </ion-title>
         <ion-buttons slot="end"></ion-buttons>
     </ion-toolbar>
     <core-navbar-buttons slot="end">
         <core-context-menu [attr.aria-label]="'addon.messages.conversationactions' | translate">
             <core-context-menu-item [hidden]="isSelf || !showInfo || isGroup" [priority]="1000"
-                [content]="'addon.messages.info' | translate" (action)="viewInfo()"
-                iconAction="fas-info-circle"></core-context-menu-item>
+                [content]="'addon.messages.info' | translate" (action)="viewInfo()" iconAction="fas-info-circle"></core-context-menu-item>
             <core-context-menu-item [hidden]="isSelf || !showInfo || !isGroup" [priority]="1000"
-                [content]="'addon.messages.groupinfo' | translate" (action)="viewInfo()"
-                iconAction="fas-info-circle"></core-context-menu-item>
-            <core-context-menu-item [hidden]="!groupMessagingEnabled || !conversation" [priority]="800"
-                [content]="(conversation && conversation.isfavourite ? 'addon.messages.removefromfavourites' :
-                'addon.messages.addtofavourites') | translate"
-                (action)="changeFavourite($event)" [closeOnClick]="false" [iconAction]="favouriteIcon"
-                [iconSlash]="favouriteIconSlash"></core-context-menu-item>
+                [content]="'addon.messages.groupinfo' | translate" (action)="viewInfo()" iconAction="fas-info-circle">
+            </core-context-menu-item>
+            <core-context-menu-item [hidden]="!groupMessagingEnabled || !conversation" [priority]="800" [content]="(conversation && conversation.isfavourite ? 'addon.messages.removefromfavourites' :
+                'addon.messages.addtofavourites') | translate" (action)="changeFavourite($event)" [closeOnClick]="false"
+                [iconAction]="favouriteIcon" [iconSlash]="favouriteIconSlash"></core-context-menu-item>
             <core-context-menu-item [hidden]="isSelf || !otherMember || otherMember.isblocked" [priority]="700"
                 [content]="'addon.messages.blockuser' | translate" (action)="blockUser()" [iconAction]="blockIcon">
             </core-context-menu-item>
             <core-context-menu-item [hidden]="isSelf || !otherMember || !otherMember.isblocked" [priority]="700"
                 [content]="'addon.messages.unblockuser' | translate" (action)="unblockUser()" [iconAction]="blockIcon">
             </core-context-menu-item>
-            <core-context-menu-item [hidden]="isSelf || !muteEnabled || !conversation" [priority]="600"
-                [content]="(conversation && conversation.ismuted ? 'addon.messages.unmuteconversation' :
+            <core-context-menu-item [hidden]="isSelf || !muteEnabled || !conversation" [priority]="600" [content]="(conversation && conversation.ismuted ? 'addon.messages.unmuteconversation' :
                 'addon.messages.muteconversation') | translate" (action)="changeMute($event)" [closeOnClick]="false"
                 [iconAction]="muteIcon"></core-context-menu-item>
             <core-context-menu-item [hidden]="!canDelete || !messages || !messages.length" [priority]="400"
-                [content]="'addon.messages.showdeletemessages' | translate"
-                iconAction="toggle" [(toggle)]="showDelete"></core-context-menu-item>
+                [content]="'addon.messages.showdeletemessages' | translate" iconAction="toggle" [(toggle)]="showDelete">
+            </core-context-menu-item>
             <core-context-menu-item [hidden]="!groupMessagingEnabled || !conversationId || isGroup || !messages || !messages.length"
                 [priority]="200" [content]="'addon.messages.deleteconversation' | translate" (action)="deleteConversation($event)"
                 [closeOnClick]="false" [iconAction]="deleteIcon"></core-context-menu-item>
             <core-context-menu-item
-                [hidden]="isSelf || !otherMember || otherMember.iscontact || requestContactSent || requestContactReceived"
-                [priority]="100" [content]="'addon.messages.addtoyourcontacts' | translate" (action)="createContactRequest()"
-                [iconAction]="addRemoveIcon"></core-context-menu-item>
+                [hidden]="isSelf || !otherMember || otherMember.iscontact || requestContactSent || requestContactReceived" [priority]="100"
+                [content]="'addon.messages.addtoyourcontacts' | translate" (action)="createContactRequest()" [iconAction]="addRemoveIcon">
+            </core-context-menu-item>
             <core-context-menu-item [hidden]="isSelf || !otherMember || !otherMember.iscontact" [priority]="100"
-                [content]="'addon.messages.removefromyourcontacts' | translate" (action)="removeContact()"
-                [iconAction]="addRemoveIcon" [iconSlash]="true"></core-context-menu-item>
+                [content]="'addon.messages.removefromyourcontacts' | translate" (action)="removeContact()" [iconAction]="addRemoveIcon"
+                [iconSlash]="true"></core-context-menu-item>
         </core-context-menu>
     </core-navbar-buttons>
 </ion-header>
@@ -72,15 +69,13 @@
 
         <h2 class="sr-only">{{ title }}</h2>
 
-        <ion-list class="addon-messages-discussion-container" [class.addon-messages-discussion-group]="isGroup"
-            [attr.aria-live]="'polite'">
+        <ion-list class="addon-messages-discussion-container" [class.addon-messages-discussion-group]="isGroup" [attr.aria-live]="'polite'">
             <ng-container *ngFor="let message of messages; index as index; last as last">
                 <h3 class="ion-text-center addon-messages-date" *ngIf="message.showDate">
                     {{ message.timecreated | coreFormatDate: "strftimedayshort" }}
                 </h3>
 
-                <ion-chip class="addon-messages-unreadfrom" *ngIf="unreadMessageFrom && message.id == unreadMessageFrom"
-                    color="light">
+                <ion-chip class="addon-messages-unreadfrom" *ngIf="unreadMessageFrom && message.id == unreadMessageFrom" color="light">
                     <ion-label>{{ 'addon.messages.newmessages' | translate }}</ion-label>
                     <ion-icon name="fas-arrow-down" aria-hidden="true"></ion-icon>
                 </ion-chip>
@@ -93,8 +88,7 @@
                     <ion-label>
                         <!-- User data. -->
                         <div *ngIf="message.showUserData" class="item-heading addon-message-user">
-                            <core-user-avatar slot="start" [user]="members[message.useridfrom]" [linkProfile]="false"
-                                aria-hidden="true">
+                            <core-user-avatar slot="start" [user]="members[message.useridfrom]" [linkProfile]="false" aria-hidden="true">
                             </core-user-avatar>
                             <div>{{ members[message.useridfrom].fullname }}</div>
                         </div>
diff --git a/src/addons/messages/pages/discussions-35/discussions.html b/src/addons/messages/pages/discussions-35/discussions.html
index 8824fe578..63fa5426d 100644
--- a/src/addons/messages/pages/discussions-35/discussions.html
+++ b/src/addons/messages/pages/discussions-35/discussions.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ 'addon.messages.messages' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'addon.messages.messages' | translate }}</h1>
+        </ion-title>
         <ion-buttons slot="end">
             <core-user-menu-button></core-user-menu-button>
         </ion-buttons>
@@ -15,9 +17,9 @@
             <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
         </ion-refresher>
 
-        <core-search-box (onSubmit)="searchMessage($event)" (onClear)="clearSearch()"
-            [placeholder]=" 'addon.messages.message' | translate" autocorrect="off" spellcheck="false" lengthCheck="2"
-            [disabled]="!loaded" searchArea="AddonMessagesDiscussions" [autoFocus]="false"></core-search-box>
+        <core-search-box (onSubmit)="searchMessage($event)" (onClear)="clearSearch()" [placeholder]=" 'addon.messages.message' | translate"
+            autocorrect="off" spellcheck="false" lengthCheck="2" [disabled]="!loaded" searchArea="AddonMessagesDiscussions"
+            [autoFocus]="false"></core-search-box>
 
         <core-loading [hideUntil]="loaded" [message]="loadingMessage">
 
@@ -26,7 +28,9 @@
                 <ion-item class="ion-text-wrap addon-message-discussion" (click)="gotoContacts()"
                     [attr.aria-label]="'addon.messages.contacts' | translate" detail="true" button>
                     <ion-icon name="fas-address-book" slot="start" aria-hidden="true"></ion-icon>
-                    <ion-label><h2>{{ 'addon.messages.contacts' | translate }}</h2></ion-label>
+                    <ion-label>
+                        <h2>{{ 'addon.messages.contacts' | translate }}</h2>
+                    </ion-label>
                 </ion-item>
 
                 <ng-container *ngIf="search.showResults">
@@ -34,7 +38,9 @@
                         <ion-label>
                             <h2>{{ 'core.searchresults' | translate }}</h2>
                         </ion-label>
-                        <ion-note slot="end" class="ion-padding-end"><ion-badge>{{ search.results.length }}</ion-badge></ion-note>
+                        <ion-note slot="end" class="ion-padding-end">
+                            <ion-badge>{{ search.results.length }}</ion-badge>
+                        </ion-note>
                     </ion-item-divider>
                     <ion-item class="ion-text-wrap addon-message-discussion" *ngFor="let result of search.results" button
                         [attr.aria-label]="result.fullname" (click)="gotoDiscussion(result.userid, result.messageid)"
@@ -42,8 +48,10 @@
                         <core-user-avatar [user]="result" slot="start" [checkOnline]="result.showonlinestatus"></core-user-avatar>
                         <ion-label>
                             <p class="item-heading">{{ result.fullname }}</p>
-                            <p><core-format-text clean="true" singleLine="true" [text]="result.lastmessage" contextLevel="system"
-                                [contextInstanceId]="0"></core-format-text></p>
+                            <p>
+                                <core-format-text clean="true" singleLine="true" [text]="result.lastmessage" contextLevel="system"
+                                    [contextInstanceId]="0"></core-format-text>
+                            </p>
                         </ion-label>
                     </ion-item>
                 </ng-container>
@@ -67,8 +75,8 @@
                                 </ion-note>
                             </div>
                             <p>
-                                <core-format-text clean="true" singleLine="true" [text]="discussion.message!.message"
-                                    contextLevel="system" [contextInstanceId]="0">
+                                <core-format-text clean="true" singleLine="true" [text]="discussion.message!.message" contextLevel="system"
+                                    [contextInstanceId]="0">
                                 </core-format-text>
                             </p>
                         </ion-label>
diff --git a/src/addons/messages/pages/group-conversations/group-conversations.html b/src/addons/messages/pages/group-conversations/group-conversations.html
index d55475d6c..bfd14752d 100644
--- a/src/addons/messages/pages/group-conversations/group-conversations.html
+++ b/src/addons/messages/pages/group-conversations/group-conversations.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ 'addon.messages.messages' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'addon.messages.messages' | translate }}</h1>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="gotoSearch()" [attr.aria-label]="'addon.messages.searchcombined' | translate">
                 <ion-icon name="fas-search" slot="icon-only" aria-hidden="true"></ion-icon>
@@ -25,28 +27,25 @@
             <ion-list>
                 <ion-item class="ion-text-wrap addon-message-discussion" (click)="gotoContacts()" detail="true" button>
                     <ion-icon name="fas-address-book" slot="start" aria-hidden="true"></ion-icon>
-                    <ion-label><h2>{{ 'addon.messages.contacts' | translate }}</h2></ion-label>
+                    <ion-label>
+                        <h2>{{ 'addon.messages.contacts' | translate }}</h2>
+                    </ion-label>
                     <ion-badge *ngIf="contactRequestsCount > 0" slot="end" aria-hidden="true">{{contactRequestsCount}}</ion-badge>
                     <span *ngIf="contactRequestsCount > 0" class="sr-only">
                         {{ 'addon.messages.pendingcontactrequests' | translate:{$a: contactRequestsCount} }}
                     </span>
                 </ion-item>
                 <!-- Favourite conversations. -->
-                <ion-item
-                    button
-                    class="ion-text-wrap divider"
-                    (click)="toggle(favourites)"
-                    sticky="true"
+                <ion-item button class="ion-text-wrap divider" (click)="toggle(favourites)" sticky="true"
                     [attr.aria-label]="(favourites.expanded ? 'core.collapse' : 'core.expand') | translate"
-                    [attr.aria-expanded]="favourites.expanded"
-                    aria-controls="addon-messages-groupconversations-favourite"
-                    role="heading"
-                    detail="false"
-                >
+                    [attr.aria-expanded]="favourites.expanded" aria-controls="addon-messages-groupconversations-favourite" role="heading"
+                    detail="false">
                     <ion-icon *ngIf="!favourites.expanded" name="fas-caret-right" flip-rtl slot="start" aria-hidden="true">
                     </ion-icon>
                     <ion-icon *ngIf="favourites.expanded" name="fas-caret-down" slot="start" aria-hidden="true"></ion-icon>
-                    <ion-label><h2>{{ 'core.favourites' | translate }} ({{ favourites.count }})</h2></ion-label>
+                    <ion-label>
+                        <h2>{{ 'core.favourites' | translate }} ({{ favourites.count }})</h2>
+                    </ion-label>
                     <ion-badge slot="end" *ngIf="favourites.unread" aria-hidden="true">{{ favourites.unread }}</ion-badge>
                     <span *ngIf="favourites.unread" class="sr-only">
                         {{ 'addon.messages.unreadconversations' | translate:{$a: favourites.unread} }}
@@ -60,28 +59,26 @@
                     <core-infinite-loading [enabled]="favourites.canLoadMore" (action)="loadMoreConversations(favourites, $event)"
                         [error]="favourites.loadMoreError"></core-infinite-loading>
                     <ion-item class="ion-text-wrap" *ngIf="favourites.conversations && favourites.conversations.length == 0">
-                        <ion-label><p>{{ 'addon.messages.nofavourites' | translate }}</p></ion-label>
+                        <ion-label>
+                            <p>{{ 'addon.messages.nofavourites' | translate }}</p>
+                        </ion-label>
                     </ion-item>
                 </div>
                 <ion-item class="ion-text-center" *ngIf="favourites.loading">
-                    <ion-label><ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner></ion-label>
+                    <ion-label>
+                        <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+                    </ion-label>
                 </ion-item>
 
                 <!-- Group conversations. -->
-                <ion-item
-                    button
-                    class="divider ion-text-wrap"
-                    (click)="toggle(group)"
-                    sticky="true"
-                    [attr.aria-label]="(group.expanded ? 'core.collapse' : 'core.expand') | translate"
-                    [attr.aria-expanded]="group.expanded"
-                    aria-controls="addon-messages-groupconversations-group"
-                    role="heading"
-                    detail="false"
-                >
+                <ion-item button class="divider ion-text-wrap" (click)="toggle(group)" sticky="true"
+                    [attr.aria-label]="(group.expanded ? 'core.collapse' : 'core.expand') | translate" [attr.aria-expanded]="group.expanded"
+                    aria-controls="addon-messages-groupconversations-group" role="heading" detail="false">
                     <ion-icon *ngIf="!group.expanded" name="fas-caret-right" flip-rtl slot="start" aria-hidden="true"></ion-icon>
                     <ion-icon *ngIf="group.expanded" name="fas-caret-down" slot="start" aria-hidden="true"></ion-icon>
-                    <ion-label><h2>{{ 'addon.messages.groupconversations' | translate }} ({{ group.count }})</h2></ion-label>
+                    <ion-label>
+                        <h2>{{ 'addon.messages.groupconversations' | translate }} ({{ group.count }})</h2>
+                    </ion-label>
                     <ion-badge slot="end" *ngIf="group.unread" aria-hidden="true">{{ group.unread }}</ion-badge>
                     <span *ngIf="group.unread" class="sr-only">
                         {{ 'addon.messages.unreadconversations' | translate:{$a: group.unread} }}
@@ -95,24 +92,21 @@
                     <core-infinite-loading [enabled]="group.canLoadMore" (action)="loadMoreConversations(group, $event)"
                         [error]="group.loadMoreError"></core-infinite-loading>
                     <ion-item class="ion-text-wrap" *ngIf="group.conversations && group.conversations.length == 0">
-                        <ion-label><p>{{ 'addon.messages.nogroupconversations' | translate }}</p></ion-label>
+                        <ion-label>
+                            <p>{{ 'addon.messages.nogroupconversations' | translate }}</p>
+                        </ion-label>
                     </ion-item>
                 </div>
                 <ion-item class="ion-text-center" *ngIf="group.loading">
-                    <ion-label><ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner></ion-label>
+                    <ion-label>
+                        <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+                    </ion-label>
                 </ion-item>
 
-                <ion-item
-                    button
-                    class="divider ion-text-wrap"
-                    (click)="toggle(individual)"
-                    sticky="true"
+                <ion-item button class="divider ion-text-wrap" (click)="toggle(individual)" sticky="true"
                     [attr.aria-label]="(individual.expanded ? 'core.collapse' : 'core.expand') | translate"
-                    [attr.aria-expanded]="individual.expanded"
-                    aria-controls="addon-messages-groupconversations-individual"
-                    role="heading"
-                    detail="false"
-                >
+                    [attr.aria-expanded]="individual.expanded" aria-controls="addon-messages-groupconversations-individual" role="heading"
+                    detail="false">
                     <ion-icon *ngIf="!individual.expanded" name="fas-caret-right" flip-rtl slot="start" aria-hidden="true">
                     </ion-icon>
                     <ion-icon *ngIf="individual.expanded" name="fas-caret-down" slot="start" aria-hidden="true"></ion-icon>
@@ -132,11 +126,15 @@
                     <core-infinite-loading [enabled]="individual.canLoadMore" (action)="loadMoreConversations(individual, $event)"
                         [error]="individual.loadMoreError"></core-infinite-loading>
                     <ion-item class="ion-text-wrap" *ngIf="individual.conversations && individual.conversations.length == 0">
-                        <ion-label><p>{{ 'addon.messages.noindividualconversations' | translate }}</p></ion-label>
+                        <ion-label>
+                            <p>{{ 'addon.messages.noindividualconversations' | translate }}</p>
+                        </ion-label>
                     </ion-item>
                 </div>
                 <ion-item class="ion-text-center" *ngIf="individual.loading">
-                    <ion-label><ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner></ion-label>
+                    <ion-label>
+                        <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+                    </ion-label>
                 </ion-item>
 
             </ion-list>
@@ -147,28 +145,27 @@
 <!-- Template to render a list of conversations. -->
 <ng-template #conversationsTemplate let-conversations="conversations">
     <ion-item class="ion-text-wrap addon-message-discussion" *ngFor="let conversation of conversations" button detail="false"
-        [attr.aria-label]="conversation.name" (click)="gotoConversation(conversation.id, conversation.userid)"
-        [attr.aria-current]="((conversation.id && conversation.id == selectedConversationId) ||
+        [attr.aria-label]="conversation.name" (click)="gotoConversation(conversation.id, conversation.userid)" [attr.aria-current]="((conversation.id && conversation.id == selectedConversationId) ||
             (conversation.userid && conversation.userid == selectedUserId)) ? 'page': 'false'"
         id="addon-message-conversation-{{ conversation.id ? conversation.id : 'user-' + conversation.userid }}">
         <!-- Group conversation image. -->
         <ion-avatar slot="start" *ngIf="conversation.type == typeGroup">
             <img [src]="conversation.imageurl" [alt]="conversation.name" core-external-content
-            onError="this.src='assets/img/group-avatar.png'">
+                onError="this.src='assets/img/group-avatar.png'">
         </ion-avatar>
 
         <!-- Avatar for individual conversations. -->
-        <core-user-avatar *ngIf="conversation.type != typeGroup" core-user-avatar [user]="conversation.otherUser"
-            [linkProfile]="false" [checkOnline]="conversation.showonlinestatus" slot="start"></core-user-avatar>
+        <core-user-avatar *ngIf="conversation.type != typeGroup" core-user-avatar [user]="conversation.otherUser" [linkProfile]="false"
+            [checkOnline]="conversation.showonlinestatus" slot="start"></core-user-avatar>
 
         <ion-label>
             <div class="flex-row ion-justify-content-between">
                 <p class="item-heading">
                     <core-format-text [text]="conversation.name" contextLevel="system" [contextInstanceId]="0"></core-format-text>
-                    <ion-icon name="fas-user-slash" *ngIf="conversation.isblocked"
-                        [title]="'addon.messages.contactblocked' | translate"></ion-icon>
-                    <ion-icon *ngIf="conversation.ismuted" name="fas-volume-mute"
-                        [title]="'addon.messages.mutedconversation' | translate"></ion-icon>
+                    <ion-icon name="fas-user-slash" *ngIf="conversation.isblocked" [title]="'addon.messages.contactblocked' | translate">
+                    </ion-icon>
+                    <ion-icon *ngIf="conversation.ismuted" name="fas-volume-mute" [title]="'addon.messages.mutedconversation' | translate">
+                    </ion-icon>
                 </p>
                 <ion-note *ngIf="conversation.lastmessagedate > 0 || conversation.unreadcount">
                     <span *ngIf="conversation.lastmessagedate > 0" class="addon-message-last-message-date">
@@ -180,16 +177,17 @@
                     </span>
                 </ion-note>
             </div>
-            <p *ngIf="conversation.subname"><core-format-text [text]="conversation.subname" contextLevel="system"
-                [contextInstanceId]="0"></core-format-text></p>
+            <p *ngIf="conversation.subname">
+                <core-format-text [text]="conversation.subname" contextLevel="system" [contextInstanceId]="0"></core-format-text>
+            </p>
             <p class="addon-message-last-message">
                 <span *ngIf="conversation.sentfromcurrentuser" class="addon-message-last-message-user">
                     {{ 'addon.messages.you' | translate }}
                 </span>
                 <span *ngIf="!conversation.sentfromcurrentuser && conversation.type == typeGroup && conversation.members[0]"
                     class="addon-message-last-message-user">{{ conversation.members[0].fullname + ':' }}</span>
-                <core-format-text clean="true" singleLine="true" [text]="conversation.lastmessage"
-                    class="addon-message-last-message-text" contextLevel="system" [contextInstanceId]="0"></core-format-text>
+                <core-format-text clean="true" singleLine="true" [text]="conversation.lastmessage" class="addon-message-last-message-text"
+                    contextLevel="system" [contextInstanceId]="0"></core-format-text>
             </p>
         </ion-label>
     </ion-item>
diff --git a/src/addons/messages/pages/search/search.html b/src/addons/messages/pages/search/search.html
index d3700d20e..6c5d98f08 100644
--- a/src/addons/messages/pages/search/search.html
+++ b/src/addons/messages/pages/search/search.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ 'addon.messages.searchcombined' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'addon.messages.searchcombined' | translate }}</h1>
+        </ion-title>
         <ion-buttons slot="end">
         </ion-buttons>
     </ion-toolbar>
@@ -23,8 +25,7 @@
                     [error]="messages.loadMoreError"></core-infinite-loading>
             </ion-list>
 
-            <core-empty-box
-                *ngIf="displayResults && !contacts.results.length && !nonContacts.results.length && !messages.results.length"
+            <core-empty-box *ngIf="displayResults && !contacts.results.length && !nonContacts.results.length && !messages.results.length"
                 icon="fas-search" [message]="'core.noresults' | translate">
             </core-empty-box>
         </core-loading>
@@ -35,20 +36,20 @@
 <ng-template #resultsTemplate let-item="item">
     <ng-container *ngIf="item.results.length > 0">
         <ion-item-divider class="ion-text-wrap">
-            <ion-label><h2>{{ item.titleString | translate }}</h2></ion-label>
+            <ion-label>
+                <h2>{{ item.titleString | translate }}</h2>
+            </ion-label>
         </ion-item-divider>
 
         <!-- List of results -->
         <ion-item class="addon-message-discussion ion-text-wrap" *ngFor="let result of item.results" [attr.aria-label]="result.fullname"
-            (click)="openConversation(result)" [attr.aria-current]="result == selectedResult ? 'page' : 'false'" detail="true"
-            button>
+            (click)="openConversation(result)" [attr.aria-current]="result == selectedResult ? 'page' : 'false'" detail="true" button>
             <core-user-avatar slot="start" [user]="result" [checkOnline]="true" [linkProfile]="false"></core-user-avatar>
             <ion-label>
                 <p class="item-heading">
                     <core-format-text [text]="result.fullname" [highlight]="result.highlightName" [filter]="false">
                     </core-format-text>
-                    <ion-icon name="fas-ban" *ngIf="result.isblocked"
-                        [attr.aria-label]="'addon.messages.contactblocked' | translate">
+                    <ion-icon name="fas-ban" *ngIf="result.isblocked" [attr.aria-label]="'addon.messages.contactblocked' | translate">
                     </ion-icon>
                 </p>
                 <ion-note *ngIf="result.lastmessagedate > 0">
@@ -58,9 +59,8 @@
                     <span *ngIf="result.sentfromcurrentuser" class="addon-message-last-message-user">
                         {{ 'addon.messages.you' | translate }}
                     </span>
-                    <core-format-text clean="true" singleLine="true" [text]="result.lastmessage"
-                        [highlight]="result.highlightMessage" contextLevel="system" [contextInstanceId]="0"
-                        class="addon-message-last-message-text"></core-format-text>
+                    <core-format-text clean="true" singleLine="true" [text]="result.lastmessage" [highlight]="result.highlightMessage"
+                        contextLevel="system" [contextInstanceId]="0" class="addon-message-last-message-text"></core-format-text>
                 </p>
             </ion-label>
         </ion-item>
diff --git a/src/addons/messages/pages/settings/settings.html b/src/addons/messages/pages/settings/settings.html
index 9a1721a24..997cc0277 100644
--- a/src/addons/messages/pages/settings/settings.html
+++ b/src/addons/messages/pages/settings/settings.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ 'addon.messages.messages' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'addon.messages.messages' | translate }}</h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
@@ -14,15 +16,17 @@
         <!-- Contactable privacy. -->
         <ion-card>
             <ion-item *ngIf="!advancedContactable">
-              <ion-label>{{ 'addon.messages.blocknoncontacts' | translate }}</ion-label>
-              <ion-toggle [(ngModel)]="contactablePrivacy" (ngModelChange)="saveContactablePrivacy(contactablePrivacy)">
-              </ion-toggle>
+                <ion-label>{{ 'addon.messages.blocknoncontacts' | translate }}</ion-label>
+                <ion-toggle [(ngModel)]="contactablePrivacy" (ngModelChange)="saveContactablePrivacy(contactablePrivacy)">
+                </ion-toggle>
             </ion-item>
 
             <ion-list *ngIf="advancedContactable" class="ion-text-wrap">
                 <ion-radio-group [(ngModel)]="contactablePrivacy" (ionChange)="saveContactablePrivacy(contactablePrivacy)">
                     <ion-item-divider>
-                        <ion-label><h2>{{ 'addon.messages.contactableprivacy' | translate }}</h2></ion-label>
+                        <ion-label>
+                            <h2>{{ 'addon.messages.contactableprivacy' | translate }}</h2>
+                        </ion-label>
                     </ion-item-divider>
                     <ion-item>
                         <ion-label>{{ 'addon.messages.contactableprivacy_onlycontacts' | translate }}</ion-label>
@@ -66,16 +70,9 @@
                         <ng-container *ngIf="groupMessagingEnabled">
                             <ion-item class="ion-text-wrap">
                                 <ion-label>{{ processor.displayname }}</ion-label>
-                                <core-button-with-spinner
-                                    *ngIf="!preferences.disableall"
-                                    [loading]="!!notification.updating"
-                                    slot="end"
-                                >
-                                    <ion-toggle
-                                        *ngIf="!processor.locked"
-                                        [(ngModel)]="processor.checked"
-                                        (ngModelChange)="changePreference(notification, '', processor)"
-                                    >
+                                <core-button-with-spinner *ngIf="!preferences.disableall" [loading]="!!notification.updating" slot="end">
+                                    <ion-toggle *ngIf="!processor.locked" [(ngModel)]="processor.checked"
+                                        (ngModelChange)="changePreference(notification, '', processor)">
                                     </ion-toggle>
                                     <ion-note *ngIf="processor.locked">
                                         {{ processor.lockedmessage }}
@@ -92,15 +89,11 @@
                             <ion-row class="ion-text-wrap ion-hide-md-down ion-align-items-center">
                                 <ion-col class="ion-margin-horizontal">{{ processor.displayname }}</ion-col>
                                 <ion-col size="2" class="ion-text-center" *ngFor="let state of ['loggedin', 'loggedoff']">
-                                    <core-button-with-spinner
-                                        *ngIf="!preferences.disableall"
-                                        [loading]="notification.updating && notification.updating[state]"
-                                    >
+                                    <core-button-with-spinner *ngIf="!preferences.disableall"
+                                        [loading]="notification.updating && notification.updating[state]">
                                         <!-- If notifications not disabled, show toggle. -->
-                                        <ion-toggle *ngIf="!processor.locked"
-                                            [(ngModel)]="processor[state].checked"
-                                            (ngModelChange)="changePreference(notification, state, processor)"
-                                        >
+                                        <ion-toggle *ngIf="!processor.locked" [(ngModel)]="processor[state].checked"
+                                            (ngModelChange)="changePreference(notification, state, processor)">
                                         </ion-toggle>
                                         <div class="ion-padding text-gray" *ngIf="processor.locked">
                                             {{'core.settings.locked' | translate }}
@@ -118,14 +111,10 @@
                                 If notifications are disabled, show "Disabled" instead of toggle. -->
                             <ion-item *ngFor="let state of ['loggedin', 'loggedoff']" class="ion-text-wrap ion-hide-md-up">
                                 <ion-label>{{ 'core.settings.' + state | translate }}</ion-label>
-                                <core-button-with-spinner slot="end"
-                                    *ngIf="!preferences.disableall"
-                                    [loading]="notification.updating && notification.updating[state]"
-                                >
-                                    <ion-toggle *ngIf="!processor.locked"
-                                        [(ngModel)]="processor[state].checked"
-                                        (ngModelChange)="changePreference(notification, state, processor)"
-                                    >
+                                <core-button-with-spinner slot="end" *ngIf="!preferences.disableall"
+                                    [loading]="notification.updating && notification.updating[state]">
+                                    <ion-toggle *ngIf="!processor.locked" [(ngModel)]="processor[state].checked"
+                                        (ngModelChange)="changePreference(notification, state, processor)">
                                     </ion-toggle>
                                     <ion-note *ngIf="processor.locked">
                                         {{'core.settings.locked' | translate }}
@@ -144,7 +133,11 @@
         <!-- General settings. -->
         <ion-card>
             <ion-list class="ion-text-wrap">
-                <ion-item-divider><ion-label><h2>{{ 'core.settings.general' | translate }}</h2></ion-label></ion-item-divider>
+                <ion-item-divider>
+                    <ion-label>
+                        <h2>{{ 'core.settings.general' | translate }}</h2>
+                    </ion-label>
+                </ion-item-divider>
                 <ion-item class="ion-text-wrap">
                     <ion-label>
                         <p class="item-heading">{{ 'addon.messages.useentertosend' | translate }}</p>
diff --git a/src/addons/mod/assign/components/edit-feedback-modal/edit-feedback-modal.html b/src/addons/mod/assign/components/edit-feedback-modal/edit-feedback-modal.html
index 6e5868cce..f24b5d9b3 100644
--- a/src/addons/mod/assign/components/edit-feedback-modal/edit-feedback-modal.html
+++ b/src/addons/mod/assign/components/edit-feedback-modal/edit-feedback-modal.html
@@ -1,6 +1,8 @@
 <ion-header>
     <ion-toolbar>
-        <h2>{{ plugin.name }}</h2>
+        <ion-title>
+            <h2>{{ plugin.name }}</h2>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-times" aria-hidden="true"></ion-icon>
@@ -10,8 +12,7 @@
 </ion-header>
 <ion-content>
     <form name="addon-mod_assign-edit-feedback-form" *ngIf="userId && plugin" #editFeedbackForm>
-        <addon-mod-assign-feedback-plugin [assign]="assign" [submission]="submission" [userId]="userId"
-            [plugin]="plugin" [edit]="true">
+        <addon-mod-assign-feedback-plugin [assign]="assign" [submission]="submission" [userId]="userId" [plugin]="plugin" [edit]="true">
         </addon-mod-assign-feedback-plugin>
         <ion-button expand="block" (click)="done($event)">{{ 'core.done' | translate }}</ion-button>
     </form>
diff --git a/src/addons/mod/assign/pages/edit/edit.html b/src/addons/mod/assign/pages/edit/edit.html
index 0b4882748..fab97200b 100644
--- a/src/addons/mod/assign/pages/edit/edit.html
+++ b/src/addons/mod/assign/pages/edit/edit.html
@@ -3,10 +3,12 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="moduleId" [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="moduleId" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="save()">
                 {{ 'core.save' | translate }}
diff --git a/src/addons/mod/assign/pages/index/index.html b/src/addons/mod/assign/pages/index/index.html
index c64cbdfdd..0d424c637 100644
--- a/src/addons/mod/assign/pages/index/index.html
+++ b/src/addons/mod/assign/pages/index/index.html
@@ -3,10 +3,12 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module?.id" [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module?.id" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
 
         <ion-buttons slot="end">
             <!-- The buttons defined by the component will be added in here. -->
diff --git a/src/addons/mod/assign/pages/submission-list/submission-list.html b/src/addons/mod/assign/pages/submission-list/submission-list.html
index 6485d2520..3d9cb57a0 100644
--- a/src/addons/mod/assign/pages/submission-list/submission-list.html
+++ b/src/addons/mod/assign/pages/submission-list/submission-list.html
@@ -3,10 +3,12 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="moduleId" [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="moduleId" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
 
         <ion-buttons slot="end"></ion-buttons>
     </ion-toolbar>
diff --git a/src/addons/mod/assign/pages/submission-review/submission-review.html b/src/addons/mod/assign/pages/submission-review/submission-review.html
index fa5c6d28a..227dfca1d 100644
--- a/src/addons/mod/assign/pages/submission-review/submission-review.html
+++ b/src/addons/mod/assign/pages/submission-review/submission-review.html
@@ -3,10 +3,12 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="moduleId" [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="moduleId" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
 
         <ion-buttons slot="end"></ion-buttons>
     </ion-toolbar>
diff --git a/src/addons/mod/book/components/toc/toc.html b/src/addons/mod/book/components/toc/toc.html
index 7028b51d4..42165ea28 100644
--- a/src/addons/mod/book/components/toc/toc.html
+++ b/src/addons/mod/book/components/toc/toc.html
@@ -1,6 +1,8 @@
 <ion-header>
     <ion-toolbar>
-        <h1>{{ 'addon.mod_book.toc' | translate }}</h1>
+        <ion-title>
+            <h2>{{ 'addon.mod_book.toc' | translate }}</h2>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon name="fas-times" slot="icon-only" aria-hidden=true></ion-icon>
@@ -12,14 +14,12 @@
     <nav>
         <ion-list>
             <ion-item class="ion-text-wrap" *ngFor="let chapter of chapters" (click)="loadChapter(chapter.id)"
-                [attr.aria-current]="selected == chapter.id ? 'page' : 'false'" button
-                [class.item-dimmed]="chapter.hidden" detail="false">
+                [attr.aria-current]="selected == chapter.id ? 'page' : 'false'" button [class.item-dimmed]="chapter.hidden" detail="false">
                 <ion-label>
                     <p [class.ion-padding-start]="addPadding && chapter.level == 1 ? true : null" class="item-heading">
                         <span *ngIf="showNumbers" class="addon-mod-book-number">{{chapter.indexNumber}}&nbsp;</span>
                         <span *ngIf="showBullets" class="addon-mod-book-bullet">&bull;&nbsp;</span>
-                        <core-format-text [text]="chapter.title" contextLevel="module" [contextInstanceId]="moduleId"
-                            [courseId]="courseId">
+                        <core-format-text [text]="chapter.title" contextLevel="module" [contextInstanceId]="moduleId" [courseId]="courseId">
                         </core-format-text>
                     </p>
                 </ion-label>
diff --git a/src/addons/mod/book/pages/index/index.html b/src/addons/mod/book/pages/index/index.html
index 2d7faf457..2c06606d2 100644
--- a/src/addons/mod/book/pages/index/index.html
+++ b/src/addons/mod/book/pages/index/index.html
@@ -3,10 +3,12 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module?.id" [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module?.id" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
         <ion-buttons slot="end">
             <!-- The buttons defined by the component will be added in here. -->
         </ion-buttons>
diff --git a/src/addons/mod/chat/components/users-modal/users-modal.html b/src/addons/mod/chat/components/users-modal/users-modal.html
index 248b463f5..b0b09c140 100644
--- a/src/addons/mod/chat/components/users-modal/users-modal.html
+++ b/src/addons/mod/chat/components/users-modal/users-modal.html
@@ -1,9 +1,8 @@
 <ion-header>
     <ion-toolbar>
-        <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
-        </ion-buttons>
-        <h2>{{ 'addon.mod_chat.currentusers' | translate }}</h2>
+        <ion-title>
+            <h2>{{ 'addon.mod_chat.currentusers' | translate }}</h2>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-times" aria-hidden="true"></ion-icon>
@@ -13,8 +12,7 @@
 </ion-header>
 <ion-content>
     <core-loading [hideUntil]="usersLoaded">
-        <ion-item class="ion-text-wrap" *ngFor="let user of users"
-            [class.addon-mod-chat-user]="currentUserId != user.id && isOnline">
+        <ion-item class="ion-text-wrap" *ngFor="let user of users" [class.addon-mod-chat-user]="currentUserId != user.id && isOnline">
 
             <core-user-avatar [user]="user" slot="start" [linkProfile]="false"></core-user-avatar>
             <ion-label>
diff --git a/src/addons/mod/chat/pages/chat/chat.html b/src/addons/mod/chat/pages/chat/chat.html
index cd983f9f0..558eb4165 100644
--- a/src/addons/mod/chat/pages/chat/chat.html
+++ b/src/addons/mod/chat/pages/chat/chat.html
@@ -3,10 +3,12 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" *ngIf="loaded" (click)="showChatUsers()" [attr.aria-label]="'core.users' | translate">
                 <ion-icon name="fas-users" slot="icon-only" aria-hidden="true"></ion-icon>
@@ -72,7 +74,7 @@
                             {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }}
                             <strong>
                                 {{ message.userfullname }} <core-format-text [text]="message.message" contextLevel="module"
-                                [contextInstanceId]="cmId" [courseId]="courseId" (afterRender)="last && scrollToBottom()">
+                                    [contextInstanceId]="cmId" [courseId]="courseId" (afterRender)="last && scrollToBottom()">
                                 </core-format-text>
                             </strong>
                         </span>
@@ -81,8 +83,7 @@
 
                 <ion-item *ngIf="!message.special" class="ion-text-wrap addon-message"
                     [class.addon-message-mine]="message.userid == currentUserId"
-                    [class.addon-message-not-mine]="message.userid != currentUserId"
-                    [class.addon-message-no-user]="!message.showUserData"
+                    [class.addon-message-not-mine]="message.userid != currentUserId" [class.addon-message-no-user]="!message.showUserData"
                     [@coreSlideInOut]="message.userid == currentUserId ? '' : 'fromLeft'">
                     <ion-label>
                         <!-- User data. -->
@@ -104,8 +105,7 @@
             </ng-container>
         </ion-list>
 
-        <core-empty-box *ngIf="!messages || messages.length <= 0" icon="far-comments"
-            [message]="'addon.mod_chat.nomessages' | translate">
+        <core-empty-box *ngIf="!messages || messages.length <= 0" icon="far-comments" [message]="'addon.mod_chat.nomessages' | translate">
         </core-empty-box>
     </core-loading>
 </ion-content>
diff --git a/src/addons/mod/chat/pages/index/index.html b/src/addons/mod/chat/pages/index/index.html
index de71fbf74..ed096fe29 100644
--- a/src/addons/mod/chat/pages/index/index.html
+++ b/src/addons/mod/chat/pages/index/index.html
@@ -3,10 +3,12 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module?.id" [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module?.id" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
         <ion-buttons slot="end">
             <!-- The buttons defined by the component will be added in here. -->
         </ion-buttons>
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 275819ac5..7d0a57911 100644
--- a/src/addons/mod/chat/pages/session-messages/session-messages.html
+++ b/src/addons/mod/chat/pages/session-messages/session-messages.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ 'addon.mod_chat.messages' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'addon.mod_chat.messages' | translate }}</h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
@@ -67,7 +69,7 @@
                             {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }}
                             <strong>
                                 {{ message.userfullname }} <core-format-text [text]="message.message" contextLevel="module"
-                                [contextInstanceId]="cmId" [courseId]="courseId"></core-format-text>
+                                    [contextInstanceId]="cmId" [courseId]="courseId"></core-format-text>
                             </strong>
                         </span>
                     </ion-badge>
@@ -75,8 +77,7 @@
 
                 <ion-item *ngIf="!message.special" class="ion-text-wrap addon-message"
                     [class.addon-message-mine]="message.userid == currentUserId"
-                    [class.addon-message-not-mine]="message.userid != currentUserId"
-                    [class.addon-message-no-user]="!message.showUserData">
+                    [class.addon-message-not-mine]="message.userid != currentUserId" [class.addon-message-no-user]="!message.showUserData">
                     <ion-label>
                         <!-- User data. -->
                         <h2 class="addon-message-user">
diff --git a/src/addons/mod/chat/pages/sessions/sessions.html b/src/addons/mod/chat/pages/sessions/sessions.html
index afd0cac47..d4f7bf45e 100644
--- a/src/addons/mod/chat/pages/sessions/sessions.html
+++ b/src/addons/mod/chat/pages/sessions/sessions.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ 'addon.mod_chat.chatreport' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'addon.mod_chat.chatreport' | translate }}</h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
diff --git a/src/addons/mod/choice/pages/index/index.html b/src/addons/mod/choice/pages/index/index.html
index 6f8b727cd..7c56322d2 100644
--- a/src/addons/mod/choice/pages/index/index.html
+++ b/src/addons/mod/choice/pages/index/index.html
@@ -3,10 +3,12 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module?.id" [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module?.id" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
         <ion-buttons slot="end">
             <!-- The buttons defined by the component will be added in here. -->
         </ion-buttons>
diff --git a/src/addons/mod/data/components/search/search.html b/src/addons/mod/data/components/search/search.html
index d137cabcc..e7dee1e2e 100644
--- a/src/addons/mod/data/components/search/search.html
+++ b/src/addons/mod/data/components/search/search.html
@@ -1,9 +1,8 @@
 <ion-header>
     <ion-toolbar>
-        <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
-        </ion-buttons>
-        <h2>{{ 'addon.mod_data.search' | translate }}</h2>
+        <ion-title>
+            <h2>{{ 'addon.mod_data.search' | translate }}</h2>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon name="fas-times" slot="icon-only" aria-hidden=true></ion-icon>
@@ -20,14 +19,14 @@
         <ion-list class="ion-no-margin">
             <ion-item [hidden]="search.searchingAdvanced">
                 <ion-label class="sr-only">{{ 'addon.mod_data.search' | translate}}</ion-label>
-                <ion-input type="text" placeholder="{{ 'addon.mod_data.search' | translate}}"
-                    [(ngModel)]="search.text" name="text" formControlName="text">
+                <ion-input type="text" placeholder="{{ 'addon.mod_data.search' | translate}}" [(ngModel)]="search.text" name="text"
+                    formControlName="text">
                 </ion-input>
             </ion-item>
             <ion-item class="ion-text-wrap">
                 <ion-label position="stacked">{{ 'core.sortby' | translate }}</ion-label>
-                <ion-select interface="action-sheet" name="sortBy" formControlName="sortBy"
-                    [placeholder]="'core.sortby' | translate" [interfaceOptions]="{header: 'core.sortby' | translate}">
+                <ion-select interface="action-sheet" name="sortBy" formControlName="sortBy" [placeholder]="'core.sortby' | translate"
+                    [interfaceOptions]="{header: 'core.sortby' | translate}">
                     <optgroup *ngIf="fieldsArray.length" label="{{ 'addon.mod_data.fields' | translate }}">
                         <ion-select-option *ngFor="let field of fieldsArray" [value]="field.id">{{field.name}}</ion-select-option>
                     </optgroup>
@@ -42,7 +41,7 @@
                     </optgroup>
                 </ion-select>
             </ion-item>
-            <ion-list >
+            <ion-list>
                 <ion-radio-group [(ngModel)]="search.sortDirection" name="sortDirection" formControlName="sortDirection">
                     <ion-item>
                         <ion-label>{{ 'addon.mod_data.ascending' | translate }}</ion-label>
diff --git a/src/addons/mod/data/pages/edit/edit.html b/src/addons/mod/data/pages/edit/edit.html
index 05ec1f563..6ace095f7 100644
--- a/src/addons/mod/data/pages/edit/edit.html
+++ b/src/addons/mod/data/pages/edit/edit.html
@@ -3,10 +3,12 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button *ngIf="entry" fill="clear" (click)="save($event)">
                 {{ 'core.save' | translate }}
diff --git a/src/addons/mod/data/pages/entry/entry.html b/src/addons/mod/data/pages/entry/entry.html
index 539db3691..015b40c88 100644
--- a/src/addons/mod/data/pages/entry/entry.html
+++ b/src/addons/mod/data/pages/entry/entry.html
@@ -3,15 +3,16 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
-    <ion-refresher slot="fixed"
-        [disabled]="!entryLoaded || !(isPullingToRefresh || !renderingEntry && !loadingRating && !loadingComments)"
+    <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>
@@ -40,23 +41,23 @@
         <div class="addon-data-contents addon-data-entry addon-data-entries-{{database.id}}" *ngIf="database && entry">
             <core-style [css]="database.csstemplate" prefix=".addon-data-entries-{{database.id}}"></core-style>
 
-            <core-compile-html [text]="entryHtml" [jsData]="jsData" [extraImports]="extraImports"
-                (compiling)="setRenderingEntry($event)"></core-compile-html>
+            <core-compile-html [text]="entryHtml" [jsData]="jsData" [extraImports]="extraImports" (compiling)="setRenderingEntry($event)">
+            </core-compile-html>
         </div>
 
-        <core-rating-rate *ngIf="database && entry && ratingInfo && (!database.approval || entry.approved)"
-            [ratingInfo]="ratingInfo" contextLevel="module" [instanceId]="database.coursemodule" [itemId]="entry.id" [itemSetId]="0"
-            [courseId]="courseId" [aggregateMethod]="database.assessed" [scaleId]="database.scale" [userId]="entry.userid"
-            (onLoading)="setLoadingRating($event)" (onUpdate)="ratingUpdated()">
+        <core-rating-rate *ngIf="database && entry && ratingInfo && (!database.approval || entry.approved)" [ratingInfo]="ratingInfo"
+            contextLevel="module" [instanceId]="database.coursemodule" [itemId]="entry.id" [itemSetId]="0" [courseId]="courseId"
+            [aggregateMethod]="database.assessed" [scaleId]="database.scale" [userId]="entry.userid" (onLoading)="setLoadingRating($event)"
+            (onUpdate)="ratingUpdated()">
         </core-rating-rate>
         <core-rating-aggregate *ngIf="database && entry && ratingInfo" [ratingInfo]="ratingInfo" contextLevel="module"
             [instanceId]="database.coursemodule" [itemId]="entry.id" [courseId]="courseId" [aggregateMethod]="database.assessed"
             [scaleId]="database.scale">
         </core-rating-aggregate>
 
-        <core-comments *ngIf="database && database.comments && entry && entry.id > 0 && commentsEnabled"
-            contextLevel="module" [instanceId]="database.coursemodule" component="mod_data" [itemId]="entry.id"
-            area="database_entry" [courseId]="courseId" (onLoading)="setLoadingComments($event)" [showItem]="true">
+        <core-comments *ngIf="database && database.comments && entry && entry.id > 0 && commentsEnabled" contextLevel="module"
+            [instanceId]="database.coursemodule" component="mod_data" [itemId]="entry.id" area="database_entry" [courseId]="courseId"
+            (onLoading)="setLoadingComments($event)" [showItem]="true">
         </core-comments>
 
         <ion-grid *ngIf="hasPrevious || hasNext">
diff --git a/src/addons/mod/data/pages/index/index.html b/src/addons/mod/data/pages/index/index.html
index 5d0caa151..46e4a1dd9 100644
--- a/src/addons/mod/data/pages/index/index.html
+++ b/src/addons/mod/data/pages/index/index.html
@@ -3,10 +3,12 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
 
         <ion-buttons slot="end">
             <!-- The buttons defined by the component will be added in here. -->
diff --git a/src/addons/mod/feedback/pages/attempt/attempt.html b/src/addons/mod/feedback/pages/attempt/attempt.html
index 77edc5f38..909f8e6a0 100644
--- a/src/addons/mod/feedback/pages/attempt/attempt.html
+++ b/src/addons/mod/feedback/pages/attempt/attempt.html
@@ -3,12 +3,12 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <ng-container *ngIf="attempt">{{ attempt.fullname }}</ng-container>
-            <ng-container *ngIf="anonAttempt">
+        <ion-title>
+            <h1 *ngIf="attempt">{{ attempt.fullname }}</h1>
+            <h1 *ngIf="anonAttempt">
                 {{ 'addon.mod_feedback.response_nr' |translate }}: {{anonAttempt.number}}
-            </ng-container>
-        </h1>
+            </h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
@@ -30,7 +30,7 @@
                         ({{ 'addon.mod_feedback.anonymous' |translate }})
                     </h2>
                 </ion-label>
-            </ion-item >
+            </ion-item>
             <ng-container *ngIf="items && items.length">
                 <ng-container *ngFor="let item of items">
                     <core-spacer *ngIf="item.typ == 'pagebreak'"></core-spacer>
@@ -38,8 +38,8 @@
                         <ion-label>
                             <h2 *ngIf="item.name" [core-mark-required]="item.required">
                                 <span *ngIf="feedback!.autonumbering && item.itemnumber">{{item.itemnumber}}. </span>
-                                <core-format-text [component]="component" [componentId]="cmId" [text]="item.name"
-                                    contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId">
+                                <core-format-text [component]="component" [componentId]="cmId" [text]="item.name" contextLevel="module"
+                                    [contextInstanceId]="cmId" [courseId]="courseId">
                                 </core-format-text>
                             </h2>
                             <p *ngIf="item.submittedValue">
diff --git a/src/addons/mod/feedback/pages/form/form.html b/src/addons/mod/feedback/pages/form/form.html
index 3f67b5a17..4ed5b620f 100644
--- a/src/addons/mod/feedback/pages/form/form.html
+++ b/src/addons/mod/feedback/pages/form/form.html
@@ -3,10 +3,12 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
@@ -28,22 +30,20 @@
                             <ion-label [position]="item.hasTextInput ? 'stacked' : undefined">
                                 <p *ngIf="item.name" [core-mark-required]="item.required">
                                     <span *ngIf="feedback!.autonumbering && item.itemnumber">{{item.itemnumber}}. </span>
-                                    <core-format-text [component]="component" [componentId]="cmId" [text]="item.name"
-                                        contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId" [wsNotFiltered]="true">
+                                    <core-format-text [component]="component" [componentId]="cmId" [text]="item.name" contextLevel="module"
+                                        [contextInstanceId]="cmId" [courseId]="courseId" [wsNotFiltered]="true">
                                     </core-format-text>
                                     <span *ngIf="item.postfix" class="addon-mod_feedback-postfix">{{item.postfix}}</span>
                                 </p>
                                 <p *ngIf="item.templateName == 'label'">
-                                    <core-format-text [component]="component" [componentId]="cmId"
-                                        [text]="item.presentation" contextLevel="module" [contextInstanceId]="cmId"
-                                        [wsNotFiltered]="true" [courseId]="courseId">
+                                    <core-format-text [component]="component" [componentId]="cmId" [text]="item.presentation"
+                                        contextLevel="module" [contextInstanceId]="cmId" [wsNotFiltered]="true" [courseId]="courseId">
                                     </core-format-text>
                                 </p>
                             </ion-label>
 
-                            <ion-input *ngIf="item.templateName == 'textfield'" type="text" [(ngModel)]="item.value"
-                                autocorrect="off" name="{{item.typ}}_{{item.id}}" maxlength="{{item.length}}"
-                                [required]="item.required">
+                            <ion-input *ngIf="item.templateName == 'textfield'" type="text" [(ngModel)]="item.value" autocorrect="off"
+                                name="{{item.typ}}_{{item.id}}" maxlength="{{item.length}}" [required]="item.required">
                             </ion-input>
 
                             <ng-container *ngIf="item.templateName == 'numeric'">
@@ -56,8 +56,8 @@
                                 </ion-text>
                             </ng-container>
 
-                            <ion-textarea *ngIf="item.templateName == 'textarea'" [required]="item.required"
-                                name="{{item.typ}}_{{item.id}}" [(ngModel)]="item.value">
+                            <ion-textarea *ngIf="item.templateName == 'textarea'" [required]="item.required" name="{{item.typ}}_{{item.id}}"
+                                [(ngModel)]="item.value">
                             </ion-textarea>
 
                             <ion-select *ngIf="item.templateName == 'multichoice-d'" [required]="item.required"
@@ -65,20 +65,18 @@
                                 [interfaceOptions]="{header: item.name}">
                                 <ion-select-option *ngFor="let option of item.choices" [value]="option.value">
                                     <core-format-text [component]="component" [componentId]="cmId" [text]="option.label"
-                                        contextLevel="module" [contextInstanceId]="cmId" [wsNotFiltered]="true"
-                                        [courseId]="courseId">
+                                        contextLevel="module" [contextInstanceId]="cmId" [wsNotFiltered]="true" [courseId]="courseId">
                                     </core-format-text>
                                 </ion-select-option>
                             </ion-select>
                         </ion-item>
 
-                        <ion-radio-group *ngIf="item.templateName == 'multichoice-r'" [(ngModel)]="item.value"
-                            [required]="item.required" name="{{item.typ}}_{{item.id}}">
+                        <ion-radio-group *ngIf="item.templateName == 'multichoice-r'" [(ngModel)]="item.value" [required]="item.required"
+                            name="{{item.typ}}_{{item.id}}">
                             <ion-item *ngFor="let option of item.choices">
                                 <ion-label>
-                                    <core-format-text [component]="component" [componentId]="cmId"
-                                        [text]="option.label" contextLevel="module" [contextInstanceId]="cmId"
-                                        [wsNotFiltered]="true" [courseId]="courseId">
+                                    <core-format-text [component]="component" [componentId]="cmId" [text]="option.label"
+                                        contextLevel="module" [contextInstanceId]="cmId" [wsNotFiltered]="true" [courseId]="courseId">
                                     </core-format-text>
                                 </ion-label>
                                 <ion-radio slot="start" [value]="option.value"></ion-radio>
@@ -89,19 +87,18 @@
                             <ion-item *ngFor="let option of item.choices">
                                 <ion-label>
                                     <core-format-text [component]="component" [componentId]="cmId" [text]="option.label"
-                                        contextLevel="module" [contextInstanceId]="cmId" [wsNotFiltered]="true"
-                                        [courseId]="courseId">
+                                        contextLevel="module" [contextInstanceId]="cmId" [wsNotFiltered]="true" [courseId]="courseId">
                                     </core-format-text>
                                 </ion-label>
-                                <ion-checkbox [required]="item.required" name="{{item.typ}}_{{item.id}}"
-                                    [(ngModel)]="option.checked" value="option.value">
+                                <ion-checkbox [required]="item.required" name="{{item.typ}}_{{item.id}}" [(ngModel)]="option.checked"
+                                    value="option.value">
                                 </ion-checkbox>
                             </ion-item>
                         </ng-container>
 
                         <ng-container *ngIf="item.templateName == 'captcha'">
-                            <core-recaptcha *ngIf="!preview && !offline" [publicKey]="item.captcha.recaptchapublickey"
-                                [model]="item" modelValueName="value">
+                            <core-recaptcha *ngIf="!preview && !offline" [publicKey]="item.captcha.recaptchapublickey" [model]="item"
+                                modelValueName="value">
                             </core-recaptcha>
                             <div *ngIf="!preview && (!item.captcha || offline)" class="core-warning-card">
                                 <ion-item>
diff --git a/src/addons/mod/feedback/pages/index/index.html b/src/addons/mod/feedback/pages/index/index.html
index 8eb3987ad..fa031ccc7 100644
--- a/src/addons/mod/feedback/pages/index/index.html
+++ b/src/addons/mod/feedback/pages/index/index.html
@@ -3,10 +3,12 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module?.id" [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module?.id" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
         <ion-buttons slot="end">
             <!-- The buttons defined by the component will be added in here. -->
         </ion-buttons>
diff --git a/src/addons/mod/feedback/pages/nonrespondents/nonrespondents.html b/src/addons/mod/feedback/pages/nonrespondents/nonrespondents.html
index 9dd84ed46..7f85fd6dd 100644
--- a/src/addons/mod/feedback/pages/nonrespondents/nonrespondents.html
+++ b/src/addons/mod/feedback/pages/nonrespondents/nonrespondents.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ 'addon.mod_feedback.responses' |translate }}</h1>
+        <ion-title>
+            <h1>{{ 'addon.mod_feedback.responses' |translate }}</h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
@@ -27,7 +29,9 @@
             </ion-item>
 
             <ion-item-divider>
-                <ion-label><h2>{{ 'addon.mod_feedback.non_respondents_students' | translate : {$a: total } }}</h2></ion-label>
+                <ion-label>
+                    <h2>{{ 'addon.mod_feedback.non_respondents_students' | translate : {$a: total } }}</h2>
+                </ion-label>
             </ion-item-divider>
             <ng-container *ngIf="total > 0">
                 <ion-item *ngFor="let user of users" class="ion-text-wrap">
diff --git a/src/addons/mod/feedback/pages/respondents/respondents.html b/src/addons/mod/feedback/pages/respondents/respondents.html
index 54bd44f9b..51c2184d0 100644
--- a/src/addons/mod/feedback/pages/respondents/respondents.html
+++ b/src/addons/mod/feedback/pages/respondents/respondents.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ 'addon.mod_feedback.responses' |translate }}</h1>
+        <ion-title>
+            <h1>{{ 'addon.mod_feedback.responses' |translate }}</h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
@@ -48,7 +50,9 @@
                         {{ 'core.loadmore' | translate }}
                     </ion-button>
                     <ion-item *ngIf="responses.responses.canLoadMore && loadingMore" class="ion-text-center">
-                        <ion-label><ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner></ion-label>
+                        <ion-label>
+                            <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+                        </ion-label>
                     </ion-item>
                 </ng-container>
 
@@ -71,7 +75,9 @@
                         {{ 'core.loadmore' | translate }}
                     </ion-button>
                     <ion-item *ngIf="responses.anonResponses.canLoadMore && loadingMore" class="ion-text-center">
-                        <ion-label><ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner></ion-label>
+                        <ion-label>
+                            <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+                        </ion-label>
                     </ion-item>
                 </ng-container>
             </ion-list>
diff --git a/src/addons/mod/folder/pages/index/index.html b/src/addons/mod/folder/pages/index/index.html
index a3d8d8626..442b976ec 100644
--- a/src/addons/mod/folder/pages/index/index.html
+++ b/src/addons/mod/folder/pages/index/index.html
@@ -3,10 +3,12 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module?.id" [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module?.id" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
 
         <ion-buttons slot="end">
             <!-- The buttons defined by the component will be added in here. -->
diff --git a/src/addons/mod/forum/components/sort-order-selector/sort-order-selector.html b/src/addons/mod/forum/components/sort-order-selector/sort-order-selector.html
index 278563d0c..45ff21577 100644
--- a/src/addons/mod/forum/components/sort-order-selector/sort-order-selector.html
+++ b/src/addons/mod/forum/components/sort-order-selector/sort-order-selector.html
@@ -1,6 +1,8 @@
 <ion-header>
     <ion-toolbar>
-        <h2 id="addon-mod-forum-sort-order-label">{{ 'core.sort' | translate }}</h2>
+        <ion-title>
+            <h2 id="addon-mod-forum-sort-order-label">{{ 'core.sort' | translate }}</h2>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon name="fas-times" slot="icon-only" aria-hidden="true"></ion-icon>
diff --git a/src/addons/mod/forum/pages/discussion/discussion.html b/src/addons/mod/forum/pages/discussion/discussion.html
index 6cc5bb804..8753e0b5d 100644
--- a/src/addons/mod/forum/pages/discussion/discussion.html
+++ b/src/addons/mod/forum/pages/discussion/discussion.html
@@ -3,10 +3,12 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1 *ngIf="startingPost">
-            <core-format-text contextLevel="module" [text]="startingPost.subject" [contextInstanceId]="cmId" [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1 *ngIf="startingPost">
+                <core-format-text contextLevel="module" [text]="startingPost.subject" [contextInstanceId]="cmId" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
         <ion-buttons slot="end">
             <!-- The context menu will be added in here. -->
         </ion-buttons>
@@ -14,48 +16,41 @@
 </ion-header>
 <core-navbar-buttons slot="end">
     <core-context-menu>
-        <core-context-menu-item *ngIf="discussionLoaded && !postHasOffline && isOnline"
-            [priority]="650" [content]="'addon.mod_forum.refreshposts' | translate" [iconAction]="refreshIcon" [closeOnClick]="false"
+        <core-context-menu-item *ngIf="discussionLoaded && !postHasOffline && isOnline" [priority]="650"
+            [content]="'addon.mod_forum.refreshposts' | translate" [iconAction]="refreshIcon" [closeOnClick]="false"
             (action)="doRefresh(null, $event)">
         </core-context-menu-item>
-        <core-context-menu-item *ngIf="discussionLoaded && isMobile && postHasOffline && isOnline"
-            [priority]="550" [content]="'core.settings.synchronizenow' | translate" [iconAction]="syncIcon" [closeOnClick]="false"
+        <core-context-menu-item *ngIf="discussionLoaded && isMobile && postHasOffline && isOnline" [priority]="550"
+            [content]="'core.settings.synchronizenow' | translate" [iconAction]="syncIcon" [closeOnClick]="false"
             (action)="doRefresh(null, $event, true)">
         </core-context-menu-item>
-        <core-context-menu-item [hidden]="sort == 'flat-oldest'"
-            [priority]="500" [content]="'addon.mod_forum.modeflatoldestfirst' | translate" iconAction="fas-arrow-down"
-            (action)="changeSort('flat-oldest')">
+        <core-context-menu-item [hidden]="sort == 'flat-oldest'" [priority]="500"
+            [content]="'addon.mod_forum.modeflatoldestfirst' | translate" iconAction="fas-arrow-down" (action)="changeSort('flat-oldest')">
         </core-context-menu-item>
-        <core-context-menu-item [hidden]="sort == 'flat-newest'"
-            [priority]="450" [content]="'addon.mod_forum.modeflatnewestfirst' | translate" iconAction="fas-arrow-up"
-            (action)="changeSort('flat-newest')">
+        <core-context-menu-item [hidden]="sort == 'flat-newest'" [priority]="450"
+            [content]="'addon.mod_forum.modeflatnewestfirst' | translate" iconAction="fas-arrow-up" (action)="changeSort('flat-newest')">
         </core-context-menu-item>
-        <core-context-menu-item [hidden]="sort == 'nested'"
-            [priority]="400" [content]="'addon.mod_forum.modenested' | translate" iconAction="fas-exchange-alt"
-            (action)="changeSort('nested')">
+        <core-context-menu-item [hidden]="sort == 'nested'" [priority]="400" [content]="'addon.mod_forum.modenested' | translate"
+            iconAction="fas-exchange-alt" (action)="changeSort('nested')">
         </core-context-menu-item>
-        <core-context-menu-item [hidden]="!discussion || !discussion.canlock || discussion.locked"
-            [priority]="300" [content]="'addon.mod_forum.lockdiscussion' | translate" iconAction="fas-lock"
-            (action)="setLockState(true)">
+        <core-context-menu-item [hidden]="!discussion || !discussion.canlock || discussion.locked" [priority]="300"
+            [content]="'addon.mod_forum.lockdiscussion' | translate" iconAction="fas-lock" (action)="setLockState(true)">
         </core-context-menu-item>
-        <core-context-menu-item [hidden]="!discussion || !discussion.canlock || !discussion.locked"
-            [priority]="300" [content]="'addon.mod_forum.unlockdiscussion' | translate" iconAction="fas-unlock"
-            (action)="setLockState(false)">
+        <core-context-menu-item [hidden]="!discussion || !discussion.canlock || !discussion.locked" [priority]="300"
+            [content]="'addon.mod_forum.unlockdiscussion' | translate" iconAction="fas-unlock" (action)="setLockState(false)">
         </core-context-menu-item>
-        <core-context-menu-item [hidden]="!discussion || !canPin || discussion.pinned"
-            [priority]="250" [content]="'addon.mod_forum.pindiscussion' | translate" iconAction="fas-map-pin"
-            (action)="setPinState(true)">
+        <core-context-menu-item [hidden]="!discussion || !canPin || discussion.pinned" [priority]="250"
+            [content]="'addon.mod_forum.pindiscussion' | translate" iconAction="fas-map-pin" (action)="setPinState(true)">
         </core-context-menu-item>
-        <core-context-menu-item [hidden]="!discussion || !canPin || !discussion.pinned"
-            [priority]="250" [content]="'addon.mod_forum.unpindiscussion' | translate" [iconSlash]="true" iconAction="fas-map-pin"
+        <core-context-menu-item [hidden]="!discussion || !canPin || !discussion.pinned" [priority]="250"
+            [content]="'addon.mod_forum.unpindiscussion' | translate" [iconSlash]="true" iconAction="fas-map-pin"
             (action)="setPinState(false)">
         </core-context-menu-item>
-        <core-context-menu-item [hidden]="!discussion || !discussion.canfavourite || discussion.starred"
-            [priority]="200" [content]="'addon.mod_forum.addtofavourites' | translate" iconAction="fas-star"
-            (action)="toggleFavouriteState(true)">
+        <core-context-menu-item [hidden]="!discussion || !discussion.canfavourite || discussion.starred" [priority]="200"
+            [content]="'addon.mod_forum.addtofavourites' | translate" iconAction="fas-star" (action)="toggleFavouriteState(true)">
         </core-context-menu-item>
-        <core-context-menu-item [hidden]="!discussion || !discussion.canfavourite || !discussion.starred"
-            [priority]="200" [content]="'addon.mod_forum.removefromfavourites' | translate" iconAction="fas-star" [iconSlash]="true"
+        <core-context-menu-item [hidden]="!discussion || !discussion.canfavourite || !discussion.starred" [priority]="200"
+            [content]="'addon.mod_forum.removefromfavourites' | translate" iconAction="fas-star" [iconSlash]="true"
             (action)="toggleFavouriteState(false)">
         </core-context-menu-item>
     </core-context-menu>
@@ -90,25 +85,20 @@
         </ion-card>
 
         <div *ngIf="startingPost" class="ion-margin-bottom">
-            <addon-mod-forum-post
-                [post]="startingPost" [discussion]="discussion" [courseId]="courseId" [highlight]="true"
-                [discussionId]="discussionId" [component]="component" [componentId]="cmId"
-                [formData]="formData" [originalData]="originalData" [forum]="forum" [accessInfo]="accessInfo"
-                [trackPosts]="trackPosts" [ratingInfo]="ratingInfo" [leavingPage]="leavingPage"
-                (onPostChange)="postListChanged()">
+            <addon-mod-forum-post [post]="startingPost" [discussion]="discussion" [courseId]="courseId" [highlight]="true"
+                [discussionId]="discussionId" [component]="component" [componentId]="cmId" [formData]="formData"
+                [originalData]="originalData" [forum]="forum" [accessInfo]="accessInfo" [trackPosts]="trackPosts" [ratingInfo]="ratingInfo"
+                [leavingPage]="leavingPage" (onPostChange)="postListChanged()">
             </addon-mod-forum-post>
         </div>
 
         <ion-card *ngIf="sort != 'nested'">
             <ng-container *ngFor="let post of posts; first as first">
                 <core-spacer *ngIf="!first"></core-spacer>
-                <addon-mod-forum-post
-                    [post]="post" [courseId]="courseId" [discussionId]="discussionId"
-                    [component]="component" [componentId]="cmId" [formData]="formData"
-                    [originalData]="originalData" [parentSubject]="postSubjects[post.parentid]"
+                <addon-mod-forum-post [post]="post" [courseId]="courseId" [discussionId]="discussionId" [component]="component"
+                    [componentId]="cmId" [formData]="formData" [originalData]="originalData" [parentSubject]="postSubjects[post.parentid]"
                     [forum]="forum" [accessInfo]="accessInfo" [trackPosts]="trackPosts" [ratingInfo]="ratingInfo"
-                    [leavingPage]="leavingPage"
-                    (onPostChange)="postListChanged()">
+                    [leavingPage]="leavingPage" (onPostChange)="postListChanged()">
                 </addon-mod-forum-post>
             </ng-container>
         </ion-card>
@@ -121,12 +111,10 @@
 
         <ng-template #nestedPosts let-post="post">
             <ion-card>
-                <addon-mod-forum-post
-                    [post]="post" [courseId]="courseId" [discussionId]="discussionId" [component]="component"
-                    [componentId]="cmId" [formData]="formData" [originalData]="originalData"
-                    [parentSubject]="postSubjects[post.parentid]" [forum]="forum" [accessInfo]="accessInfo"
-                    [trackPosts]="trackPosts" [ratingInfo]="ratingInfo" [leavingPage]="leavingPage"
-                    (onPostChange)="postListChanged()">
+                <addon-mod-forum-post [post]="post" [courseId]="courseId" [discussionId]="discussionId" [component]="component"
+                    [componentId]="cmId" [formData]="formData" [originalData]="originalData" [parentSubject]="postSubjects[post.parentid]"
+                    [forum]="forum" [accessInfo]="accessInfo" [trackPosts]="trackPosts" [ratingInfo]="ratingInfo"
+                    [leavingPage]="leavingPage" (onPostChange)="postListChanged()">
                 </addon-mod-forum-post>
             </ion-card>
             <div class="ion-padding-start" *ngIf="post.children && post.children.length && post.children[0].subject">
diff --git a/src/addons/mod/forum/pages/index/index.html b/src/addons/mod/forum/pages/index/index.html
index c72371b3f..0a1366b3d 100644
--- a/src/addons/mod/forum/pages/index/index.html
+++ b/src/addons/mod/forum/pages/index/index.html
@@ -3,10 +3,12 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
         <ion-buttons slot="end">
             <!-- The buttons defined by the component will be added in here. -->
         </ion-buttons>
diff --git a/src/addons/mod/forum/pages/new-discussion/new-discussion.html b/src/addons/mod/forum/pages/new-discussion/new-discussion.html
index 6155f595b..b083956f4 100644
--- a/src/addons/mod/forum/pages/new-discussion/new-discussion.html
+++ b/src/addons/mod/forum/pages/new-discussion/new-discussion.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ 'addon.mod_forum.addanewdiscussion' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'addon.mod_forum.addanewdiscussion' | translate }}</h1>
+        </ion-title>
         <ion-buttons slot="end">
             <!-- The context menu will be added in here. -->
         </ion-buttons>
@@ -18,9 +20,8 @@
         <form *ngIf="showForm" #newDiscFormEl>
             <ion-item>
                 <ion-label position="stacked">{{ 'addon.mod_forum.subject' | translate }}</ion-label>
-                <ion-input
-                    [(ngModel)]="newDiscussion.subject"
-                    type="text" [placeholder]="'addon.mod_forum.subject' | translate" name="subject">
+                <ion-input [(ngModel)]="newDiscussion.subject" type="text" [placeholder]="'addon.mod_forum.subject' | translate"
+                    name="subject">
                 </ion-input>
             </ion-item>
             <ion-item>
@@ -31,19 +32,14 @@
                     (contentChanged)="onMessageChange($event)">
                 </core-rich-text-editor>
             </ion-item>
-            <ion-item
-                button
-                class="divider ion-text-wrap"
-                (click)="toggleAdvanced()"
-                detail="false"
-                [attr.aria-expanded]="advanced"
-                [attr.aria-label]="(advanced ? 'core.hideadvanced' : 'core.showadvanced') | translate"
-                role="heading"
-                aria-controls="addon-mod-forum-new-discussion-advanced"
-            >
+            <ion-item button class="divider ion-text-wrap" (click)="toggleAdvanced()" detail="false" [attr.aria-expanded]="advanced"
+                [attr.aria-label]="(advanced ? 'core.hideadvanced' : 'core.showadvanced') | translate" role="heading"
+                aria-controls="addon-mod-forum-new-discussion-advanced">
                 <ion-icon *ngIf="!advanced" name="fas-caret-right" flip-rtl slot="start" aria-hidden="true"></ion-icon>
                 <ion-icon *ngIf="advanced" name="fas-caret-down" slot="start" aria-hidden="true"></ion-icon>
-                <ion-label><h2>{{ 'addon.mod_forum.advanced' | translate }}</h2></ion-label>
+                <ion-label>
+                    <h2>{{ 'addon.mod_forum.advanced' | translate }}</h2>
+                </ion-label>
             </ion-item>
             <div *ngIf="advanced" id="addon-mod-forum-new-discussion-advanced">
                 <ion-item *ngIf="showGroups && groupIds.length > 1 && accessInfo.cancanposttomygroups">
@@ -66,17 +62,16 @@
                     <ion-label>{{ 'addon.mod_forum.discussionpinned' | translate }}</ion-label>
                     <ion-toggle [(ngModel)]="newDiscussion.pin" name="pin"></ion-toggle>
                 </ion-item>
-                <core-attachments *ngIf="canCreateAttachments && forum && forum.maxattachments > 0"
-                    [files]="newDiscussion.files" [maxSize]="forum.maxbytes" [maxSubmissions]="forum.maxattachments"
-                    [component]="component" [componentId]="forum.cmid" [allowOffline]="true" [courseId]="courseId">
+                <core-attachments *ngIf="canCreateAttachments && forum && forum.maxattachments > 0" [files]="newDiscussion.files"
+                    [maxSize]="forum.maxbytes" [maxSubmissions]="forum.maxattachments" [component]="component" [componentId]="forum.cmid"
+                    [allowOffline]="true" [courseId]="courseId">
                 </core-attachments>
             </div>
             <ion-item>
                 <ion-label>
                     <ion-row>
                         <ion-col>
-                            <ion-button
-                                expand="block" [disabled]="newDiscussion.subject == '' || newDiscussion.message == null"
+                            <ion-button expand="block" [disabled]="newDiscussion.subject == '' || newDiscussion.message == null"
                                 (click)="add()">
                                 {{ 'addon.mod_forum.posttoforum' | translate }}
                             </ion-button>
diff --git a/src/addons/mod/glossary/pages/edit/edit.html b/src/addons/mod/glossary/pages/edit/edit.html
index 9ab191489..55faf51fe 100644
--- a/src/addons/mod/glossary/pages/edit/edit.html
+++ b/src/addons/mod/glossary/pages/edit/edit.html
@@ -3,10 +3,12 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1 *ngIf="glossary">
-            <core-format-text [text]="glossary.name" contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1 *ngIf="glossary">
+                <core-format-text [text]="glossary.name" contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
@@ -14,16 +16,15 @@
         <form #editFormEl *ngIf="glossary">
             <ion-item>
                 <ion-label position="stacked">{{ 'addon.mod_glossary.concept' | translate }}</ion-label>
-                <ion-input type="text" [placeholder]="'addon.mod_glossary.concept' | translate" [(ngModel)]="entry.concept"
-                    name="concept">
+                <ion-input type="text" [placeholder]="'addon.mod_glossary.concept' | translate" [(ngModel)]="entry.concept" name="concept">
                 </ion-input>
             </ion-item>
             <ion-item>
                 <ion-label position="stacked">{{ 'addon.mod_glossary.definition' | translate }}</ion-label>
                 <core-rich-text-editor [control]="definitionControl" (contentChanged)="onDefinitionChange($event)"
-                    [placeholder]="'addon.mod_glossary.definition' | translate" name="addon_mod_glossary_edit"
-                    [component]="component" [componentId]="cmId" [autoSave]="true" contextLevel="module"
-                    [contextInstanceId]="cmId" elementId="definition_editor" [draftExtraParams]="editorExtraParams">
+                    [placeholder]="'addon.mod_glossary.definition' | translate" name="addon_mod_glossary_edit" [component]="component"
+                    [componentId]="cmId" [autoSave]="true" contextLevel="module" [contextInstanceId]="cmId" elementId="definition_editor"
+                    [draftExtraParams]="editorExtraParams">
                 </core-rich-text-editor>
             </ion-item>
             <ion-item *ngIf="categories.length > 0">
@@ -47,14 +48,18 @@
                 </ion-textarea>
             </ion-item>
             <ion-item-divider>
-                <ion-label><h2>{{ 'addon.mod_glossary.attachment' | translate }}</h2></ion-label>
+                <ion-label>
+                    <h2>{{ 'addon.mod_glossary.attachment' | translate }}</h2>
+                </ion-label>
             </ion-item-divider>
-            <core-attachments [files]="attachments" [component]="component" [componentId]="glossary.coursemodule"
-                [allowOffline]="true" [courseId]="courseId">
+            <core-attachments [files]="attachments" [component]="component" [componentId]="glossary.coursemodule" [allowOffline]="true"
+                [courseId]="courseId">
             </core-attachments>
             <ng-container *ngIf="glossary.usedynalink">
                 <ion-item-divider>
-                    <ion-label><h2>{{ 'addon.mod_glossary.linking' | translate }}</h2></ion-label>
+                    <ion-label>
+                        <h2>{{ 'addon.mod_glossary.linking' | translate }}</h2>
+                    </ion-label>
                 </ion-item-divider>
                 <ion-item class="ion-text-wrap">
                     <ion-label>{{ 'addon.mod_glossary.entryusedynalink' | translate }}</ion-label>
diff --git a/src/addons/mod/glossary/pages/entry/entry.html b/src/addons/mod/glossary/pages/entry/entry.html
index 4e644e998..03737a4a1 100644
--- a/src/addons/mod/glossary/pages/entry/entry.html
+++ b/src/addons/mod/glossary/pages/entry/entry.html
@@ -3,10 +3,12 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1 *ngIf="entry">
-            <core-format-text [text]="entry.concept" contextLevel="module" [contextInstanceId]="componentId" [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1 *ngIf="entry">
+                <core-format-text [text]="entry.concept" contextLevel="module" [contextInstanceId]="componentId" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
@@ -39,14 +41,13 @@
             </ion-item>
             <ion-item class="ion-text-wrap">
                 <ion-label>
-                    <core-format-text [component]="component" [componentId]="componentId" [text]="entry.definition"
-                        contextLevel="module" [contextInstanceId]="componentId" [courseId]="courseId">
+                    <core-format-text [component]="component" [componentId]="componentId" [text]="entry.definition" contextLevel="module"
+                        [contextInstanceId]="componentId" [courseId]="courseId">
                     </core-format-text>
                 </ion-label>
             </ion-item>
             <div *ngIf="entry.attachment" lines="none">
-                <core-file *ngFor="let file of entry.attachments" [file]="file" [component]="component"
-                    [componentId]="componentId">
+                <core-file *ngFor="let file of entry.attachments" [file]="file" [component]="component" [componentId]="componentId">
                 </core-file>
             </div>
             <ion-item class="ion-text-wrap" *ngIf="tagsEnabled && entry && entry.tags && entry.tags.length > 0">
@@ -56,20 +57,21 @@
                 </ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap" *ngIf="!entry.approved">
-                <ion-label><p><em>{{ 'addon.mod_glossary.entrypendingapproval' | translate }}</em></p></ion-label>
+                <ion-label>
+                    <p><em>{{ 'addon.mod_glossary.entrypendingapproval' | translate }}</em></p>
+                </ion-label>
             </ion-item>
-            <core-comments *ngIf="glossary && glossary.allowcomments && entry && entry.id > 0 && commentsEnabled"
-                contextLevel="module" [instanceId]="glossary.coursemodule" component="mod_glossary"
-                [itemId]="entry.id" area="glossary_entry" [courseId]="glossary.course" [showItem]="true">
+            <core-comments *ngIf="glossary && glossary.allowcomments && entry && entry.id > 0 && commentsEnabled" contextLevel="module"
+                [instanceId]="glossary.coursemodule" component="mod_glossary" [itemId]="entry.id" area="glossary_entry"
+                [courseId]="glossary.course" [showItem]="true">
             </core-comments>
             <core-rating-rate *ngIf="glossary && ratingInfo" [ratingInfo]="ratingInfo" contextLevel="module"
                 [instanceId]="glossary.coursemodule" [itemId]="entry.id" [itemSetId]="0" [courseId]="glossary.course"
-                [aggregateMethod]="glossary.assessed" [scaleId]="glossary.scale" [userId]="entry.userid"
-                (onUpdate)="ratingUpdated()">
+                [aggregateMethod]="glossary.assessed" [scaleId]="glossary.scale" [userId]="entry.userid" (onUpdate)="ratingUpdated()">
             </core-rating-rate>
             <core-rating-aggregate *ngIf="glossary && ratingInfo" [ratingInfo]="ratingInfo" contextLevel="module"
-                [instanceId]="glossary.coursemodule" [itemId]="entry.id" [courseId]="glossary.course"
-                [aggregateMethod]="glossary.assessed" [scaleId]="glossary.scale">
+                [instanceId]="glossary.coursemodule" [itemId]="entry.id" [courseId]="glossary.course" [aggregateMethod]="glossary.assessed"
+                [scaleId]="glossary.scale">
             </core-rating-aggregate>
         </ng-container>
 
diff --git a/src/addons/mod/glossary/pages/index/index.html b/src/addons/mod/glossary/pages/index/index.html
index c1b066a21..501b8f25d 100644
--- a/src/addons/mod/glossary/pages/index/index.html
+++ b/src/addons/mod/glossary/pages/index/index.html
@@ -3,10 +3,12 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module?.id" [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module?.id" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
         <ion-buttons slot="end">
             <!-- The buttons defined by the component will be added in here. -->
         </ion-buttons>
diff --git a/src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.html b/src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.html
index f643a4047..d4022f31c 100644
--- a/src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.html
+++ b/src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.html
@@ -3,11 +3,13 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text *ngIf="h5pActivity" [text]="h5pActivity.name" contextLevel="module"
-                [contextInstanceId]="h5pActivity.coursemodule" [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text *ngIf="h5pActivity" [text]="h5pActivity.name" contextLevel="module"
+                    [contextInstanceId]="h5pActivity.coursemodule" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
@@ -62,15 +64,15 @@
                     <ion-item class="ion-text-wrap" lines="none">
                         <ion-label>
                             <h2>{{ 'addon.mod_h5pactivity.outcome' | translate }}</h2>
-                            <p *ngIf="attempt.success !== null && attempt.success" >
+                            <p *ngIf="attempt.success !== null && attempt.success">
                                 <ion-icon name="fas-check-circle" aria-hidden="true"></ion-icon>
                                 {{ 'addon.mod_h5pactivity.attempt_success_pass' | translate }}
                             </p>
-                            <p *ngIf="attempt.success !== null && !attempt.success" >
+                            <p *ngIf="attempt.success !== null && !attempt.success">
                                 <ion-icon name="far-circle" aria-hidden="true"></ion-icon>
                                 {{ 'addon.mod_h5pactivity.attempt_success_fail' | translate }}
                             </p>
-                            <p *ngIf="attempt.success === null" >
+                            <p *ngIf="attempt.success === null">
                                 {{ 'addon.mod_h5pactivity.attempt_success_unknown' | translate }}
                             </p>
                         </ion-label>
@@ -89,15 +91,15 @@
                 <ion-card *ngFor="let result of attempt.results">
                     <ion-card-header class="ion-text-wrap">
                         <ion-card-title>
-                            <core-format-text [text]="result.description" [component]="component" [componentId]="cmId"
-                                contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId">
+                            <core-format-text [text]="result.description" [component]="component" [componentId]="cmId" contextLevel="module"
+                                [contextInstanceId]="cmId" [courseId]="courseId">
                             </core-format-text>
                         </ion-card-title>
                     </ion-card-header>
                     <ion-item *ngIf="result.content" class="ion-text-wrap">
                         <ion-label>
-                            <core-format-text [text]="result.content" [component]="component" [componentId]="cmId"
-                                contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId">
+                            <core-format-text [text]="result.content" [component]="component" [componentId]="cmId" contextLevel="module"
+                                [contextInstanceId]="cmId" [courseId]="courseId">
                             </core-format-text>
                         </ion-label>
                     </ion-item>
@@ -113,8 +115,7 @@
                                 </ion-row>
                             </ion-label>
                         </ion-item>
-                        <ion-item *ngFor="let option of result.options"
-                            class="ion-text-wrap addon-mod_h5pactivity-result-table-row">
+                        <ion-item *ngFor="let option of result.options" class="ion-text-wrap addon-mod_h5pactivity-result-table-row">
                             <ion-label>
                                 <ion-row class="ion-align-items-center">
                                     <ion-col class="ion-text-center">
@@ -124,8 +125,7 @@
                                     </ion-col>
                                     <ion-col class="ion-text-center">
                                         <ng-container *ngIf="option.correctanswer">
-                                            <ng-container
-                                                *ngTemplateOutlet="answerTemplate; context: {answer: option.correctanswer}">
+                                            <ng-container *ngTemplateOutlet="answerTemplate; context: {answer: option.correctanswer}">
                                             </ng-container>
                                         </ng-container>
                                     </ion-col>
@@ -143,9 +143,9 @@
                         <ion-item *ngIf="result.maxscore" class="ion-text-wrap ion-text-end addon-mod_h5pactivity-result-score">
                             <ion-label>
                                 <p><strong>
-                                    {{ 'addon.mod_h5pactivity.score' | translate }}:
-                                     {{ 'addon.mod_h5pactivity.score_out_of' | translate:{$a: result} }}
-                                </strong></p>
+                                        {{ 'addon.mod_h5pactivity.score' | translate }}:
+                                        {{ 'addon.mod_h5pactivity.score_out_of' | translate:{$a: result} }}
+                                    </strong></p>
                             </ion-label>
                         </ion-item>
                     </ng-container>
diff --git a/src/addons/mod/h5pactivity/pages/index/index.html b/src/addons/mod/h5pactivity/pages/index/index.html
index 1001692cf..6ac751048 100644
--- a/src/addons/mod/h5pactivity/pages/index/index.html
+++ b/src/addons/mod/h5pactivity/pages/index/index.html
@@ -3,10 +3,12 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
 
         <ion-buttons slot="end">
             <!-- The buttons defined by the component will be added in here. -->
diff --git a/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.html b/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.html
index 31ca8fcd6..5432ccb09 100644
--- a/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.html
+++ b/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.html
@@ -3,11 +3,13 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text *ngIf="h5pActivity" [text]="h5pActivity.name" contextLevel="module"
-                [contextInstanceId]="h5pActivity.coursemodule" [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text *ngIf="h5pActivity" [text]="h5pActivity.name" contextLevel="module"
+                    [contextInstanceId]="h5pActivity.coursemodule" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
diff --git a/src/addons/mod/h5pactivity/pages/users-attempts/users-attempts.html b/src/addons/mod/h5pactivity/pages/users-attempts/users-attempts.html
index 37ed87b63..375cb84cc 100644
--- a/src/addons/mod/h5pactivity/pages/users-attempts/users-attempts.html
+++ b/src/addons/mod/h5pactivity/pages/users-attempts/users-attempts.html
@@ -3,11 +3,13 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text *ngIf="h5pActivity" [text]="h5pActivity.name" contextLevel="module"
-                [contextInstanceId]="h5pActivity.coursemodule" [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text *ngIf="h5pActivity" [text]="h5pActivity.name" contextLevel="module"
+                    [contextInstanceId]="h5pActivity.coursemodule" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
diff --git a/src/addons/mod/imscp/components/toc/toc.html b/src/addons/mod/imscp/components/toc/toc.html
index 2d06279f9..e9aee76c6 100644
--- a/src/addons/mod/imscp/components/toc/toc.html
+++ b/src/addons/mod/imscp/components/toc/toc.html
@@ -1,6 +1,8 @@
 <ion-header>
     <ion-toolbar>
-        <h1>{{ 'addon.mod_imscp.toc' | translate }}</h1>
+        <ion-title>
+            <h2>{{ 'addon.mod_imscp.toc' | translate }}</h2>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon name="fas-times" slot="icon-only" aria-hidden=true></ion-icon>
diff --git a/src/addons/mod/imscp/pages/index/index.html b/src/addons/mod/imscp/pages/index/index.html
index 98a8c22b2..712346154 100644
--- a/src/addons/mod/imscp/pages/index/index.html
+++ b/src/addons/mod/imscp/pages/index/index.html
@@ -3,10 +3,12 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module?.id" [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module?.id" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
 
         <ion-buttons slot="end">
             <!-- The buttons defined by the component will be added in here. -->
diff --git a/src/addons/mod/lesson/components/menu-modal/menu-modal.html b/src/addons/mod/lesson/components/menu-modal/menu-modal.html
index c70b46229..80e242f0b 100644
--- a/src/addons/mod/lesson/components/menu-modal/menu-modal.html
+++ b/src/addons/mod/lesson/components/menu-modal/menu-modal.html
@@ -1,7 +1,8 @@
 <ion-header>
     <ion-toolbar>
-        <h2>{{ pageInstance?.lesson?.name }}</h2>
-
+        <ion-title>
+            <h2>{{ pageInstance?.lesson?.name }}</h2>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-times" aria-hidden="true"></ion-icon>
@@ -15,7 +16,9 @@
             <!-- Media file. -->
             <ng-container *ngIf="pageInstance.mediaFile">
                 <ion-item-divider>
-                    <ion-label><h2>{{ 'addon.mod_lesson.linkedmedia' | translate }}</h2></ion-label>
+                    <ion-label>
+                        <h2>{{ 'addon.mod_lesson.linkedmedia' | translate }}</h2>
+                    </ion-label>
                 </ion-item-divider>
                 <core-file [file]="pageInstance.mediaFile" [component]="pageInstance.component"
                     [componentId]="pageInstance.lesson?.coursemodule">
@@ -25,16 +28,20 @@
             <!-- Lesson menu. -->
             <ng-container *ngIf="pageInstance.displayMenu">
                 <ion-item-divider>
-                    <ion-label><h2>{{ 'addon.mod_lesson.lessonmenu' | translate }}</h2></ion-label>
+                    <ion-label>
+                        <h2>{{ 'addon.mod_lesson.lessonmenu' | translate }}</h2>
+                    </ion-label>
                 </ion-item-divider>
                 <ion-item class="ion-text-center" *ngIf="pageInstance.loadingMenu">
-                    <ion-label><ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner></ion-label>
+                    <ion-label>
+                        <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+                    </ion-label>
                 </ion-item>
                 <div *ngIf="!pageInstance.loadingMenu">
                     <ng-container *ngFor="let page of pageInstance.lessonPages">
                         <ion-item class="ion-text-wrap" *ngIf="page.display && page.displayinmenublock" (click)="loadPage(page.id)"
-                            [attr.aria-current]="!pageInstance.eolData && pageInstance.currentPage == page.id ? 'page' : 'false'"
-                            button detail="true">
+                            [attr.aria-current]="!pageInstance.eolData && pageInstance.currentPage == page.id ? 'page' : 'false'" button
+                            detail="true">
                             <ion-label>
                                 <core-format-text [text]="page.title" contextLevel="module" [courseId]="pageInstance.courseId"
                                     [contextInstanceId]="pageInstance.lesson?.coursemodule">
diff --git a/src/addons/mod/lesson/components/password-modal/password-modal.html b/src/addons/mod/lesson/components/password-modal/password-modal.html
index fe3013504..1f033719b 100644
--- a/src/addons/mod/lesson/components/password-modal/password-modal.html
+++ b/src/addons/mod/lesson/components/password-modal/password-modal.html
@@ -1,7 +1,8 @@
 <ion-header>
     <ion-toolbar>
-        <h2>{{ 'core.login.password' | translate }}</h2>
-
+        <ion-title>
+            <h2>{{ 'core.login.password' | translate }}</h2>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-times" aria-hidden="true"></ion-icon>
@@ -14,8 +15,8 @@
         <ion-item>
             <ion-label>{{ 'addon.mod_lesson.enterpassword' | translate }}</ion-label>
             <core-show-password name="password">
-                <ion-input name="password" type="password" placeholder="{{ 'core.login.password' | translate }}"
-                    core-auto-focus #passwordinput [clearOnEdit]="false">
+                <ion-input name="password" type="password" placeholder="{{ 'core.login.password' | translate }}" core-auto-focus
+                    #passwordinput [clearOnEdit]="false">
                 </ion-input>
             </core-show-password>
         </ion-item>
diff --git a/src/addons/mod/lesson/pages/index/index.html b/src/addons/mod/lesson/pages/index/index.html
index ba95ea502..a6b75a913 100644
--- a/src/addons/mod/lesson/pages/index/index.html
+++ b/src/addons/mod/lesson/pages/index/index.html
@@ -3,10 +3,12 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module?.id" [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module?.id" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
         <ion-buttons slot="end">
             <!-- The buttons defined by the component will be added in here. -->
         </ion-buttons>
diff --git a/src/addons/mod/lesson/pages/player/player.html b/src/addons/mod/lesson/pages/player/player.html
index b5a0a9e7b..0a55d7838 100644
--- a/src/addons/mod/lesson/pages/player/player.html
+++ b/src/addons/mod/lesson/pages/player/player.html
@@ -3,11 +3,12 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="lesson?.coursemodule"
-                [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="lesson?.coursemodule" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" *ngIf="displayMenu || mediaFile" [attr.aria-label]="'addon.mod_lesson.lessonmenu' | translate"
                 (click)="showMenu()">
@@ -46,15 +47,14 @@
             <ion-card *ngIf="!eolData && !processData">
                 <!-- Content page. -->
                 <ion-item class="ion-text-wrap" *ngIf="!question && pageContent">
-                    <core-format-text [component]="component" [componentId]="lesson.coursemodule" [text]="pageContent"
-                        contextLevel="module" [contextInstanceId]="lesson.coursemodule" [courseId]="courseId">
+                    <core-format-text [component]="component" [componentId]="lesson.coursemodule" [text]="pageContent" contextLevel="module"
+                        [contextInstanceId]="lesson.coursemodule" [courseId]="courseId">
                     </core-format-text>
                 </ion-item>
 
                 <!-- Question page. -->
                 <!-- We need to set ngIf loaded to make formGroup directive restart every time a page changes, see MOBILE-2540. -->
-                <form *ngIf="question && loaded" [formGroup]="questionForm" #questionFormEl
-                    (ngSubmit)="submitQuestion($event)">
+                <form *ngIf="question && loaded" [formGroup]="questionForm" #questionFormEl (ngSubmit)="submitQuestion($event)">
 
                     <ion-item-divider class="ion-text-wrap" *ngIf="pageContent">
                         <ion-label>
@@ -91,8 +91,8 @@
                                     <h3 class="item-heading">{{ 'addon.mod_lesson.youranswer' | translate }}</h3>
                                     <p>
                                         <core-format-text [component]="component" [componentId]="lesson?.coursemodule"
-                                            [text]="question.useranswer" contextLevel="module"
-                                            [contextInstanceId]="lesson?.coursemodule" [courseId]="courseId">
+                                            [text]="question.useranswer" contextLevel="module" [contextInstanceId]="lesson?.coursemodule"
+                                            [courseId]="courseId">
                                         </core-format-text>
                                     </p>
                                 </ion-label>
@@ -105,9 +105,8 @@
                             <ion-radio-group *ngIf="!question.multi" [formControlName]="question.controlName">
                                 <ion-item class="ion-text-wrap" *ngFor="let option of question.options">
                                     <ion-label>
-                                        <core-format-text [component]="component" [componentId]="lesson.coursemodule"
-                                            [text]="option.text" contextLevel="module" [contextInstanceId]="lesson?.coursemodule"
-                                            [courseId]="courseId">
+                                        <core-format-text [component]="component" [componentId]="lesson.coursemodule" [text]="option.text"
+                                            contextLevel="module" [contextInstanceId]="lesson?.coursemodule" [courseId]="courseId">
                                         </core-format-text>
                                     </ion-label>
                                     <ion-radio slot="end" [id]="option.id" [value]="option.value" [disabled]="option.disabled">
@@ -119,9 +118,8 @@
                             <ng-container *ngIf="question.multi">
                                 <ion-item class="ion-text-wrap" *ngFor="let option of question.options">
                                     <ion-label>
-                                        <core-format-text [component]="component" [componentId]="lesson?.coursemodule"
-                                            [text]="option.text" contextLevel="module" [contextInstanceId]="lesson?.coursemodule"
-                                            [courseId]="courseId">
+                                        <core-format-text [component]="component" [componentId]="lesson?.coursemodule" [text]="option.text"
+                                            contextLevel="module" [contextInstanceId]="lesson?.coursemodule" [courseId]="courseId">
                                         </core-format-text>
                                     </ion-label>
                                     <ion-checkbox [id]="option.id" [formControlName]="option.name" slot="end"></ion-checkbox>
@@ -133,10 +131,12 @@
                         <ng-container *ngSwitchCase="'matching'">
                             <ion-item class="ion-text-wrap" *ngFor="let row of question.rows">
                                 <ion-label>
-                                    <p><core-format-text id="addon-mod_lesson-matching-{{row.id}}" [component]="component"
-                                        [componentId]="lesson?.coursemodule" [text]="row.text" contextLevel="module"
-                                        [contextInstanceId]="lesson?.coursemodule" [courseId]="courseId">
-                                    </core-format-text></p>
+                                    <p>
+                                        <core-format-text id="addon-mod_lesson-matching-{{row.id}}" [component]="component"
+                                            [componentId]="lesson?.coursemodule" [text]="row.text" contextLevel="module"
+                                            [contextInstanceId]="lesson?.coursemodule" [courseId]="courseId">
+                                        </core-format-text>
+                                    </p>
                                 </ion-label>
                                 <ion-select [id]="row.id" [formControlName]="row.name" interface="action-sheet"
                                     [attr.aria-labelledby]="'addon-mod_lesson-matching-' + row.id">
@@ -161,8 +161,8 @@
                 <ion-grid *ngIf="pageButtons?.length" class="ion-text-wrap addon-mod_lesson-pagebuttons">
                     <ion-row class="ion-align-items-center">
                         <ion-col *ngFor="let button of pageButtons" size="12" size-md="6" size-lg="3" col-xl>
-                            <ion-button expand="block" fill="outline" [id]="button.id"
-                                (click)="buttonClicked(button.data)" class="ion-text-wrap button-no-uppercase">
+                            <ion-button expand="block" fill="outline" [id]="button.id" (click)="buttonClicked(button.data)"
+                                class="ion-text-wrap button-no-uppercase">
                                 {{ button.content }}
                             </ion-button>
                         </ion-col>
@@ -213,8 +213,7 @@
                 <ion-item class="ion-text-wrap" *ngIf="eolData.displayscorewithessays" lines="none">
                     <ion-label [innerHTML]="eolData.displayscorewithessays.message"></ion-label>
                 </ion-item>
-                <ion-item class="ion-text-wrap" *ngIf="!eolData.displayscorewithessays && eolData.displayscorewithoutessays"
-                    lines="none">
+                <ion-item class="ion-text-wrap" *ngIf="!eolData.displayscorewithessays && eolData.displayscorewithoutessays" lines="none">
                     <ion-label>{{ eolData.displayscorewithoutessays.message }}</ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="eolData.yourcurrentgradeisoutof" lines="none">
@@ -247,19 +246,17 @@
                     <ion-label>{{ eolData.modattemptsnoteacher.message }}</ion-label>
                 </ion-item>
                 <!-- If activity link was successfully formatted, render the button. -->
-                <ion-button *ngIf="activityLink && activityLink.formatted"
-                    expand="block" color="light" [href]="activityLink.href" core-link [capture]="true"
-                    class="ion-text-wrap ion-margin button-no-uppercase">
-                    <core-format-text [text]="activityLink.label" contextLevel="module"
-                        [contextInstanceId]="lesson?.coursemodule" [courseId]="courseId">
+                <ion-button *ngIf="activityLink && activityLink.formatted" expand="block" color="light" [href]="activityLink.href" core-link
+                    [capture]="true" class="ion-text-wrap ion-margin button-no-uppercase">
+                    <core-format-text [text]="activityLink.label" contextLevel="module" [contextInstanceId]="lesson?.coursemodule"
+                        [courseId]="courseId">
                     </core-format-text>
                 </ion-button>
-                <ion-item class="ion-text-wrap" *ngIf="activityLink && !activityLink.formatted"
-                    lines="none">
+                <ion-item class="ion-text-wrap" *ngIf="activityLink && !activityLink.formatted" lines="none">
                     <!-- Activity link wasn't formatted, render the original link. -->
                     <ion-label>
-                        <core-format-text [text]="activityLink.label" contextLevel="module"
-                            [contextInstanceId]="lesson?.coursemodule" [courseId]="courseId">
+                        <core-format-text [text]="activityLink.label" contextLevel="module" [contextInstanceId]="lesson?.coursemodule"
+                            [courseId]="courseId">
                         </core-format-text>
                     </ion-label>
                 </ion-item>
@@ -267,15 +264,14 @@
 
             <!-- Feedback returned when processing an action. -->
             <ion-list *ngIf="processData">
-                <ion-item class="ion-text-wrap" *ngIf="processData.ongoingscore && !processData.reviewmode" >
+                <ion-item class="ion-text-wrap" *ngIf="processData.ongoingscore && !processData.reviewmode">
                     <ion-label>{{ processData.ongoingscore }}</ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="!processData.reviewmode || review">
                     <ion-label>
                         <div *ngIf="!processData.reviewmode">
-                            <core-format-text [component]="component" [componentId]="lesson?.coursemodule"
-                                [text]="processData.feedback" contextLevel="module" [contextInstanceId]="lesson?.coursemodule"
-                                [courseId]="courseId">
+                            <core-format-text [component]="component" [componentId]="lesson?.coursemodule" [text]="processData.feedback"
+                                contextLevel="module" [contextInstanceId]="lesson?.coursemodule" [courseId]="courseId">
                             </core-format-text>
                         </div>
                         <div *ngIf="review">
@@ -286,8 +282,7 @@
                     </ion-label>
                 </ion-item>
 
-                <ion-button expand="block" class="ion-text-wrap ion-margin" color="light" *ngIf="review"
-                    (click)="changePage(LESSON_EOL)">
+                <ion-button expand="block" class="ion-text-wrap ion-margin" color="light" *ngIf="review" (click)="changePage(LESSON_EOL)">
                     {{ 'addon.mod_lesson.finish' | translate }}
                 </ion-button>
                 <ion-button expand="block" class="ion-text-wrap ion-margin" color="light" *ngFor="let button of processDataButtons"
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 a9f17d998..9d0c40651 100644
--- a/src/addons/mod/lesson/pages/user-retake/user-retake.html
+++ b/src/addons/mod/lesson/pages/user-retake/user-retake.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ 'addon.mod_lesson.detailedstats' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'addon.mod_lesson.detailedstats' | translate }}</h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
@@ -133,8 +135,8 @@
                                     <ion-label>
                                         <p>
                                             <core-format-text [component]="component" [componentId]="lesson?.coursemodule"
-                                                [text]="answer[0].content" contextLevel="module"
-                                                [contextInstanceId]="lesson?.coursemodule" [courseId]="courseId">
+                                                [text]="answer[0].content" contextLevel="module" [contextInstanceId]="lesson?.coursemodule"
+                                                [courseId]="courseId">
                                             </core-format-text>
                                         </p>
                                         <ion-badge *ngIf="answer[1]" color="dark">
@@ -144,8 +146,7 @@
                                             </core-format-text>
                                         </ion-badge>
                                     </ion-label>
-                                    <ion-checkbox [attr.name]="answer[0].name" [ngModel]="answer[0].checked" [disabled]="true"
-                                        slot="end">
+                                    <ion-checkbox [attr.name]="answer[0].name" [ngModel]="answer[0].checked" [disabled]="true" slot="end">
                                     </ion-checkbox>
                                 </ion-item>
 
@@ -213,15 +214,13 @@
                                 <!-- Another page (end of branch, ...). -->
                                 <ion-label>
                                     <p>
-                                        <core-format-text [component]="component" [componentId]="lesson?.coursemodule"
-                                            [text]="answer[0]" contextLevel="module" [contextInstanceId]="lesson?.coursemodule"
-                                            [courseId]="courseId">
+                                        <core-format-text [component]="component" [componentId]="lesson?.coursemodule" [text]="answer[0]"
+                                            contextLevel="module" [contextInstanceId]="lesson?.coursemodule" [courseId]="courseId">
                                         </core-format-text>
                                     </p>
                                     <ion-badge *ngIf="answer[1]" color="dark">
-                                        <core-format-text [component]="component" [componentId]="lesson?.coursemodule"
-                                            [text]="answer[1]" contextLevel="module" [contextInstanceId]="lesson?.coursemodule"
-                                            [courseId]="courseId">
+                                        <core-format-text [component]="component" [componentId]="lesson?.coursemodule" [text]="answer[1]"
+                                            contextLevel="module" [contextInstanceId]="lesson?.coursemodule" [courseId]="courseId">
                                         </core-format-text>
                                     </ion-badge>
                                 </ion-label>
@@ -233,14 +232,16 @@
                                 <h3 class="item-heading">{{ 'addon.mod_lesson.response' | translate }}</h3>
                                 <p>
                                     <core-format-text [component]="component" [componentId]="lesson?.coursemodule"
-                                        [text]="page.answerdata.response" contextLevel="module"
-                                        [contextInstanceId]="lesson?.coursemodule" [courseId]="courseId">
+                                        [text]="page.answerdata.response" contextLevel="module" [contextInstanceId]="lesson?.coursemodule"
+                                        [courseId]="courseId">
                                     </core-format-text>
                                 </p>
                             </ion-label>
                         </ion-item>
                         <ion-item class="ion-text-wrap" *ngIf="page.answerdata.score">
-                            <ion-label><p>{{page.answerdata.score}}</p></ion-label>
+                            <ion-label>
+                                <p>{{page.answerdata.score}}</p>
+                            </ion-label>
                         </ion-item>
                     </div>
                 </ion-card>
diff --git a/src/addons/mod/lti/pages/index/index.html b/src/addons/mod/lti/pages/index/index.html
index f742d5232..9b7017a3f 100644
--- a/src/addons/mod/lti/pages/index/index.html
+++ b/src/addons/mod/lti/pages/index/index.html
@@ -3,10 +3,12 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
 
         <ion-buttons slot="end">
             <!-- The buttons defined by the component will be added in here. -->
diff --git a/src/addons/mod/page/pages/index/index.html b/src/addons/mod/page/pages/index/index.html
index a5db017ea..cab819bed 100644
--- a/src/addons/mod/page/pages/index/index.html
+++ b/src/addons/mod/page/pages/index/index.html
@@ -3,10 +3,12 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module?.id" [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module?.id" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
         <ion-buttons slot="end">
             <!-- The buttons defined by the component will be added in here. -->
         </ion-buttons>
diff --git a/src/addons/mod/quiz/components/navigation-modal/navigation-modal.html b/src/addons/mod/quiz/components/navigation-modal/navigation-modal.html
index 676df5862..9899cb608 100644
--- a/src/addons/mod/quiz/components/navigation-modal/navigation-modal.html
+++ b/src/addons/mod/quiz/components/navigation-modal/navigation-modal.html
@@ -1,7 +1,8 @@
 <ion-header>
     <ion-toolbar>
-        <h2>{{ 'addon.mod_quiz.quiznavigation' | translate }}</h2>
-
+        <ion-title>
+            <h2>{{ 'addon.mod_quiz.quiznavigation' | translate }}</h2>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-times" aria-hidden="true"></ion-icon>
@@ -41,12 +42,12 @@
                 <ion-icon *ngIf="question.stateClass == 'core-question-correct'" name="fas-check" color="success"
                     [attr.aria-label]="question.status" slot="end">
                 </ion-icon>
-                <ion-icon *ngIf="question.stateClass == 'core-question-partiallycorrect'" name="fas-check-square"
-                    color="warning" [attr.aria-label]="question.status" slot="end">
+                <ion-icon *ngIf="question.stateClass == 'core-question-partiallycorrect'" name="fas-check-square" color="warning"
+                    [attr.aria-label]="question.status" slot="end">
                 </ion-icon>
                 <ion-icon *ngIf="question.stateClass == 'core-question-incorrect' ||
-                    question.stateClass == 'core-question-notanswered'" name="fas-times" color="danger"
-                    [attr.aria-label]="question.status" slot="end">
+                    question.stateClass == 'core-question-notanswered'" name="fas-times" color="danger" [attr.aria-label]="question.status"
+                    slot="end">
                 </ion-icon>
             </ion-item>
 
diff --git a/src/addons/mod/quiz/components/preflight-modal/preflight-modal.html b/src/addons/mod/quiz/components/preflight-modal/preflight-modal.html
index 870360c9e..c642e6cc9 100644
--- a/src/addons/mod/quiz/components/preflight-modal/preflight-modal.html
+++ b/src/addons/mod/quiz/components/preflight-modal/preflight-modal.html
@@ -1,7 +1,8 @@
 <ion-header>
     <ion-toolbar>
-        <h2>{{ title | translate }}</h2>
-
+        <ion-title>
+            <h2>{{ title | translate }}</h2>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-times" aria-hidden="true"></ion-icon>
diff --git a/src/addons/mod/quiz/pages/attempt/attempt.html b/src/addons/mod/quiz/pages/attempt/attempt.html
index e709c561d..adf13e110 100644
--- a/src/addons/mod/quiz/pages/attempt/attempt.html
+++ b/src/addons/mod/quiz/pages/attempt/attempt.html
@@ -3,11 +3,13 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text *ngIf="quiz" [text]="quiz.name" contextLevel="module" [contextInstanceId]="quiz.coursemodule"
-                [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text *ngIf="quiz" [text]="quiz.name" contextLevel="module" [contextInstanceId]="quiz.coursemodule"
+                    [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
@@ -45,8 +47,8 @@
                 <ion-label>
                     <h2>{{ 'addon.mod_quiz.feedback' | translate }}</h2>
                     <p>
-                        <core-format-text [component]="component" [componentId]="componentId" [text]="feedback"
-                            contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId">
+                        <core-format-text [component]="component" [componentId]="componentId" [text]="feedback" contextLevel="module"
+                            [contextInstanceId]="cmId" [courseId]="courseId">
                         </core-format-text>
                     </p>
                 </ion-label>
diff --git a/src/addons/mod/quiz/pages/index/index.html b/src/addons/mod/quiz/pages/index/index.html
index 2cbf6b449..9a58a95ff 100644
--- a/src/addons/mod/quiz/pages/index/index.html
+++ b/src/addons/mod/quiz/pages/index/index.html
@@ -3,10 +3,12 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module?.id" [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module?.id" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
 
         <ion-buttons slot="end">
             <!-- The buttons defined by the component will be added in here. -->
diff --git a/src/addons/mod/quiz/pages/player/player.html b/src/addons/mod/quiz/pages/player/player.html
index bd8d40246..b234f85ef 100644
--- a/src/addons/mod/quiz/pages/player/player.html
+++ b/src/addons/mod/quiz/pages/player/player.html
@@ -3,11 +3,13 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text *ngIf="quiz" [text]="quiz.name" contextLevel="module" [contextInstanceId]="quiz.coursemodule"
-                [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text *ngIf="quiz" [text]="quiz.name" contextLevel="module" [contextInstanceId]="quiz.coursemodule"
+                    [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
 
         <ion-buttons slot="end">
             <ion-button fill="clear" id="addon-mod_quiz-connection-error-button" [hidden]="!autoSaveError"
@@ -15,8 +17,7 @@
                 aria-haspopup="dialog">
                 <ion-icon name="fas-exclamation-circle" slot="icon-only" aria-hidden="true"></ion-icon>
             </ion-button>
-            <ion-button *ngIf="navigation.length" [attr.aria-label]="'addon.mod_quiz.opentoc' | translate"
-                (click)="openNavigation()">
+            <ion-button *ngIf="navigation.length" [attr.aria-label]="'addon.mod_quiz.opentoc' | translate" (click)="openNavigation()">
                 <ion-icon name="fas-bookmark" slot="icon-only" aria-hidden="true"></ion-icon>
             </ion-button>
         </ion-buttons>
@@ -24,8 +25,7 @@
     <!-- Navigation arrows and time left. -->
     <ion-toolbar *ngIf="loaded && endTime && questions.length && !quizAborted && !showSummary" color="light">
         <ion-title>
-            <core-timer [endTime]="endTime" (finished)="timeUp()" [timerText]="'addon.mod_quiz.timeleft' | translate"
-                [align]="'center'">
+            <core-timer [endTime]="endTime" (finished)="timeUp()" [timerText]="'addon.mod_quiz.timeleft' | translate" [align]="'center'">
             </core-timer>
         </ion-title>
         <ion-buttons slot="end">
@@ -79,10 +79,9 @@
                     </ion-item-divider>
 
                     <!-- Body of the question. -->
-                    <core-question class="ion-text-wrap" [question]="question" [component]="component"
-                        [componentId]="cmId" [attemptId]="attempt!.id" [usageId]="attempt!.uniqueid"
-                        [offlineEnabled]="offline" contextLevel="module" [contextInstanceId]="cmId"
-                        [courseId]="courseId" [preferredBehaviour]="quiz!.preferredbehaviour" [review]="false"
+                    <core-question class="ion-text-wrap" [question]="question" [component]="component" [componentId]="cmId"
+                        [attemptId]="attempt!.id" [usageId]="attempt!.uniqueid" [offlineEnabled]="offline" contextLevel="module"
+                        [contextInstanceId]="cmId" [courseId]="courseId" [preferredBehaviour]="quiz!.preferredbehaviour" [review]="false"
                         (onAbort)="abortQuiz()" (buttonClicked)="behaviourButtonClicked($event)">
                     </core-question>
                 </ion-card>
@@ -92,7 +91,7 @@
         <!-- Go to next or previous page. -->
         <ion-grid class="ion-text-wrap" *ngIf="questions.length && !quizAborted && !showSummary">
             <ion-row>
-                <ion-col *ngIf="previousPage >= 0" >
+                <ion-col *ngIf="previousPage >= 0">
                     <ion-button expand="block" color="light" (click)="changePage(previousPage)">
                         <ion-icon name="fas-chevron-left" slot="start" aria-hidden="true"></ion-icon>
                         {{ 'core.previous' | translate }}
@@ -131,8 +130,8 @@
             <!-- List of questions of the summary table. -->
             <ng-container *ngFor="let question of summaryQuestions">
                 <ion-item *ngIf="question.number" (click)="changePage(question.page, false, question.slot)"
-                    [attr.aria-label]="'core.question.questionno' | translate:{$a: question.number}"
-                    [detail]="!isSequential && canReturn" [button]="!isSequential && canReturn">
+                    [attr.aria-label]="'core.question.questionno' | translate:{$a: question.number}" [detail]="!isSequential && canReturn"
+                    [button]="!isSequential && canReturn">
                     <ion-label>
                         <ion-row class="ion-align-items-center">
                             <ion-col size="3" class="ion-text-center">{{ question.number }}</ion-col>
@@ -153,8 +152,7 @@
             </ion-item>
 
             <!-- Time left (if quiz is timed). -->
-            <core-timer *ngIf="endTime" [endTime]="endTime" (finished)="timeUp()"
-                [timerText]="'addon.mod_quiz.timeleft' | translate">
+            <core-timer *ngIf="endTime" [endTime]="endTime" (finished)="timeUp()" [timerText]="'addon.mod_quiz.timeleft' | translate">
             </core-timer>
 
             <!-- List of messages explaining why the quiz cannot be submitted. -->
@@ -165,15 +163,14 @@
                 </ion-label>
             </ion-item>
 
-            <ion-button *ngIf="preventSubmitMessages.length" expand="block" [href]="moduleUrl" core-link
-                [showBrowserWarning]="false">
+            <ion-button *ngIf="preventSubmitMessages.length" expand="block" [href]="moduleUrl" core-link [showBrowserWarning]="false">
                 {{ 'core.openinbrowser' | translate }}
                 <ion-icon name="fas-external-link-alt" slot="end" aria-hidden="true"></ion-icon>
             </ion-button>
 
             <!-- Button to submit the quiz. -->
-            <ion-button *ngIf="!attempt!.finishedOffline && !preventSubmitMessages.length" expand="block"
-                class="ion-margin" (click)="finishAttempt(true)">
+            <ion-button *ngIf="!attempt!.finishedOffline && !preventSubmitMessages.length" expand="block" class="ion-margin"
+                (click)="finishAttempt(true)">
                 {{ 'addon.mod_quiz.submitallandfinish' | translate }}
             </ion-button>
         </ion-card>
diff --git a/src/addons/mod/quiz/pages/review/review.html b/src/addons/mod/quiz/pages/review/review.html
index 214c2e0e9..be30538f5 100644
--- a/src/addons/mod/quiz/pages/review/review.html
+++ b/src/addons/mod/quiz/pages/review/review.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ 'addon.mod_quiz.review' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'addon.mod_quiz.review' | translate }}</h1>
+        </ion-title>
 
         <ion-buttons slot="end">
             <ion-button fill="clear" *ngIf="navigation.length" [attr.aria-label]="'addon.mod_quiz.opentoc' | translate"
@@ -75,8 +77,8 @@
                 <ion-item class="ion-text-wrap" *ngFor="let data of additionalData">
                     <ion-label>
                         <p class="item-heading">{{ data.title }}</p>
-                        <core-format-text [component]="component" [componentId]="cmId" [text]="data.content"
-                            contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId">
+                        <core-format-text [component]="component" [componentId]="cmId" [text]="data.content" contextLevel="module"
+                            [contextInstanceId]="cmId" [courseId]="courseId">
                         </core-format-text>
                     </ion-label>
                 </ion-item>
@@ -107,8 +109,7 @@
                     <!-- Body of the question. -->
                     <core-question class="ion-text-wrap" [question]="question" [component]="component" [componentId]="cmId"
                         [attemptId]="attempt.id" [usageId]="attempt.uniqueid" [offlineEnabled]="false" contextLevel="module"
-                        [contextInstanceId]="cmId" [courseId]="courseId" [review]="true"
-                        [preferredBehaviour]="quiz?.preferredbehaviour">
+                        [contextInstanceId]="cmId" [courseId]="courseId" [review]="true" [preferredBehaviour]="quiz?.preferredbehaviour">
                     </core-question>
                 </ion-card>
             </div>
@@ -130,8 +131,7 @@
                 </ion-button>
             </ion-col>
             <ion-col class="ion-text-end">
-                <ion-button color="light" *ngIf="nextPage >= -1" (click)="changePage(nextPage)"
-                    [attr.aria-label]="'core.next' | translate">
+                <ion-button color="light" *ngIf="nextPage >= -1" (click)="changePage(nextPage)" [attr.aria-label]="'core.next' | translate">
                     <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
                 </ion-button>
             </ion-col>
diff --git a/src/addons/mod/resource/pages/index/index.html b/src/addons/mod/resource/pages/index/index.html
index d86648348..ac1c3727e 100644
--- a/src/addons/mod/resource/pages/index/index.html
+++ b/src/addons/mod/resource/pages/index/index.html
@@ -3,10 +3,12 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module?.id" [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module?.id" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
 
         <ion-buttons slot="end">
             <!-- The buttons defined by the component will be added in here. -->
diff --git a/src/addons/mod/scorm/components/toc/toc.html b/src/addons/mod/scorm/components/toc/toc.html
index 6240aebd5..01163c6fc 100644
--- a/src/addons/mod/scorm/components/toc/toc.html
+++ b/src/addons/mod/scorm/components/toc/toc.html
@@ -1,6 +1,8 @@
 <ion-header>
     <ion-toolbar>
-        <h1>{{ 'addon.mod_scorm.toc' | translate }}</h1>
+        <ion-title>
+            <h2>{{ 'addon.mod_scorm.toc' | translate }}</h2>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-times" aria-hidden="true"></ion-icon>
@@ -36,8 +38,7 @@
                     <ion-icon *ngIf="sco.icon" [name]="sco.icon.icon" [attr.aria-label]="sco.icon.description" slot="start">
                     </ion-icon>
                     <ion-label>
-                        <core-format-text [text]="sco.title" contextLevel="module" [contextInstanceId]="moduleId"
-                            [courseId]="courseId">
+                        <core-format-text [text]="sco.title" contextLevel="module" [contextInstanceId]="moduleId" [courseId]="courseId">
                         </core-format-text>
                         <span *ngIf="accessInfo && accessInfo.canviewscores && sco.scoreraw">
                             ({{ 'addon.mod_scorm.score' | translate }}: {{sco.scoreraw}})
diff --git a/src/addons/mod/scorm/pages/index/index.html b/src/addons/mod/scorm/pages/index/index.html
index 2e3a4ded7..fc1e6f57f 100644
--- a/src/addons/mod/scorm/pages/index/index.html
+++ b/src/addons/mod/scorm/pages/index/index.html
@@ -3,10 +3,12 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module?.id" [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module?.id" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
         <ion-buttons slot="end">
             <!-- The buttons defined by the component will be added in here. -->
         </ion-buttons>
diff --git a/src/addons/mod/scorm/pages/player/player.html b/src/addons/mod/scorm/pages/player/player.html
index 02e55ff42..469a6bd01 100644
--- a/src/addons/mod/scorm/pages/player/player.html
+++ b/src/addons/mod/scorm/pages/player/player.html
@@ -3,14 +3,16 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
         <ion-buttons slot="end">
             <core-button-with-spinner *ngIf="showToc" [loading]="loadingToc">
-                <ion-button fill="clear" *ngIf="toc.length" (click)="openToc()"
-                    [attr.aria-label]="'addon.mod_scorm.toc' | translate" aria-haspopup="true">
+                <ion-button fill="clear" *ngIf="toc.length" (click)="openToc()" [attr.aria-label]="'addon.mod_scorm.toc' | translate"
+                    aria-haspopup="true">
                     <ion-icon name="fas-bookmark" slot="icon-only" aria-hidden="true"></ion-icon>
                 </ion-button>
             </core-button-with-spinner>
diff --git a/src/addons/mod/survey/pages/index/index.html b/src/addons/mod/survey/pages/index/index.html
index 8d0ffd272..808d88eb1 100644
--- a/src/addons/mod/survey/pages/index/index.html
+++ b/src/addons/mod/survey/pages/index/index.html
@@ -3,9 +3,11 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id"></core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id"></core-format-text>
+            </h1>
+        </ion-title>
 
         <ion-buttons slot="end">
             <!-- The buttons defined by the component will be added in here. -->
diff --git a/src/addons/mod/url/pages/index/index.html b/src/addons/mod/url/pages/index/index.html
index b93cbc153..45dc4198c 100644
--- a/src/addons/mod/url/pages/index/index.html
+++ b/src/addons/mod/url/pages/index/index.html
@@ -3,9 +3,11 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module?.id"></core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module?.id"></core-format-text>
+            </h1>
+        </ion-title>
 
         <ion-buttons slot="end">
             <!-- The buttons defined by the component will be added in here. -->
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 5eecab5a1..e6628246f 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
@@ -50,13 +50,13 @@
     <!-- Activity info. -->
     <core-course-module-info [module]="module" (completionChanged)="onCompletionChange()" [description]="description"
         [component]="component" [componentId]="componentId" [courseId]="courseId">
-        <h3 *ngIf="pageTitle" title>{{pageTitle}}</h3>
+        <h2 *ngIf="pageTitle" title>{{pageTitle}}</h2>
     </core-course-module-info>
 
     <div *ngIf="pageIsOffline || hasOffline || pageWarning">
         <!-- Wiki has something offline. -->
         <ion-card class="core-warning-card" *ngIf="pageIsOffline || hasOffline">
-            <ion-item>
+            <ion-item class="ion-text-wrap">
                 <ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
                 <ion-label>
                     <span *ngIf="pageIsOffline">{{ 'core.hasdatatosync' | translate:{$a: pageStr} }}</span>
diff --git a/src/addons/mod/wiki/components/map/map.html b/src/addons/mod/wiki/components/map/map.html
index 3a205d1c8..c8c1a44cb 100644
--- a/src/addons/mod/wiki/components/map/map.html
+++ b/src/addons/mod/wiki/components/map/map.html
@@ -1,6 +1,8 @@
 <ion-header>
     <ion-toolbar>
-        <h1>{{ 'addon.mod_wiki.map' | translate }}</h1>
+        <ion-title>
+            <h2>{{ 'addon.mod_wiki.map' | translate }}</h2>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-times" aria-hidden="true"></ion-icon>
@@ -18,14 +20,15 @@
             </ion-item>
             <ng-container *ngFor="let letter of map">
                 <ion-item-divider *ngIf="letter.label">
-                    <ion-label><h2>{{ letter.label }}</h2></ion-label>
+                    <ion-label>
+                        <h2>{{ letter.label }}</h2>
+                    </ion-label>
                 </ion-item-divider>
                 <ion-item class="ion-text-wrap" *ngFor="let page of letter.pages" (click)="goToPage(page)"
                     [attr.aria-current]="selectedTitle == page.title ? 'page' : 'false'" button detail="false">
                     <ion-icon name="fas-home" slot="start" *ngIf="page.firstpage" aria-hidden="true"></ion-icon>
                     <ion-label>
-                        <core-format-text [text]="page.title" contextLevel="module" [contextInstanceId]="moduleId"
-                            [courseId]="courseId">
+                        <core-format-text [text]="page.title" contextLevel="module" [contextInstanceId]="moduleId" [courseId]="courseId">
                         </core-format-text>
                     </ion-label>
                     <ion-note *ngIf="!page.id" slot="end">
diff --git a/src/addons/mod/wiki/pages/edit/edit.html b/src/addons/mod/wiki/pages/edit/edit.html
index 3d30531df..d44b5db2d 100644
--- a/src/addons/mod/wiki/pages/edit/edit.html
+++ b/src/addons/mod/wiki/pages/edit/edit.html
@@ -3,10 +3,12 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
 
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="save()">
@@ -20,20 +22,19 @@
         <form [formGroup]="pageForm" #editPageForm *ngIf="loaded">
             <ion-item class="ion-text-wrap" *ngIf="canEditTitle">
                 <ion-label class="sr-only">{{ 'addon.mod_wiki.newpagetitle' | translate }}</ion-label>
-                <ion-input name="title" type="text" [placeholder]="'addon.mod_wiki.newpagetitle' | translate"
-                    formControlName="title">
+                <ion-input name="title" type="text" [placeholder]="'addon.mod_wiki.newpagetitle' | translate" formControlName="title">
                 </ion-input>
             </ion-item>
 
             <ion-item>
                 <ion-label class="sr-only">{{ 'core.content' | translate }}</ion-label>
-                <core-rich-text-editor [control]="contentControl" [placeholder]="'core.content' | translate"
-                    name="wiki_page_content" [component]="component" [componentId]="cmId" [autoSave]="true" contextLevel="module"
-                    [contextInstanceId]="cmId" elementId="newcontent_editor" [draftExtraParams]="editorExtraParams">
+                <core-rich-text-editor [control]="contentControl" [placeholder]="'core.content' | translate" name="wiki_page_content"
+                    [component]="component" [componentId]="cmId" [autoSave]="true" contextLevel="module" [contextInstanceId]="cmId"
+                    elementId="newcontent_editor" [draftExtraParams]="editorExtraParams">
                 </core-rich-text-editor>
             </ion-item>
 
-            <ion-item *ngIf="wrongVersionLock" class="ion-text-center addon-mod_wiki-wrongversionlock" >
+            <ion-item *ngIf="wrongVersionLock" class="ion-text-center addon-mod_wiki-wrongversionlock">
                 <ion-label>
                     <ion-badge color="danger" class="ion-padding">{{ 'addon.mod_wiki.wrongversionlock' | translate }}</ion-badge>
                 </ion-label>
diff --git a/src/addons/mod/wiki/pages/index/index.html b/src/addons/mod/wiki/pages/index/index.html
index e8db7c3b0..6c07ead01 100644
--- a/src/addons/mod/wiki/pages/index/index.html
+++ b/src/addons/mod/wiki/pages/index/index.html
@@ -3,14 +3,16 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module?.id" [courseId]="courseId">
-            </core-format-text>
-        </h1>
-        <p>
-            <core-format-text [text]="pageTitle" contextLevel="module" [contextInstanceId]="module?.id" [courseId]="courseId">
-            </core-format-text>
-        </p>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module?.id" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+            <h2>
+                <core-format-text [text]="pageTitle" contextLevel="module" [contextInstanceId]="module?.id" [courseId]="courseId">
+                </core-format-text>
+            </h2>
+        </ion-title>
 
         <ion-buttons slot="end">
             <!-- The buttons defined by the component will be added in here. -->
diff --git a/src/addons/mod/workshop/components/phase/phase.html b/src/addons/mod/workshop/components/phase/phase.html
index 63ba0446c..407551e37 100644
--- a/src/addons/mod/workshop/components/phase/phase.html
+++ b/src/addons/mod/workshop/components/phase/phase.html
@@ -1,9 +1,8 @@
 <ion-header>
     <ion-toolbar>
-        <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
-        </ion-buttons>
-        <h2>{{ 'addon.mod_workshop.userplan' | translate }}</h2>
+        <ion-title>
+            <h2>{{ 'addon.mod_workshop.userplan' | translate }}</h2>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon name="fas-times" slot="icon-only" aria-hidden=true></ion-icon>
@@ -30,8 +29,8 @@
                 <ion-icon slot="end" name="fas-external-link-alt" aria-hidden="true"></ion-icon>
             </ion-item>
             <ion-item class="ion-text-wrap" *ngFor="let task of phase.tasks"
-                [class.item-dimmed]="phase.code != workshopPhase || (task.code == 'submit' && !showSubmit)"
-                (click)="runTask(task)" detail="false" button>
+                [class.item-dimmed]="phase.code != workshopPhase || (task.code == 'submit' && !showSubmit)" (click)="runTask(task)"
+                detail="false" button>
                 <ion-icon slot="start" name="far-circle" *ngIf="task.completed == null"
                     [attr.aria-label]="'addon.mod_workshop.tasktodo' | translate"></ion-icon>
                 <ion-icon slot="start" name="fas-times-circle" color="danger" *ngIf="task.completed == ''"
diff --git a/src/addons/mod/workshop/pages/assessment/assessment.html b/src/addons/mod/workshop/pages/assessment/assessment.html
index 3415a603c..b5de87146 100644
--- a/src/addons/mod/workshop/pages/assessment/assessment.html
+++ b/src/addons/mod/workshop/pages/assessment/assessment.html
@@ -3,11 +3,13 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="workshop && workshop.coursemodule"
-                [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="workshop && workshop.coursemodule"
+                    [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
         <ion-buttons slot="end" [hidden]="!evaluating">
             <ion-button fill="clear" (click)="saveEvaluation()">
                 {{ 'core.save' | translate }}
@@ -48,14 +50,15 @@
             </ion-label>
         </ion-item>
 
-        <addon-mod-workshop-assessment-strategy
-            *ngIf="assessment && assessmentId && showGrade(assessment.grade) && workshop && access" [workshop]="workshop"
-            [access]="access" [assessmentId]="assessmentId" [userId]="profile && profile.id" [strategy]="strategy">
+        <addon-mod-workshop-assessment-strategy *ngIf="assessment && assessmentId && showGrade(assessment.grade) && workshop && access"
+            [workshop]="workshop" [access]="access" [assessmentId]="assessmentId" [userId]="profile && profile.id" [strategy]="strategy">
         </addon-mod-workshop-assessment-strategy>
 
         <form [formGroup]="evaluateForm" *ngIf="evaluating" #evaluateFormEl>
             <ion-item class="ion-text-wrap">
-                <ion-label><h2>{{ 'addon.mod_workshop.assessmentsettings' | translate }}</h2></ion-label>
+                <ion-label>
+                    <h2>{{ 'addon.mod_workshop.assessmentsettings' | translate }}</h2>
+                </ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap" *ngIf="access?.canallocate">
                 <ion-label position="stacked">
@@ -85,16 +88,16 @@
             </ion-item>
             <ion-item *ngIf="access?.canoverridegrades">
                 <ion-label position="stacked">{{ 'addon.mod_workshop.feedbackreviewer' | translate }}</ion-label>
-                <core-rich-text-editor [control]="evaluateForm.controls['text']" name="text"
-                    [autoSave]="true" contextLevel="module" [contextInstanceId]="workshop?.coursemodule"
-                    elementId="feedbackreviewer_editor" [draftExtraParams]="{asid: assessmentId}">
+                <core-rich-text-editor [control]="evaluateForm.controls['text']" name="text" [autoSave]="true" contextLevel="module"
+                    [contextInstanceId]="workshop?.coursemodule" elementId="feedbackreviewer_editor"
+                    [draftExtraParams]="{asid: assessmentId}">
                 </core-rich-text-editor>
             </ion-item>
         </form>
         <ion-list *ngIf="!evaluating && evaluate && evaluate.text">
             <ion-item class="ion-text-wrap">
-                <core-user-avatar *ngIf="evaluateByProfile" [user]="evaluateByProfile" slot="start"
-                    [courseId]="courseId" [userId]="evaluateByProfile.id"></core-user-avatar>
+                <core-user-avatar *ngIf="evaluateByProfile" [user]="evaluateByProfile" slot="start" [courseId]="courseId"
+                    [userId]="evaluateByProfile.id"></core-user-avatar>
                 <ion-label>
                     <h2 *ngIf="evaluateByProfile && evaluateByProfile.fullname">
                         {{ 'addon.mod_workshop.feedbackby' | translate : {$a: evaluateByProfile.fullname} }}
diff --git a/src/addons/mod/workshop/pages/edit-submission/edit-submission.html b/src/addons/mod/workshop/pages/edit-submission/edit-submission.html
index ad52ca562..e7c928aad 100644
--- a/src/addons/mod/workshop/pages/edit-submission/edit-submission.html
+++ b/src/addons/mod/workshop/pages/edit-submission/edit-submission.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ 'addon.mod_workshop.editsubmission' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'addon.mod_workshop.editsubmission' | translate }}</h1>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="save()" [attr.aria-label]="'core.save' | translate">
                 {{ 'core.save' | translate }}
@@ -38,9 +40,8 @@
             </ion-item>
 
             <core-attachments *ngIf="fileAvailable" [files]="attachments" [maxSize]="workshop.maxbytes"
-                [maxSubmissions]="workshop.nattachments" [component]="component" [componentId]="workshop.coursemodule"
-                allowOffline="true" [acceptedTypes]="workshop.submissionfiletypes" [required]="fileRequired"
-                [courseId]="workshop.course">
+                [maxSubmissions]="workshop.nattachments" [component]="component" [componentId]="workshop.coursemodule" allowOffline="true"
+                [acceptedTypes]="workshop.submissionfiletypes" [required]="fileRequired" [courseId]="workshop.course">
             </core-attachments>
         </form>
     </core-loading>
diff --git a/src/addons/mod/workshop/pages/index/index.html b/src/addons/mod/workshop/pages/index/index.html
index e408424a4..9b639898c 100644
--- a/src/addons/mod/workshop/pages/index/index.html
+++ b/src/addons/mod/workshop/pages/index/index.html
@@ -3,10 +3,12 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
         <ion-buttons slot="end">
             <!-- The buttons defined by the component will be added in here. -->
         </ion-buttons>
diff --git a/src/addons/mod/workshop/pages/submission/submission.html b/src/addons/mod/workshop/pages/submission/submission.html
index eed70a42b..754b7456a 100644
--- a/src/addons/mod/workshop/pages/submission/submission.html
+++ b/src/addons/mod/workshop/pages/submission/submission.html
@@ -3,10 +3,12 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text *ngIf="title" [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text *ngIf="title" [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
         <ion-buttons slot="end" [hidden]="!loaded">
             <ion-button *ngIf="assessmentId && access.assessingallowed" fill="clear" (click)="saveAssessment()"
                 [attr.aria-label]="'core.save' | translate">
@@ -55,8 +57,7 @@
                     <h2 *ngIf="evaluateByProfile && evaluateByProfile.fullname">
                         {{ 'addon.mod_workshop.feedbackby' | translate : {$a: evaluateByProfile.fullname} }}
                     </h2>
-                    <core-format-text [text]="evaluate?.text" contextLevel="module" [contextInstanceId]="module.id"
-                        [courseId]="courseId">
+                    <core-format-text [text]="evaluate?.text" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
                     </core-format-text>
                 </ion-label>
             </ion-item>
@@ -68,8 +69,8 @@
                     <h2>{{ 'addon.mod_workshop.yourassessment' | translate }}</h2>
                 </ion-label>
             </ion-item>
-            <addon-mod-workshop-assessment [submission]="submission" [assessment]="ownAssessment" [courseId]="courseId"
-                [access]="access" [module]="module" [workshop]="workshop">
+            <addon-mod-workshop-assessment [submission]="submission" [assessment]="ownAssessment" [courseId]="courseId" [access]="access"
+                [module]="module" [workshop]="workshop">
             </addon-mod-workshop-assessment>
         </ion-list>
 
@@ -92,8 +93,8 @@
                     <h2>{{ 'addon.mod_workshop.givengrades' | translate }}</h2>
                 </ion-label>
             </ion-item>
-            <addon-mod-workshop-assessment *ngFor="let reviewer of submissionInfo.reviewerof" [assessment]="reviewer"
-                [courseId]="courseId" [module]="module" [workshop]="workshop" [access]="access">
+            <addon-mod-workshop-assessment *ngFor="let reviewer of submissionInfo.reviewerof" [assessment]="reviewer" [courseId]="courseId"
+                [module]="module" [workshop]="workshop" [access]="access">
             </addon-mod-workshop-assessment>
         </ion-list>
 
@@ -126,21 +127,20 @@
             </ion-item>
             <ion-item>
                 <ion-label position="stacked">{{ 'addon.mod_workshop.feedbackauthor' | translate }}</ion-label>
-                <core-rich-text-editor [control]="feedbackForm.controls['text']" name="text"
-                    [autoSave]="true" contextLevel="module" [contextInstanceId]="module.id" elementId="feedbackauthor_editor"
-                    [draftExtraParams]="{id: submissionId}">
+                <core-rich-text-editor [control]="feedbackForm.controls['text']" name="text" [autoSave]="true" contextLevel="module"
+                    [contextInstanceId]="module.id" elementId="feedbackauthor_editor" [draftExtraParams]="{id: submissionId}">
                 </core-rich-text-editor>
             </ion-item>
         </form>
 
-        <addon-mod-workshop-assessment-strategy *ngIf="assessmentId" [workshop]="workshop" [access]="access"
-            [assessmentId]="assessmentId" [userId]="assessmentUserId" [strategy]="strategy" [edit]="access.assessingallowed">
+        <addon-mod-workshop-assessment-strategy *ngIf="assessmentId" [workshop]="workshop" [access]="access" [assessmentId]="assessmentId"
+            [userId]="assessmentUserId" [strategy]="strategy" [edit]="access.assessingallowed">
         </addon-mod-workshop-assessment-strategy>
 
         <ion-list *ngIf="assessmentId && !access.assessingallowed && assessment?.feedbackreviewer">
             <ion-item class="ion-text-wrap">
-                <core-user-avatar *ngIf="evaluateGradingByProfile" [user]="evaluateGradingByProfile" slot="start"
-                    [courseId]="courseId" [userId]="evaluateGradingByProfile.id"></core-user-avatar>
+                <core-user-avatar *ngIf="evaluateGradingByProfile" [user]="evaluateGradingByProfile" slot="start" [courseId]="courseId"
+                    [userId]="evaluateGradingByProfile.id"></core-user-avatar>
                 <ion-label>
                     <h2 *ngIf="evaluateGradingByProfile && evaluateGradingByProfile.fullname">
                         {{ 'addon.mod_workshop.feedbackby' | translate : {$a: evaluateGradingByProfile.fullname} }}
diff --git a/src/addons/notes/components/add/add-modal.html b/src/addons/notes/components/add/add-modal.html
index 1f30665e1..e3cb5c858 100644
--- a/src/addons/notes/components/add/add-modal.html
+++ b/src/addons/notes/components/add/add-modal.html
@@ -1,6 +1,8 @@
 <ion-header>
     <ion-toolbar>
-        <h2>{{ 'addon.notes.addnewnote' | translate }}</h2>
+        <ion-title>
+            <h2>{{ 'addon.notes.addnewnote' | translate }}</h2>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon name="fas-times" slot="icon-only" aria-hidden=true></ion-icon>
@@ -20,8 +22,7 @@
         </ion-item>
         <ion-item>
             <ion-label class="sr-only">{{ 'addon.notes.note' | translate }}</ion-label>
-            <ion-textarea placeholder="{{ 'addon.notes.note' | translate }}" rows="5" [(ngModel)]="text" name="text"
-                required="required">
+            <ion-textarea placeholder="{{ 'addon.notes.note' | translate }}" rows="5" [(ngModel)]="text" name="text" required="required">
             </ion-textarea>
         </ion-item>
         <div class="ion-padding">
diff --git a/src/addons/notes/pages/list/list.html b/src/addons/notes/pages/list/list.html
index b643fd01c..e3a373bbe 100644
--- a/src/addons/notes/pages/list/list.html
+++ b/src/addons/notes/pages/list/list.html
@@ -4,7 +4,9 @@
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
 
-        <h1>{{ 'addon.notes.notes' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'addon.notes.notes' | translate }}</h1>
+        </ion-title>
         <ion-buttons slot="end">
         </ion-buttons>
     </ion-toolbar>
@@ -15,13 +17,12 @@
         <ion-icon name="fas-pen" slot="icon-only" aria-hidden="true"></ion-icon>
     </ion-button>
     <core-context-menu>
-        <core-context-menu-item [hidden]="!(notesLoaded && !hasOffline)" [priority]="100"
-            [content]="'core.refresh' | translate" (action)="refreshNotes(false)"
-            [iconAction]="refreshIcon" [closeOnClick]="true">
+        <core-context-menu-item [hidden]="!(notesLoaded && !hasOffline)" [priority]="100" [content]="'core.refresh' | translate"
+            (action)="refreshNotes(false)" [iconAction]="refreshIcon" [closeOnClick]="true">
         </core-context-menu-item>
         <core-context-menu-item [hidden]="!(notesLoaded && hasOffline)" [priority]="100"
-            [content]="'core.settings.synchronizenow' | translate" (action)="refreshNotes(true)"
-            [iconAction]="syncIcon" [closeOnClick]="false"></core-context-menu-item>
+            [content]="'core.settings.synchronizenow' | translate" (action)="refreshNotes(true)" [iconAction]="syncIcon"
+            [closeOnClick]="false"></core-context-menu-item>
     </core-context-menu>
 </core-navbar-buttons>
 <ion-content>
@@ -32,7 +33,9 @@
     <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><h2>{{user!.fullname}}</h2></ion-label>
+            <ion-label>
+                <h2>{{user!.fullname}}</h2>
+            </ion-label>
         </ion-item>
 
         <core-combobox [selection]="type" (onChange)="typeChanged($event)">
@@ -83,14 +86,16 @@
                         [attr.aria-label]="'core.restore' | translate">
                         <ion-icon name="fas-undo-alt" slot="icon-only" aria-hidden="true"></ion-icon>
                     </ion-button>
-                    <ion-button *ngIf="showDelete && !note.deleted && (type != 'personal' || note.usermodified == currentUserId)"
-                        slot="end" fill="clear" [@coreSlideInOut]="'fromRight'" color="danger" (click)="deleteNote($event, note)"
+                    <ion-button *ngIf="showDelete && !note.deleted && (type != 'personal' || note.usermodified == currentUserId)" slot="end"
+                        fill="clear" [@coreSlideInOut]="'fromRight'" color="danger" (click)="deleteNote($event, note)"
                         [attr.aria-label]="'core.delete' | translate">
                         <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true"></ion-icon>
                     </ion-button>
                 </ion-item>
                 <ion-item class="ion-text-wrap">
-                    <ion-label><core-format-text [text]="note.content" [filter]="false"></core-format-text></ion-label>
+                    <ion-label>
+                        <core-format-text [text]="note.content" [filter]="false"></core-format-text>
+                    </ion-label>
                 </ion-item>
             </ion-card>
         </ng-container>
diff --git a/src/addons/notifications/pages/list/list.html b/src/addons/notifications/pages/list/list.html
index a500d7296..18af2d97b 100644
--- a/src/addons/notifications/pages/list/list.html
+++ b/src/addons/notifications/pages/list/list.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ 'addon.notifications.notifications' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'addon.notifications.notifications' | translate }}</h1>
+        </ion-title>
         <ion-buttons slot="end">
             <core-user-menu-button></core-user-menu-button>
         </ion-buttons>
@@ -15,8 +17,7 @@
     </ion-refresher>
     <core-loading [hideUntil]="notificationsLoaded">
         <div class="ion-padding" *ngIf="canMarkAllNotificationsAsRead">
-            <ion-button [disabled]="loadingMarkAllNotificationsAsRead" expand="block" (click)="markAllNotificationsAsRead()"
-                color="light">
+            <ion-button [disabled]="loadingMarkAllNotificationsAsRead" expand="block" (click)="markAllNotificationsAsRead()" color="light">
                 <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>
@@ -25,8 +26,7 @@
         </div>
 
         <ion-card *ngFor="let notification of notifications">
-            <ion-item class="ion-text-wrap" lines="none"
-                [attr.aria-label]="
+            <ion-item class="ion-text-wrap" lines="none" [attr.aria-label]="
                     notification.timeread
                     ? notification.subject
                     : 'addon.notifications.unreadnotification' | translate: {$a: notification.subject}">
@@ -34,8 +34,8 @@
                     [profileUrl]="notification.profileimageurlfrom" [fullname]="notification.userfromfullname"
                     [userId]="notification.useridfrom" [extraIcon]="notification.iconurl"></core-user-avatar>
 
-                <img *ngIf="notification.useridfrom <= 0 && notification.iconurl" [src]="notification.iconurl" alt=""
-                    role="presentation" class="core-notification-icon" slot="start">
+                <img *ngIf="notification.useridfrom <= 0 && notification.iconurl" [src]="notification.iconurl" alt="" role="presentation"
+                    class="core-notification-icon" slot="start">
 
                 <ion-label>
                     <p class="item-heading">{{ notification.subject }}</p>
@@ -50,8 +50,8 @@
             </ion-item>
             <ion-item class="ion-text-wrap">
                 <ion-label>
-                    <core-format-text [text]="notification.mobiletext | coreCreateLinks" contextLevel="system"
-                    [contextInstanceId]="0" [maxHeight]="120">
+                    <core-format-text [text]="notification.mobiletext | coreCreateLinks" contextLevel="system" [contextInstanceId]="0"
+                        [maxHeight]="120">
                     </core-format-text>
                 </ion-label>
             </ion-item>
diff --git a/src/addons/notifications/pages/notification/notification.html b/src/addons/notifications/pages/notification/notification.html
index e4d879bb6..b227ffc7f 100644
--- a/src/addons/notifications/pages/notification/notification.html
+++ b/src/addons/notifications/pages/notification/notification.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h2>{{ 'addon.notifications.notifications' | translate }}</h2>
+        <ion-title>
+            <h2>{{ 'addon.notifications.notifications' | translate }}</h2>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
@@ -12,8 +14,7 @@
             <core-user-avatar *ngIf="userIdFrom > 0" slot="start" [userId]="userIdFrom" [profileUrl]="profileImageUrlFrom"
                 [fullname]="userFromFullName" [extraIcon]="iconUrl"></core-user-avatar>
 
-            <img *ngIf="userIdFrom <= 0 && iconUrl" [src]="iconUrl" alt=""
-                role="presentation" class="core-notification-icon" slot="start">
+            <img *ngIf="userIdFrom <= 0 && iconUrl" [src]="iconUrl" alt="" role="presentation" class="core-notification-icon" slot="start">
 
             <ion-label>
                 <p class="item-heading">{{ subject }}</p>
diff --git a/src/addons/notifications/pages/settings/settings.html b/src/addons/notifications/pages/settings/settings.html
index e8e9e7b49..cafdb246d 100644
--- a/src/addons/notifications/pages/settings/settings.html
+++ b/src/addons/notifications/pages/settings/settings.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ 'addon.notifications.notifications' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'addon.notifications.notifications' | translate }}</h1>
+        </ion-title>
         <ion-buttons slot="end">
         </ion-buttons>
     </ion-toolbar>
@@ -65,8 +67,7 @@
                                 !(notification.processorsByName[currentProcessor!.name][state] &&
                                 notification.processorsByName[currentProcessor!.name][state].updating)">
                             </ion-spinner>
-                            <ion-toggle
-                                *ngIf="preferences!.enableall && !notification.processorsByName[currentProcessor!.name].locked"
+                            <ion-toggle *ngIf="preferences!.enableall && !notification.processorsByName[currentProcessor!.name].locked"
                                 [(ngModel)]="notification.processorsByName[currentProcessor!.name][state].checked"
                                 (ngModelChange)="changePreference(notification, state)"
                                 [disabled]="notification.processorsByName[currentProcessor!.name][state].updating">
@@ -88,18 +89,15 @@
                 <!-- If notifications enabled, show toggles. If disabled, show "Disabled" instead of toggle. -->
                 <ion-item *ngFor="let state of ['loggedin', 'loggedoff']" class="ion-text-wrap ion-hide-md-up" lines="none">
                     <ion-label>{{ 'core.settings.' + state | translate }}</ion-label>
-                    <ion-spinner slot="end"
-                        *ngIf="preferences!.enableall && (notification.processorsByName[currentProcessor!.name][state] &&
+                    <ion-spinner slot="end" *ngIf="preferences!.enableall && (notification.processorsByName[currentProcessor!.name][state] &&
                         notification.processorsByName[currentProcessor!.name][state].updating)">
                     </ion-spinner>
-                    <ion-toggle slot="end"
-                        *ngIf="preferences!.enableall && !notification.processorsByName[currentProcessor!.name].locked"
+                    <ion-toggle slot="end" *ngIf="preferences!.enableall && !notification.processorsByName[currentProcessor!.name].locked"
                         [(ngModel)]="notification.processorsByName[currentProcessor!.name][state].checked"
                         (ngModelChange)="changePreference(notification, state)"
                         [disabled]="notification.processorsByName[currentProcessor!.name][state].updating">
                     </ion-toggle>
-                    <span slot="end"
-                        *ngIf="preferences!.enableall && notification.processorsByName[currentProcessor!.name].locked"
+                    <span slot="end" *ngIf="preferences!.enableall && notification.processorsByName[currentProcessor!.name].locked"
                         class="text-gray">
                         {{'core.settings.locked' | translate }}
                     </span>
diff --git a/src/addons/privatefiles/pages/index/index.html b/src/addons/privatefiles/pages/index/index.html
index d0550c4b7..3ddf3e3f7 100644
--- a/src/addons/privatefiles/pages/index/index.html
+++ b/src/addons/privatefiles/pages/index/index.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ title }}</h1>
+        <ion-title>
+            <h1>{{ title }}</h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
@@ -25,9 +27,11 @@
 
         <!-- Display info about space used and space left. -->
         <ion-card class="core-info-card" *ngIf="userQuota && filesInfo && filesInfo.filecount > 0">
-            <ion-item><ion-label>
-            {{ 'core.quotausage' | translate:{$a: {used: spaceUsed, total: userQuotaReadable} } }}
-            </ion-label></ion-item>
+            <ion-item>
+                <ion-label>
+                    {{ 'core.quotausage' | translate:{$a: {used: spaceUsed, total: userQuotaReadable} } }}
+                </ion-label>
+            </ion-item>
         </ion-card>
 
         <!-- List of files. -->
diff --git a/src/addons/storagemanager/pages/course-storage/course-storage.html b/src/addons/storagemanager/pages/course-storage/course-storage.html
index a2417b7ac..42371c995 100644
--- a/src/addons/storagemanager/pages/course-storage/course-storage.html
+++ b/src/addons/storagemanager/pages/course-storage/course-storage.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ 'addon.storagemanager.managestorage' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'addon.storagemanager.managestorage' | translate }}</h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
@@ -20,8 +22,7 @@
                     </ion-label>
                     <p slot="end" class="ion-text-end">{{ totalSize | coreBytesToSize }}</p>
                     <ion-button slot="end" (click)="deleteForCourse()" [disabled]="totalSize == 0">
-                        <ion-icon name="fas-trash" slot="icon-only"
-                            [attr.aria-label]="'addon.storagemanager.deletecourse' | translate">
+                        <ion-icon name="fas-trash" slot="icon-only" [attr.aria-label]="'addon.storagemanager.deletecourse' | translate">
                         </ion-icon>
                     </ion-button>
                 </ion-item>
@@ -45,8 +46,8 @@
                 <ion-card-content>
                     <ng-container *ngFor="let module of section.modules">
                         <ion-item class="ion-no-padding" *ngIf="module.totalSize! > 0">
-                            <core-mod-icon slot="start" *ngIf="module.handlerData!.icon"
-                                [modicon]="module.handlerData!.icon" [modname]="module.modname" [componentId]="module.instance">
+                            <core-mod-icon slot="start" *ngIf="module.handlerData!.icon" [modicon]="module.handlerData!.icon"
+                                [modname]="module.modname" [componentId]="module.instance">
                             </core-mod-icon>
                             <ion-label class="ion-text-wrap">
                                 <h3 class="{{module.handlerData!.class}} addon-storagemanager-module-size">
diff --git a/src/addons/storagemanager/pages/courses-storage/courses-storage.html b/src/addons/storagemanager/pages/courses-storage/courses-storage.html
index 41c1f226a..ca9eb3b53 100644
--- a/src/addons/storagemanager/pages/courses-storage/courses-storage.html
+++ b/src/addons/storagemanager/pages/courses-storage/courses-storage.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ 'addon.storagemanager.managestorage' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'addon.storagemanager.managestorage' | translate }}</h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
@@ -14,12 +16,13 @@
                 <p class="ion-text-wrap">{{ 'addon.storagemanager.info' | translate }}</p>
                 <ion-item class="size ion-text-wrap ion-no-padding" lines="none">
                     <ion-icon name="fas-archive" slot="start" aria-hidden="true"></ion-icon>
-                    <ion-label><h2 class="ion-text-wrap">{{ 'addon.storagemanager.storageused' | translate }}</h2></ion-label>
+                    <ion-label>
+                        <h2 class="ion-text-wrap">{{ 'addon.storagemanager.storageused' | translate }}</h2>
+                    </ion-label>
                     <p slot="end" class="ion-text-end">{{ totalSize | coreBytesToSize }}</p>
                     <ion-button slot="end" (click)="deleteCompletelyDownloadedCourses()"
                         [disabled]="completelyDownloadedCourses.length === 0">
-                        <ion-icon name="fas-trash" slot="icon-only"
-                            ariaLabel="{{ 'addon.storagemanager.deletecourses' | translate }}">
+                        <ion-icon name="fas-trash" slot="icon-only" ariaLabel="{{ 'addon.storagemanager.deletecourses' | translate }}">
                         </ion-icon>
                     </ion-button>
                 </ion-item>
diff --git a/src/core/features/block/components/side-blocks/side-blocks.html b/src/core/features/block/components/side-blocks/side-blocks.html
index 52408d9f2..4b08c5b01 100644
--- a/src/core/features/block/components/side-blocks/side-blocks.html
+++ b/src/core/features/block/components/side-blocks/side-blocks.html
@@ -1,6 +1,8 @@
 <ion-header>
     <ion-toolbar>
-        <h1>{{ 'core.block.blocks' | translate }}</h1>
+        <ion-title>
+            <h2>{{ 'core.block.blocks' | translate }}</h2>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon name="fas-times" slot="icon-only" aria-hidden=true></ion-icon>
diff --git a/src/core/features/comments/pages/viewer/viewer.html b/src/core/features/comments/pages/viewer/viewer.html
index b85e367b3..1534cdcef 100644
--- a/src/core/features/comments/pages/viewer/viewer.html
+++ b/src/core/features/comments/pages/viewer/viewer.html
@@ -3,19 +3,20 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="title" [contextLevel]="contextLevel" [contextInstanceId]="instanceId" [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="title" [contextLevel]="contextLevel" [contextInstanceId]="instanceId" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button *ngIf="canDeleteComments" slot="end" fill="clear" (click)="toggleDelete()"
                 [attr.aria-label]="'core.toggledelete' | translate">
                 <ion-icon name="fas-pen" slot="icon-only" aria-hidden="true"></ion-icon>
             </ion-button>
             <core-context-menu>
-                <core-context-menu-item [hidden]="!(commentsLoaded && !hasOffline)" [priority]="100"
-                    [content]="'core.refresh' | translate" (action)="refreshComments(false)" [iconAction]="refreshIcon"
-                    [closeOnClick]="true">
+                <core-context-menu-item [hidden]="!(commentsLoaded && !hasOffline)" [priority]="100" [content]="'core.refresh' | translate"
+                    (action)="refreshComments(false)" [iconAction]="refreshIcon" [closeOnClick]="true">
                 </core-context-menu-item>
                 <core-context-menu-item [hidden]="!(commentsLoaded && hasOffline)" [priority]="100"
                     [content]="'core.settings.synchronizenow' | translate" (action)="refreshComments(true)" [iconAction]="syncIcon"
@@ -30,8 +31,7 @@
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
     <core-loading [hideUntil]="commentsLoaded">
-        <core-empty-box *ngIf="!comments || !comments.length" icon="fas-comments"
-            [message]="'core.comments.nocomments' | translate">
+        <core-empty-box *ngIf="!comments || !comments.length" icon="fas-comments" [message]="'core.comments.nocomments' | translate">
         </core-empty-box>
 
         <!-- Load previous messages. -->
@@ -45,10 +45,8 @@
                     {{ comment.timecreated * 1000 | coreFormatDate: "strftimedayshort" }}
                 </p>
 
-                <ion-item class="ion-text-wrap addon-message"
-                    [class.addon-message-mine]="comment.userid == currentUserId"
-                    [class.addon-message-not-mine]="comment.userid != currentUserId"
-                    [class.addon-message-no-user]="!comment.showUserData"
+                <ion-item class="ion-text-wrap addon-message" [class.addon-message-mine]="comment.userid == currentUserId"
+                    [class.addon-message-not-mine]="comment.userid != currentUserId" [class.addon-message-no-user]="!comment.showUserData"
                     [@coreSlideInOut]="comment.userid == currentUserId ? '' : 'fromLeft'">
                     <ion-label>
                         <!-- User data. -->
@@ -88,10 +86,7 @@
                 </ion-item>
             </ng-container>
 
-            <ion-item
-                *ngIf="offlineComment"
-                class="ion-text-wrap addon-message addon-message-mine"
-            >
+            <ion-item *ngIf="offlineComment" class="ion-text-wrap addon-message addon-message-mine">
                 <ion-label>
                     <!-- User data. -->
                     <p class="ion-text-center">
@@ -109,9 +104,9 @@
                     <ion-icon name="fas-clock" aria-hidden="true"></ion-icon> {{ 'core.notsent' | translate }}
                 </ion-note>
                 <div class="tail"></div>
-                <ion-button *ngIf="showDelete" slot="end" fill="clear"
-                    [@coreSlideInOut]="'fromRight'" color="danger" (click)="deleteComment($event, offlineComment)"
-                    [attr.aria-label]="'core.delete' | translate" class="addon-messages-delete-button">
+                <ion-button *ngIf="showDelete" slot="end" fill="clear" [@coreSlideInOut]="'fromRight'" color="danger"
+                    (click)="deleteComment($event, offlineComment)" [attr.aria-label]="'core.delete' | translate"
+                    class="addon-messages-delete-button">
                     <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true"></ion-icon>
                 </ion-button>
             </ion-item>
@@ -121,8 +116,8 @@
 </ion-content>
 <ion-footer class="footer-adjustable" *ngIf="commentsLoaded && canAddComments">
     <ion-toolbar color="contrast">
-        <core-send-message-form [sendDisabled]="sending" [message]="newComment"
-            (onSubmit)="addComment($event)" [placeholder]="'core.comments.addcomment' | translate">
+        <core-send-message-form [sendDisabled]="sending" [message]="newComment" (onSubmit)="addComment($event)"
+            [placeholder]="'core.comments.addcomment' | translate">
         </core-send-message-form>
     </ion-toolbar>
 </ion-footer>
diff --git a/src/core/features/contentlinks/components/choose-site-modal/choose-site-modal.html b/src/core/features/contentlinks/components/choose-site-modal/choose-site-modal.html
index 173e993fb..f166b4111 100644
--- a/src/core/features/contentlinks/components/choose-site-modal/choose-site-modal.html
+++ b/src/core/features/contentlinks/components/choose-site-modal/choose-site-modal.html
@@ -1,9 +1,8 @@
 <ion-header>
     <ion-toolbar>
-        <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
-        </ion-buttons>
-        <h2>{{ 'core.contentlinks.chooseaccount' | translate }}</h2>
+        <ion-title>
+            <h2>{{ 'core.contentlinks.chooseaccount' | translate }}</h2>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-times" aria-hidden="true"></ion-icon>
@@ -23,12 +22,13 @@
             <ion-item *ngFor="let site of sites" (click)="siteClicked(site.id)" detail="false" button>
                 <ion-avatar slot="start">
                     <img [src]="site.avatar" core-external-content [siteId]="site.id"
-                        alt="{{ 'core.pictureof' | translate:{$a: site.fullName} }}"
-                        onError="this.src='assets/img/user-avatar.png'">
+                        alt="{{ 'core.pictureof' | translate:{$a: site.fullName} }}" onError="this.src='assets/img/user-avatar.png'">
                 </ion-avatar>
                 <ion-label>
                     <p class="item-heading">{{site.fullName}}</p>
-                    <p><core-format-text [text]="site.siteName" clean="true" [siteId]="site.id"></core-format-text></p>
+                    <p>
+                        <core-format-text [text]="site.siteName" clean="true" [siteId]="site.id"></core-format-text>
+                    </p>
                     <p>{{site.siteUrl}}</p>
                 </ion-label>
             </ion-item>
diff --git a/src/core/features/course/components/section-selector/section-selector.html b/src/core/features/course/components/section-selector/section-selector.html
index c30817397..82b2bf8b0 100644
--- a/src/core/features/course/components/section-selector/section-selector.html
+++ b/src/core/features/course/components/section-selector/section-selector.html
@@ -1,6 +1,8 @@
 <ion-header>
     <ion-toolbar>
-        <h2 id="core-course-section-selector-label">{{ 'core.course.sections' | translate }}</h2>
+        <ion-title>
+            <h2 id="core-course-section-selector-label">{{ 'core.course.sections' | translate }}</h2>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-times" aria-hidden="true"></ion-icon>
@@ -26,12 +28,10 @@
                         a11yText="core.course.aria:sectionprogress">
                     </core-progress-bar>
 
-                    <ion-badge color="info" *ngIf="section.visible === 0 && section.uservisible !== false"
-                        class="ion-text-wrap">
+                    <ion-badge color="info" *ngIf="section.visible === 0 && section.uservisible !== false" class="ion-text-wrap">
                         {{ 'core.course.hiddenfromstudents' | translate }}
                     </ion-badge>
-                    <ion-badge color="info" *ngIf="section.visible === 0 && section.uservisible === false"
-                        class="ion-text-wrap">
+                    <ion-badge color="info" *ngIf="section.visible === 0 && section.uservisible === false" class="ion-text-wrap">
                         {{ 'core.notavailable' | translate }}
                     </ion-badge>
                     <ion-badge color="info" *ngIf="section.availabilityinfo" class="ion-text-wrap">
diff --git a/src/core/features/course/pages/index/index.html b/src/core/features/course/pages/index/index.html
index 592166aad..b1776e63f 100644
--- a/src/core/features/course/pages/index/index.html
+++ b/src/core/features/course/pages/index/index.html
@@ -3,9 +3,11 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="title" contextLevel="course" [contextInstanceId]="course?.id"></core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="title" contextLevel="course" [contextInstanceId]="course?.id"></core-format-text>
+            </h1>
+        </ion-title>
 
         <ion-buttons slot="end"></ion-buttons>
     </ion-toolbar>
diff --git a/src/core/features/course/pages/list-mod-type/list-mod-type.html b/src/core/features/course/pages/list-mod-type/list-mod-type.html
index 4466314bd..1d6d7d2aa 100644
--- a/src/core/features/course/pages/list-mod-type/list-mod-type.html
+++ b/src/core/features/course/pages/list-mod-type/list-mod-type.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ title }}</h1>
+        <ion-title>
+            <h1>{{ title }}</h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
@@ -11,15 +13,14 @@
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
     <core-loading [hideUntil]="loaded">
-        <core-empty-box *ngIf="!sections || !sections.length" icon="fas-box-open"
-            [message]="'core.course.nocontentavailable' | translate">
+        <core-empty-box *ngIf="!sections || !sections.length" icon="fas-box-open" [message]="'core.course.nocontentavailable' | translate">
         </core-empty-box>
 
         <ion-list>
-            <ng-container *ngFor="let section of sections" >
+            <ng-container *ngFor="let section of sections">
                 <ng-container *ngFor="let module of section.modules">
-                    <core-course-module *ngIf="module.visibleoncoursepage !== 0" [module]="module" [section]="section"
-                        [courseId]="courseId" [downloadEnabled]="downloadEnabled">
+                    <core-course-module *ngIf="module.visibleoncoursepage !== 0" [module]="module" [section]="section" [courseId]="courseId"
+                        [downloadEnabled]="downloadEnabled">
                     </core-course-module>
                 </ng-container>
             </ng-container>
diff --git a/src/core/features/course/pages/preview/preview.html b/src/core/features/course/pages/preview/preview.html
index 49a16a7ab..92b3ff1eb 100644
--- a/src/core/features/course/pages/preview/preview.html
+++ b/src/core/features/course/pages/preview/preview.html
@@ -3,9 +3,11 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="course?.fullname" contextLevel="course" [contextInstanceId]="course?.id"></core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="course?.fullname" contextLevel="course" [contextInstanceId]="course?.id"></core-format-text>
+            </h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
diff --git a/src/core/features/course/pages/unsupported-module/unsupported-module.html b/src/core/features/course/pages/unsupported-module/unsupported-module.html
index c5e22195d..6760fda91 100644
--- a/src/core/features/course/pages/unsupported-module/unsupported-module.html
+++ b/src/core/features/course/pages/unsupported-module/unsupported-module.html
@@ -3,10 +3,12 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="module?.name" contextLevel="module" [contextInstanceId]="module?.id" [courseId]="courseId">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="module?.name" contextLevel="module" [contextInstanceId]="module?.id" [courseId]="courseId">
+                </core-format-text>
+            </h1>
+        </ion-title>
 
         <ion-buttons slot="end">
             <core-context-menu>
diff --git a/src/core/features/courses/components/self-enrol-password/self-enrol-password.html b/src/core/features/courses/components/self-enrol-password/self-enrol-password.html
index e718d5487..45b60f5e3 100644
--- a/src/core/features/courses/components/self-enrol-password/self-enrol-password.html
+++ b/src/core/features/courses/components/self-enrol-password/self-enrol-password.html
@@ -1,7 +1,8 @@
 <ion-header>
     <ion-toolbar>
-        <h2>{{ 'core.courses.selfenrolment' | translate }}</h2>
-
+        <ion-title>
+            <h2>{{ 'core.courses.selfenrolment' | translate }}</h2>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="close()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon name="fas-times" slot="icon-only" aria-hidden="true"></ion-icon>
@@ -14,14 +15,8 @@
         <ion-item>
             <ion-label class="sr-only">{{ 'core.courses.password' | translate }}</ion-label>
             <core-show-password name="password">
-                <ion-input
-                    class="ion-text-wrap core-ioninput-password"
-                    name="password"
-                    type="password"
-                    placeholder="{{ 'core.courses.password' | translate }}"
-                    [(ngModel)]="password"
-                    core-auto-focus
-                    [clearOnEdit]="false">
+                <ion-input class="ion-text-wrap core-ioninput-password" name="password" type="password"
+                    placeholder="{{ 'core.courses.password' | translate }}" [(ngModel)]="password" core-auto-focus [clearOnEdit]="false">
                 </ion-input>
             </core-show-password>
         </ion-item>
diff --git a/src/core/features/courses/pages/categories/categories.html b/src/core/features/courses/pages/categories/categories.html
index 0baf6bdff..e087575a3 100644
--- a/src/core/features/courses/pages/categories/categories.html
+++ b/src/core/features/courses/pages/categories/categories.html
@@ -3,10 +3,12 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="title" contextLevel="coursecat" [contextInstanceId]="currentCategory && currentCategory!.id">
-            </core-format-text>
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="title" contextLevel="coursecat" [contextInstanceId]="currentCategory && currentCategory!.id">
+                </core-format-text>
+            </h1>
+        </ion-title>
         <ion-buttons slot="end">
             <core-context-menu>
                 <core-context-menu-item *ngIf="downloadCourseEnabled || downloadCoursesEnabled" [priority]="1000"
diff --git a/src/core/features/courses/pages/list/list.html b/src/core/features/courses/pages/list/list.html
index ffb6b4b22..a75e9d3b0 100644
--- a/src/core/features/courses/pages/list/list.html
+++ b/src/core/features/courses/pages/list/list.html
@@ -3,16 +3,17 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1 *ngIf="!showOnlyEnrolled">{{ 'core.courses.availablecourses' | translate }}</h1>
-        <h1 *ngIf="showOnlyEnrolled">{{ 'core.courses.mycourses' | translate }}</h1>
+        <ion-title>
+            <h1 *ngIf="!showOnlyEnrolled">{{ 'core.courses.availablecourses' | translate }}</h1>
+            <h1 *ngIf="showOnlyEnrolled">{{ 'core.courses.mycourses' | translate }}</h1>
+        </ion-title>
         <ion-buttons slot="end">
             <core-context-menu>
                 <core-context-menu-item *ngIf="downloadCourseEnabled || downloadCoursesEnabled" [priority]="1000"
-                    [content]="'core.settings.showdownloadoptions' | translate" (action)="toggleDownload()"
-                    iconAction="toggle" [(toggle)]="downloadEnabled"></core-context-menu-item>
-                <core-context-menu-item [priority]="900"
-                    [content]="'core.courses.showonlyenrolled' | translate" (action)="toggleEnrolled()"
-                    iconAction="toggle" [(toggle)]="showOnlyEnrolled"></core-context-menu-item>   
+                    [content]="'core.settings.showdownloadoptions' | translate" (action)="toggleDownload()" iconAction="toggle"
+                    [(toggle)]="downloadEnabled"></core-context-menu-item>
+                <core-context-menu-item [priority]="900" [content]="'core.courses.showonlyenrolled' | translate" (action)="toggleEnrolled()"
+                    iconAction="toggle" [(toggle)]="showOnlyEnrolled"></core-context-menu-item>
             </core-context-menu>
             <core-user-menu-button></core-user-menu-button>
         </ion-buttons>
@@ -22,7 +23,7 @@
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshCourses($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    
+
     <core-search-box *ngIf="searchEnabled" (onSubmit)="search($event)" (onClear)="clearSearch()"
         [placeholder]="'core.courses.search' | translate" [searchLabel]="'core.courses.search' | translate" [autoFocus]="searchMode"
         searchArea="CoreCoursesSearch"></core-search-box>
@@ -30,10 +31,12 @@
     <core-loading [hideUntil]="loaded">
         <ng-container *ngIf="searchMode && searchTotal > 0">
             <ion-item-divider>
-                <ion-label><h2>{{ 'core.courses.totalcoursesearchresults' | translate:{$a: searchTotal} }}</h2></ion-label>
+                <ion-label>
+                    <h2>{{ 'core.courses.totalcoursesearchresults' | translate:{$a: searchTotal} }}</h2>
+                </ion-label>
             </ion-item-divider>
         </ng-container>
-        
+
         <core-courses-course-list-item *ngFor="let course of courses" [course]="course" [showDownload]="downloadEnabled">
         </core-courses-course-list-item>
 
@@ -46,6 +49,6 @@
 
         <core-empty-box *ngIf="!searchMode && !courses.length" icon="fas-graduation-cap" [message]="'core.courses.nocourses' | translate">
         </core-empty-box>
-        
+
     </core-loading>
 </ion-content>
diff --git a/src/core/features/courses/pages/my/my.html b/src/core/features/courses/pages/my/my.html
index 83e679d1a..af8a8f2fa 100644
--- a/src/core/features/courses/pages/my/my.html
+++ b/src/core/features/courses/pages/my/my.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ 'core.courses.mycourses' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'core.courses.mycourses' | translate }}</h1>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button *ngIf="searchEnabled" (click)="openSearch()" [attr.aria-label]="'core.courses.searchcourses' | translate">
                 <ion-icon name="fas-search" slot="icon-only" aria-hidden="true"></ion-icon>
diff --git a/src/core/features/emulator/components/capture-media/capture-media.html b/src/core/features/emulator/components/capture-media/capture-media.html
index 19c040eba..f7be75b5c 100644
--- a/src/core/features/emulator/components/capture-media/capture-media.html
+++ b/src/core/features/emulator/components/capture-media/capture-media.html
@@ -1,6 +1,8 @@
 <ion-header>
     <ion-toolbar>
-        <h1 *ngIf="title">{{ title | translate }}</h1>
+        <ion-title>
+            <h1 *ngIf="title">{{ title | translate }}</h1>
+        </ion-title>
 
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="cancel()">{{ 'core.cancel' | translate }}</ion-button>
@@ -30,8 +32,7 @@
                 <canvas [hidden]="hasCaptured || isCordovaAudioCapture" class="core-audio-canvas" #streamAudio></canvas>
 
                 <!-- Button to start/stop in mobile devices. -->
-                <ion-button fill="clear" *ngIf="!hasCaptured && isCordovaAudioCapture" (click)="actionClicked()"
-                    [attr.aria-label]="title">
+                <ion-button fill="clear" *ngIf="!hasCaptured && isCordovaAudioCapture" (click)="actionClicked()" [attr.aria-label]="title">
                     <ion-icon *ngIf="!isCapturing" name="fas-microphone" slot="icon-only" aria-hidden="true"></ion-icon>
                     <ion-icon *ngIf="isCapturing" name="fas-square" slot="icon-only" aria-hidden="true"></ion-icon>
                 </ion-button>
@@ -47,8 +48,7 @@
     <ion-row>
         <ion-col></ion-col>
         <ion-col class="ion-text-center">
-            <ion-button fill="clear" *ngIf="!hasCaptured && !isCordovaAudioCapture" (click)="actionClicked()"
-                [attr.aria-label]="title">
+            <ion-button fill="clear" *ngIf="!hasCaptured && !isCordovaAudioCapture" (click)="actionClicked()" [attr.aria-label]="title">
                 <ion-icon *ngIf="!isCapturing && isAudio" name="fas-microphone" slot="icon-only" aria-hidden="true"></ion-icon>
                 <ion-icon *ngIf="!isCapturing && isVideo" name="fas-video" slot="icon-only" aria-hidden="true"></ion-icon>
                 <ion-icon *ngIf="isImage" name="fas-camera" slot="icon-only" aria-hidden="true"></ion-icon>
diff --git a/src/core/features/grades/pages/course/course.html b/src/core/features/grades/pages/course/course.html
index 4b301f9ba..b4e94d4d0 100644
--- a/src/core/features/grades/pages/course/course.html
+++ b/src/core/features/grades/pages/course/course.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ 'core.grades.grades' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'core.grades.grades' | translate }}</h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
@@ -18,54 +20,33 @@
                 <table cellspacing="0" cellpadding="0" class="core-grades-table">
                     <thead>
                         <tr>
-                            <th
-                                *ngFor="let column of grades.columns"
-                                id="{{column.name}}"
-                                class="ion-text-start"
-                                [class.ion-hide-md-down]="column.hiddenPhone"
-                                [attr.colspan]="column.colspan"
-                            >
+                            <th *ngFor="let column of grades.columns" id="{{column.name}}" class="ion-text-start"
+                                [class.ion-hide-md-down]="column.hiddenPhone" [attr.colspan]="column.colspan">
                                 {{ 'core.grades.' + column.name | translate }}
                             </th>
                         </tr>
                     </thead>
                     <tbody>
-                        <tr
-                            *ngFor="let row of grades.rows"
-                            role="button row"
-                            [attr.tabindex]="row.itemtype != 'category' ? 0 : null"
-                            (ariaButtonClick)="row.itemtype != 'category' && grades.select(row)"
-                            [class]="row.rowclass"
-                            [ngClass]='{"core-grades-grade-clickable": row.itemtype != "category"}'
-                        >
+                        <tr *ngFor="let row of grades.rows" role="button row" [attr.tabindex]="row.itemtype != 'category' ? 0 : null"
+                            (ariaButtonClick)="row.itemtype != 'category' && grades.select(row)" [class]="row.rowclass"
+                            [ngClass]='{"core-grades-grade-clickable": row.itemtype != "category"}'>
                             <ng-container *ngIf="row.itemtype">
-                                <td
-                                    *ngIf="row.itemtype == 'category'"
-                                    class="core-grades-table-category"
-                                    [attr.rowspan]="row.rowspan"
-                                ></td>
-                                <th
-                                    class="core-grades-table-gradeitem ion-text-start"
-                                    [class.column-itemname]="row.itemtype == 'category'"
-                                    [attr.aria-current]="grades.getItemAriaCurrent(row)"
-                                    [attr.colspan]="row.colspan"
-                                >
+                                <td *ngIf="row.itemtype == 'category'" class="core-grades-table-category" [attr.rowspan]="row.rowspan"></td>
+                                <th class="core-grades-table-gradeitem ion-text-start" [class.column-itemname]="row.itemtype == 'category'"
+                                    [attr.aria-current]="grades.getItemAriaCurrent(row)" [attr.colspan]="row.colspan">
                                     <ion-icon *ngIf="row.icon" name="{{row.icon}}" slot="start" [attr.aria-label]="row.iconAlt">
                                     </ion-icon>
                                     <img *ngIf="row.image && !row.itemmodule" [src]="row.image" slot="start" class="core-module-icon"
-                                        [alt]="row.iconAlt"/>
+                                        [alt]="row.iconAlt" />
                                     <core-mod-icon *ngIf="row.image && row.itemmodule" [modicon]="row.image" slot="start"
                                         [modname]="row.itemmodule">
                                     </core-mod-icon>
                                     <span [innerHTML]="row.gradeitem"></span>
                                 </th>
                                 <ng-container *ngFor="let column of grades.columns">
-                                    <td
-                                        *ngIf="column.name != 'gradeitem' && row[column.name] != undefined"
+                                    <td *ngIf="column.name != 'gradeitem' && row[column.name] != undefined"
                                         [class]="'ion-text-start core-grades-table-' + column.name"
-                                        [class.ion-hide-md-down]="column.hiddenPhone"
-                                        [innerHTML]="row[column.name]"
-                                    ></td>
+                                        [class.ion-hide-md-down]="column.hiddenPhone" [innerHTML]="row[column.name]"></td>
                                 </ng-container>
                             </ng-container>
                         </tr>
diff --git a/src/core/features/grades/pages/courses/courses.html b/src/core/features/grades/pages/courses/courses.html
index c977b811f..13902dfcb 100644
--- a/src/core/features/grades/pages/courses/courses.html
+++ b/src/core/features/grades/pages/courses/courses.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ 'core.grades.grades' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'core.grades.grades' | translate }}</h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
@@ -12,28 +14,16 @@
             <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
         </ion-refresher>
         <core-loading [hideUntil]="courses.loaded">
-            <core-empty-box
-                *ngIf="courses.empty"
-                icon="fas-chart-bar"
-                [message]="'core.grades.nogradesreturned' | translate"
-            ></core-empty-box>
+            <core-empty-box *ngIf="courses.empty" icon="fas-chart-bar" [message]="'core.grades.nogradesreturned' | translate">
+            </core-empty-box>
 
             <ion-list *ngIf="!courses.empty">
-                <ion-item
-                    *ngFor="let course of courses.items"
-                    [attr.aria-label]="course.courseFullName"
-                    [attr.aria-current]="courses.getItemAriaCurrent(course)"
-                    class="ion-text-wrap"
-                    button
-                    detail="true"
-                    (click)="courses.select(course)"
-                >
+                <ion-item *ngFor="let course of courses.items" [attr.aria-label]="course.courseFullName"
+                    [attr.aria-current]="courses.getItemAriaCurrent(course)" class="ion-text-wrap" button detail="true"
+                    (click)="courses.select(course)">
                     <ion-label>
-                        <core-format-text
-                            [text]="course.courseFullName"
-                            [contextInstanceId]="course.courseid"
-                            contextLevel="course"
-                        ></core-format-text>
+                        <core-format-text [text]="course.courseFullName" [contextInstanceId]="course.courseid" contextLevel="course">
+                        </core-format-text>
                     </ion-label>
                     <ion-badge slot="end" color="light">
                         <span class="sr-only" *ngIf="course.grade && course.grade != '-'">
diff --git a/src/core/features/grades/pages/grade/grade.html b/src/core/features/grades/pages/grade/grade.html
index f565c8388..ddb6bf6d2 100644
--- a/src/core/features/grades/pages/grade/grade.html
+++ b/src/core/features/grades/pages/grade/grade.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ 'core.grades.grade' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'core.grades.grade' | translate }}</h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
diff --git a/src/core/features/login/components/site-help/site-help.html b/src/core/features/login/components/site-help/site-help.html
index 17f803afe..10242b5cd 100644
--- a/src/core/features/login/components/site-help/site-help.html
+++ b/src/core/features/login/components/site-help/site-help.html
@@ -1,7 +1,8 @@
 <ion-header>
     <ion-toolbar>
-        <h2>{{ 'core.login.help' | translate }}</h2>
-
+        <ion-title>
+            <h2>{{ 'core.login.help' | translate }}</h2>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeHelp()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-times" aria-hidden="true"></ion-icon>
@@ -48,8 +49,10 @@
         </ion-item>
         <ion-item class="ion-text-wrap">
             <ion-label>
-                <p><core-format-text [text]="'core.login.faqsetupsiteanswer' | translate:{$link: setupLinkHtml}" [filter]="false">
-                </core-format-text></p>
+                <p>
+                    <core-format-text [text]="'core.login.faqsetupsiteanswer' | translate:{$link: setupLinkHtml}" [filter]="false">
+                    </core-format-text>
+                </p>
             </ion-label>
         </ion-item>
         <ion-item class="ion-text-wrap">
diff --git a/src/core/features/login/components/site-onboarding/site-onboarding.html b/src/core/features/login/components/site-onboarding/site-onboarding.html
index 67ef6d1cb..cd000ea2b 100644
--- a/src/core/features/login/components/site-onboarding/site-onboarding.html
+++ b/src/core/features/login/components/site-onboarding/site-onboarding.html
@@ -5,7 +5,7 @@
                 <ion-icon slot="icon-only" name="fas-arrow-left" aria-hidden="true"></ion-icon>
             </ion-button>
         </ion-buttons>
-
+        <ion-title></ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="skip($event)" [attr.aria-label]="'core.skip' | translate">
                 {{'core.skip' | translate}}
diff --git a/src/core/features/login/components/sites/sites.html b/src/core/features/login/components/sites/sites.html
index 5cf1c7fae..66eea2e81 100644
--- a/src/core/features/login/components/sites/sites.html
+++ b/src/core/features/login/components/sites/sites.html
@@ -6,7 +6,9 @@
             </ion-button>
         </ion-buttons>
 
-        <h1>{{ 'core.mainmenu.switchaccount' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'core.mainmenu.switchaccount' | translate }}</h1>
+        </ion-title>
 
         <ion-buttons slot="end">
             <ion-button fill="clear" *ngIf="accountsList.count > 1" (click)="toggleDelete()"
diff --git a/src/core/features/login/pages/change-password/change-password.html b/src/core/features/login/pages/change-password/change-password.html
index 4ac4410a5..d3b0e44e7 100644
--- a/src/core/features/login/pages/change-password/change-password.html
+++ b/src/core/features/login/pages/change-password/change-password.html
@@ -4,7 +4,9 @@
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
 
-        <h1>{{ 'core.login.changepassword' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'core.login.changepassword' | translate }}</h1>
+        </ion-title>
 
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="showHelp()" [attr.aria-label]="'core.help' | translate">
diff --git a/src/core/features/login/pages/credentials/credentials.html b/src/core/features/login/pages/credentials/credentials.html
index 364f1fe3b..bd28dced2 100644
--- a/src/core/features/login/pages/credentials/credentials.html
+++ b/src/core/features/login/pages/credentials/credentials.html
@@ -4,7 +4,9 @@
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
 
-        <h1>{{ 'core.login.login' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'core.login.login' | translate }}</h1>
+        </ion-title>
 
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="openSettings()" [attr.aria-label]="'core.settings.appsettings' | translate">
@@ -31,17 +33,15 @@
         <form [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form" #credentialsForm>
             <ion-item *ngIf="siteChecked && !isBrowserSSO">
                 <ion-label class="sr-only">{{ 'core.login.username' | translate }}</ion-label>
-                <ion-input type="text" name="username" placeholder="{{ 'core.login.username' | translate }}"
-                    formControlName="username" autocapitalize="none" autocorrect="off" autocomplete="username" enterkeyhint="next"
-                    required="true">
+                <ion-input type="text" name="username" placeholder="{{ 'core.login.username' | translate }}" formControlName="username"
+                    autocapitalize="none" autocorrect="off" autocomplete="username" enterkeyhint="next" required="true">
                 </ion-input>
             </ion-item>
             <ion-item *ngIf="siteChecked && !isBrowserSSO" class="ion-margin-bottom">
                 <ion-label class="sr-only">{{ 'core.login.password' | translate }}</ion-label>
                 <core-show-password name="password">
                     <ion-input name="password" type="password" placeholder="{{ 'core.login.password' | translate }}"
-                        formControlName="password" [clearOnEdit]="false" autocomplete="current-password" enterkeyhint="go"
-                        required="true">
+                        formControlName="password" [clearOnEdit]="false" autocomplete="current-password" enterkeyhint="go" required="true">
                     </ion-input>
                 </core-show-password>
             </ion-item>
@@ -49,7 +49,7 @@
                 class="ion-margin core-login-login-button">
                 {{ 'core.login.loginbutton' | translate }}
             </ion-button>
-             <!-- Remove this once Ionic fixes this bug: https://github.com/ionic-team/ionic-framework/issues/19368 -->
+            <!-- Remove this once Ionic fixes this bug: https://github.com/ionic-team/ionic-framework/issues/19368 -->
             <input type="submit" class="core-submit-hidden-enter" />
 
             <ng-container *ngIf="showScanQR">
@@ -62,20 +62,16 @@
         </form>
 
         <!-- Forgotten password option. -->
-        <ion-button
-            *ngIf="showForgottenPassword"
-            expand="block"
-            fill="clear"
-            color="dark"
-            class="core-login-forgotten-password core-button-as-link ion-text-wrap"
-            (click)="forgottenPassword()"
-        >
+        <ion-button *ngIf="showForgottenPassword" expand="block" fill="clear" color="dark"
+            class="core-login-forgotten-password core-button-as-link ion-text-wrap" (click)="forgottenPassword()">
             <ion-label>{{ 'core.login.forgotten' | translate }}</ion-label>
         </ion-button>
 
         <ion-list *ngIf="identityProviders && identityProviders.length" class="ion-padding-top core-login-identity-providers">
             <ion-item class="ion-text-wrap" lines="none">
-                <ion-label><h3 class="item-heading">{{ 'core.login.potentialidps' | translate }}</h3></ion-label>
+                <ion-label>
+                    <h3 class="item-heading">{{ 'core.login.potentialidps' | translate }}</h3>
+                </ion-label>
             </ion-item>
             <ion-item button *ngFor="let provider of identityProviders" class="ion-text-wrap core-oauth-icon"
                 (click)="oauthClicked(provider)" [attr.aria-label]="provider.name" detail="false">
@@ -86,10 +82,16 @@
 
         <ion-list *ngIf="canSignup" class="ion-padding-top core-login-sign-up">
             <ion-item class="ion-text-wrap" lines="none">
-                <ion-label><h3 class="item-heading">{{ 'core.login.firsttime' | translate }}</h3></ion-label>
+                <ion-label>
+                    <h3 class="item-heading">{{ 'core.login.firsttime' | translate }}</h3>
+                </ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap" lines="none" *ngIf="authInstructions">
-                <ion-label><p><core-format-text [text]="authInstructions" [filter]="false"></core-format-text></p></ion-label>
+                <ion-label>
+                    <p>
+                        <core-format-text [text]="authInstructions" [filter]="false"></core-format-text>
+                    </p>
+                </ion-label>
             </ion-item>
             <ion-button expand="block" class="ion-margin ion-text-wrap" color="light" (click)="openEmailSignup()">
                 {{ 'core.login.startsignup' | translate }}
diff --git a/src/core/features/login/pages/email-signup/email-signup.html b/src/core/features/login/pages/email-signup/email-signup.html
index e630caba2..ddd61f93a 100644
--- a/src/core/features/login/pages/email-signup/email-signup.html
+++ b/src/core/features/login/pages/email-signup/email-signup.html
@@ -4,7 +4,9 @@
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
 
-        <h1>{{ 'core.login.newaccount' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'core.login.newaccount' | translate }}</h1>
+        </ion-title>
 
         <ion-buttons slot="end">
             <ion-button fill="clear" *ngIf="authInstructions" (click)="showAuthInstructions()"
@@ -34,11 +36,13 @@
         </ion-list>
 
         <!-- Age verification. -->
-        <form *ngIf="allRequiredSupported && settingsLoaded && settings && ageDigitalConsentVerification"
-            [formGroup]="ageVerificationForm" (ngSubmit)="verifyAge($event)" #ageForm>
+        <form *ngIf="allRequiredSupported && settingsLoaded && settings && ageDigitalConsentVerification" [formGroup]="ageVerificationForm"
+            (ngSubmit)="verifyAge($event)" #ageForm>
 
             <ion-item-divider class="ion-text-wrap">
-                <ion-label><h3>{{ 'core.agelocationverification' | translate }}</h3></ion-label>
+                <ion-label>
+                    <h3>{{ 'core.agelocationverification' | translate }}</h3>
+                </ion-label>
             </ion-item-divider>
 
             <ion-item class="ion-text-wrap">
@@ -73,8 +77,8 @@
         </form>
 
         <!-- Signup form. -->
-        <form *ngIf="allRequiredSupported && settingsLoaded && settings && !ageDigitalConsentVerification"
-            [formGroup]="signupForm" (ngSubmit)="create($event)" #signupFormEl>
+        <form *ngIf="allRequiredSupported && settingsLoaded && settings && !ageDigitalConsentVerification" [formGroup]="signupForm"
+            (ngSubmit)="create($event)" #signupFormEl>
 
             <ion-item class="ion-text-wrap ion-text-center">
                 <ion-label>
@@ -90,14 +94,16 @@
 
             <!-- Username and password. -->
             <ion-item-divider class="ion-text-wrap">
-                <ion-label><h3>{{ 'core.login.createuserandpass' | translate }}</h3></ion-label>
+                <ion-label>
+                    <h3>{{ 'core.login.createuserandpass' | translate }}</h3>
+                </ion-label>
             </ion-item-divider>
             <ion-item class="ion-text-wrap">
                 <ion-label position="stacked">
                     <span core-mark-required="true">{{ 'core.login.username' | translate }}</span>
                 </ion-label>
-                <ion-input type="text" name="username" placeholder="{{ 'core.login.username' | translate }}"
-                    formControlName="username" autocapitalize="none" autocorrect="off">
+                <ion-input type="text" name="username" placeholder="{{ 'core.login.username' | translate }}" formControlName="username"
+                    autocapitalize="none" autocorrect="off">
                 </ion-input>
                 <core-input-errors [control]="signupForm.controls.username" [errorMessages]="usernameErrors"></core-input-errors>
             </ion-item>
@@ -169,7 +175,9 @@
             <!-- Other categories. -->
             <ng-container *ngFor="let category of categories">
                 <ion-item-divider class="ion-text-wrap">
-                    <ion-label><p class="item-heading">{{ category.name }}</p></ion-label>
+                    <ion-label>
+                        <p class="item-heading">{{ category.name }}</p>
+                    </ion-label>
                 </ion-item-divider>
                 <core-user-profile-field *ngFor="let field of category.fields" [field]="field" [edit]="true" [signup]="true"
                     registerAuth="email" [form]="signupForm"></core-user-profile-field>
@@ -188,7 +196,9 @@
             <!-- Site policy (if any). -->
             <ng-container *ngIf="settings.sitepolicy">
                 <ion-item-divider class="ion-text-wrap">
-                    <ion-label><h3>{{ 'core.login.policyagreement' | translate }}</h3></ion-label>
+                    <ion-label>
+                        <h3>{{ 'core.login.policyagreement' | translate }}</h3>
+                    </ion-label>
                 </ion-item-divider>
                 <ion-item class="ion-text-wrap">
                     <ion-label>
diff --git a/src/core/features/login/pages/forgotten-password/forgotten-password.html b/src/core/features/login/pages/forgotten-password/forgotten-password.html
index 015eb8d7e..2798c9b99 100644
--- a/src/core/features/login/pages/forgotten-password/forgotten-password.html
+++ b/src/core/features/login/pages/forgotten-password/forgotten-password.html
@@ -4,7 +4,9 @@
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
 
-        <h1>{{ 'core.login.passwordforgotten' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'core.login.passwordforgotten' | translate }}</h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
@@ -16,7 +18,9 @@
     <ion-card>
         <form [formGroup]="myForm" (ngSubmit)="resetPassword($event)" #resetPasswordForm>
             <ion-item-divider class="ion-text-wrap">
-                <ion-label><h2>{{ 'core.login.searchby' | translate }}</h2></ion-label>
+                <ion-label>
+                    <h2>{{ 'core.login.searchby' | translate }}</h2>
+                </ion-label>
             </ion-item-divider>
             <ion-radio-group formControlName="field">
                 <ion-item>
@@ -30,8 +34,8 @@
             </ion-radio-group>
             <ion-item>
                 <ion-label class="sr-only">{{ 'core.login.usernameoremail' | translate }}</ion-label>
-                <ion-input type="text" name="value" placeholder="{{ 'core.login.usernameoremail' | translate }}"
-                    formControlName="value" autocapitalize="none" autocorrect="off" [core-auto-focus]="autoFocus">
+                <ion-input type="text" name="value" placeholder="{{ 'core.login.usernameoremail' | translate }}" formControlName="value"
+                    autocapitalize="none" autocorrect="off" [core-auto-focus]="autoFocus">
                 </ion-input>
             </ion-item>
             <ion-button type="submit" class="ion-margin" expand="block" [disabled]="!myForm.valid">
diff --git a/src/core/features/login/pages/reconnect/reconnect.html b/src/core/features/login/pages/reconnect/reconnect.html
index 23445a7ae..5d41ab921 100644
--- a/src/core/features/login/pages/reconnect/reconnect.html
+++ b/src/core/features/login/pages/reconnect/reconnect.html
@@ -4,7 +4,9 @@
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
 
-        <h1>{{ 'core.login.reconnect' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'core.login.reconnect' | translate }}</h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content class="ion-padding" (keydown)="keyDown($event)" (keyup)="keyUp($event)">
@@ -71,24 +73,20 @@
     </form>
 
     <!-- Forgotten password option. -->
-    <ion-button
-        *ngIf="showForgottenPassword && !isOAuth"
-        expand="block"
-        fill="clear"
-        color="dark"
-        class="core-login-forgotten-password core-button-as-link ion-text-wrap"
-        (click)="forgottenPassword()"
-    >
+    <ion-button *ngIf="showForgottenPassword && !isOAuth" expand="block" fill="clear" color="dark"
+        class="core-login-forgotten-password core-button-as-link ion-text-wrap" (click)="forgottenPassword()">
         <ion-label>{{ 'core.login.forgotten' | translate }}</ion-label>
     </ion-button>
 
     <!-- Identity providers. -->
     <ion-list *ngIf="identityProviders && identityProviders.length" class="ion-padding-top core-login-identity-providers">
         <ion-item class="ion-text-wrap" lines="none">
-            <ion-label><h3 class="item-heading">{{ 'core.login.potentialidps' | translate }}</h3></ion-label>
+            <ion-label>
+                <h3 class="item-heading">{{ 'core.login.potentialidps' | translate }}</h3>
+            </ion-label>
         </ion-item>
-        <ion-item button *ngFor="let provider of identityProviders" class="ion-text-wrap core-oauth-icon"
-            (click)="oauthClicked(provider)" detail="false">
+        <ion-item button *ngFor="let provider of identityProviders" class="ion-text-wrap core-oauth-icon" (click)="oauthClicked(provider)"
+            detail="false">
             <img [src]="provider.iconurl" alt="" role="presentation" width="32" height="32" slot="start">
             <ion-label>{{provider.name}}</ion-label>
         </ion-item>
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 4d870ab9a..0218d615b 100644
--- a/src/core/features/login/pages/site-policy/site-policy.html
+++ b/src/core/features/login/pages/site-policy/site-policy.html
@@ -4,19 +4,25 @@
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
 
-        <h1>{{ 'core.login.policyagreement' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'core.login.policyagreement' | translate }}</h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
     <core-loading [hideUntil]="policyLoaded">
         <ion-list *ngIf="sitePolicy">
             <ion-item class="ion-text-wrap">
-                <ion-label><p>{{ 'core.login.policyagree' | translate }}</p></ion-label>
+                <ion-label>
+                    <p>{{ 'core.login.policyagree' | translate }}</p>
+                </ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap">
-                <ion-label><p>
-                    <a [href]="sitePolicy" core-link [capture]="false">{{ 'core.login.policyagreementclick' | translate }}</a>
-                </p></ion-label>
+                <ion-label>
+                    <p>
+                        <a [href]="sitePolicy" core-link [capture]="false">{{ 'core.login.policyagreementclick' | translate }}</a>
+                    </p>
+                </ion-label>
             </ion-item>
             <ion-card *ngIf="showInline">
                 <core-iframe [src]="sitePolicy"></core-iframe>
diff --git a/src/core/features/login/pages/site/site.html b/src/core/features/login/pages/site/site.html
index 08da8b895..6302070b4 100644
--- a/src/core/features/login/pages/site/site.html
+++ b/src/core/features/login/pages/site/site.html
@@ -4,7 +4,9 @@
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
 
-        <h1>{{ 'core.login.connecttomoodle' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'core.login.connecttomoodle' | translate }}</h1>
+        </ion-title>
 
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="openSettings()" [attr.aria-label]="'core.settings.appsettings' | translate">
@@ -14,8 +16,7 @@
     </ion-toolbar>
 </ion-header>
 <ion-content class="ion-padding">
-    <div class="ion-text-center ion-padding ion-margin-bottom core-login-site-logo"
-        [class.hidden]="hasSites || enteredSiteUrl">
+    <div class="ion-text-center ion-padding ion-margin-bottom core-login-site-logo" [class.hidden]="hasSites || enteredSiteUrl">
         <img src="assets/img/login_logo.png" class="avatar-full login-logo" role="presentation" alt="">
     </div>
     <form [formGroup]="siteForm" (ngSubmit)="connect($event, siteForm.value.siteUrl)" *ngIf="!fixedSites" #siteFormEl>
@@ -108,14 +109,8 @@
     </ng-container>
 
     <!-- Help. -->
-    <ion-button
-        class="ion-margin-top core-login-need-help core-button-as-link ion-text-wrap"
-        (click)="showHelp()"
-        aria-haspopup="dialog"
-        expand="block"
-        fill="clear"
-        color="dark"
-    >
+    <ion-button class="ion-margin-top core-login-need-help core-button-as-link ion-text-wrap" (click)="showHelp()" aria-haspopup="dialog"
+        expand="block" fill="clear" color="dark">
         <ion-label>{{ 'core.needhelp' | translate }}</ion-label>
     </ion-button>
 </ion-content>
diff --git a/src/core/features/login/pages/sites/sites.html b/src/core/features/login/pages/sites/sites.html
index a47a65f2f..994b7e7df 100644
--- a/src/core/features/login/pages/sites/sites.html
+++ b/src/core/features/login/pages/sites/sites.html
@@ -4,7 +4,9 @@
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
 
-        <h1>{{ 'core.login.accounts' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'core.login.accounts' | translate }}</h1>
+        </ion-title>
 
         <ion-buttons slot="end">
             <ion-button fill="clear" *ngIf="accountsList.count > 0" (click)="toggleDelete()"
diff --git a/src/core/features/mainmenu/components/user-menu/user-menu.html b/src/core/features/mainmenu/components/user-menu/user-menu.html
index 34a9184f7..2f30c77d8 100644
--- a/src/core/features/mainmenu/components/user-menu/user-menu.html
+++ b/src/core/features/mainmenu/components/user-menu/user-menu.html
@@ -1,13 +1,15 @@
 <ion-header>
     <ion-toolbar>
-        <ion-buttons slot="start">
+        <ion-title>
+            <h2>
+                {{'core.user.account' | translate}}
+            </h2>
+        </ion-title>
+        <ion-buttons slot="end">
             <ion-button fill="clear" (click)="close($event)" [attr.aria-label]="'core.close' | translate">
                 <ion-icon name="fas-times" slot="icon-only" aria-hidden="true"></ion-icon>
             </ion-button>
         </ion-buttons>
-        <h1>
-            {{'core.user.account' | translate}}
-        </h1>
     </ion-toolbar>
 </ion-header>
 <ion-content>
diff --git a/src/core/features/mainmenu/pages/home/home.html b/src/core/features/mainmenu/pages/home/home.html
index e953b24c2..7f670c80a 100644
--- a/src/core/features/mainmenu/pages/home/home.html
+++ b/src/core/features/mainmenu/pages/home/home.html
@@ -3,10 +3,12 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            <core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0"></core-format-text>
-            <img src="assets/img/top_logo.png" class="core-header-logo" [alt]="siteName">
-        </h1>
+        <ion-title>
+            <h1>
+                <core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0"></core-format-text>
+                <img src="assets/img/top_logo.png" class="core-header-logo" [alt]="siteName">
+            </h1>
+        </ion-title>
         <ion-buttons slot="end">
             <core-user-menu-button></core-user-menu-button>
         </ion-buttons>
@@ -15,6 +17,5 @@
 <core-loading [hideUntil]="loaded">
     <core-empty-box *ngIf="tabs.length == 0" icon="fas-home" [message]="'core.courses.nocourses' | translate"></core-empty-box>
 </core-loading>
-<core-tabs-outlet *ngIf="tabs.length > 0" [selectedIndex]="selectedTab" [hideUntil]="loaded" [tabs]="tabs"
-    (ionChange)="tabSelected()">
+<core-tabs-outlet *ngIf="tabs.length > 0" [selectedIndex]="selectedTab" [hideUntil]="loaded" [tabs]="tabs" (ionChange)="tabSelected()">
 </core-tabs-outlet>
diff --git a/src/core/features/mainmenu/pages/more/more.html b/src/core/features/mainmenu/pages/more/more.html
index 2d111d407..9f8869ba6 100644
--- a/src/core/features/mainmenu/pages/more/more.html
+++ b/src/core/features/mainmenu/pages/more/more.html
@@ -4,7 +4,9 @@
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
 
-        <h1>{{ 'core.more' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'core.more' | translate }}</h1>
+        </ion-title>
 
         <ion-buttons slot="end">
             <core-user-menu-button></core-user-menu-button>
@@ -14,7 +16,9 @@
 <ion-content>
     <ion-list>
         <ion-item class="ion-text-center" *ngIf="(!handlers || !handlers.length) && !handlersLoaded">
-            <ion-label><ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner></ion-label>
+            <ion-label>
+                <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+            </ion-label>
         </ion-item>
         <ion-item button *ngFor="let handler of handlers" [ngClass]="['core-moremenu-handler', handler.class || '']"
             (click)="openHandler(handler)" [attr.aria-label]="handler.title | translate" detail="true">
diff --git a/src/core/features/rating/components/ratings/ratings-modal.html b/src/core/features/rating/components/ratings/ratings-modal.html
index 1eef7adfc..484398ae5 100644
--- a/src/core/features/rating/components/ratings/ratings-modal.html
+++ b/src/core/features/rating/components/ratings/ratings-modal.html
@@ -1,6 +1,8 @@
 <ion-header>
     <ion-toolbar>
-        <h2>{{ 'core.rating.ratings' | translate }}</h2>
+        <ion-title>
+            <h2>{{ 'core.rating.ratings' | translate }}</h2>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-times" aria-hidden="true"></ion-icon>
diff --git a/src/core/features/settings/pages/about/about.html b/src/core/features/settings/pages/about/about.html
index 255941ddc..061f88ec3 100644
--- a/src/core/features/settings/pages/about/about.html
+++ b/src/core/features/settings/pages/about/about.html
@@ -3,9 +3,11 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            {{ 'core.settings.about' | translate}}
-        </h1>
+        <ion-title>
+            <h1>
+                {{ 'core.settings.about' | translate}}
+            </h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 
@@ -13,36 +15,26 @@
     <ion-list>
         <ion-item button class="ion-text-wrap" detail="false" (click)="openPage('deviceinfo')">
             <ion-icon name="fas-mobile" slot="start" aria-hidden="true"></ion-icon>
-            <ion-label><h2>{{ appName }} {{ versionName }}</h2></ion-label>
+            <ion-label>
+                <h2>{{ appName }} {{ versionName }}</h2>
+            </ion-label>
         </ion-item>
         <ion-item button class="ion-text-wrap" (click)="openPage('licenses')" detail="true">
             <ion-icon name="far-copyright" slot="start" aria-hidden="true"></ion-icon>
             <ion-label>{{ 'core.settings.opensourcelicenses' | translate }}</ion-label>
         </ion-item>
-        <ion-item
-            *ngIf="privacyPolicy"
-            class="ion-text-wrap"
-            button core-link auto-login="no" [href]="privacyPolicy"
-            detail="true" detailIcon="open-outline"
-        >
+        <ion-item *ngIf="privacyPolicy" class="ion-text-wrap" button core-link auto-login="no" [href]="privacyPolicy" detail="true"
+            detailIcon="open-outline">
             <ion-icon name="fas-user-shield" slot="start" aria-hidden="true"></ion-icon>
             <ion-label>{{ 'core.settings.privacypolicy' | translate }}</ion-label>
         </ion-item>
-        <ion-item
-            *ngIf="a11yStatement"
-            class="ion-text-wrap"
-            button core-link auto-login="no" [href]="a11yStatement"
-            detail="true" detailIcon="open-outline"
-        >
+        <ion-item *ngIf="a11yStatement" class="ion-text-wrap" button core-link auto-login="no" [href]="a11yStatement" detail="true"
+            detailIcon="open-outline">
             <ion-icon name="fas-universal-access" slot="start" aria-hidden="true"></ion-icon>
             <ion-label>{{ 'core.settings.accessibilitystatement' | translate }}</ion-label>
         </ion-item>
-        <ion-item
-            *ngIf="feedbackFormUrl"
-            class="ion-text-wrap"
-            button core-link [href]="feedbackFormUrl"
-            detail="true" detailIcon="open-outline"
-        >
+        <ion-item *ngIf="feedbackFormUrl" class="ion-text-wrap" button core-link [href]="feedbackFormUrl" detail="true"
+            detailIcon="open-outline">
             <ion-icon name="fas-bullhorn" slot="start" aria-hidden="true"></ion-icon>
             <ion-label>{{ 'core.settings.helpusimprove' | translate }}</ion-label>
         </ion-item>
diff --git a/src/core/features/settings/pages/dev/dev.html b/src/core/features/settings/pages/dev/dev.html
index 1e970cc73..2140d1bfa 100644
--- a/src/core/features/settings/pages/dev/dev.html
+++ b/src/core/features/settings/pages/dev/dev.html
@@ -4,7 +4,9 @@
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
 
-        <h1>{{ 'core.settings.developeroptions' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'core.settings.developeroptions' | translate }}</h1>
+        </ion-title>
 
         <ion-buttons slot="end" *ngIf="siteId">
             <ion-button fill="clear" (click)="copyInfo()" [attr.aria-label]="'core.settings.copyinfo' | translate">
@@ -31,25 +33,35 @@
         <ng-container *ngIf="siteId">
             <ion-item class="ion-text-wrap">
                 <ion-label>
-                    <h2>{{ 'core.settings.remotestyles' | translate }} <ion-badge>{{remoteStylesCount}}</ion-badge></h2>
+                    <h2>{{ 'core.settings.remotestyles' | translate }} <ion-badge>{{remoteStylesCount}}</ion-badge>
+                    </h2>
                 </ion-label>
                 <ion-toggle [(ngModel)]="remoteStyles" (ionChange)="remoteStylesChanged()"></ion-toggle>
             </ion-item>
             <ion-item class="ion-text-wrap">
                 <ion-label>
-                    <h2>{{ 'core.settings.pluginstyles' | translate }} <ion-badge>{{pluginStylesCount}}</ion-badge></h2>
+                    <h2>{{ 'core.settings.pluginstyles' | translate }} <ion-badge>{{pluginStylesCount}}</ion-badge>
+                    </h2>
                 </ion-label>
                 <ion-toggle [(ngModel)]="pluginStyles" (ionChange)="pluginStylesChanged()"></ion-toggle>
             </ion-item>
 
-            <ion-item-divider><ion-label><h2>{{ 'core.settings.disabledfeatures' | translate }}</h2></ion-label></ion-item-divider>
+            <ion-item-divider>
+                <ion-label>
+                    <h2>{{ 'core.settings.disabledfeatures' | translate }}</h2>
+                </ion-label>
+            </ion-item-divider>
             <ion-item class="ion-text-wrap" *ngFor="let feature of disabledFeatures">
                 <ion-label>
                     <h2>{{ feature }}</h2>
                 </ion-label>
             </ion-item>
 
-            <ion-item-divider><ion-label><h2>{{ 'core.settings.siteplugins' | translate }}</h2></ion-label></ion-item-divider>
+            <ion-item-divider>
+                <ion-label>
+                    <h2>{{ 'core.settings.siteplugins' | translate }}</h2>
+                </ion-label>
+            </ion-item-divider>
             <ion-item class="ion-text-wrap" *ngFor="let plugin of sitePlugins">
                 <ion-label>
                     <h2>{{ plugin.addon }} ({{plugin.component}})</h2>
diff --git a/src/core/features/settings/pages/deviceinfo/deviceinfo.html b/src/core/features/settings/pages/deviceinfo/deviceinfo.html
index 8379b26df..ed8401cd8 100644
--- a/src/core/features/settings/pages/deviceinfo/deviceinfo.html
+++ b/src/core/features/settings/pages/deviceinfo/deviceinfo.html
@@ -3,9 +3,11 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            {{ 'core.settings.deviceinfo' | translate }}
-        </h1>
+        <ion-title>
+            <h1>
+                {{ 'core.settings.deviceinfo' | translate }}
+            </h1>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="copyInfo()" [attr.aria-label]="'core.settings.copyinfo' | translate">
                 <ion-icon slot="icon-only" name="fas-clipboard" aria-hidden="true"></ion-icon>
@@ -37,7 +39,8 @@
         </ion-item>
         <ion-item *ngIf="deviceInfo.siteUrl" (longPress)="copyItemInfo($event)">
             <ion-label class="ion-text-wrap">
-                <h2>{{ 'core.settings.siteinfo' | translate }}<ng-container *ngIf="deviceInfo.isPrefixedUrl"> *</ng-container></h2>
+                <h2>{{ 'core.settings.siteinfo' | translate }}<ng-container *ngIf="deviceInfo.isPrefixedUrl"> *</ng-container>
+                </h2>
                 <p><a [href]="deviceInfo.siteUrl" core-link auto-login="yes">{{ deviceInfo.siteUrl }}</a></p>
                 <p *ngIf="deviceInfo.siteVersion">{{ deviceInfo.siteVersion }}</p>
                 <p *ngIf="deviceInfo.siteId">{{ deviceInfo.siteId }}</p>
diff --git a/src/core/features/settings/pages/general/general.html b/src/core/features/settings/pages/general/general.html
index a859ca45f..530926a4a 100644
--- a/src/core/features/settings/pages/general/general.html
+++ b/src/core/features/settings/pages/general/general.html
@@ -4,7 +4,9 @@
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
 
-        <h1>{{ 'core.settings.general' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'core.settings.general' | translate }}</h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
@@ -46,7 +48,9 @@
             </ion-select>
         </ion-item>
         <ion-item text-wrap *ngIf="colorSchemes.length > 0 && selectedScheme=='system' && isAndroid">
-            <ion-label><p>{{ 'core.settings.colorscheme-system-notice' | translate }}</p></ion-label>
+            <ion-label>
+                <p>{{ 'core.settings.colorscheme-system-notice' | translate }}</p>
+            </ion-label>
         </ion-item>
         <ion-item class="ion-text-wrap">
             <ion-label>
diff --git a/src/core/features/settings/pages/index/index.html b/src/core/features/settings/pages/index/index.html
index d56fe5e76..aa88d9c50 100644
--- a/src/core/features/settings/pages/index/index.html
+++ b/src/core/features/settings/pages/index/index.html
@@ -3,15 +3,17 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ 'core.settings.appsettings' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'core.settings.appsettings' | translate }}</h1>
+        </ion-title>
         <ion-buttons slot="end"></ion-buttons>
     </ion-toolbar>
 </ion-header>
 <ion-content>
     <core-split-view>
         <ion-list>
-            <ion-item *ngFor="let section of sections.items" [attr.aria-current]="sections.getItemAriaCurrent(section)" button
-                detail="true" (click)="sections.select(section)">
+            <ion-item *ngFor="let section of sections.items" [attr.aria-current]="sections.getItemAriaCurrent(section)" button detail="true"
+                (click)="sections.select(section)">
                 <ion-icon [name]="section.icon" slot="start" aria-hidden="true"></ion-icon>
                 <ion-label>{{ section.name | translate }}</ion-label>
             </ion-item>
diff --git a/src/core/features/settings/pages/licenses/licenses.html b/src/core/features/settings/pages/licenses/licenses.html
index 0be97cb16..8306bb9e9 100644
--- a/src/core/features/settings/pages/licenses/licenses.html
+++ b/src/core/features/settings/pages/licenses/licenses.html
@@ -4,7 +4,9 @@
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
 
-        <h1>{{ 'core.settings.opensourcelicenses' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'core.settings.opensourcelicenses' | translate }}</h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
diff --git a/src/core/features/settings/pages/site/site.html b/src/core/features/settings/pages/site/site.html
index af29f5ee0..3361e02ab 100644
--- a/src/core/features/settings/pages/site/site.html
+++ b/src/core/features/settings/pages/site/site.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ 'core.settings.preferences' | translate}}</h1>
+        <ion-title>
+            <h1>{{ 'core.settings.preferences' | translate}}</h1>
+        </ion-title>
         <ion-buttons slot="end">
         </ion-buttons>
     </ion-toolbar>
@@ -48,8 +50,7 @@
                         <ion-icon name="fas-info-circle" color="info" slot="icon-only"></ion-icon>
                     </ion-button>
                     <core-button-with-spinner [loading]="isSynchronizing()" slot="end">
-                        <ion-button fill="clear" (click)="synchronize()"
-                            [attr.aria-label]="'core.settings.synchronizenow' | translate">
+                        <ion-button fill="clear" (click)="synchronize()" [attr.aria-label]="'core.settings.synchronizenow' | translate">
                             <ion-icon name="fas-sync-alt" slot="icon-only" aria-hidden="true"></ion-icon>
                         </ion-button>
                     </core-button-with-spinner>
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 6d1343a40..51bd07d89 100644
--- a/src/core/features/settings/pages/space-usage/space-usage.html
+++ b/src/core/features/settings/pages/space-usage/space-usage.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ 'core.settings.spaceusage' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'core.settings.spaceusage' | translate }}</h1>
+        </ion-title>
         <ion-buttons slot="end">
             <core-navbar-buttons>
                 <ion-button (click)="showInfo()" [attr.aria-label]="'core.info' | translate">
diff --git a/src/core/features/settings/pages/synchronization/synchronization.html b/src/core/features/settings/pages/synchronization/synchronization.html
index 31fe30857..cb0243de0 100644
--- a/src/core/features/settings/pages/synchronization/synchronization.html
+++ b/src/core/features/settings/pages/synchronization/synchronization.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ 'core.settings.synchronization' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'core.settings.synchronization' | translate }}</h1>
+        </ion-title>
         <ion-buttons slot="end">
             <core-navbar-buttons>
                 <ion-button (click)="showInfo()" [attr.aria-label]="'core.info' | translate">
diff --git a/src/core/features/sharedfiles/components/list-modal/list-modal.html b/src/core/features/sharedfiles/components/list-modal/list-modal.html
index 602b672ac..682496ad4 100644
--- a/src/core/features/sharedfiles/components/list-modal/list-modal.html
+++ b/src/core/features/sharedfiles/components/list-modal/list-modal.html
@@ -1,10 +1,8 @@
 <ion-header>
     <ion-toolbar>
-        <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
-        </ion-buttons>
-        <h2>{{ title }}</h2>
-
+        <ion-title>
+            <h2>{{ title }}</h2>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon name="fas-times" slot="icon-only" aria-hidden=true></ion-icon>
@@ -13,8 +11,7 @@
     </ion-toolbar>
 </ion-header>
 <ion-content>
-    <core-shared-files-list [siteId]="siteId" [mimetypes]="mimetypes" [isModal]="true" [manage]="manage" [pick]="pick"
-        [path]="path" [showSitePicker]="!hideSitePicker" (onPathChanged)="calculateTitle($event)"
-        (onFilePicked)="filePicked($event)">
+    <core-shared-files-list [siteId]="siteId" [mimetypes]="mimetypes" [isModal]="true" [manage]="manage" [pick]="pick" [path]="path"
+        [showSitePicker]="!hideSitePicker" (onPathChanged)="calculateTitle($event)" (onFilePicked)="filePicked($event)">
     </core-shared-files-list>
 </ion-content>
diff --git a/src/core/features/sharedfiles/pages/choose-site/choose-site.html b/src/core/features/sharedfiles/pages/choose-site/choose-site.html
index 23a7b4e54..f931b9365 100644
--- a/src/core/features/sharedfiles/pages/choose-site/choose-site.html
+++ b/src/core/features/sharedfiles/pages/choose-site/choose-site.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ 'core.sharedfiles.sharedfiles' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'core.sharedfiles.sharedfiles' | translate }}</h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
@@ -18,12 +20,13 @@
             <ion-item *ngFor="let site of sites" (click)="storeInSite(site.id)" detail="false" button>
                 <ion-avatar slot="start" aria-hidden="true">
                     <img [src]="site.avatar" core-external-content [siteId]="site.id"
-                        alt="{{ 'core.pictureof' | translate:{$a: site.fullname} }}"
-                        onError="this.src='assets/img/user-avatar.png'">
+                        alt="{{ 'core.pictureof' | translate:{$a: site.fullname} }}" onError="this.src='assets/img/user-avatar.png'">
                 </ion-avatar>
                 <ion-label>
                     <p class="item-heading">{{site.fullName}}</p>
-                    <p><core-format-text clean="true" [text]="site.siteName" [siteId]="site.id"></core-format-text></p>
+                    <p>
+                        <core-format-text clean="true" [text]="site.siteName" [siteId]="site.id"></core-format-text>
+                    </p>
                     <p>{{site.siteUrl}}</p>
                 </ion-label>
             </ion-item>
diff --git a/src/core/features/sharedfiles/pages/list/list.html b/src/core/features/sharedfiles/pages/list/list.html
index 02ed894b9..b5b619acd 100644
--- a/src/core/features/sharedfiles/pages/list/list.html
+++ b/src/core/features/sharedfiles/pages/list/list.html
@@ -3,11 +3,13 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ title }}</h1>
+        <ion-title>
+            <h1>{{ title }}</h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
-    <core-shared-files-list [siteId]="siteId" [mimetypes]="mimetypes" [isModal]="false" [manage]="manage" [pick]="false"
-        [path]="path" [showSitePicker]="showSitePicker" (onPathChanged)="calculateTitle($event)">
+    <core-shared-files-list [siteId]="siteId" [mimetypes]="mimetypes" [isModal]="false" [manage]="manage" [pick]="false" [path]="path"
+        [showSitePicker]="showSitePicker" (onPathChanged)="calculateTitle($event)">
     </core-shared-files-list>
 </ion-content>
diff --git a/src/core/features/siteplugins/pages/module-index/module-index.html b/src/core/features/siteplugins/pages/module-index/module-index.html
index b8136da60..7bbd67a91 100644
--- a/src/core/features/siteplugins/pages/module-index/module-index.html
+++ b/src/core/features/siteplugins/pages/module-index/module-index.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ title }}</h1>
+        <ion-title>
+            <h1>{{ title }}</h1>
+        </ion-title>
 
         <ion-buttons slot="end">
             <!-- If the site plugin defines some buttons using core-nav-buttons, they will be added here. -->
diff --git a/src/core/features/siteplugins/pages/plugin-page/plugin-page.html b/src/core/features/siteplugins/pages/plugin-page/plugin-page.html
index ebc4634fb..704dea867 100644
--- a/src/core/features/siteplugins/pages/plugin-page/plugin-page.html
+++ b/src/core/features/siteplugins/pages/plugin-page/plugin-page.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1 *ngIf="title">{{ title | translate }}</h1>
+        <ion-title>
+            <h1 *ngIf="title">{{ title | translate }}</h1>
+        </ion-title>
 
         <ion-buttons slot="end">
             <!-- If the site plugin defines some buttons using core-nav-buttons, they will be added here. -->
@@ -11,11 +13,10 @@
     </ion-toolbar>
 </ion-header>
 <ion-content>
-    <ion-refresher slot="fixed" [disabled]="!ptrEnabled || !content || !content.dataLoaded"
-        (ionRefresh)="refreshData($event.target)">
+    <ion-refresher slot="fixed" [disabled]="!ptrEnabled || !content || !content.dataLoaded" (ionRefresh)="refreshData($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-site-plugins-plugin-content [component]="component" [method]="method" [args]="args" [preSets]="preSets"
-        [initResult]="initResult" [data]="jsData" [pageTitle]="title">
+    <core-site-plugins-plugin-content [component]="component" [method]="method" [args]="args" [preSets]="preSets" [initResult]="initResult"
+        [data]="jsData" [pageTitle]="title">
     </core-site-plugins-plugin-content>
 </ion-content>
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 2d1727416..5a03671d8 100644
--- a/src/core/features/tag/pages/index-area/index-area.html
+++ b/src/core/features/tag/pages/index-area/index-area.html
@@ -3,9 +3,11 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>
-            {{ 'core.tag.itemstaggedwith' | translate: { $a: {tagarea: areaNameKey | translate, tag: tagName} } }}
-        </h1>
+        <ion-title>
+            <h1>
+                {{ 'core.tag.itemstaggedwith' | translate: { $a: {tagarea: areaNameKey | translate, tag: tagName} } }}
+            </h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
diff --git a/src/core/features/tag/pages/index/index.html b/src/core/features/tag/pages/index/index.html
index 8e9376122..151b3f93f 100644
--- a/src/core/features/tag/pages/index/index.html
+++ b/src/core/features/tag/pages/index/index.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ 'core.tag.tag' | translate }}: {{ tagName }}</h1>
+        <ion-title>
+            <h1>{{ 'core.tag.tag' | translate }}: {{ tagName }}</h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 
@@ -19,8 +21,7 @@
                     <ion-label class="ion-text-wrap">{{ 'core.tag.warningareasnotsupported' | translate }}</ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngFor="let area of areas" [attr.aria-label]="area.nameKey | translate"
-                    (click)="openArea(area)" [attr.aria-current]="area!.id == selectedAreaId ? 'page' : 'false'" button
-                    detail="true">
+                    (click)="openArea(area)" [attr.aria-current]="area!.id == selectedAreaId ? 'page' : 'false'" button detail="true">
                     <ion-label>
                         <h2>{{ area!.nameKey | translate }}</h2>
                     </ion-label>
diff --git a/src/core/features/tag/pages/search/search.html b/src/core/features/tag/pages/search/search.html
index 1f6ff37a9..b6d2a5d8b 100644
--- a/src/core/features/tag/pages/search/search.html
+++ b/src/core/features/tag/pages/search/search.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ 'core.tag.searchtags' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'core.tag.searchtags' | translate }}</h1>
+        </ion-title>
         <ion-buttons slot="end">
             <core-user-menu-button></core-user-menu-button>
         </ion-buttons>
@@ -16,9 +18,8 @@
     <ion-grid class="safe-area-padding">
         <ion-row>
             <ion-col size="12" [attr.col-sm-6]="collections && collections.length > 1 ? '' : null">
-                <core-search-box (onSubmit)="searchTags($event)" (onClear)="searchTags('')" [initialSearch]="query"
-                    [disabled]="searching" autocorrect="off" [spellcheck]="false" [autoFocus]="false" [lengthCheck]="0"
-                    searchArea="CoreTag"></core-search-box>
+                <core-search-box (onSubmit)="searchTags($event)" (onClear)="searchTags('')" [initialSearch]="query" [disabled]="searching"
+                    autocorrect="off" [spellcheck]="false" [autoFocus]="false" [lengthCheck]="0" searchArea="CoreTag"></core-search-box>
             </ion-col>
             <ion-col size="12" size-sm="6" *ngIf="collections && collections.length > 1">
                 <core-combobox [selection]="collectionId" (onChange)="searchTags($event)" [disabled]="searching">
diff --git a/src/core/features/user/pages/about/about.html b/src/core/features/user/pages/about/about.html
index 03abbef38..e4858a324 100644
--- a/src/core/features/user/pages/about/about.html
+++ b/src/core/features/user/pages/about/about.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ 'core.user.profile' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'core.user.profile' | translate }}</h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
diff --git a/src/core/features/user/pages/profile/profile.html b/src/core/features/user/pages/profile/profile.html
index d4f77cb01..cad242abd 100644
--- a/src/core/features/user/pages/profile/profile.html
+++ b/src/core/features/user/pages/profile/profile.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1 *ngIf="title">{{ title }}</h1>
+        <ion-title>
+            <h1 *ngIf="title">{{ title }}</h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
@@ -84,7 +86,8 @@
                     </ion-label>
                 </ion-item>
             </ion-list>
-            <core-empty-box *ngIf="!user && !isDeleted && isEnrolled" icon="far-user" [message]=" 'core.user.detailsnotavailable' | translate">
+            <core-empty-box *ngIf="!user && !isDeleted && isEnrolled" icon="far-user"
+                [message]=" 'core.user.detailsnotavailable' | translate">
             </core-empty-box>
             <core-empty-box *ngIf="isDeleted" icon="far-user" [message]="'core.userdeleted' | translate"></core-empty-box>
             <core-empty-box *ngIf="!isEnrolled" icon="far-user" [message]="'core.notenrolledprofile' | translate"></core-empty-box>
diff --git a/src/core/features/viewer/components/image/image.html b/src/core/features/viewer/components/image/image.html
index 371f95368..c55c50d93 100644
--- a/src/core/features/viewer/components/image/image.html
+++ b/src/core/features/viewer/components/image/image.html
@@ -1,6 +1,8 @@
 <ion-header>
     <ion-toolbar>
-        <h2>{{ title }}</h2>
+        <ion-title>
+            <h2>{{ title }}</h2>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon name="fas-times" slot="icon-only" aria-hidden=true></ion-icon>
diff --git a/src/core/features/viewer/components/qr-scanner/qr-scanner.html b/src/core/features/viewer/components/qr-scanner/qr-scanner.html
index bb77c94b5..a8e2757c0 100644
--- a/src/core/features/viewer/components/qr-scanner/qr-scanner.html
+++ b/src/core/features/viewer/components/qr-scanner/qr-scanner.html
@@ -1,6 +1,8 @@
 <ion-header>
     <ion-toolbar>
-        <h2>{{ title }}</h2>
+        <ion-title>
+            <h2>{{ title }}</h2>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon name="fas-times" slot="icon-only" aria-hidden=true></ion-icon>
diff --git a/src/core/features/viewer/components/text/text.html b/src/core/features/viewer/components/text/text.html
index 10248ad3f..851bf8f03 100644
--- a/src/core/features/viewer/components/text/text.html
+++ b/src/core/features/viewer/components/text/text.html
@@ -1,7 +1,8 @@
 <ion-header>
     <ion-toolbar>
-        <h2>{{ title }}</h2>
-
+        <ion-title>
+            <h2>{{ title }}</h2>
+        </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-times" aria-hidden="true"></ion-icon>
@@ -10,8 +11,8 @@
     </ion-toolbar>
 </ion-header>
 <ion-content class="ion-padding">
-    <core-format-text [text]="content" [component]="component" [componentId]="componentId" [filter]="filter"
-        [contextLevel]="contextLevel" [contextInstanceId]="instanceId" [courseId]="courseId">
+    <core-format-text [text]="content" [component]="component" [componentId]="componentId" [filter]="filter" [contextLevel]="contextLevel"
+        [contextInstanceId]="instanceId" [courseId]="courseId">
     </core-format-text>
 
     <ion-card *ngIf="files?.length">
diff --git a/src/core/features/viewer/pages/iframe/iframe.html b/src/core/features/viewer/pages/iframe/iframe.html
index 270821cfa..5b2ae550d 100644
--- a/src/core/features/viewer/pages/iframe/iframe.html
+++ b/src/core/features/viewer/pages/iframe/iframe.html
@@ -3,7 +3,9 @@
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
-        <h1>{{ title }}</h1>
+        <ion-title>
+            <h1>{{ title }}</h1>
+        </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>

From a3b3277ea14b43db7c79b8d72237bcfbcfabe013 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 23 Nov 2021 15:05:14 +0100
Subject: [PATCH 9/9] MOBILE-3810 core: Customize page transition

---
 src/app/app.module.ts               |   5 +-
 src/core/classes/page-transition.ts | 366 ++++++++++++++++++++++++++++
 2 files changed, 369 insertions(+), 2 deletions(-)
 create mode 100644 src/core/classes/page-transition.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 555132d45..6da789ef6 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -21,7 +21,7 @@ import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 
-import { IonicModule, IonicRouteStrategy, iosTransitionAnimation } from '@ionic/angular';
+import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 
 import { CoreModule } from '@/core/core.module';
 import { AddonsModule } from '@/addons/addons.module';
@@ -31,6 +31,7 @@ import { AppRoutingModule } from './app-routing.module';
 import { JitCompilerFactory } from '@angular/platform-browser-dynamic';
 import { CoreCronDelegate } from '@services/cron';
 import { CoreSiteInfoCronHandler } from '@services/handlers/site-info-cron';
+import { moodleTransitionAnimation } from '@classes/page-transition';
 
 // For translate loader. AoT requires an exported function for factories.
 export function createTranslateLoader(http: HttpClient): TranslateHttpLoader {
@@ -44,7 +45,7 @@ export function createTranslateLoader(http: HttpClient): TranslateHttpLoader {
         BrowserAnimationsModule,
         IonicModule.forRoot(
             {
-                navAnimation: iosTransitionAnimation,
+                navAnimation: moodleTransitionAnimation,
             },
         ),
         HttpClientModule, // HttpClient is used to make JSON requests. It fails for HEAD requests because there is no content.
diff --git a/src/core/classes/page-transition.ts b/src/core/classes/page-transition.ts
new file mode 100644
index 000000000..7443f6c55
--- /dev/null
+++ b/src/core/classes/page-transition.ts
@@ -0,0 +1,366 @@
+// (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 { createAnimation } from '@ionic/angular';
+import { Animation, NavOptions } from '@ionic/core';
+
+/**
+ * Adaptation from Ionic 5 iOs transition.
+ *
+ * https://github.com/ionic-team/ionic-framework/blob/5.8.x/core/src/utils/transition/ios.transition.ts
+ * Removed large title options, translucent header, buttons-collapse and header-collapse-condense-inactive.
+ * Changed large title check by collapsible header.
+ */
+
+const DURATION = 540;
+
+const getIonPageElement = (element: HTMLElement): HTMLElement | null => {
+    if (element.classList.contains('ion-page')) {
+        return element;
+    }
+
+    const ionPage: HTMLElement | null = element.querySelector(':scope > .ion-page, :scope > ion-nav, :scope > ion-tabs');
+    if (ionPage) {
+        return ionPage;
+    }
+
+    // idk, return the original element so at least something animates and we don't have a null pointer
+    return element;
+};
+
+export interface TransitionOptions extends NavOptions {
+    progressCallback?: ((ani: Animation | undefined) => void);
+    baseEl: HTMLElement;
+    enteringEl: HTMLElement;
+    leavingEl: HTMLElement | undefined;
+};
+
+export const shadow = <T extends Element>(el: T): ShadowRoot | T => el.shadowRoot || el;
+
+export const moodleTransitionAnimation = (navEl: HTMLElement, opts: TransitionOptions): Animation => {
+    const EASING = 'cubic-bezier(0.32,0.72,0,1)';
+    const OPACITY = 'opacity';
+    const TRANSFORM = 'transform';
+    const CENTER = '0%';
+    const OFF_OPACITY = 0.8;
+
+    const isRTL = navEl.ownerDocument.dir === 'rtl';
+    const OFF_RIGHT = isRTL ? '-99.5%' : '99.5%';
+    const OFF_LEFT = isRTL ? '33%' : '-33%';
+
+    const enteringEl = opts.enteringEl;
+    const leavingEl = opts.leavingEl;
+
+    const backDirection = (opts.direction === 'back');
+    const contentEl = enteringEl.querySelector(':scope > ion-content');
+    const headerEls = enteringEl.querySelectorAll(':scope > ion-header > *:not(ion-toolbar), :scope > ion-footer > *');
+    const enteringToolBarEls = enteringEl.querySelectorAll(':scope > ion-header > ion-toolbar');
+
+    const rootAnimation = createAnimation();
+    const enteringContentAnimation = createAnimation();
+
+    rootAnimation
+        .addElement(enteringEl)
+        .duration(opts.duration || DURATION)
+        .easing(opts.easing || EASING)
+        .fill('both')
+        .beforeRemoveClass('ion-page-invisible');
+
+    if (leavingEl && navEl) {
+        const navDecorAnimation = createAnimation();
+        navDecorAnimation.addElement(navEl);
+        rootAnimation.addAnimation(navDecorAnimation);
+    }
+
+    if (!contentEl && enteringToolBarEls.length === 0 && headerEls.length === 0) {
+        enteringContentAnimation.addElement(
+            enteringEl.querySelector(':scope > .ion-page, :scope > ion-nav, :scope > ion-tabs') || [],
+        );
+    } else {
+        enteringContentAnimation.addElement(contentEl || []);
+        enteringContentAnimation.addElement(headerEls);
+    }
+
+    rootAnimation.addAnimation(enteringContentAnimation);
+
+    if (backDirection) {
+        enteringContentAnimation
+            .beforeClearStyles([OPACITY])
+            .fromTo('transform', `translateX(${OFF_LEFT})`, `translateX(${CENTER})`)
+            .fromTo(OPACITY, OFF_OPACITY, 1);
+    } else {
+        // entering content, forward direction
+        enteringContentAnimation
+            .beforeClearStyles([OPACITY])
+            .fromTo('transform', `translateX(${OFF_RIGHT})`, `translateX(${CENTER})`);
+    }
+
+    if (contentEl) {
+        const enteringTransitionEffectEl: HTMLElement | null = shadow(contentEl).querySelector('.transition-effect');
+        if (enteringTransitionEffectEl) {
+            const enteringTransitionCoverEl: HTMLElement | null = enteringTransitionEffectEl.querySelector('.transition-cover');
+            const enteringTransitionShadowEl: HTMLElement | null = enteringTransitionEffectEl.querySelector('.transition-shadow');
+
+            if (!enteringTransitionCoverEl || !enteringTransitionShadowEl) {
+                return rootAnimation;
+            }
+
+            const enteringTransitionEffect = createAnimation();
+            const enteringTransitionCover = createAnimation();
+            const enteringTransitionShadow = createAnimation();
+
+            enteringTransitionEffect
+                .addElement(enteringTransitionEffectEl)
+                .beforeStyles({ opacity: '1', display: 'block' })
+                .afterStyles({ opacity: '', display: '' });
+
+            enteringTransitionCover
+                .addElement(enteringTransitionCoverEl)
+                .beforeClearStyles([OPACITY])
+                .fromTo(OPACITY, 0, 0.1);
+
+            enteringTransitionShadow
+                .addElement(enteringTransitionShadowEl)
+                .beforeClearStyles([OPACITY])
+                .fromTo(OPACITY, 0.03, 0.70);
+
+            enteringTransitionEffect.addAnimation([enteringTransitionCover, enteringTransitionShadow]);
+            enteringContentAnimation.addAnimation([enteringTransitionEffect]);
+        }
+    }
+
+    const enteringContentHasCollapsibleTitle = enteringEl.querySelector('ion-header[collapsible]');
+    enteringToolBarEls.forEach(enteringToolBarEl => {
+        const enteringToolBar = createAnimation();
+        enteringToolBar.addElement(enteringToolBarEl);
+        rootAnimation.addAnimation(enteringToolBar);
+
+        const enteringTitle = createAnimation();
+        enteringTitle.addElement(enteringToolBarEl.querySelector('ion-title') || []);
+
+        const enteringToolBarButtons = createAnimation();
+        const buttons: HTMLIonButtonsElement[] = Array.from(enteringToolBarEl.querySelectorAll('ion-buttons,[menuToggle]'));
+
+        enteringToolBarButtons.addElement(buttons);
+
+        const enteringToolBarItems = createAnimation();
+        enteringToolBarItems.addElement(
+            enteringToolBarEl.querySelectorAll(':scope > *:not(ion-title):not(ion-buttons):not([menuToggle])'),
+        );
+
+        const enteringToolBarBg = createAnimation();
+        enteringToolBarBg.addElement(shadow(enteringToolBarEl).querySelector('.toolbar-background') || []);
+
+        const enteringBackButton = createAnimation();
+        const backButtonEl = enteringToolBarEl.querySelector('ion-back-button');
+
+        if (backButtonEl) {
+            enteringBackButton.addElement(backButtonEl);
+        }
+
+        enteringToolBar.addAnimation(
+            [enteringTitle, enteringToolBarButtons, enteringToolBarItems, enteringToolBarBg, enteringBackButton],
+        );
+        enteringToolBarButtons.fromTo(OPACITY, 0.01, 1);
+        enteringToolBarItems.fromTo(OPACITY, 0.01, 1);
+
+        if (backDirection) {
+            enteringTitle
+                .fromTo('transform', `translateX(${OFF_LEFT})`, `translateX(${CENTER})`)
+                .fromTo(OPACITY, 0.01, 1);
+
+            enteringToolBarItems.fromTo('transform', `translateX(${OFF_LEFT})`, `translateX(${CENTER})`);
+
+            // back direction, entering page has a back button
+            enteringBackButton.fromTo(OPACITY, 0.01, 1);
+        } else {
+            // entering toolbar, forward direction
+            if (!enteringContentHasCollapsibleTitle) {
+                enteringTitle
+                    .fromTo('transform', `translateX(${OFF_RIGHT})`, `translateX(${CENTER})`)
+                    .fromTo(OPACITY, 0.01, 1);
+            }
+
+            enteringToolBarItems.fromTo('transform', `translateX(${OFF_RIGHT})`, `translateX(${CENTER})`);
+            enteringToolBarBg.beforeClearStyles([OPACITY, 'transform']);
+
+            enteringToolBarBg.fromTo(OPACITY, 0.01, 'var(--opacity)');
+
+            // forward direction, entering page has a back button
+            enteringBackButton.fromTo(OPACITY, 0.01, 1);
+
+            if (backButtonEl) {
+                const enteringBackBtnText = createAnimation();
+                enteringBackBtnText
+                    .addElement(shadow(backButtonEl).querySelector('.button-text') || [])
+                    .fromTo('transform', (isRTL ? 'translateX(-100px)' : 'translateX(100px)'), 'translateX(0px)');
+
+                enteringToolBar.addAnimation(enteringBackBtnText);
+            }
+        }
+    });
+
+    // setup leaving view
+    if (leavingEl) {
+        const leavingContent = createAnimation();
+        const leavingContentEl = leavingEl.querySelector(':scope > ion-content');
+        const leavingToolBarEls = leavingEl.querySelectorAll(':scope > ion-header > ion-toolbar');
+        const leavingHeaderEls = leavingEl.querySelectorAll(':scope > ion-header > *:not(ion-toolbar), :scope > ion-footer > *');
+
+        if (!leavingContentEl && leavingToolBarEls.length === 0 && leavingHeaderEls.length === 0) {
+            leavingContent.addElement(
+                leavingEl.querySelector(':scope > .ion-page, :scope > ion-nav, :scope > ion-tabs') || [],
+            );
+        } else {
+            leavingContent.addElement(leavingContentEl || []);
+            leavingContent.addElement(leavingHeaderEls);
+        }
+
+        rootAnimation.addAnimation(leavingContent);
+
+        if (backDirection) {
+            // leaving content, back direction
+            leavingContent
+                .beforeClearStyles([OPACITY])
+                .fromTo('transform', `translateX(${CENTER})`, (isRTL ? 'translateX(-100%)' : 'translateX(100%)'));
+
+            const leavingPage = getIonPageElement(leavingEl) as HTMLElement;
+            rootAnimation.afterAddWrite(() => {
+                if (rootAnimation.getDirection() === 'normal') {
+                    leavingPage.style.setProperty('display', 'none');
+                }
+            });
+
+        } else {
+            // leaving content, forward direction
+            leavingContent
+                .fromTo('transform', `translateX(${CENTER})`, `translateX(${OFF_LEFT})`)
+                .fromTo(OPACITY, 1, OFF_OPACITY);
+        }
+
+        if (leavingContentEl) {
+            const leavingTransitionEffectEl = shadow(leavingContentEl).querySelector('.transition-effect');
+
+            if (leavingTransitionEffectEl) {
+                const leavingTransitionCoverEl = leavingTransitionEffectEl.querySelector('.transition-cover');
+                const leavingTransitionShadowEl = leavingTransitionEffectEl.querySelector('.transition-shadow');
+
+                const leavingTransitionEffect = createAnimation();
+                const leavingTransitionCover = createAnimation();
+                const leavingTransitionShadow = createAnimation();
+
+                leavingTransitionEffect
+                    .addElement(leavingTransitionEffectEl)
+                    .beforeStyles({ opacity: '1', display: 'block' })
+                    .afterStyles({ opacity: '', display: '' });
+
+                leavingTransitionCover
+                    .addElement(leavingTransitionCoverEl || [])
+                    .beforeClearStyles([OPACITY])
+                    .fromTo(OPACITY, 0.1, 0);
+
+                leavingTransitionShadow
+                    .addElement(leavingTransitionShadowEl || [])
+                    .beforeClearStyles([OPACITY])
+                    .fromTo(OPACITY, 0.70, 0.03);
+
+                leavingTransitionEffect.addAnimation([leavingTransitionCover, leavingTransitionShadow]);
+                leavingContent.addAnimation([leavingTransitionEffect]);
+            }
+        }
+
+        leavingToolBarEls.forEach(leavingToolBarEl => {
+            const leavingToolBar = createAnimation();
+            leavingToolBar.addElement(leavingToolBarEl);
+
+            const leavingTitle = createAnimation();
+            leavingTitle.addElement(leavingToolBarEl.querySelector('ion-title') || []);
+
+            const leavingToolBarButtons = createAnimation();
+            const buttons: HTMLIonButtonsElement[] = Array.from(leavingToolBarEl.querySelectorAll('ion-buttons,[menuToggle]'));
+
+            leavingToolBarButtons.addElement(buttons);
+
+            const leavingToolBarItems = createAnimation();
+            const leavingToolBarItemEls =
+                leavingToolBarEl.querySelectorAll(':scope > *:not(ion-title):not(ion-buttons):not([menuToggle])');
+            if (leavingToolBarItemEls.length > 0) {
+                leavingToolBarItems.addElement(leavingToolBarItemEls);
+            }
+
+            const leavingToolBarBg = createAnimation();
+            leavingToolBarBg.addElement(shadow(leavingToolBarEl).querySelector('.toolbar-background') || []);
+
+            const leavingBackButton = createAnimation();
+            const backButtonEl = leavingToolBarEl.querySelector('ion-back-button');
+            if (backButtonEl) {
+                leavingBackButton.addElement(backButtonEl);
+            }
+
+            leavingToolBar.addAnimation(
+                [leavingTitle, leavingToolBarButtons, leavingToolBarItems, leavingBackButton, leavingToolBarBg],
+            );
+            rootAnimation.addAnimation(leavingToolBar);
+
+            // fade out leaving toolbar items
+            leavingBackButton.fromTo(OPACITY, 0.99, 0);
+
+            leavingToolBarButtons.fromTo(OPACITY, 0.99, 0);
+            leavingToolBarItems.fromTo(OPACITY, 0.99, 0);
+
+            if (backDirection) {
+                // leaving toolbar, back direction
+                leavingTitle
+                    .fromTo('transform', `translateX(${CENTER})`, (isRTL ? 'translateX(-100%)' : 'translateX(100%)'))
+                    .fromTo(OPACITY, 0.99, 0);
+
+                leavingToolBarItems.fromTo(
+                    'transform',
+                    `translateX(${CENTER})`,
+                    (isRTL ? 'translateX(-100%)' : 'translateX(100%)'),
+                );
+                leavingToolBarBg.beforeClearStyles([OPACITY, 'transform']);
+                // leaving toolbar, back direction, and there's no entering toolbar
+                // should just slide out, no fading out
+                leavingToolBarBg.fromTo(OPACITY, 'var(--opacity)', 0);
+
+                if (backButtonEl) {
+                    const leavingBackBtnText = createAnimation();
+                    leavingBackBtnText
+                        .addElement(shadow(backButtonEl).querySelector('.button-text') || [])
+                        .fromTo('transform', `translateX(${CENTER})`, `translateX(${(isRTL ? -124 : 124) + 'px'})`);
+                    leavingToolBar.addAnimation(leavingBackBtnText);
+                }
+
+            } else {
+                // leaving toolbar, forward direction
+                leavingTitle
+                    .fromTo('transform', `translateX(${CENTER})`, `translateX(${OFF_LEFT})`)
+                    .fromTo(OPACITY, 0.99, 0)
+                    .afterClearStyles([TRANSFORM, OPACITY]);
+
+                leavingToolBarItems
+                    .fromTo('transform', `translateX(${CENTER})`, `translateX(${OFF_LEFT})`)
+                    .afterClearStyles([TRANSFORM, OPACITY]);
+
+                leavingBackButton.afterClearStyles([OPACITY]);
+                leavingTitle.afterClearStyles([OPACITY]);
+                leavingToolBarButtons.afterClearStyles([OPACITY]);
+            }
+        });
+    }
+
+    return rootAnimation;
+
+};