From e7268582161cac45d118f11dadbcde056c5f712d Mon Sep 17 00:00:00 2001
From: Noel De Martin <noel@moodle.com>
Date: Mon, 1 Mar 2021 14:47:47 +0100
Subject: [PATCH] MOBILE-3643 forum: Format templates

---
 .../forum/components/edit-post/edit-post.html | 22 ++++--
 .../mod/forum/components/index/index.html     | 74 ++++++++++++++-----
 .../mod/forum/components/index/index.scss     |  2 +-
 .../mod/forum/components/post/post.html       | 23 ++++--
 .../mod/forum/components/post/post.scss       |  2 +-
 src/addons/mod/forum/components/post/post.ts  |  6 ++
 .../sort-order-selector.html                  |  2 +-
 .../forum/pages/discussion/discussion.html    | 55 +++++++++++---
 .../pages/new-discussion/new-discussion.html  | 11 ++-
 .../index/addon-mod-lesson-index.html         |  2 +-
 .../mod/lesson/pages/player/player.html       |  2 +-
 .../match/component/addon-qtype-match.html    |  2 +-
 .../components/format/core-course-format.html |  2 +-
 .../login/pages/credentials/credentials.html  |  2 +-
 .../pages/email-signup/email-signup.html      |  4 +-
 .../forgotten-password.html                   |  2 +-
 16 files changed, 158 insertions(+), 55 deletions(-)

diff --git a/src/addons/mod/forum/components/edit-post/edit-post.html b/src/addons/mod/forum/components/edit-post/edit-post.html
index ab09104f8..73f363b9a 100644
--- a/src/addons/mod/forum/components/edit-post/edit-post.html
+++ b/src/addons/mod/forum/components/edit-post/edit-post.html
@@ -12,14 +12,21 @@
     </ion-toolbar>
 </ion-header>
 <ion-content>
-    <form ion-list #editFormEl>
+    <form #editFormEl>
         <ion-item>
             <ion-label position="stacked">{{ 'addon.mod_forum.subject' | translate }}</ion-label>
-            <ion-input type="text" [placeholder]="'addon.mod_forum.subject' | translate" [(ngModel)]="replyData.subject" name="subject"></ion-input>
+            <ion-input type="text" [placeholder]="'addon.mod_forum.subject' | translate" [(ngModel)]="replyData.subject" name="subject">
+            </ion-input>
         </ion-item>
         <ion-item>
             <ion-label position="stacked">{{ 'addon.mod_forum.message' | translate }}</ion-label>
-            <core-rich-text-editor item-content [control]="messageControl" (contentChanged)="onMessageChange($event)" [placeholder]="'addon.mod_forum.replyplaceholder' | translate" [name]="'mod_forum_reply_' + replyData.id" [component]="component" [componentId]="componentId" [autoSave]="true" contextLevel="module" [contextInstanceId]="forum.cmid" elementId="message" [draftExtraParams]="{edit: replyData.id}"></core-rich-text-editor>
+            <core-rich-text-editor item-content elementId="message"
+                [name]="'mod_forum_reply_' + replyData.id" [control]="messageControl"
+                [placeholder]="'addon.mod_forum.replyplaceholder' | translate" [autoSave]="true"
+                [component]="component" [componentId]="componentId" [draftExtraParams]="{edit: replyData.id}"
+                contextLevel="module" [contextInstanceId]="forum.cmid"
+                (contentChanged)="onMessageChange($event)">
+            </core-rich-text-editor>
         </ion-item>
         <ion-item-divider class="ion-text-wrap core-expandable" (click)="toggleAdvanced()">
             <ion-icon *ngIf="!advanced" name="fa-caret-right" slot="start"></ion-icon>
@@ -27,12 +34,17 @@
             <ion-label>{{ 'addon.mod_forum.advanced' | translate }}</ion-label>
         </ion-item-divider>
         <ng-container *ngIf="advanced">
-            <core-attachments *ngIf="forum.id && forum.maxattachments > 0" [files]="replyData.files" [maxSize]="forum.maxbytes" [maxSubmissions]="forum.maxattachments" [component]="component" [componentId]="forum.cmid" [allowOffline]="true"></core-attachments>
+            <core-attachments *ngIf="forum.id && forum.maxattachments > 0"
+                [maxSize]="forum.maxbytes" [maxSubmissions]="forum.maxattachments" [allowOffline]="true" [files]="replyData.files"
+                [component]="component" [componentId]="forum.cmid">
+            </core-attachments>
         </ng-container>
         <ion-grid>
             <ion-row>
                 <ion-col>
-                    <ion-button expand="block" (click)="reply($event)" [disabled]="replyData.subject == '' || replyData.message == null">{{ 'core.savechanges' | translate }}</ion-button>
+                    <ion-button expand="block" (click)="reply($event)" [disabled]="replyData.subject == '' || replyData.message == null">
+                        {{ 'core.savechanges' | translate }}
+                    </ion-button>
                 </ion-col>
                 <ion-col>
                     <ion-button expand="block" color="light" (click)="closeModal()">{{ 'core.cancel' | translate }}</ion-button>
diff --git a/src/addons/mod/forum/components/index/index.html b/src/addons/mod/forum/components/index/index.html
index cb0eaa788..cf63909d5 100644
--- a/src/addons/mod/forum/components/index/index.html
+++ b/src/addons/mod/forum/components/index/index.html
@@ -1,14 +1,37 @@
 <!-- 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="open"></core-context-menu-item>
-        <core-context-menu-item *ngIf="description" [priority]="800" [content]="'core.moduleintro' | translate" (action)="expandDescription()" [iconAction]="'arrow-forward'"></core-context-menu-item>
-        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}" [iconAction]="'fa-newspaper-o'" (action)="gotoBlog()"></core-context-menu-item>
-        <core-context-menu-item *ngIf="discussions.loaded && !(hasOffline || hasOfflineRatings) && isOnline" [priority]="700" [content]="'addon.mod_forum.refreshdiscussions' | translate" (action)="doRefresh(null, $event)" [iconAction]="refreshIcon" [closeOnClick]="false"></core-context-menu-item>
-        <core-context-menu-item *ngIf="discussions.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 *ngIf="prefetchStatusIcon" [priority]="500" [content]="prefetchText" (action)="prefetch($event)" [iconAction]="prefetchStatusIcon" [closeOnClick]="false"></core-context-menu-item>
-        <core-context-menu-item *ngIf="size" [priority]="400" [content]="'core.clearstoreddata' | translate:{$a: size}" iconDescription="cube" (action)="removeFiles($event)" iconAction="trash" [closeOnClick]="false"></core-context-menu-item>
-        <core-context-menu-item *ngIf="sortingAvailable" [priority]="300" [content]="'core.sort' | translate" (action)="showSortOrderSelector()" iconAction="fa-sort"></core-context-menu-item>
+        <core-context-menu-item *ngIf="externalUrl"
+            [priority]="900" [content]="'core.openinbrowser' | translate" [href]="externalUrl" iconAction="open">
+        </core-context-menu-item>
+        <core-context-menu-item *ngIf="description"
+            [priority]="800" [content]="'core.moduleintro' | translate" (action)="expandDescription()" [iconAction]="'arrow-forward'">
+        </core-context-menu-item>
+        <core-context-menu-item *ngIf="blog"
+            [priority]="750" content="{{'addon.blog.blog' | translate}}" [iconAction]="'fa-newspaper-o'" (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"
+            (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"
+            (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>
+        <core-context-menu-item *ngIf="size"
+            iconDescription="cube" iconAction="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="fa-sort"
+            [priority]="300" [content]="'core.sort' | translate"
+            (action)="showSortOrderSelector()">
+        </core-context-menu-item>
     </core-context-menu>
 </core-navbar-buttons>
 
@@ -64,7 +87,10 @@
                         <h2 class="ion-text-wrap">
                             <ion-icon name="fa-map-pin" *ngIf="discussion.pinned"></ion-icon>
                             <ion-icon name="fa-star" class="addon-forum-star" *ngIf="!discussion.pinned && discussion.starred"></ion-icon>
-                            <core-format-text [text]="discussion.subject" contextLevel="module" [contextInstanceId]="module && module.id" [courseId]="courseId"></core-format-text>
+                            <core-format-text
+                                [text]="discussion.subject"
+                                contextLevel="module" [contextInstanceId]="module && module.id" [courseId]="courseId">
+                            </core-format-text>
                         </h2>
                         <ion-button *ngIf="canPin || discussion.canlock || discussion.canfavourite"
                             fill="clear" color="dark"
@@ -75,25 +101,37 @@
                         </ion-button>
                     </div>
                     <div class="addon-mod-forum-discussion-info">
-                        <core-user-avatar *ngIf="discussion.userfullname" [user]="discussion" slot="start" [courseId]="courseId"></core-user-avatar>
+                        <core-user-avatar *ngIf="discussion.userfullname" [user]="discussion" slot="start" [courseId]="courseId">
+                        </core-user-avatar>
                         <div class="addon-mod-forum-discussion-author">
                             <h3 *ngIf="discussion.userfullname">{{discussion.userfullname}}</h3>
                             <p *ngIf="discussion.groupname"><ion-icon name="people"></ion-icon> {{ discussion.groupname }}</p>
-                            <p *ngIf="discussions.isOnlineDiscussion(discussion)">{{discussion.created * 1000 | coreFormatDate: "strftimerecentfull"}}</p>
-                            <p *ngIf="discussions.isOfflineDiscussion(discussion)"><ion-icon name="time"></ion-icon> {{ 'core.notsent' | translate }}</p>
+                            <p *ngIf="discussions.isOnlineDiscussion(discussion)">
+                                {{discussion.created * 1000 | coreFormatDate: "strftimerecentfull"}}
+                            </p>
+                            <p *ngIf="discussions.isOfflineDiscussion(discussion)">
+                                <ion-icon name="time"></ion-icon>
+                                {{ 'core.notsent' | translate }}
+                            </p>
                         </div>
                     </div>
-                    <ion-row *ngIf="discussions.isOnlineDiscussion(discussion)" class="ion-text-center addon-mod-forum-discussion-more-info">
+                    <ion-row *ngIf="discussions.isOnlineDiscussion(discussion)"
+                        class="ion-text-center addon-mod-forum-discussion-more-info">
                         <ion-col class="ion-text-start">
                             <ion-note>
                                 <ion-icon name="time"></ion-icon> {{ 'addon.mod_forum.lastpost' | translate }}
-                                <ng-container *ngIf="discussion.timemodified > discussion.created">{{discussion.timemodified | coreTimeAgo}}</ng-container>
-                                <ng-container *ngIf="discussion.timemodified <= discussion.created">{{discussion.created | coreTimeAgo}}</ng-container>
+                                <ng-container *ngIf="discussion.timemodified > discussion.created">
+                                    {{ discussion.timemodified | coreTimeAgo }}
+                                </ng-container>
+                                <ng-container *ngIf="discussion.timemodified <= discussion.created">
+                                    {{ discussion.created | coreTimeAgo }}
+                                </ng-container>
                             </ion-note>
                         </ion-col>
                         <ion-col class="ion-text-end">
                             <ion-note>
-                                <ion-icon name="fas-comments"></ion-icon> {{ 'addon.mod_forum.numreplies' | translate:{numreplies: discussion.numreplies} }}
+                                <ion-icon name="fas-comments"></ion-icon>
+                                {{ 'addon.mod_forum.numreplies' | translate:{numreplies: discussion.numreplies} }}
                                 <ion-badge *ngIf="discussion.numunread" class="ion-text-center"
                                     [attr.aria-label]="'addon.mod_forum.unreadpostsnumber' | translate:{ '$a' : discussion.numunread}">
                                     {{ discussion.numunread }}
@@ -104,7 +142,9 @@
                 </ion-label>
             </ion-item>
 
-            <core-infinite-loading [enabled]="discussions.onlineLoaded && !discussions.completed" (action)="fetchMoreDiscussions($event)" [error]="fetchMoreDiscussionsFailed">
+            <core-infinite-loading
+                [enabled]="discussions.onlineLoaded && !discussions.completed" [error]="fetchMoreDiscussionsFailed"
+                (action)="fetchMoreDiscussions($event)">
             </core-infinite-loading>
         </ng-container>
     </core-loading>
diff --git a/src/addons/mod/forum/components/index/index.scss b/src/addons/mod/forum/components/index/index.scss
index 1a1c03ae2..51951a796 100644
--- a/src/addons/mod/forum/components/index/index.scss
+++ b/src/addons/mod/forum/components/index/index.scss
@@ -1,4 +1,4 @@
-@import '../../../../../theme/globals.scss';
+@import "~theme/globals";
 
 :host {
 
diff --git a/src/addons/mod/forum/components/post/post.html b/src/addons/mod/forum/components/post/post.html
index 4848208cd..6f48c3db6 100644
--- a/src/addons/mod/forum/components/post/post.html
+++ b/src/addons/mod/forum/components/post/post.html
@@ -9,7 +9,9 @@
                         <ion-icon name="fa-star" class="addon-forum-star"
                             *ngIf="discussion && !post.parentid && !discussion.pinned && discussion.starred">
                         </ion-icon>
-                        <core-format-text [text]="post.subject" contextLevel="module" [contextInstanceId]="forum && forum.cmid" [courseId]="courseId">
+                        <core-format-text
+                            [text]="post.subject"
+                            contextLevel="module" [contextInstanceId]="forum && forum.cmid" [courseId]="courseId">
                         </core-format-text>
                     </h2>
                     <ion-note *ngIf="trackPosts && post.unread"
@@ -18,7 +20,8 @@
                         </ion-icon>
                     </ion-note>
                     <ion-button *ngIf="optionsMenuEnabled"
-                        fill="clear" color="dark" (click)="showOptionsMenu($event)" [attr.aria-label]="('core.displayoptions' | translate)">
+                        fill="clear" color="dark" [attr.aria-label]="('core.displayoptions' | translate)"
+                        (click)="showOptionsMenu($event)">
                         <ion-icon name="ellipsis-vertical" slot="icon-only">
                         </ion-icon>
                     </ion-button>
@@ -43,7 +46,8 @@
                             </ion-icon>
                         </ion-note>
                         <ion-button *ngIf="optionsMenuEnabled"
-                            fill="clear" color="dark" (click)="showOptionsMenu($event)" [attr.aria-label]="('core.displayoptions' | translate)">
+                            fill="clear" color="dark" [attr.aria-label]="('core.displayoptions' | translate)"
+                            (click)="showOptionsMenu($event)">
                             <ion-icon name="ellipsis-vertical" slot="icon-only">
                             </ion-icon>
                         </ion-button>
@@ -85,8 +89,10 @@
         <ion-item *ngIf="post.id > 0 && post.capabilities.reply && !post.isprivatereply"
             class="ion-no-padding ion-text-end addon-forum-reply-button">
             <ion-label>
-                <ion-button fill="clear" size="small" (click)="showReplyForm()"
-                    [attr.aria-controls]="'addon-forum-reply-edit-form-' + uniqueId" [attr.aria-expanded]="replyData.replyingTo === post.id">
+                <ion-button fill="clear" size="small"
+                    [attr.aria-controls]="'addon-forum-reply-edit-form-' + uniqueId"
+                    [attr.aria-expanded]="replyData.replyingTo === post.id"
+                    (click)="showReplyForm()">
                     <ion-icon name="fa-reply" slot="start">
                     </ion-icon> {{ 'addon.mod_forum.reply' | translate }}
                 </ion-button>
@@ -94,11 +100,12 @@
         </ion-item>
     </div>
 
-    <form *ngIf="(post.id > 0 && !replyData.isEditing && replyData.replyingTo == post.id) || (post.id <=0 && replyData.isEditing && replyData.replyingTo == post.parentid)"
-        ion-list [id]="'addon-forum-reply-edit-form-' + uniqueId" #replyFormEl>
+    <form *ngIf="showForm"
+        [id]="'addon-forum-reply-edit-form-' + uniqueId" #replyFormEl>
         <ion-item>
             <ion-label position="stacked">{{ 'addon.mod_forum.subject' | translate }}</ion-label>
-            <ion-input type="text" [placeholder]="'addon.mod_forum.subject' | translate" [(ngModel)]="replyData.subject" name="subject"></ion-input>
+            <ion-input type="text" [placeholder]="'addon.mod_forum.subject' | translate" [(ngModel)]="replyData.subject" name="subject">
+            </ion-input>
         </ion-item>
         <ion-item>
             <ion-label position="stacked">{{ 'addon.mod_forum.message' | translate }}</ion-label>
diff --git a/src/addons/mod/forum/components/post/post.scss b/src/addons/mod/forum/components/post/post.scss
index 3d4be6ec6..b9d4db52a 100644
--- a/src/addons/mod/forum/components/post/post.scss
+++ b/src/addons/mod/forum/components/post/post.scss
@@ -1,4 +1,4 @@
-@import "../../../../../theme/globals.scss";
+@import "~theme/globals";
 
 :host .addon-mod_forum-post {
     background-color: var(--white);
diff --git a/src/addons/mod/forum/components/post/post.ts b/src/addons/mod/forum/components/post/post.ts
index 0eaf6f52d..f41115ace 100644
--- a/src/addons/mod/forum/components/post/post.ts
+++ b/src/addons/mod/forum/components/post/post.ts
@@ -98,6 +98,12 @@ export class AddonModForumPostComponent implements OnInit, OnDestroy, OnChanges
         @Optional() protected content?: IonContent,
     ) {}
 
+    get showForm(): boolean {
+        return this.post.id > 0
+            ? !this.replyData.isEditing && this.replyData.replyingTo === this.post.id
+            : this.replyData.isEditing && this.replyData.replyingTo === this.post.parentid;
+    }
+
     /**
      * Component being initialized.
      */
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 6911e0bdc..5ac48825b 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
@@ -15,7 +15,7 @@
     <ion-list id="addon-mod-forum-sort-selector" role="menu" aria-labelledby="addon-mod-forum-sort-order-button">
         <ng-container *ngFor="let sortOrder of sortOrders">
             <ion-item class="ion-text-wrap" detail="false" role="menuitem"
-                [class.core-primary-selected-item]="selected == sortOrder.value" [attr.aria-label]="sortOrder.label | translate"
+                [class.core-selected-item]="selected == sortOrder.value" [attr.aria-label]="sortOrder.label | translate"
                 (click)="selectSortOrder(sortOrder)">
                 <ion-label>
                     <h2>{{ sortOrder.label | translate }}</h2>
diff --git a/src/addons/mod/forum/pages/discussion/discussion.html b/src/addons/mod/forum/pages/discussion/discussion.html
index 976b0e0a6..e3e987118 100644
--- a/src/addons/mod/forum/pages/discussion/discussion.html
+++ b/src/addons/mod/forum/pages/discussion/discussion.html
@@ -14,17 +14,50 @@
 </ion-header>
 <core-navbar-buttons slot="end">
     <core-context-menu>
-        <core-context-menu-item [priority]="650" *ngIf="discussionLoaded && !postHasOffline && isOnline" [content]="'addon.mod_forum.refreshposts' | translate" (action)="doRefresh(null, $event)" [iconAction]="refreshIcon" [closeOnClick]="false"></core-context-menu-item>
-        <core-context-menu-item [priority]="550" *ngIf="discussionLoaded && isMobile && postHasOffline && isOnline" [content]="'core.settings.synchronizenow' | translate" (action)="doRefresh(null, $event, true)" [iconAction]="syncIcon" [closeOnClick]="false"></core-context-menu-item>
-        <core-context-menu-item [hidden]="sort == 'flat-oldest'" [priority]="500" [content]="'addon.mod_forum.modeflatoldestfirst' | translate" (action)="changeSort('flat-oldest')" iconAction="arrow-round-down"></core-context-menu-item>
-        <core-context-menu-item [hidden]="sort == 'flat-newest'" [priority]="450" [content]="'addon.mod_forum.modeflatnewestfirst' | translate" (action)="changeSort('flat-newest')" iconAction="arrow-round-up"></core-context-menu-item>
-        <core-context-menu-item [hidden]="sort == 'nested'" [priority]="400" [content]="'addon.mod_forum.modenested' | translate" (action)="changeSort('nested')" iconAction="swap"></core-context-menu-item>
-        <core-context-menu-item [hidden]="!discussion || !discussion.canlock || discussion.locked" [priority]="300" [content]="'addon.mod_forum.lockdiscussion' | translate" (action)="setLockState(true)" iconAction="fa-lock"></core-context-menu-item>
-        <core-context-menu-item [hidden]="!discussion || !discussion.canlock || !discussion.locked" [priority]="300" [content]="'addon.mod_forum.unlockdiscussion' | translate" (action)="setLockState(false)" iconAction="fa-unlock"></core-context-menu-item>
-        <core-context-menu-item [hidden]="!discussion || !canPin || discussion.pinned" [priority]="250" [content]="'addon.mod_forum.pindiscussion' | translate" (action)="setPinState(true)" iconAction="fa-map-pin"></core-context-menu-item>
-        <core-context-menu-item [hidden]="!discussion || !canPin || !discussion.pinned" [priority]="250" [content]="'addon.mod_forum.unpindiscussion' | translate" (action)="setPinState(false)" iconAction="fa-map-pin" [iconSlash]="true"></core-context-menu-item>
-        <core-context-menu-item [hidden]="!discussion || !discussion.canfavourite || discussion.starred" [priority]="200" [content]="'addon.mod_forum.addtofavourites' | translate" (action)="toggleFavouriteState(true)" iconAction="fa-star"></core-context-menu-item>
-        <core-context-menu-item [hidden]="!discussion || !discussion.canfavourite || !discussion.starred" [priority]="200" [content]="'addon.mod_forum.removefromfavourites' | translate" (action)="toggleFavouriteState(false)" iconAction="fa-star" [iconSlash]="true"></core-context-menu-item>
+        <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"
+            (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="arrow-round-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="arrow-round-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="swap"
+            (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="fa-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="fa-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="fa-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="fa-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="fa-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="fa-star" [iconSlash]="true"
+            (action)="toggleFavouriteState(false)">
+        </core-context-menu-item>
     </core-context-menu>
 </core-navbar-buttons>
 <ion-content>
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 d5e298a1d..def9148e6 100644
--- a/src/addons/mod/forum/pages/new-discussion/new-discussion.html
+++ b/src/addons/mod/forum/pages/new-discussion/new-discussion.html
@@ -15,10 +15,13 @@
     </ion-refresher>
 
     <core-loading [hideUntil]="groupsLoaded">
-        <form ion-list *ngIf="showForm" #newDiscFormEl>
+        <form *ngIf="showForm" #newDiscFormEl>
             <ion-item>
                 <ion-label position="stacked">{{ 'addon.mod_forum.subject' | translate }}</ion-label>
-                <ion-input type="text" [placeholder]="'addon.mod_forum.subject' | translate" [(ngModel)]="newDiscussion.subject" name="subject"></ion-input>
+                <ion-input
+                    [(ngModel)]="newDiscussion.subject"
+                    type="text" [placeholder]="'addon.mod_forum.subject' | translate" name="subject">
+                </ion-input>
             </ion-item>
             <ion-item>
                 <ion-label position="stacked">{{ 'addon.mod_forum.message' | translate }}</ion-label>
@@ -64,7 +67,9 @@
                 <ion-label>
                     <ion-row>
                         <ion-col>
-                            <ion-button expand="block" (click)="add()" [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>
                         </ion-col>
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 ab10934b6..35033669b 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
@@ -53,7 +53,7 @@
 
                 <!-- Input password for protected lessons. -->
                 <ion-card *ngIf="askPassword">
-                    <form ion-list (ngSubmit)="submitPassword($event, passwordinput)" #passwordForm>
+                    <form (ngSubmit)="submitPassword($event, passwordinput)" #passwordForm>
                         <ion-item class="ion-text-wrap">
                             <ion-label position="stacked">{{ 'addon.mod_lesson.enterpassword' | translate }}</ion-label>
                             <core-show-password name="password">
diff --git a/src/addons/mod/lesson/pages/player/player.html b/src/addons/mod/lesson/pages/player/player.html
index e534fbc27..bf33c0984 100644
--- a/src/addons/mod/lesson/pages/player/player.html
+++ b/src/addons/mod/lesson/pages/player/player.html
@@ -53,7 +53,7 @@
 
                 <!-- 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" ion-list [formGroup]="questionForm" #questionFormEl
+                <form *ngIf="question && loaded" [formGroup]="questionForm" #questionFormEl
                     (ngSubmit)="submitQuestion($event)">
 
                     <ion-item-divider class="ion-text-wrap" *ngIf="pageContent">
diff --git a/src/addons/qtype/match/component/addon-qtype-match.html b/src/addons/qtype/match/component/addon-qtype-match.html
index f388fff84..495d0ea09 100644
--- a/src/addons/qtype/match/component/addon-qtype-match.html
+++ b/src/addons/qtype/match/component/addon-qtype-match.html
@@ -1,4 +1,4 @@
-<section ion-list class="addon-qtype-match-container" *ngIf="matchQuestion && matchQuestion.loaded">
+<section class="addon-qtype-match-container" *ngIf="matchQuestion && matchQuestion.loaded">
     <ion-item class="ion-text-wrap">
         <ion-label>
             <core-format-text [component]="component" [componentId]="componentId" [text]="matchQuestion.text"
diff --git a/src/core/features/course/components/format/core-course-format.html b/src/core/features/course/components/format/core-course-format.html
index bb9043094..143673386 100644
--- a/src/core/features/course/components/format/core-course-format.html
+++ b/src/core/features/course/components/format/core-course-format.html
@@ -115,7 +115,7 @@
 
 <!-- Template to render a section. -->
 <ng-template #sectionTemplate let-section="section">
-    <section ion-list *ngIf="!section.hiddenbynumsections && section.id != allSectionsId && section.id != stealthModulesSectionId">
+    <section *ngIf="!section.hiddenbynumsections && section.id != allSectionsId && section.id != stealthModulesSectionId">
         <!-- Title is only displayed when viewing all sections. -->
         <ion-item-divider *ngIf="selectedSection?.id == allSectionsId && section.name" class="ion-text-wrap" color="light"
             [class.core-section-download]="downloadEnabled"
diff --git a/src/core/features/login/pages/credentials/credentials.html b/src/core/features/login/pages/credentials/credentials.html
index 428ab492e..3b393f0b0 100644
--- a/src/core/features/login/pages/credentials/credentials.html
+++ b/src/core/features/login/pages/credentials/credentials.html
@@ -29,7 +29,7 @@
             <p class="core-siteurl">{{siteUrl}}</p>
         </div>
 
-        <form ion-list [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form" #credentialsForm>
+        <form [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form" #credentialsForm>
             <ion-item *ngIf="siteChecked && !isBrowserSSO">
                 <ion-label>
                     <ion-input type="text" name="username" placeholder="{{ 'core.login.username' | 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 54dab33ce..a39d39675 100644
--- a/src/core/features/login/pages/email-signup/email-signup.html
+++ b/src/core/features/login/pages/email-signup/email-signup.html
@@ -35,7 +35,7 @@
         </ion-list>
 
         <!-- Age verification. -->
-        <form ion-list *ngIf="allRequiredSupported && settingsLoaded && settings && ageDigitalConsentVerification"
+        <form *ngIf="allRequiredSupported && settingsLoaded && settings && ageDigitalConsentVerification"
             [formGroup]="ageVerificationForm" (ngSubmit)="verifyAge($event)" #ageForm>
 
             <ion-item-divider class="ion-text-wrap">
@@ -74,7 +74,7 @@
         </form>
 
         <!-- Signup form. -->
-        <form ion-list *ngIf="allRequiredSupported && settingsLoaded && settings && !ageDigitalConsentVerification"
+        <form *ngIf="allRequiredSupported && settingsLoaded && settings && !ageDigitalConsentVerification"
             [formGroup]="signupForm" (ngSubmit)="create($event)"  #signupFormEl>
 
             <ion-item class="ion-text-wrap ion-text-center">
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 2736767f6..ed7c39de0 100644
--- a/src/core/features/login/pages/forgotten-password/forgotten-password.html
+++ b/src/core/features/login/pages/forgotten-password/forgotten-password.html
@@ -14,7 +14,7 @@
         </ion-item>
     </ion-list>
     <ion-card>
-        <form ion-list [formGroup]="myForm" (ngSubmit)="resetPassword($event)" #resetPasswordForm>
+        <form [formGroup]="myForm" (ngSubmit)="resetPassword($event)" #resetPasswordForm>
             <ion-item-divider class="ion-text-wrap">
                 <ion-label>{{ 'core.login.searchby' | translate }}</ion-label>
             </ion-item-divider>