From 8d540e6010ec7b01646f0b4a6268f366fc16dc87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 25 Feb 2022 09:25:35 +0100
Subject: [PATCH 01/10] MOBILE-3149 choice: Collapse list of users in results

---
 .../index/addon-mod-choice-index.html         | 22 ++++++++++++-------
 .../mod/choice/components/index/index.ts      | 10 +++++++++
 2 files changed, 24 insertions(+), 8 deletions(-)

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 6ef6a30cc..f5620647c 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
@@ -96,7 +96,11 @@
                 </ion-col>
                 <ion-col *ngIf="choice.publish && results" size="12" size-lg="7">
                     <ion-item-group *ngFor="let result of results">
-                        <ion-item-divider class="ion-text-wrap">
+                        <ion-item [button]="result.numberofuser > 0" class="divider ion-text-wrap" (click)="toggle(result)"
+                            [attr.aria-label]="(result.expanded ? 'core.collapse' : 'core.expand') | translate" detail="false">
+                            <ion-icon [name]="result.numberofuser > 0 ? 'fas-chevron-right' : ''" flip-rtl slot="start" aria-hidden="true"
+                                class="expandable-status-icon" [class.expandable-status-icon-expanded]="result.expanded">
+                            </ion-icon>
                             <ion-label>
                                 <h3 class="item-heading">
                                     <core-format-text [text]="result.text" contextLevel="module" [contextInstanceId]="module.id"
@@ -111,14 +115,16 @@
                                     {{ 'addon.mod_choice.limita' | translate:{$a: result.maxanswer} }}
                                 </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">
-                            <core-user-avatar [user]="user" slot="start" [courseId]="courseId"></core-user-avatar>
-                            <ion-label>
-                                <p>{{user.fullname}}</p>
-                            </ion-label>
                         </ion-item>
+                        <ng-container *ngIf="result.expanded">
+                            <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-item>
+                        </ng-container>
                     </ion-item-group>
                 </ion-col>
             </ion-row>
diff --git a/src/addons/mod/choice/components/index/index.ts b/src/addons/mod/choice/components/index/index.ts
index 2597bde19..a43fc8c58 100644
--- a/src/addons/mod/choice/components/index/index.ts
+++ b/src/addons/mod/choice/components/index/index.ts
@@ -446,6 +446,15 @@ export class AddonModChoiceIndexComponent extends CoreCourseModuleMainActivityCo
         }
     }
 
+    /**
+     * Toggle list of users in a result visible.
+     *
+     * @param result Result to expand.
+     */
+    toggle(result: AddonModChoiceResultFormatted): void {
+        result.expanded = !result.expanded;
+    }
+
     /**
      * Performs the sync of the activity.
      *
@@ -472,4 +481,5 @@ export class AddonModChoiceIndexComponent extends CoreCourseModuleMainActivityCo
  */
 export type AddonModChoiceResultFormatted = AddonModChoiceResult & {
     percentageamountfixed: string; // Percentage of users answers with fixed decimals.
+    expanded?: boolean;
 };

From 9f7a0e303eef113dd88d24bcc62460a5a8465593 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 25 Feb 2022 10:06:35 +0100
Subject: [PATCH 02/10] MOBILE-3149 quiz: Change quiz index page warning cards

---
 .../index/addon-mod-quiz-index.html           | 61 +++++++++++--------
 1 file changed, 35 insertions(+), 26 deletions(-)

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 5b80f4744..53daf6b16 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
@@ -10,7 +10,7 @@
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
-        [courseId]="courseId" [hasDataToSync]="buttonText && hasOffline && !showStatusSpinner">
+        [courseId]="courseId" [hasDataToSync]="buttonText && hasOffline">
     </core-course-module-info>
 
     <!-- Access rules description messages. -->
@@ -134,22 +134,26 @@
         </ion-list>
     </ion-card>
 
-    <!-- More data and button to start/continue. -->
-    <ion-card *ngIf="quiz">
-        <ion-list>
-            <!-- Error messages. -->
-            <ion-item class="ion-text-wrap core-danger-item addon-mod_quiz-prevent-messages" *ngFor="let message of preventMessages">
+    <!-- More data. -->
+    <ng-container *ngIf="quiz">
+        <!-- Error messages. -->
+        <ion-card class="core-danger-card addon-mod_quiz-prevent-messages">
+            <ion-item class="ion-text-wrap" *ngFor="let message of preventMessages">
                 <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-card>
+        <ion-card class="core-danger-card addon-mod_quiz-no-questions" *ngIf="quiz.hasquestions === 0">
+            <ion-item class="ion-text-wrap">
                 <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">
+        </ion-card>
+        <ion-card class="core-danger-card addon-mod_quiz-unsupported-questions"
+            *ngIf="!hasSupportedQuestions && unsupportedQuestions.length">
+            <ion-item class="ion-text-wrap">
                 <ion-label>
                     <p class="item-heading">{{ 'addon.mod_quiz.errorquestionsnotsupported' | translate }}</p>
                     <p *ngFor="let type of unsupportedQuestions"
@@ -158,7 +162,9 @@
                     </p>
                 </ion-label>
             </ion-item>
-            <ion-item class="ion-text-wrap core-danger-item addon-mod_quiz-unsupported-rules" *ngIf="unsupportedRules.length">
+        </ion-card>
+        <ion-card class="core-danger-card addon-mod_quiz-unsupported-rules" *ngIf="unsupportedRules.length">
+            <ion-item class="ion-text-wrap">
                 <ion-label>
                     <p class="item-heading">{{ 'addon.mod_quiz.errorrulesnotsupported' | translate }}</p>
                     <p *ngFor="let name of unsupportedRules"
@@ -167,24 +173,34 @@
                     </p>
                 </ion-label>
             </ion-item>
-            <ion-item class="ion-text-wrap core-danger-item addon-mod_quiz-unsupported-behaviours" *ngIf="behaviourSupported === false">
+        </ion-card>
+        <ion-card class="core-danger-card addon-mod_quiz-unsupported-behaviours" *ngIf="behaviourSupported === false">
+            <ion-item class="ion-text-wrap">
                 <ion-label>
                     <p class="item-heading">{{ 'addon.mod_quiz.errorbehaviournotsupported' | translate }}</p>
                     <p class="addon-mod_quiz-unsupported-behaviour">{{ quiz.preferredbehaviour }}</p>
                 </ion-label>
             </ion-item>
+        </ion-card>
 
-            <!-- Other warnings. -->
-            <ion-item class="core-warning-item ion-text-wrap" *ngIf="hasSupportedQuestions && unsupportedQuestions.length">
+        <!-- Other warnings. -->
+        <ion-card class="core-warning-card" *ngIf="hasSupportedQuestions && unsupportedQuestions.length">
+            <ion-item class="ion-text-wrap">
                 <ion-label>
                     <p class="item-heading">{{ 'addon.mod_quiz.canattemptbutnotsubmit' | translate }}</p>
                     <p>{{ 'addon.mod_quiz.warningquestionsnotsupported' | translate }}</p>
                     <p *ngFor="let type of unsupportedQuestions">{{ type }}</p>
                 </ion-label>
             </ion-item>
+        </ion-card>
+    </ng-container>
 
+    <div collapsible-footer *ngIf="!showLoading" slot="fixed">
+        <div class="list-item-limited-width" *ngIf="quiz">
             <!-- Button to start/continue. -->
-            <ion-button *ngIf="buttonText && !showStatusSpinner" expand="block" (click)="attemptQuiz()" class="ion-margin ion-text-wrap">
+            <ion-button *ngIf="buttonText" expand="block" (click)="attemptQuiz()" class="ion-margin ion-text-wrap"
+                [disabled]="showStatusSpinner">
+                <ion-spinner *ngIf="showStatusSpinner" slot="start" aria-hidden="true"></ion-spinner>
                 {{ buttonText | translate }}
             </ion-button>
 
@@ -195,17 +211,10 @@
                 {{ 'core.openinbrowser' | translate }}
                 <ion-icon name="fas-external-link-alt" slot="end" aria-hidden="true"></ion-icon>
             </ion-button>
+        </div>
 
-            <!-- 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-item>
-        </ion-list>
-    </ion-card>
+        <core-course-module-navigation [courseId]="courseId" [currentModule]="module" (completionChanged)="onCompletionChange()">
+        </core-course-module-navigation>
+
+    </div>
 </core-loading>
-
-<core-course-module-navigation collapsible-footer [hidden]="showLoading" [courseId]="courseId" [currentModule]="module"
-    (completionChanged)="onCompletionChange()">
-</core-course-module-navigation>

From 540141bad55b2aa6f70094a1f50985611c99b4f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 25 Feb 2022 10:54:23 +0100
Subject: [PATCH 03/10] MOBILE-3149 scorm: Collapse grades on scorm page

---
 .../index/addon-mod-scorm-index.html          | 35 ++++++++++++-------
 .../mod/scorm/components/index/index.ts       |  8 +++++
 2 files changed, 31 insertions(+), 12 deletions(-)

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 49c22490a..f3dc13496 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
@@ -31,7 +31,7 @@
                 <ng-container *ngIf="scorm.displayattemptstatus">
                     <ion-item class="ion-text-wrap" *ngIf="scorm.maxattempt! >= 0">
                         <ion-label>
-                            <h3>{{ 'addon.mod_scorm.noattemptsallowed' | translate }}</h3>
+                            <p class="item-heading">{{ 'addon.mod_scorm.noattemptsallowed' | translate }}</p>
                         </ion-label>
                         <p slot="end">
                             <span *ngIf="scorm.maxattempt == 0">{{ 'core.unlimited' | translate }}</span>
@@ -40,23 +40,34 @@
                     </ion-item>
                     <ion-item class="ion-text-wrap" *ngIf="numAttempts >= 0">
                         <ion-label>
-                            <h3>{{ 'addon.mod_scorm.noattemptsmade' | translate }}</h3>
+                            <p class="item-heading">{{ 'addon.mod_scorm.noattemptsmade' | translate }}</p>
                         </ion-label>
                         <p slot="end">{{ numAttempts }}</p>
                     </ion-item>
-                    <ion-item class="ion-text-wrap" *ngFor="let attempt of onlineAttempts">
+                    <ion-item *ngIf="onlineAttempts.length > 0" button class="divider ion-text-wrap" (click)="toggleGrades()"
+                        [attr.aria-label]="(gradesExpanded ? 'core.collapse' : 'core.expand') | translate" detail="false">
+                        <ion-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
+                            [class.expandable-status-icon-expanded]="gradesExpanded">
+                        </ion-icon>
                         <ion-label>
-                            <h3>{{ 'addon.mod_scorm.gradeforattempt' | translate }} {{attempt.num}}</h3>
+                            <h3 class="item-heading">{{'core.grades.grades' | translate}}</h3>
                         </ion-label>
-                        <p slot="end">
-                            <span *ngIf="attempt.grade != -1">{{ attempt.gradeFormatted }}</span>
-                            <span *ngIf="attempt.grade == -1">{{ 'addon.mod_scorm.cannotcalculategrade' | translate }}</span>
-                        </p>
                     </ion-item>
+                    <ng-container *ngIf="gradesExpanded && onlineAttempts.length > 0">
+                        <ion-item class="ion-text-wrap" *ngFor="let attempt of onlineAttempts">
+                            <ion-label>
+                                <p class="item-heading">{{ 'addon.mod_scorm.gradeforattempt' | translate }} {{attempt.num}}</p>
+                            </ion-label>
+                            <p slot="end">
+                                <span *ngIf="attempt.grade != -1">{{ attempt.gradeFormatted }}</span>
+                                <span *ngIf="attempt.grade == -1">{{ 'addon.mod_scorm.cannotcalculategrade' | translate }}</span>
+                            </p>
+                        </ion-item>
+                    </ng-container>
                 </ng-container>
                 <ion-item class="ion-text-wrap" *ngFor="let attempt of offlineAttempts">
                     <ion-label>
-                        <h3>{{ 'addon.mod_scorm.gradeforattempt' | translate }} {{attempt.num}}</h3>
+                        <p class="item-heading">{{ 'addon.mod_scorm.gradeforattempt' | translate }} {{attempt.num}}</p>
                         <p *ngIf="!scorm.maxattempt || attempt.num <= scorm.maxattempt">
                             {{ 'addon.mod_scorm.offlineattemptnote' | translate }}
                         </p>
@@ -71,13 +82,13 @@
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="scorm.displayattemptstatus && gradeMethodReadable">
                     <ion-label>
-                        <h3>{{ 'addon.mod_scorm.grademethod' | translate }}</h3>
+                        <p class="item-heading">{{ 'addon.mod_scorm.grademethod' | translate }}</p>
                     </ion-label>
                     <p slot="end">{{ gradeMethodReadable }}</p>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="scorm.displayattemptstatus && gradeFormatted">
                     <ion-label>
-                        <h3>{{ 'addon.mod_scorm.gradereported' | translate }}</h3>
+                        <p class="item-heading">{{ 'addon.mod_scorm.gradereported' | translate }}</p>
                     </ion-label>
                     <p slot="end">
                         <span *ngIf="grade != -1">{{ gradeFormatted }}</span>
@@ -86,7 +97,7 @@
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="syncTime">
                     <ion-label>
-                        <h3>{{ 'core.lastsync' | translate }}</h3>
+                        <p class="item-heading">{{ 'core.lastsync' | translate }}</p>
                         <p>{{ syncTime }}</p>
                     </ion-label>
                 </ion-item>
diff --git a/src/addons/mod/scorm/components/index/index.ts b/src/addons/mod/scorm/components/index/index.ts
index 88dd7b2c8..fcfa22b41 100644
--- a/src/addons/mod/scorm/components/index/index.ts
+++ b/src/addons/mod/scorm/components/index/index.ts
@@ -81,6 +81,7 @@ export class AddonModScormIndexComponent extends CoreCourseModuleMainActivityCom
     attemptsLeft = -1; // Number of attempts left.
     onlineAttempts: AttemptGrade[] = []; // Grades for online attempts.
     offlineAttempts: AttemptGrade[] = []; // Grades for offline attempts.
+    gradesExpanded = false;
 
     protected fetchContentDefaultError = 'addon.mod_scorm.errorgetscorm'; // Default error to show when loading contents.
     protected syncEventName = AddonModScormSyncProvider.AUTO_SYNCED;
@@ -523,6 +524,13 @@ export class AddonModScormIndexComponent extends CoreCourseModuleMainActivityCom
         }
     }
 
+    /**
+     * Toggle list of grades.
+     */
+    toggleGrades(): void {
+        this.gradesExpanded = !this.gradesExpanded;
+    }
+
     /**
      * Open a SCORM package.
      *

From d4515ca74cee5029be65a0a2e1fce224b9c1bb59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 24 Feb 2022 16:44:24 +0100
Subject: [PATCH 04/10] MOBILE-3149 module: Add collapsible footer buttons on
 module index pages

---
 .../components/index/index.html               |  29 ++--
 .../index/addon-mod-book-index.html           |  21 +--
 .../index/addon-mod-chat-index.html           |  26 +--
 .../index/addon-mod-choice-index.html         |  25 +--
 .../index/addon-mod-feedback-index.html       |  47 +++---
 .../index/addon-mod-imscp-index.html          |  16 +-
 .../index/addon-mod-lesson-index.html         | 152 +++++++++---------
 .../components/index/addon-mod-lti-index.html |  19 +--
 .../index/addon-mod-resource-index.html       |  22 +--
 .../index/addon-mod-scorm-index.html          |  90 +++++------
 .../index/addon-mod-survey-index.html         |  32 ++--
 .../components/index/addon-mod-url-index.html |  23 ++-
 .../index/addon-mod-workshop-index.html       |  39 ++---
 src/theme/theme.base.scss                     |  14 +-
 src/theme/theme.light.scss                    |   4 +-
 15 files changed, 288 insertions(+), 271 deletions(-)

diff --git a/src/addons/mod/bigbluebuttonbn/components/index/index.html b/src/addons/mod/bigbluebuttonbn/components/index/index.html
index f17bc8bf5..1463c7c65 100644
--- a/src/addons/mod/bigbluebuttonbn/components/index/index.html
+++ b/src/addons/mod/bigbluebuttonbn/components/index/index.html
@@ -94,15 +94,6 @@
             </ion-item>
         </ng-container>
 
-        <ion-button *ngIf="meetingInfo.canjoin" class="ion-margin" expand="block" (click)="joinRoom()">
-            {{ 'addon.mod_bigbluebuttonbn.view_conference_action_join' | translate }}
-        </ion-button>
-
-        <ion-button *ngIf="meetingInfo.statusrunning && meetingInfo.ismoderator" color="light" class="ion-margin" expand="block"
-            (click)="endMeeting()">
-            {{ 'addon.mod_bigbluebuttonbn.view_conference_action_end' | translate }}
-        </ion-button>
-
         <ion-card *ngIf="!meetingInfo.canjoin" class="core-warning-card">
             <ion-item class="ion-text-wrap">
                 <ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
@@ -110,8 +101,20 @@
             </ion-item>
         </ion-card>
     </ng-container>
-</core-loading>
 
-<core-course-module-navigation collapsible-footer [hidden]="showLoading" [courseId]="courseId" [currentModule]="module"
-    (completionChanged)="onCompletionChange()">
-</core-course-module-navigation>
+    <div collapsible-footer *ngIf="!showLoading" slot="fixed">
+        <div class="list-item-limited-width"
+            *ngIf="meetingInfo && (meetingInfo.canjoin || meetingInfo.statusrunning && meetingInfo.ismoderator)">
+            <ion-button *ngIf="meetingInfo.statusrunning && meetingInfo.ismoderator" fill="outline" class="ion-margin ion-text-wrap"
+                expand="block" (click)="endMeeting()">
+                {{ 'addon.mod_bigbluebuttonbn.view_conference_action_end' | translate }}
+            </ion-button>
+            <ion-button *ngIf="meetingInfo.canjoin" class="ion-margin ion-text-wrap" expand="block" (click)="joinRoom()">
+                {{ 'addon.mod_bigbluebuttonbn.view_conference_action_join' | translate }}
+            </ion-button>
+        </div>
+
+        <core-course-module-navigation [courseId]="courseId" [currentModule]="module" (completionChanged)="onCompletionChange()">
+        </core-course-module-navigation>
+    </div>
+</core-loading>
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 cdd809546..5e95da64d 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
@@ -31,16 +31,17 @@
                 </p>
             </ion-label>
         </ion-item>
-
-        <ion-button class="ion-margin" expand="block" (click)="openBook()">
-            <span *ngIf="!hasStartedBook">{{ 'core.start' | translate }}</span>
-            <span *ngIf="hasStartedBook">{{ 'core.resume' | translate }}</span>
-        </ion-button>
-
     </ion-list>
 
-</core-loading>
+    <div collapsible-footer *ngIf="!showLoading" slot="fixed">
+        <div class="list-item-limited-width">
+            <ion-button expand="block" (click)="openBook()" class="ion-margin ion-text-wrap">
+                <span *ngIf="!hasStartedBook">{{ 'core.start' | translate }}</span>
+                <span *ngIf="hasStartedBook">{{ 'core.resume' | translate }}</span>
+            </ion-button>
+        </div>
 
-<core-course-module-navigation collapsible-footer [hidden]="showLoading" [courseId]="courseId" [currentModule]="module"
-    (completionChanged)="onCompletionChange()">
-</core-course-module-navigation>
+        <core-course-module-navigation [courseId]="courseId" [currentModule]="module" (completionChanged)="onCompletionChange()">
+        </core-course-module-navigation>
+    </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 52c2a5cc4..764e01db2 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
@@ -20,16 +20,18 @@
         </ion-item>
     </ion-card>
 
-    <ng-container *ngIf="chat">
-        <ion-button class="ion-margin ion-text-wrap" expand="block" color="primary" (click)="enterChat()">
-            {{ 'addon.mod_chat.enterchat' | translate }}
-        </ion-button>
-        <ion-button class="ion-margin ion-text-wrap" expand="block" color="light" (click)="viewSessions()">
-            {{ 'addon.mod_chat.viewreport' | translate }}
-        </ion-button>
-    </ng-container>
-</core-loading>
+    <ion-button *ngIf="chat" class="ion-margin ion-text-wrap" expand="block" fill="outline" (click)="viewSessions()">
+        {{ 'addon.mod_chat.viewreport' | translate }}
+    </ion-button>
 
-<core-course-module-navigation collapsible-footer [hidden]="showLoading" [courseId]="courseId" [currentModule]="module"
-    (completionChanged)="onCompletionChange()">
-</core-course-module-navigation>
+    <div collapsible-footer *ngIf="!showLoading" slot="fixed">
+        <div class="list-item-limited-width" *ngIf="chat">
+            <ion-button class="ion-margin ion-text-wrap" expand="block" color="primary" (click)="enterChat()">
+                {{ 'addon.mod_chat.enterchat' | translate }}
+            </ion-button>
+        </div>
+
+        <core-course-module-navigation [courseId]="courseId" [currentModule]="module" (completionChanged)="onCompletionChange()">
+        </core-course-module-navigation>
+    </div>
+</core-loading>
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 f5620647c..be4e8eb0b 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
@@ -64,12 +64,6 @@
                 <ion-radio slot="end" [value]="option.id" [disabled]="option.disabled || !canEdit"></ion-radio>
             </ion-item>
         </ion-radio-group>
-        <ion-button *ngIf="canEdit" expand="block" (click)="save()" [disabled]="!canSave()" class="ion-margin">
-            {{ 'addon.mod_choice.savemychoice' | translate }}
-        </ion-button>
-        <ion-button *ngIf="canDelete" expand="block" color="light" (click)="delete()" class="ion-margin">
-            {{ 'addon.mod_choice.removemychoice' | translate }}
-        </ion-button>
     </ion-card>
 
     <!-- Choice results -->
@@ -139,11 +133,24 @@
             </ion-label>
         </ion-item>
     </ion-card>
+
+
+    <div collapsible-footer *ngIf="!showLoading" slot="fixed">
+        <div class="list-item-limited-width" *ngIf="options.length && choice && (canEdit || canDelete)">
+            <ion-button *ngIf="canDelete" expand="block" fill="outline" (click)="delete()" class="ion-margin ion-text-wrap">
+                {{ 'addon.mod_choice.removemychoice' | translate }}
+            </ion-button>
+            <ion-button *ngIf="canEdit" expand="block" (click)="save()" [disabled]="!canSave()" class="ion-margin ion-text-wrap">
+                {{ 'addon.mod_choice.savemychoice' | translate }}
+            </ion-button>
+        </div>
+
+        <core-course-module-navigation [courseId]="courseId" [currentModule]="module" (completionChanged)="onCompletionChange()">
+        </core-course-module-navigation>
+    </div>
 </core-loading>
 
-<core-course-module-navigation collapsible-footer [hidden]="showLoading" [courseId]="courseId" [currentModule]="module"
-    (completionChanged)="onCompletionChange()">
-</core-course-module-navigation>
+
 
 <!-- Template to render a choice option label. -->
 <ng-template #optionLabelTemplate let-option="option">
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 4ffa61d9a..00bc860e7 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
@@ -33,11 +33,28 @@
             </ng-template>
         </core-tab>
     </core-tabs>
-</core-loading>
 
-<core-course-module-navigation collapsible-footer [hidden]="showLoading" [courseId]="courseId" [currentModule]="module"
-    (completionChanged)="onCompletionChange()">
-</core-course-module-navigation>
+    <div collapsible-footer *ngIf="!showLoading" slot="fixed">
+        <div class="list-item-limited-width" *ngIf="access && (access.canedititems || access.canviewreports || !access.isempty)">
+            <ion-button expand="block" fill="outline" (click)="gotoAnswerQuestions(true)" class="ion-margin ion-text-wrap">
+                <ion-icon name="fas-search" slot="start" aria-hidden="true"></ion-icon>
+                {{ 'addon.mod_feedback.preview' | translate }}
+            </ion-button>
+            <ion-button *ngIf="access.cancomplete && access.cansubmit && access.isopen" expand="block" (click)="gotoAnswerQuestions()"
+                class="ion-margin ion-text-wrap">
+                <ng-container *ngIf="!goPage">
+                    {{ 'addon.mod_feedback.complete_the_form' | translate }}
+                </ng-container>
+                <ng-container *ngIf="goPage">
+                    {{ 'addon.mod_feedback.continue_the_form' | translate }}
+                </ng-container>
+            </ion-button>
+        </div>
+
+        <core-course-module-navigation [courseId]="courseId" [currentModule]="module" (completionChanged)="onCompletionChange()">
+        </core-course-module-navigation>
+    </div>
+</core-loading>
 
 <ng-template #basicInfo>
     <ion-list *ngIf="access && access.canviewanalysis && !access.isempty">
@@ -133,28 +150,6 @@
                         <p *ngIf="!access.isanonymous">{{ 'addon.mod_feedback.non_anonymous' | translate }}</p>
                     </ion-label>
                 </ion-item>
-                <ion-grid>
-                    <ion-row class="ion-align-items-center">
-                        <ion-col>
-                            <ion-button expand="block" fill="outline" (click)="gotoAnswerQuestions(true)" class="ion-text-wrap">
-                                <ion-icon name="fas-search" slot="start" aria-hidden="true"></ion-icon>
-                                {{ 'addon.mod_feedback.preview' | translate }}
-                            </ion-button>
-                        </ion-col>
-                        <ion-col *ngIf="access.cancomplete && access.cansubmit && access.isopen">
-                            <ion-button expand="block" (click)="gotoAnswerQuestions()" class="ion-text-wrap">
-                                <ng-container *ngIf="!goPage">
-                                    {{ 'addon.mod_feedback.complete_the_form' | translate }}
-                                </ng-container>
-                                <ng-container *ngIf="goPage">
-                                    {{ 'addon.mod_feedback.continue_the_form' | translate }}
-                                </ng-container>
-                                <ion-icon name="fas-chevron-right" slot="end" aria-hidden="true"></ion-icon>
-                            </ion-button>
-                        </ion-col>
-                    </ion-row>
-                </ion-grid>
-
             </ng-container>
         </ion-list>
     </core-loading>
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 608162e22..e4cfff579 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
@@ -26,12 +26,12 @@
     <div class="addon-mod-imscp-container">
         <core-iframe *ngIf="!showLoading" [src]="src" [showFullscreenOnToolbar]="true" [autoFullscreenOnRotate]="true"></core-iframe>
     </div>
-</core-loading>
 
-<!-- TODO Add a contents page to avoid having both bars -->
-<core-navigation-bar collapsible-footer *ngIf="!showLoading && navigationItems.length > 1 && false" [items]="navigationItems"
-    (action)="loadItem($event)">
-</core-navigation-bar>
-<core-course-module-navigation collapsible-footer [hidden]="showLoading" [courseId]="courseId" [currentModule]="module"
-    (completionChanged)="onCompletionChange()">
-</core-course-module-navigation>
+    <div collapsible-footer *ngIf="!showLoading" slot="fixed">
+        <!-- TODO Add a contents page to avoid having both bars. Please add here start/resume buttons. -->
+        <core-navigation-bar *ngIf="navigationItems.length > 1" [items]="navigationItems" (action)="loadItem($event)">
+        </core-navigation-bar>
+        <core-course-module-navigation [courseId]="courseId" [currentModule]="module" (completionChanged)="onCompletionChange()">
+        </core-course-module-navigation>
+    </div>
+</core-loading>
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 188c0ca97..c2f13b4e5 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
@@ -38,84 +38,15 @@
                         </ion-item>
                         <ion-button expand="block" type="submit">
                             {{ 'addon.mod_lesson.continue' | translate }}
-                            <ion-icon slot="end" name="fas-chevron-right" aria-hidden="true"></ion-icon>
                         </ion-button>
                         <!-- Remove this once Ionic fixes this bug: https://github.com/ionic-team/ionic-framework/issues/19368 -->
                         <input type="submit" class="core-submit-hidden-enter" />
                     </form>
                 </ion-card>
 
-                <core-loading [hideUntil]="!showSpinner">
+                <core-loading [hideUntil]="!showSpinner" *ngIf="canViewReports">
                     <ion-list *ngIf="(lesson && !preventReasons.length) || retakeToReview">
-                        <ng-container *ngIf="retakeToReview">
-                            <!-- A retake was finished in a synchronization, allow reviewing it. -->
-                            <ion-item class="ion-text-wrap">
-                                <ion-label class="ion-padding-bottom">
-                                    {{ 'addon.mod_lesson.retakefinishedinsync' | translate }}
-                                </ion-label>
-                            </ion-item>
-                            <ion-button class="ion-text-wrap ion-margin" expand="block" (click)="review()">
-                                {{ 'addon.mod_lesson.review' | translate }}
-                            </ion-button>
-                        </ng-container>
-
-                        <ng-container *ngIf="lesson && !preventReasons.length">
-                            <ion-item class="ion-text-wrap" *ngIf="leftDuringTimed && !lesson.timelimit && !finishedOffline">
-                                <!-- User left during the session and there is no time limit, ask to continue. -->
-                                <ion-label>
-                                    <p [innerHTML]="'addon.mod_lesson.youhaveseen' | translate"></p>
-                                    <ion-grid>
-                                        <ion-row>
-                                            <ion-col>
-                                                <ion-button expand="block" color="light" (click)="start(false)">
-                                                    {{ 'core.no' | translate }}
-                                                </ion-button>
-                                            </ion-col>
-                                            <ion-col>
-                                                <ion-button expand="block" (click)="start(true)">
-                                                    {{ 'core.yes' | translate }}
-                                                </ion-button>
-                                            </ion-col>
-                                        </ion-row>
-                                    </ion-grid>
-                                </ion-label>
-                            </ion-item>
-
-                            <ng-container *ngIf="leftDuringTimed && lesson.timelimit && lesson.retake && !finishedOffline">
-                                <ion-item class="ion-text-wrap">
-                                    <!-- User left during the session with time limit and retakes allowed, ask to continue. -->
-                                    <ion-label [innerHTML]="'addon.mod_lesson.leftduringtimed' | translate"></ion-label>
-                                </ion-item>
-                                <ion-button class="ion-text-wrap ion-margin" expand="block" (click)="start(false)">
-                                    {{ 'addon.mod_lesson.continue' | translate }}
-                                    <ion-icon name="fas-chevron-right" slot="end" aria-hidden="true"></ion-icon>
-                                </ion-button>
-                            </ng-container>
-
-                            <ion-item class="ion-text-wrap" *ngIf="leftDuringTimed && lesson.timelimit && !lesson.retake">
-                                <!-- User left during the session with time limit and retakes not allowed.
-                                    This should be handled by preventMessages. -->
-                                <ion-label [innerHTML]="'addon.mod_lesson.leftduringtimednoretake' | translate"></ion-label>
-                            </ion-item>
-
-                            <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)">
-                                    {{ '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)">
-                                    {{ 'addon.mod_lesson.preview' | translate }}
-                                    <ion-icon name="fas-search" slot="end" aria-hidden="true"></ion-icon>
-                                </ion-button>
-                            </ng-container>
-
-                            <ion-button class="ion-text-wrap" *ngIf="finishedOffline" expand="block" (click)="start(true)">
-                                <!-- There's an attempt finished in offline. Let the user continue, showing the end of lesson. -->
-                                {{ 'addon.mod_lesson.continue' | translate }}
-                                <ion-icon name="fas-chevron-right" slot="end" aria-hidden="true"></ion-icon>
-                            </ion-button>
-                        </ng-container>
+                        <ng-container *ngTemplateOutlet="buttons"></ng-container>
                     </ion-list>
                 </core-loading>
             </ng-template>
@@ -277,8 +208,81 @@
             </ng-template>
         </core-tab>
     </core-tabs>
+
+    <div collapsible-footer *ngIf="!showLoading" slot="fixed">
+        <div class="list-item-limited-width" *ngIf="!canViewReports && ((lesson && !preventReasons.length) || retakeToReview)">
+            <ng-container *ngTemplateOutlet="buttons"></ng-container>
+        </div>
+
+        <core-course-module-navigation [courseId]="courseId" [currentModule]="module" (completionChanged)="onCompletionChange()">
+        </core-course-module-navigation>
+    </div>
 </core-loading>
 
-<core-course-module-navigation collapsible-footer [hidden]="showLoading" [courseId]="courseId" [currentModule]="module"
-    (completionChanged)="onCompletionChange()">
-</core-course-module-navigation>
+
+<ng-template #buttons>
+    <ng-container *ngIf="retakeToReview">
+        <!-- A retake was finished in a synchronization, allow reviewing it. -->
+        <ion-item class="ion-text-wrap">
+            <ion-label class="ion-padding-bottom">
+                {{ 'addon.mod_lesson.retakefinishedinsync' | translate }}
+            </ion-label>
+        </ion-item>
+        <ion-button class="ion-text-wrap ion-margin" expand="block" (click)="review()">
+            {{ 'addon.mod_lesson.review' | translate }}
+        </ion-button>
+    </ng-container>
+
+    <ng-container *ngIf="lesson && !preventReasons.length">
+        <ion-item class="ion-text-wrap" *ngIf="leftDuringTimed && !lesson.timelimit && !finishedOffline">
+            <!-- User left during the session and there is no time limit, ask to continue. -->
+            <ion-label>
+                <p [innerHTML]="'addon.mod_lesson.youhaveseen' | translate"></p>
+                <ion-row>
+                    <ion-col>
+                        <ion-button expand="block" fill="outline" (click)="start(false)">
+                            {{ 'core.no' | translate }}
+                        </ion-button>
+                    </ion-col>
+                    <ion-col>
+                        <ion-button expand="block" (click)="start(true)">
+                            {{ 'core.yes' | translate }}
+                        </ion-button>
+                    </ion-col>
+                </ion-row>
+            </ion-label>
+        </ion-item>
+
+        <ng-container *ngIf="leftDuringTimed && lesson.timelimit && lesson.retake && !finishedOffline">
+            <ion-item class="ion-text-wrap">
+                <!-- User left during the session with time limit and retakes allowed, ask to continue. -->
+                <ion-label [innerHTML]="'addon.mod_lesson.leftduringtimed' | translate"></ion-label>
+            </ion-item>
+            <ion-button class="ion-text-wrap ion-margin" expand="block" (click)="start(false)">
+                {{ 'addon.mod_lesson.continue' | translate }}
+            </ion-button>
+        </ng-container>
+
+        <ion-item class="ion-text-wrap" *ngIf="leftDuringTimed && lesson.timelimit && !lesson.retake">
+            <!-- User left during the session with time limit and retakes not allowed.
+                This should be handled by preventMessages. -->
+            <ion-label [innerHTML]="'addon.mod_lesson.leftduringtimednoretake' | translate"></ion-label>
+        </ion-item>
+
+        <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)">
+                {{ 'core.start' | translate }}
+            </ion-button>
+            <ion-button class="ion-text-wrap ion-margin" expand="block" fill="outline" *ngIf="canManage" (click)="start(false)">
+                <ion-icon name="fas-search" slot="start" aria-hidden="true"></ion-icon>
+                {{ 'addon.mod_lesson.preview' | translate }}
+            </ion-button>
+        </ng-container>
+
+        <ion-button class="ion-text-wrap ion-margin" *ngIf="finishedOffline" expand="block" (click)="start(true)">
+            <!-- There's an attempt finished in offline. Let the user continue, showing the end of lesson. -->
+            {{ 'addon.mod_lesson.continue' | translate }}
+        </ion-button>
+    </ng-container>
+</ng-template>
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 217ee88b2..a85613113 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
@@ -13,14 +13,15 @@
         [componentId]="componentId" [courseId]="courseId">
     </core-course-module-info>
 
-    <div class="ion-padding">
-        <ion-button expand="block" (click)="launch()">
-            <ion-icon name="fas-external-link-alt" slot="start" aria-hidden="true"></ion-icon>
-            {{ 'addon.mod_lti.launchactivity' | translate }}
-        </ion-button>
+    <div collapsible-footer *ngIf="!showLoading" slot="fixed">
+        <div class="list-item-limited-width">
+            <ion-button expand="block" (click)="launch()" class="ion-margin ion-text-wrap">
+                {{ 'addon.mod_lti.launchactivity' | translate }}
+                <ion-icon name="fas-external-link-alt" slot="end" aria-hidden="true"></ion-icon>
+            </ion-button>
+        </div>
+
+        <core-course-module-navigation [courseId]="courseId" [currentModule]="module" (completionChanged)="onCompletionChange()">
+        </core-course-module-navigation>
     </div>
 </core-loading>
-
-<core-course-module-navigation collapsible-footer [hidden]="showLoading" [courseId]="courseId" [currentModule]="module"
-    (completionChanged)="onCompletionChange()">
-</core-course-module-navigation>
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 0fd7713b7..cf24bdd04 100644
--- a/src/addons/mod/resource/components/index/addon-mod-resource-index.html
+++ b/src/addons/mod/resource/components/index/addon-mod-resource-index.html
@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="safe-area-padding">
+<core-loading [hideUntil]="!showLoading" class="safe-area-padding core-loading-full-height">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [courseId]="courseId" [description]="displayDescription && description"
@@ -76,8 +76,12 @@
                     </ion-label>
                 </ion-item>
             </ng-container>
+        </ion-list>
+    </ng-container>
 
-            <ion-button expand="block" class="ion-margin" (click)="open(openFileAction.OPEN)">
+    <div collapsible-footer *ngIf="!showLoading" slot="fixed">
+        <div class="list-item-limited-width" *ngIf="mode == 'external'">
+            <ion-button expand="block" (click)="open(openFileAction.OPEN)" class="ion-margin ion-text-wrap">
                 <ng-container *ngIf="isStreamedFile">
                     <ion-icon name="fas-play" slot="start" aria-hidden="true"></ion-icon>
                     {{ 'core.play' | translate }}
@@ -88,15 +92,13 @@
                 </ng-container>
             </ion-button>
 
-            <ion-button *ngIf="isIOS && (!shouldOpenInBrowser || !isOnline)" expand="block" class="ion-margin"
-                (click)="open(openFileAction.OPEN_WITH)">
+            <ion-button *ngIf="isIOS && (!shouldOpenInBrowser || !isOnline)" expand="block" (click)="open(openFileAction.OPEN_WITH)"
+                class="ion-margin ion-text-wrap">
                 <ion-icon name="far-share-square" slot="start" aria-hidden="true"></ion-icon>
                 {{ 'core.openwith' | translate }}
             </ion-button>
-        </ion-list>
-    </ng-container>
+        </div>
+        <core-course-module-navigation [courseId]="courseId" [currentModule]="module" (completionChanged)="onCompletionChange()">
+        </core-course-module-navigation>
+    </div>
 </core-loading>
-
-<core-course-module-navigation collapsible-footer [hidden]="showLoading" [courseId]="courseId" [currentModule]="module"
-    (completionChanged)="onCompletionChange()">
-</core-course-module-navigation>
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 f3dc13496..0c2f0ea6c 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
@@ -21,7 +21,7 @@
         </ion-item>
     </ion-card>
 
-    <ng-container *ngIf="scorm && !showLoading && !scorm.warningMessage">
+    <div *ngIf="scorm && !showLoading && !scorm.warningMessage" class="list-item-limited-width">
         <!-- Attempts status. -->
         <ion-card *ngIf="(scorm.displayattemptstatus || offlineAttempts.length) && !skip">
             <ion-card-header class="ion-text-wrap">
@@ -155,32 +155,34 @@
                 </ion-item>
             </ion-list>
         </ion-card>
+    </div>
 
-        <!-- Open in browser button. -->
-        <ion-card *ngIf="errorMessage">
-            <ion-item class="ion-text-wrap">
-                <ion-label>
-                    <p class="text-danger">{{ errorMessage | translate }}</p>
-                </ion-label>
-            </ion-item>
-            <ion-button class="ion-margin ion-text-wrap" expand="block" [href]="module.url" core-link [showBrowserWarning]="false">
-                {{ 'core.openinbrowser' | translate }}
-                <ion-icon name="fas-external-link-alt" slot="end" aria-hidden="true"></ion-icon>
-            </ion-button>
-        </ion-card>
+    <div collapsible-footer *ngIf="!showLoading" slot="fixed">
+        <div class="list-item-limited-width" *ngIf="scorm && !scorm.warningMessage">
+            <!-- Open in browser button. -->
+            <ng-container *ngIf="errorMessage">
+                <ion-item class="ion-text-wrap">
+                    <ion-label>
+                        <p class="text-danger">{{ errorMessage | translate }}</p>
+                    </ion-label>
+                </ion-item>
+                <ion-button class="ion-margin ion-text-wrap" expand="block" [href]="module.url" core-link [showBrowserWarning]="false">
+                    {{ 'core.openinbrowser' | translate }}
+                    <ion-icon name="fas-external-link-alt" slot="end" aria-hidden="true"></ion-icon>
+                </ion-button>
+            </ng-container>
 
-        <!-- Warning that user doesn't have any more attempts. -->
-        <ion-card *ngIf="!errorMessage && attemptsLeft == 0">
-            <ion-item class="ion-text-wrap">
-                <ion-label>
-                    <p class="text-danger">{{ 'addon.mod_scorm.exceededmaxattempts' | translate }}</p>
-                </ion-label>
-            </ion-item>
-        </ion-card>
+            <!-- Warning that user doesn't have any more attempts. -->
+            <ion-card *ngIf="!errorMessage && attemptsLeft == 0" class="core-danger-card">
+                <ion-item class="ion-text-wrap">
+                    <ion-label>
+                        <p>{{ 'addon.mod_scorm.exceededmaxattempts' | translate }}</p>
+                    </ion-label>
+                </ion-item>
+            </ion-card>
 
-        <!-- Open SCORM in app form -->
-        <ion-card *ngIf="!errorMessage && scorm && (!scorm.lastattemptlock || attemptsLeft > 0)">
-            <ion-list>
+            <ng-container *ngIf="!errorMessage && (!scorm.lastattemptlock || attemptsLeft > 0)">
+                <!-- Open SCORM in app form -->
                 <ng-container *ngIf="!downloading && !skip">
                     <!-- Create new attempt -->
                     <ion-item class="ion-text-wrap" *ngIf="!scorm.forcenewattempt && numAttempts > 0 && !incomplete && attemptsLeft > 0">
@@ -189,29 +191,21 @@
                         </ion-checkbox>
                     </ion-item>
 
-                    <ion-item class="ion-text-wrap" *ngIf="statusMessage">
-                        <ion-label>
+                    <ion-item *ngIf="statusMessage">
+                        <ion-label class="ion-text-wrap ion-no-margin ion-margin-top">
                             <p>{{ statusMessage | translate }}</p>
                         </ion-label>
                     </ion-item>
 
                     <!-- Open mode (Preview or Normal) -->
-                    <ion-grid>
-                        <ion-row class="ion-align-items-center">
-                            <ion-col *ngIf="!scorm.hidebrowse">
-                                <ion-button expand="block" fill="outline" (click)="open($event, true)" class="ion-text-wrap">
-                                    {{ 'addon.mod_scorm.browse' | translate }}
-                                    <ion-icon name="fas-search" slot="end" aria-hidden="true"></ion-icon>
-                                </ion-button>
-                            </ion-col>
-                            <ion-col>
-                                <ion-button expand="block" (click)="open($event)" class="ion-text-wrap">
-                                    {{ 'addon.mod_scorm.enter' | translate }}
-                                    <ion-icon name="fas-arrow-right" slot="end" aria-hidden="true"></ion-icon>
-                                </ion-button>
-                            </ion-col>
-                        </ion-row>
-                    </ion-grid>
+                    <ion-button *ngIf="!scorm.hidebrowse" expand="block" fill="outline" (click)="open($event, true)"
+                        class="ion-text-wrap ion-margin">
+                        <ion-icon name="fas-search" slot="start" aria-hidden="true"></ion-icon>
+                        {{ 'addon.mod_scorm.browse' | translate }}
+                    </ion-button>
+                    <ion-button expand="block" (click)="open($event)" class="ion-text-wrap ion-margin">
+                        {{ 'addon.mod_scorm.enter' | translate }}
+                    </ion-button>
                 </ng-container>
 
                 <!-- Download progress. -->
@@ -223,11 +217,9 @@
                         </core-progress-bar>
                     </ion-label>
                 </ion-item>
-            </ion-list>
-        </ion-card>
-    </ng-container>
+            </ng-container>
+        </div>
+        <core-course-module-navigation [courseId]="courseId" [currentModule]="module" (completionChanged)="onCompletionChange()">
+        </core-course-module-navigation>
+    </div>
 </core-loading>
-
-<core-course-module-navigation collapsible-footer [hidden]="showLoading" [courseId]="courseId" [currentModule]="module"
-    (completionChanged)="onCompletionChange()">
-</core-course-module-navigation>
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 6fd4d8906..431d04f34 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
@@ -21,10 +21,6 @@
                 {{ 'addon.mod_survey.surveycompletednograph' | translate }}
             </ion-label>
         </ion-item>
-        <ion-button class="ion-margin" expand="block" [href]="module.url" core-link>
-            <ion-icon name="fas-external-link-alt" slot="start" aria-hidden="true"></ion-icon>
-            {{ 'addon.mod_survey.results' | translate }}
-        </ion-button>
     </ion-card>
 
     <!-- Survey questions -->
@@ -119,18 +115,22 @@
 
             </ng-container>
         </ion-grid>
-
-        <ion-item>
-            <ion-label>
-                <ion-button expand="block" (click)="submit()" [disabled]="!isValidResponse()">
-                    {{ 'core.submit' | translate }}
-                </ion-button>
-            </ion-label>
-        </ion-item>
     </form>
 
-</core-loading>
+    <div collapsible-footer *ngIf="!showLoading" slot="fixed">
+        <div class="list-item-limited-width" *ngIf="survey && (survey.surveydone || (!hasOffline && questions && questions.length))">
+            <ion-button class="ion-text-wrap ion-margin" expand="block" [href]="module.url" core-link *ngIf="survey.surveydone">
+                {{ 'addon.mod_survey.results' | translate }}
+                <ion-icon name="fas-external-link-alt" slot="end" aria-hidden="true"></ion-icon>
+            </ion-button>
 
-<core-course-module-navigation collapsible-footer [hidden]="showLoading" [courseId]="courseId" [currentModule]="module"
-    (completionChanged)="onCompletionChange()">
-</core-course-module-navigation>
+            <ion-button expand="block" class="ion-text-wrap ion-margin" (click)="submit()" [disabled]="!isValidResponse()"
+                *ngIf="!survey.surveydone && !hasOffline && questions && questions.length">
+                {{ 'core.submit' | translate }}
+            </ion-button>
+        </div>
+
+        <core-course-module-navigation [courseId]="courseId" [currentModule]="module" (completionChanged)="onCompletionChange()">
+        </core-course-module-navigation>
+    </div>
+</core-loading>
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 9bd9966eb..734fbbe7e 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
@@ -35,17 +35,16 @@
                 <p>{{ url }}</p>
             </ion-label>
         </ion-item>
-        <ion-item class="ion-text-wrap">
-            <ion-label>
-                <ion-button expand="block" (click)="go()">
-                    <ion-icon name="fas-link" slot="start" aria-hidden="true"></ion-icon>
-                    {{ 'addon.mod_url.accessurl' | translate }}
-                </ion-button>
-            </ion-label>
-        </ion-item>
     </ion-list>
-</core-loading>
 
-<core-course-module-navigation collapsible-footer [hidden]="showLoading" [courseId]="courseId" [currentModule]="module"
-    (completionChanged)="onCompletionChange()">
-</core-course-module-navigation>
+    <div collapsible-footer *ngIf="!showLoading" slot="fixed">
+        <div class="list-item-limited-width" *ngIf="url && !shouldIframe && (!shouldEmbed || !isOther)">
+            <ion-button expand="block" (click)="go()" class="ion-margin ion-text-wrap">
+                <ion-icon name="fas-link" slot="start" aria-hidden="true"></ion-icon>
+                {{ 'addon.mod_url.accessurl' | translate }}
+            </ion-button>
+        </div>
+        <core-course-module-navigation [courseId]="courseId" [currentModule]="module" (completionChanged)="onCompletionChange()">
+        </core-course-module-navigation>
+    </div>
+</core-loading>
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 adc5c72e4..7ce927fb2 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
@@ -117,20 +117,6 @@
             <addon-mod-workshop-submission *ngIf="submission" [submission]="submission" [courseId]="workshop!.course" [module]="module"
                 [workshop]="workshop" [access]="access">
             </addon-mod-workshop-submission>
-
-            <!-- Show only on current phase -->
-            <ion-item class="ion-text-wrap" *ngIf="showSubmit">
-                <ion-label>
-                    <ion-button expand="block" *ngIf="access.creatingsubmissionallowed && !submission" (click)="gotoSubmit()">
-                        <ion-icon slot="start" name="fas-plus" aria-hidden="true"></ion-icon>
-                        {{ 'addon.mod_workshop.createsubmission' | translate }}
-                    </ion-button>
-                    <ion-button expand="block" *ngIf="access.modifyingsubmissionallowed && submission" (click)="gotoSubmit()">
-                        <ion-icon slot="start" name="fas-edit" aria-hidden="true"></ion-icon>
-                        {{ 'addon.mod_workshop.editsubmission' | translate }}
-                    </ion-button>
-                </ion-label>
-            </ion-item>
         </ion-card>
 
 
@@ -231,8 +217,25 @@
             </ion-grid>
         </ion-card>
     </div>
-</core-loading>
 
-<core-course-module-navigation collapsible-footer [hidden]="showLoading" [courseId]="courseId" [currentModule]="module"
-    (completionChanged)="onCompletionChange()">
-</core-course-module-navigation>
+
+    <div collapsible-footer *ngIf="!showLoading" slot="fixed">
+        <div class="list-item-limited-width" *ngIf="access && workshop?.phase >= PHASE_SUBMISSION && canSubmit && showSubmit &&
+                ((access.creatingsubmissionallowed && !submission) || (access.modifyingsubmissionallowed && submission))">
+            <!-- Show only on current phase -->
+            <ion-button expand="block" *ngIf="access.creatingsubmissionallowed && !submission" (click)="gotoSubmit()"
+                class="ion-text-wrap ion-margin">
+                <ion-icon slot="start" name="fas-plus" aria-hidden="true"></ion-icon>
+                {{ 'addon.mod_workshop.createsubmission' | translate }}
+            </ion-button>
+            <ion-button expand="block" *ngIf="access.modifyingsubmissionallowed && submission" (click)="gotoSubmit()"
+                class="ion-text-wrap ion-margin">
+                <ion-icon slot="start" name="fas-edit" aria-hidden="true"></ion-icon>
+                {{ 'addon.mod_workshop.editsubmission' | translate }}
+            </ion-button>
+        </div>
+
+        <core-course-module-navigation [courseId]="courseId" [currentModule]="module" (completionChanged)="onCompletionChange()">
+        </core-course-module-navigation>
+    </div>
+</core-loading>
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 8261707ae..f3d4ef15b 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -140,7 +140,7 @@ body {
 @each $color-name, $unused in $colors {
     .text-#{$color-name},
     p.text-#{$color-name} {
-        color: var(--ion-color-#{$color-name});
+        color: var(--ion-color-#{$color-name}) !important;
     }
 }
 
@@ -831,8 +831,8 @@ ion-list.core-course-module-list-wrapper,
 .list-item-limited-width,
 .core-course-module-list-wrapper {
     max-width: var(--list-item--max-width);
-    margin-left: auto;
-    margin-right: auto;
+    margin-left: auto !important;
+    margin-right: auto !important;
 }
 
 ion-toolbar h1 img.core-bar-button-image,
@@ -1451,13 +1451,19 @@ ion-grid.core-no-grid > ion-row {
         --core-collapsible-footer-height: auto;
     }
 
+    .ion-margin {
+        margin-top: 8px;
+        margin-bottom: 8px;
+    }
+
+    filter: var(--scroll-shadow-top, none);
+    -webkit-filter: var(--scroll-shadow-top, none);
     width: 100%;
     bottom: 0;
     z-index: 3;
     height: var(--core-collapsible-footer-height, auto);
     background-color: var(--core-collapsible-footer-background);
     display: block;
-    border-top: 1px solid var(--stroke);
     @include core-transition(all, 200ms);
 }
 
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index 34fa46c45..febfd5762 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -334,7 +334,9 @@
     --addon-forum-border-color: var(--stroke);
     --addon-forum-highlight-color: var(--light);
 
-    --drop-shadow: 0, 0, 0, 0.18;
+    --drop-shadow: 0, 0, 0, 0.5;
+    --scroll-shadow-bottom: drop-shadow(0px 3px 3px rgba(var(--drop-shadow)));
+    --scroll-shadow-top: drop-shadow(0px 3px 3px rgba(var(--drop-shadow)));
 
     --core-question-correct-color: var(--success-shade);
     --core-question-correct-color-bg: var(--success-tint);

From 079d914de6daa96a2995ff205b49b3ac6f8e13df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 25 Feb 2022 11:37:31 +0100
Subject: [PATCH 05/10] MOBILE-3149 style: Fix collapsible items on tablet

---
 src/core/directives/collapsible-item.ts | 6 +++++-
 src/core/directives/format-text.ts      | 7 +++++--
 src/theme/globals.mixins.scss           | 1 +
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/core/directives/collapsible-item.ts b/src/core/directives/collapsible-item.ts
index d572a0586..5556d8669 100644
--- a/src/core/directives/collapsible-item.ts
+++ b/src/core/directives/collapsible-item.ts
@@ -153,7 +153,11 @@ export class CoreCollapsibleItemDirective implements OnInit {
         this.expanded = expand;
         this.element.classList.toggle('collapsible-expanded', expand);
         this.element.classList.toggle('collapsible-collapsed', !expand);
-        this.element.style.maxHeight = expand ? '' : (this.maxHeight + buttonHeight) + 'px';
+        if (expand) {
+            this.element.style.setProperty('--max-height', this.maxHeight + buttonHeight + 'px');
+        } else {
+            this.element.style.removeProperty('--max-height');
+        }
 
         const toggleButton = this.element.querySelector('ion-button.collapsible-toggle');
         const toggleText = toggleButton?.querySelector('.collapsible-toggle-text');
diff --git a/src/core/directives/format-text.ts b/src/core/directives/format-text.ts
index cf080adea..959735eef 100644
--- a/src/core/directives/format-text.ts
+++ b/src/core/directives/format-text.ts
@@ -320,8 +320,11 @@ export class CoreFormatTextDirective implements OnChanges {
         this.expanded = expand;
         this.element.classList.toggle('collapsible-expanded', expand);
         this.element.classList.toggle('collapsible-collapsed', !expand);
-        this.element.style.maxHeight = expand ? '' : this.maxHeight + 'px';
-
+        if (expand) {
+            this.element.style.setProperty('--max-height', this.maxHeight + 'px');
+        } else {
+            this.element.style.removeProperty('--max-height');
+        }
         const toggleButton = this.element.querySelector('ion-button.collapsible-toggle');
         const toggleText = toggleButton?.querySelector('.collapsible-toggle-text');
         if (!toggleButton || !toggleText) {
diff --git a/src/theme/globals.mixins.scss b/src/theme/globals.mixins.scss
index f9529da61..2199bf76b 100644
--- a/src/theme/globals.mixins.scss
+++ b/src/theme/globals.mixins.scss
@@ -270,6 +270,7 @@
             &.collapsible-collapsed {
                 overflow: hidden;
                 min-height: calc(var(--collapsible-min-button-height) + 12px);
+                max-height: calc(var(--max-height), auto);
 
                 .collapsible-toggle-arrow {
                     transform: rotate(90deg);

From be1bacba0c05a244240c4091884ee35e1178048f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 25 Feb 2022 12:01:09 +0100
Subject: [PATCH 06/10] MOBILE-3149 style: Remove hide-detail

---
 .../assign/components/index/addon-mod-assign-index.html   | 8 ++++----
 .../components/index/addon-mod-feedback-index.html        | 4 ++--
 .../h5pactivity/pages/user-attempts/user-attempts.html    | 2 +-
 .../h5pactivity/pages/users-attempts/users-attempts.html  | 2 +-
 src/theme/theme.base.scss                                 | 5 -----
 5 files changed, 8 insertions(+), 13 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 a11a4b319..4072066ff 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
@@ -65,7 +65,7 @@
 
             <!-- 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"
+                [detail]="summary.submissiondraftscount" [button]="summary.submissiondraftscount"
                 (click)="goToSubmissionList(submissionStatusDraft, !!summary.submissiondraftscount)">
                 <ion-label>
                     <h2>{{ 'addon.mod_assign.numberofdraftsubmissions' | translate }}</h2>
@@ -80,8 +80,8 @@
             </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"
+            <ion-item class="ion-text-wrap" *ngIf="summary && summary.submissionsenabled" [detail]="summary.submissionssubmittedcount"
+                [button]="summary.submissionssubmittedcount"
                 (click)="goToSubmissionList(submissionStatusSubmitted, !!summary.submissionssubmittedcount)">
                 <ion-label>
                     <h2>{{ 'addon.mod_assign.numberofsubmittedassignments' | translate }}</h2>
@@ -97,7 +97,7 @@
 
             <!-- 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"
+                [detail]="needsGradingAvailable" [button]="needsGradingAvailable"
                 (click)="goToSubmissionList(needGrading, needsGradingAvailable)">
                 <ion-label>
                     <h2>{{ 'addon.mod_assign.numberofsubmissionsneedgrading' | translate }}</h2>
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 00bc860e7..bf91cdaec 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
@@ -70,8 +70,8 @@
                 </ion-select-option>
             </ion-select>
         </ion-item>
-        <ion-item class="ion-text-wrap" (click)="openAttempts()" [class.hide-detail]="!(access.canviewreports && completedCount > 0)"
-            detail="true" [button]="access.canviewreports && completedCount > 0">
+        <ion-item class="ion-text-wrap" (click)="openAttempts()" [detail]="access.canviewreports && completedCount > 0"
+            [button]="access.canviewreports && completedCount > 0">
             <ion-label>
                 <h2>{{ 'addon.mod_feedback.completed_feedbacks' | translate }}</h2>
             </ion-label>
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 5432ccb09..fe477e1e8 100644
--- a/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.html
+++ b/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.html
@@ -65,7 +65,7 @@
 <!-- Template to render a list of conversations. -->
 <ng-template #attemptsTemplate let-attempts="attempts">
     <!-- "Header" of the table -->
-    <ion-item class="ion-text-wrap addon-mod_h5pactivity-table-header hide-detail" detail="true">
+    <ion-item class="ion-text-wrap addon-mod_h5pactivity-table-header" [detail]="false">
         <ion-label>
             <ion-row class="ion-align-items-center">
                 <ion-col class="ion-text-center">#</ion-col>
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 375cb84cc..c9a58d517 100644
--- a/src/addons/mod/h5pactivity/pages/users-attempts/users-attempts.html
+++ b/src/addons/mod/h5pactivity/pages/users-attempts/users-attempts.html
@@ -19,7 +19,7 @@
     <core-loading [hideUntil]="loaded">
         <ion-list *ngIf="users.length">
             <!-- "Header" of the table -->
-            <ion-item class="addon-mod_h5pactivity-table-header hide-detail font-bold" detail="true">
+            <ion-item class="addon-mod_h5pactivity-table-header font-bold" [detail]="false">
                 <ion-label>
                     <ion-row class="ion-align-items-center">
                         <ion-col class="ion-text-center" size="4">{{ 'core.user' | translate }}</ion-col>
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index f3d4ef15b..58b86f8a2 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -1257,11 +1257,6 @@ ion-datetime.datetime-disabled {
     opacity: .8 !important;
 }
 
-// Hide details on items to align badges.
-ion-item.hide-detail {
-    --detail-icon-opacity: 0;
-}
-
 // Make links clickable when inside radio or checkbox items. Style part.
 @media (hover: hover) {
     ion-item.item-multiple-inputs:hover::part(native) {

From 859230ddf3bfc3ec640bcb6dcc42857f13de240b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 25 Feb 2022 15:45:39 +0100
Subject: [PATCH 07/10] MOBILE-3149 style: Change light to outline in buttons

---
 .../components/events/addon-block-timeline-events.html |  2 +-
 src/addons/calendar/pages/edit-event/edit-event.html   | 10 +++++-----
 src/addons/messages/pages/discussion/discussion.html   |  2 +-
 src/addons/messages/pages/search/search.html           |  2 +-
 src/addons/mod/chat/pages/chat/chat.html               |  2 +-
 src/addons/mod/forum/components/post/post.html         |  6 +++---
 .../mod/forum/pages/new-discussion/new-discussion.html |  6 +++---
 .../mod/lesson/pages/user-retake/user-retake.html      |  2 +-
 src/addons/mod/quiz/pages/review/review.html           |  4 ++--
 src/addons/notifications/pages/list/list.html          |  2 +-
 .../multichoice/component/addon-qtype-multichoice.html |  2 +-
 .../infinite-loading/core-infinite-loading.html        |  8 ++++----
 src/core/components/recaptcha/core-recaptcha.html      |  2 +-
 .../components/site-onboarding/site-onboarding.html    |  6 +++---
 .../login/pages/change-password/change-password.html   |  2 +-
 .../features/login/pages/credentials/credentials.html  |  4 ++--
 src/core/features/login/pages/reconnect/reconnect.html |  6 +++---
 .../features/login/pages/site-policy/site-policy.html  |  2 +-
 src/core/features/login/pages/site/site.html           |  2 +-
 .../question/components/question/core-question.html    |  2 +-
 src/core/features/viewer/components/text/text.html     |  2 +-
 21 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/src/addons/block/timeline/components/events/addon-block-timeline-events.html b/src/addons/block/timeline/components/events/addon-block-timeline-events.html
index 68a2ac180..4bb4161f4 100644
--- a/src/addons/block/timeline/components/events/addon-block-timeline-events.html
+++ b/src/addons/block/timeline/components/events/addon-block-timeline-events.html
@@ -68,7 +68,7 @@
 
 <div class="ion-padding ion-text-center" *ngIf="canLoadMore && !empty">
     <!-- Button and spinner to show more attempts. -->
-    <ion-button expand="block" (click)="loadMoreEvents()" color="light" *ngIf="!loadingMore">
+    <ion-button expand="block" (click)="loadMoreEvents()" fill="outline" *ngIf="!loadingMore">
         {{ 'core.loadmore' | translate }}
     </ion-button>
     <ion-spinner *ngIf="loadingMore" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
diff --git a/src/addons/calendar/pages/edit-event/edit-event.html b/src/addons/calendar/pages/edit-event/edit-event.html
index 6c28db54b..b02c1cf05 100644
--- a/src/addons/calendar/pages/edit-event/edit-event.html
+++ b/src/addons/calendar/pages/edit-event/edit-event.html
@@ -235,16 +235,16 @@
             <ion-item>
                 <ion-label>
                     <ion-row>
+                        <ion-col *ngIf="hasOffline && eventId && eventId < 0">
+                            <ion-button expand="block" fill="outline" (click)="discard()">
+                                {{ 'core.discard' | translate }}
+                            </ion-button>
+                        </ion-col>
                         <ion-col>
                             <ion-button expand="block" (click)="submit()" [disabled]="!form.valid" type="submit">
                                 {{ 'core.save' | translate }}
                             </ion-button>
                         </ion-col>
-                        <ion-col *ngIf="hasOffline && eventId && eventId < 0">
-                            <ion-button expand="block" color="light" (click)="discard()">
-                                {{ 'core.discard' | translate }}
-                            </ion-button>
-                        </ion-col>
                     </ion-row>
                 </ion-label>
             </ion-item>
diff --git a/src/addons/messages/pages/discussion/discussion.html b/src/addons/messages/pages/discussion/discussion.html
index 68417d729..fc9dd7c3c 100644
--- a/src/addons/messages/pages/discussion/discussion.html
+++ b/src/addons/messages/pages/discussion/discussion.html
@@ -157,7 +157,7 @@
             <ion-button expand="block" class="ion-text-wrap ion-margin-bottom" (click)="confirmContactRequest()">
                 {{ 'addon.messages.acceptandaddcontact' | translate }}
             </ion-button>
-            <ion-button expand="block" class="ion-text-wrap ion-margin-bottom" color="light" (click)="declineContactRequest()">
+            <ion-button expand="block" class="ion-text-wrap ion-margin-bottom" fill="outline" (click)="declineContactRequest()">
                 {{ 'addon.messages.decline' | translate }}
             </ion-button>
         </div>
diff --git a/src/addons/messages/pages/search/search.html b/src/addons/messages/pages/search/search.html
index 6c5d98f08..133b5c5ae 100644
--- a/src/addons/messages/pages/search/search.html
+++ b/src/addons/messages/pages/search/search.html
@@ -68,7 +68,7 @@
         <!-- Load more button for contacts and non-contacts -->
         <ng-container *ngIf="item.type != 'messages'">
             <div class="ion-padding-horizontal" *ngIf="item.canLoadMore && !item.loadingMore">
-                <ion-button expand="block" color="light" (click)="search(query, item.type)">
+                <ion-button expand="block" fill="outline" (click)="search(query, item.type)">
                     {{ 'core.loadmore' | translate }}
                 </ion-button>
             </div>
diff --git a/src/addons/mod/chat/pages/chat/chat.html b/src/addons/mod/chat/pages/chat/chat.html
index 558eb4165..0fc26f280 100644
--- a/src/addons/mod/chat/pages/chat/chat.html
+++ b/src/addons/mod/chat/pages/chat/chat.html
@@ -119,7 +119,7 @@
             (onSubmit)="sendMessage($event)" [placeholder]="'addon.messages.newmessage' | translate">
         </core-send-message-form>
 
-        <ion-button *ngIf="isOnline && !polling && loaded" (click)="reconnect()" expand="block" color="light">
+        <ion-button *ngIf="isOnline && !polling && loaded" (click)="reconnect()" expand="block" fill="outline">
             {{ 'core.login.reconnect' | translate }}
         </ion-button>
     </ion-toolbar>
diff --git a/src/addons/mod/forum/components/post/post.html b/src/addons/mod/forum/components/post/post.html
index 4cbc6f849..a5e99970d 100644
--- a/src/addons/mod/forum/components/post/post.html
+++ b/src/addons/mod/forum/components/post/post.html
@@ -134,15 +134,15 @@
         </ng-container>
         <ion-grid>
             <ion-row>
+                <ion-col>
+                    <ion-button expand="block" fill="outline" (click)="cancel()">{{ 'core.cancel' | translate }}</ion-button>
+                </ion-col>
                 <ion-col>
                     <ion-button expand="block" (click)="send()" [disabled]="formData.subject == '' || formData.message == null">
                         <span *ngIf="formData.isEditing">{{ 'core.savechanges' | translate }}</span>
                         <span *ngIf="!formData.isEditing">{{ 'addon.mod_forum.posttoforum' | translate }}</span>
                     </ion-button>
                 </ion-col>
-                <ion-col>
-                    <ion-button expand="block" color="light" (click)="cancel()">{{ 'core.cancel' | translate }}</ion-button>
-                </ion-col>
             </ion-row>
         </ion-grid>
     </form>
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 748509102..efe7b9dc0 100644
--- a/src/addons/mod/forum/pages/new-discussion/new-discussion.html
+++ b/src/addons/mod/forum/pages/new-discussion/new-discussion.html
@@ -69,15 +69,15 @@
             <ion-item>
                 <ion-label>
                     <ion-row>
+                        <ion-col *ngIf="hasOffline">
+                            <ion-button expand="block" fill="outline" (click)="discard()">{{ 'core.discard' | translate }}</ion-button>
+                        </ion-col>
                         <ion-col>
                             <ion-button expand="block" [disabled]="newDiscussion.subject == '' || newDiscussion.message == null"
                                 (click)="add()">
                                 {{ 'addon.mod_forum.posttoforum' | translate }}
                             </ion-button>
                         </ion-col>
-                        <ion-col *ngIf="hasOffline">
-                            <ion-button expand="block" color="light" (click)="discard()">{{ 'core.discard' | translate }}</ion-button>
-                        </ion-col>
                     </ion-row>
                 </ion-label>
             </ion-item>
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 5c4a27e7a..872b6577a 100644
--- a/src/addons/mod/lesson/pages/user-retake/user-retake.html
+++ b/src/addons/mod/lesson/pages/user-retake/user-retake.html
@@ -113,7 +113,7 @@
                                         <!-- Content page, display a button and the content. -->
                                         <ion-row>
                                             <ion-col>
-                                                <ion-button expand="block" class="ion-text-wrap" color="light" [disabled]="true">
+                                                <ion-button expand="block" class="ion-text-wrap" fill="outline" [disabled]="true">
                                                     {{ answer[0].buttonText }}
                                                 </ion-button>
                                             </ion-col>
diff --git a/src/addons/mod/quiz/pages/review/review.html b/src/addons/mod/quiz/pages/review/review.html
index a83b93d8d..068dc2a6f 100644
--- a/src/addons/mod/quiz/pages/review/review.html
+++ b/src/addons/mod/quiz/pages/review/review.html
@@ -125,13 +125,13 @@
     <ion-grid>
         <ion-row class="ion-align-items-center">
             <ion-col class="ion-text-start">
-                <ion-button color="light" *ngIf="previousPage >= 0" (click)="changePage(previousPage)"
+                <ion-button fill="outline" *ngIf="previousPage >= 0" (click)="changePage(previousPage)"
                     [title]="'core.previous' | translate">
                     <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
                 </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 *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/notifications/pages/list/list.html b/src/addons/notifications/pages/list/list.html
index 64bfcc028..0630a22d2 100644
--- a/src/addons/notifications/pages/list/list.html
+++ b/src/addons/notifications/pages/list/list.html
@@ -17,7 +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()" fill="outline">
                 <ion-icon slot="start" name="fas-check" aria-hidden="true" *ngIf="!loadingMarkAllNotificationsAsRead"></ion-icon>
                 <ion-spinner slot="start" [attr.aria-label]="'core.loading' | translate" *ngIf="loadingMarkAllNotificationsAsRead">
                 </ion-spinner>
diff --git a/src/addons/qtype/multichoice/component/addon-qtype-multichoice.html b/src/addons/qtype/multichoice/component/addon-qtype-multichoice.html
index b94cebadc..da99394bc 100644
--- a/src/addons/qtype/multichoice/component/addon-qtype-multichoice.html
+++ b/src/addons/qtype/multichoice/component/addon-qtype-multichoice.html
@@ -62,7 +62,7 @@
             <ion-icon *ngIf="option.isCorrect === 0" class="core-correct-icon" name="fas-times" color="danger"
                 [attr.aria-label]="'core.question.incorrect' | translate"></ion-icon>
         </ion-item>
-        <ion-button *ngIf="!multiQuestion.disabled" class="ion-text-wrap ion-margin" expand="full" color="light"
+        <ion-button *ngIf="!multiQuestion.disabled" class="ion-text-wrap ion-margin-top" expand="block" fill="outline"
             [disabled]="!multiQuestion.singleChoiceModel" (click)="clear()" type="reset">
             {{ 'addon.mod_quiz.clearchoice' | translate }}
         </ion-button>
diff --git a/src/core/components/infinite-loading/core-infinite-loading.html b/src/core/components/infinite-loading/core-infinite-loading.html
index 333c14f76..8cb69a24d 100644
--- a/src/core/components/infinite-loading/core-infinite-loading.html
+++ b/src/core/components/infinite-loading/core-infinite-loading.html
@@ -1,9 +1,9 @@
 <ng-container *ngIf="!loadingMore && position != 'top'">
     <div *ngIf="enabled || error" class="ion-padding-horizontal" #bottombutton>
-        <ion-button *ngIf="!error" expand="block" (click)="loadMore()" color="light">
+        <ion-button *ngIf="!error" expand="block" (click)="loadMore()" fill="outline">
             {{ 'core.loadmore' | translate }}
         </ion-button>
-        <ion-button *ngIf="error" expand="block" (click)="loadMore()" color="light">
+        <ion-button *ngIf="error" expand="block" (click)="loadMore()" fill="outline">
             {{ 'core.tryagain' | translate }}
         </ion-button>
     </div>
@@ -15,10 +15,10 @@
 
 <ng-container *ngIf="!loadingMore && position == 'top'">
     <div *ngIf="enabled || error" class="ion-padding-horizontal" #topbutton>
-        <ion-button *ngIf="!error" expand="block" (click)="loadMore()" color="light">
+        <ion-button *ngIf="!error" expand="block" (click)="loadMore()" fill="outline">
             {{ 'core.loadmore' | translate }}
         </ion-button>
-        <ion-button *ngIf="error" expand="block" (click)="loadMore()" color="light">
+        <ion-button *ngIf="error" expand="block" (click)="loadMore()" fill="outline">
             {{ 'core.tryagain' | translate }}
         </ion-button>
     </div>
diff --git a/src/core/components/recaptcha/core-recaptcha.html b/src/core/components/recaptcha/core-recaptcha.html
index d332e8958..102ddefc2 100644
--- a/src/core/components/recaptcha/core-recaptcha.html
+++ b/src/core/components/recaptcha/core-recaptcha.html
@@ -1,7 +1,7 @@
 <!-- ReCAPTCHA V2 -->
 <div *ngIf="publicKey && siteUrl && model">
     <!-- A button to open the recaptcha modal. -->
-    <ion-button expand="block" color="light" class="ion-margin" *ngIf="!model[modelValueName]" (click)="answerRecaptcha()">
+    <ion-button expand="block" fill="outline" class="ion-margin" *ngIf="!model[modelValueName]" (click)="answerRecaptcha()">
         {{ 'core.opensecurityquestion' | translate }}
     </ion-button>
     <ion-item *ngIf="model[modelValueName]">
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 cd000ea2b..403c74200 100644
--- a/src/core/features/login/components/site-onboarding/site-onboarding.html
+++ b/src/core/features/login/components/site-onboarding/site-onboarding.html
@@ -24,10 +24,10 @@
         </h3>
 
         <div *ngIf="step == 0" class="core-login-onboarding-step">
-            <ion-button expand="block" (click)="skip($event)" class="ion-margin-bottom" color="light">
+            <ion-button expand="block" (click)="skip($event)" class="ion-margin-bottom" fill="outline">
                 {{'core.login.onboardingimalearner' | translate}}
             </ion-button>
-            <ion-button expand="block" (click)="next($event)" class="ion-margin-bottom" color="light">
+            <ion-button expand="block" (click)="next($event)" class="ion-margin-bottom" fill="outline">
                 {{'core.login.onboardingimaneducator' | translate}}
             </ion-button>
         </div>
@@ -36,7 +36,7 @@
             <p class="core-login-onboarding-text">
                 {{ 'core.login.onboardingtoconnect' | translate }}
             </p>
-            <ion-button expand="block" (click)="skip($event)" class="ion-margin-bottom" color="light">
+            <ion-button expand="block" (click)="skip($event)" class="ion-margin-bottom" fill="outline">
                 {{ 'core.login.onboardingialreadyhaveasite' | translate }}
             </ion-button>
             <ion-button expand="block" (click)="next($event)" class="ion-margin-bottom">
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 9d89d49e4..b36619a1b 100644
--- a/src/core/features/login/pages/change-password/change-password.html
+++ b/src/core/features/login/pages/change-password/change-password.html
@@ -43,7 +43,7 @@
                 <p>{{ 'core.login.changepasswordlogoutinstructions' | translate }}</p>
             </ion-label>
         </ion-item>
-        <ion-button class="ion-text-wrap ion-margin" expand="block" color="light" (click)="logout()">
+        <ion-button class="ion-text-wrap ion-margin" expand="block" fill="outline" (click)="logout()">
             {{ logoutLabel | translate }}
         </ion-button>
     </ion-list>
diff --git a/src/core/features/login/pages/credentials/credentials.html b/src/core/features/login/pages/credentials/credentials.html
index b9a85c9d3..2335e3cca 100644
--- a/src/core/features/login/pages/credentials/credentials.html
+++ b/src/core/features/login/pages/credentials/credentials.html
@@ -54,7 +54,7 @@
 
             <ng-container *ngIf="showScanQR">
                 <div class="ion-text-center ion-padding">{{ 'core.login.or' | translate }}</div>
-                <ion-button expand="block" color="light" class="ion-margin" (click)="showInstructionsAndScanQR()">
+                <ion-button expand="block" fill="outline" class="ion-margin" (click)="showInstructionsAndScanQR()">
                     <ion-icon slot="start" name="fas-qrcode" aria-hidden="true"></ion-icon>
                     {{ 'core.scanqr' | translate }}
                 </ion-button>
@@ -93,7 +93,7 @@
                     </p>
                 </ion-label>
             </ion-item>
-            <ion-button expand="block" class="ion-margin ion-text-wrap" color="light" (click)="openEmailSignup()">
+            <ion-button expand="block" class="ion-margin ion-text-wrap" fill="outline" (click)="openEmailSignup()">
                 {{ 'core.login.startsignup' | translate }}
             </ion-button>
         </ion-list>
diff --git a/src/core/features/login/pages/reconnect/reconnect.html b/src/core/features/login/pages/reconnect/reconnect.html
index 61bf8066f..73c657428 100644
--- a/src/core/features/login/pages/reconnect/reconnect.html
+++ b/src/core/features/login/pages/reconnect/reconnect.html
@@ -53,7 +53,7 @@
         <ion-grid class="ion-padding">
             <ion-row>
                 <ion-col>
-                    <ion-button expand="block" color="light" (click)="cancel($event)">
+                    <ion-button expand="block" fill="outline" (click)="cancel($event)">
                         {{ 'core.login.cancel' | translate }}
                     </ion-button>
                 </ion-col>
@@ -67,7 +67,7 @@
 
         <ng-container *ngIf="showScanQR">
             <div class="ion-text-center ion-padding">{{ 'core.login.or' | translate }}</div>
-            <ion-button expand="block" color="light" class="ion-margin" (click)="showInstructionsAndScanQR()">
+            <ion-button expand="block" fill="outline" class="ion-margin" (click)="showInstructionsAndScanQR()">
                 <ion-icon slot="start" name="fas-qrcode" aria-hidden="true"></ion-icon>
                 {{ 'core.scanqr' | translate }}
             </ion-button>
@@ -96,7 +96,7 @@
 
     <!-- If OAuth, display cancel button since the form isn't displayed. -->
     <ion-list *ngIf="isOAuth">
-        <ion-button expand="block" class="ion-margin" color="light" (click)="cancel($event)">
+        <ion-button expand="block" class="ion-margin" fill="outline" (click)="cancel($event)">
             {{ 'core.login.cancel' | translate }}
         </ion-button>
     </ion-list>
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 af2cd7267..dbef122e6 100644
--- a/src/core/features/login/pages/site-policy/site-policy.html
+++ b/src/core/features/login/pages/site-policy/site-policy.html
@@ -30,7 +30,7 @@
             <ion-button class="ion-text-wrap ion-margin-horizontal" expand="block" (click)="accept()">
                 {{ 'core.login.policyacceptmandatory' | translate }}
             </ion-button>
-            <ion-button class="ion-text-wrap ion-margin-horizontal ion-margin-bottom" expand="block" color="light" (click)="cancel()">
+            <ion-button class="ion-text-wrap ion-margin-horizontal ion-margin-bottom" expand="block" fill="outline" (click)="cancel()">
                 {{ 'core.login.cancel' | translate }}
             </ion-button>
         </ion-list>
diff --git a/src/core/features/login/pages/site/site.html b/src/core/features/login/pages/site/site.html
index 5adb6101f..70254c58a 100644
--- a/src/core/features/login/pages/site/site.html
+++ b/src/core/features/login/pages/site/site.html
@@ -101,7 +101,7 @@
 
     <ng-container *ngIf="showScanQR && !hasSites && !enteredSiteUrl">
         <div class="ion-text-center ion-padding ion-margin-top">{{ 'core.login.or' | translate }}</div>
-        <ion-button expand="block" color="light" class="ion-margin" (click)="showInstructionsAndScanQR()" aria-haspopup="dialog">
+        <ion-button expand="block" fill="outline" class="ion-margin" (click)="showInstructionsAndScanQR()" aria-haspopup="dialog">
             <ion-icon slot="start" name="fas-qrcode" aria-hidden="true"></ion-icon>
             {{ 'core.scanqr' | translate }}
         </ion-button>
diff --git a/src/core/features/question/components/question/core-question.html b/src/core/features/question/components/question/core-question.html
index fb523c3e3..994ba6a4d 100644
--- a/src/core/features/question/components/question/core-question.html
+++ b/src/core/features/question/components/question/core-question.html
@@ -19,7 +19,7 @@
 </ion-item>
 
 <!-- Question behaviour buttons. -->
-<ion-button *ngFor="let button of question?.behaviourButtons" class="ion-margin ion-text-wrap" expand="block"
+<ion-button *ngFor="let button of question?.behaviourButtons" class="ion-margin-vertical ion-text-wrap" expand="block"
     (click)="buttonClicked.emit(button)" [disabled]="button.disabled">
     {{ button.value }}
 </ion-button>
diff --git a/src/core/features/viewer/components/text/text.html b/src/core/features/viewer/components/text/text.html
index 851bf8f03..6dedd7b76 100644
--- a/src/core/features/viewer/components/text/text.html
+++ b/src/core/features/viewer/components/text/text.html
@@ -20,7 +20,7 @@
     </ion-card>
 </ion-content>
 <ion-footer *ngIf="displayCopyButton">
-    <ion-button expand="block" color="light" (click)="copyText()">
+    <ion-button expand="block" fill="outline" (click)="copyText()">
         <ion-icon name="fas-copy" aria-hidden="true" slot="start"></ion-icon>
         {{ 'core.copytoclipboard' | translate }}
     </ion-button>

From 3a11cdbfe2898f5da44fc7b6bf1a337f61b3d8cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 25 Feb 2022 12:31:30 +0100
Subject: [PATCH 08/10] MOBILE-3149 module: Add collapsible footer buttons
 inside activities

---
 scripts/langindex.json                        |  2 -
 src/addons/mod/data/pages/entry/entry.html    | 24 ++---
 src/addons/mod/feedback/lang.json             |  2 -
 src/addons/mod/feedback/pages/form/form.html  | 82 ++++++++---------
 src/addons/mod/feedback/pages/form/form.ts    |  6 +-
 .../mod/lesson/pages/player/player.html       | 29 +++---
 .../mod/lesson/services/lesson-helper.ts      |  2 +-
 .../navigation-modal/navigation-modal.html    | 32 ++-----
 .../navigation-modal/navigation-modal.ts      | 16 ----
 .../mod/quiz/pages/attempt/attempt.html       | 14 ++-
 src/addons/mod/quiz/pages/player/player.html  | 90 +++++++------------
 .../mod/quiz/pages/player/player.page.ts      |  6 +-
 src/addons/mod/quiz/pages/review/review.html  | 46 +++++-----
 .../mod/quiz/pages/review/review.page.ts      | 15 +---
 .../qtype/essay/services/handlers/essay.ts    |  2 +-
 src/core/components/timer/timer.scss          |  1 +
 src/core/features/course/lang.json            |  4 +-
 17 files changed, 153 insertions(+), 220 deletions(-)

diff --git a/scripts/langindex.json b/scripts/langindex.json
index 11f362ee4..081689da2 100644
--- a/scripts/langindex.json
+++ b/scripts/langindex.json
@@ -576,7 +576,6 @@
   "addon.mod_feedback.minimal": "feedback",
   "addon.mod_feedback.mode": "feedback",
   "addon.mod_feedback.modulenameplural": "feedback",
-  "addon.mod_feedback.next_page": "feedback",
   "addon.mod_feedback.non_anonymous": "feedback",
   "addon.mod_feedback.non_anonymous_entries": "feedback",
   "addon.mod_feedback.non_respondents_students": "feedback",
@@ -586,7 +585,6 @@
   "addon.mod_feedback.overview": "feedback",
   "addon.mod_feedback.page_after_submit": "feedback",
   "addon.mod_feedback.preview": "moodle",
-  "addon.mod_feedback.previous_page": "feedback",
   "addon.mod_feedback.questions": "feedback",
   "addon.mod_feedback.questionscountdescription": "local_moodlemobileapp",
   "addon.mod_feedback.response_nr": "feedback",
diff --git a/src/addons/mod/data/pages/entry/entry.html b/src/addons/mod/data/pages/entry/entry.html
index 7ecfe25c5..e66b33145 100644
--- a/src/addons/mod/data/pages/entry/entry.html
+++ b/src/addons/mod/data/pages/entry/entry.html
@@ -60,21 +60,23 @@
             (onLoading)="setLoadingComments($event)" [showItem]="true">
         </core-comments>
 
-        <ion-grid *ngIf="hasPrevious || hasNext">
-            <ion-row class="ion-align-items-center">
-                <ion-col *ngIf="hasPrevious">
-                    <ion-button expand="block" fill="outline" (click)="gotoEntry(offset! -1)">
-                        <ion-icon name="fas-chevron-left" slot="start" aria-hidden="true"></ion-icon>
-                        {{ 'core.previous' | translate }}
+        <div collapsible-footer *ngIf="entryLoaded && hasPrevious || hasNext" slot="fixed">
+            <ion-row class="ion-justify-content-between ion-align-items-center ion-no-padding ion-wrap">
+                <ion-col class="ion-text-start ion-no-padding core-navigation-arrow" size="auto">
+                    <ion-button [disabled]="!hasPrevious" fill="clear" color="dark" [attr.aria-label]="'core.previous' | translate"
+                        (click)="gotoEntry(offset! -1)">
+                        <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
                     </ion-button>
                 </ion-col>
-                <ion-col *ngIf="hasNext">
-                    <ion-button expand="block" (click)="gotoEntry(offset! + 1)">
-                        {{ 'core.next' | translate }}
-                        <ion-icon name="fas-chevron-right" slot="end" aria-hidden="true"></ion-icon>
+                <ion-col class="ion-text-center">
+                </ion-col>
+                <ion-col class="ion-text-end ion-no-padding core-navigation-arrow" size="auto">
+                    <ion-button [disabled]="!hasNext" fill="clear" color="dark" [attr.aria-label]=" 'core.next' | translate"
+                        (click)="gotoEntry(offset! + 1)">
+                        <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
                     </ion-button>
                 </ion-col>
             </ion-row>
-        </ion-grid>
+        </div>
     </core-loading>
 </ion-content>
diff --git a/src/addons/mod/feedback/lang.json b/src/addons/mod/feedback/lang.json
index 903a127e3..bfab7c6e0 100644
--- a/src/addons/mod/feedback/lang.json
+++ b/src/addons/mod/feedback/lang.json
@@ -18,7 +18,6 @@
     "minimal": "Minimum",
     "mode": "Mode",
     "modulenameplural": "Feedback",
-    "next_page": "Next page",
     "non_anonymous": "User's name will be logged and shown with answers",
     "non_anonymous_entries": "Non anonymous entries ({{$a}})",
     "non_respondents_students": "Non-respondent students ({{$a}})",
@@ -28,7 +27,6 @@
     "overview": "Overview",
     "page_after_submit": "Completion message",
     "preview": "Preview",
-    "previous_page": "Previous page",
     "questions": "Questions",
     "questionscountdescription": "There are {{count}} questions.",
     "response_nr": "Response number",
diff --git a/src/addons/mod/feedback/pages/form/form.html b/src/addons/mod/feedback/pages/form/form.html
index 4ed5b620f..e2a2a4079 100644
--- a/src/addons/mod/feedback/pages/form/form.html
+++ b/src/addons/mod/feedback/pages/form/form.html
@@ -109,32 +109,31 @@
                         </ng-container>
                     </ng-container>
                 </ng-container>
-                <ion-grid *ngIf="!preview">
-                    <ion-row class="ion-align-items-center">
-                        <ion-col *ngIf="hasPrevPage">
-                            <ion-button expand="block" fill="outline" (click)="gotoPage(true)" class="ion-text-wrap">
-                                <ion-icon name="fas-chevron-left" slot="start" aria-hidden="true"></ion-icon>
-                                {{ 'addon.mod_feedback.previous_page' | translate }}
-                            </ion-button>
-                        </ion-col>
-                        <ion-col *ngIf="hasNextPage">
-                            <ion-button expand="block" (click)="gotoPage(false)" class="ion-text-wrap">
-                                {{ 'addon.mod_feedback.next_page' | translate }}
-                                <ion-icon name="fas-chevron-right" slot="end" aria-hidden="true"></ion-icon>
-                            </ion-button>
-                        </ion-col>
-                        <ion-col *ngIf="!hasNextPage">
-                            <ion-button expand="block" (click)="gotoPage(false)" class="ion-text-wrap">
-                                {{ 'addon.mod_feedback.save_entries' | translate }}
-                            </ion-button>
-                        </ion-col>
-                    </ion-row>
-                </ion-grid>
+
+                <ion-row class="ion-align-items-center" *ngIf="!preview">
+                    <ion-col *ngIf="hasPrevPage">
+                        <ion-button expand="block" fill="outline" (click)="gotoPage(true)" class="ion-text-wrap">
+                            <ion-icon name="fas-chevron-left" slot="start" aria-hidden="true"></ion-icon>
+                            {{ 'core.previous' | translate }}
+                        </ion-button>
+                    </ion-col>
+                    <ion-col *ngIf="hasNextPage">
+                        <ion-button expand="block" (click)="gotoPage(false)" class="ion-text-wrap">
+                            {{ 'core.next' | translate }}
+                            <ion-icon name="fas-chevron-right" slot="end" aria-hidden="true"></ion-icon>
+                        </ion-button>
+                    </ion-col>
+                    <ion-col *ngIf="!hasNextPage">
+                        <ion-button expand="block" (click)="gotoPage(false)" class="ion-text-wrap">
+                            {{ 'core.submit' | translate }}
+                        </ion-button>
+                    </ion-col>
+                </ion-row>
             </ion-list>
         </ng-container>
 
         <ion-card class="core-success-card" *ngIf="completed">
-            <ion-item>
+            <ion-item class="ion-text-wrap">
                 <ion-icon name="fas-check" slot="start" aria-hidden="true"></ion-icon>
                 <ion-label>
                     <p *ngIf="!completionPageContents && !completedOffline">
@@ -143,32 +142,25 @@
                     <p *ngIf="!completionPageContents && completedOffline">
                         {{ 'addon.mod_feedback.feedback_submitted_offline' | translate }}
                     </p>
-                    <p *ngIf="completionPageContents">
-                        <core-format-text [component]="component" componentId="componentId" [text]="completionPageContents"
-                            contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId">
-                        </core-format-text>
-                    </p>
+                    <core-format-text *ngIf="completionPageContents" [component]="component" componentId="componentId"
+                        [text]="completionPageContents" contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId">
+                    </core-format-text>
                 </ion-label>
             </ion-item>
         </ion-card>
 
-        <ion-card *ngIf="completed && (access!.canviewanalysis || hasNextPage)">
-            <ion-grid>
-                <ion-row class="ion-align-items-center">
-                    <ion-col *ngIf="access!.canviewanalysis">
-                        <ion-button expand="block" fill="outline" (click)="showAnalysis()" class="ion-text-wrap">
-                            <ion-icon name="fas-chart-bar" slot="start" aria-hidden="true"></ion-icon>
-                            {{ 'addon.mod_feedback.completed_feedbacks' | translate }}
-                        </ion-button>
-                    </ion-col>
-                    <ion-col *ngIf="hasNextPage">
-                        <ion-button expand="block" (click)="continue()" class="ion-text-wrap">
-                            {{ 'core.continue' | translate }}
-                            <ion-icon name="fas-chevron-right" slot="end" aria-hidden="true"></ion-icon>
-                        </ion-button>
-                    </ion-col>
-                </ion-row>
-            </ion-grid>
-        </ion-card>
+        <div collapsible-footer *ngIf="feedbackLoaded && completed" slot="fixed">
+            <div class="list-item-limited-width">
+                <ion-button expand="block" fill="outline" (click)="showAnalysis()" class="ion-text-wrap ion-margin"
+                    *ngIf="access!.canviewanalysis">
+                    <ion-icon name="fas-chart-bar" slot="start" aria-hidden="true"></ion-icon>
+                    {{ 'addon.mod_feedback.completed_feedbacks' | translate }}
+                </ion-button>
+                <ion-button expand="block" (click)="continue()" class="ion-text-wrap ion-margin">
+                    <ng-container *ngIf="!siteAfterSubmit">{{ 'core.continue' | translate }}</ng-container>
+                    <ng-container *ngIf="siteAfterSubmit">{{ 'core.course.gotonextactivity' | translate }}</ng-container>
+                </ion-button>
+            </div>
+        </div>
     </core-loading>
 </ion-content>
diff --git a/src/addons/mod/feedback/pages/form/form.ts b/src/addons/mod/feedback/pages/form/form.ts
index 5807d7e3e..8134221a6 100644
--- a/src/addons/mod/feedback/pages/form/form.ts
+++ b/src/addons/mod/feedback/pages/form/form.ts
@@ -16,7 +16,7 @@ import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { CoreSite } from '@classes/site';
 import { CoreContentLinksHelper } from '@features/contentlinks/services/contentlinks-helper';
 import { CoreCourse, CoreCourseCommonModWSOptions } from '@features/course/services/course';
-import { CoreCourseHelper, CoreCourseModuleData } from '@features/course/services/course-helper';
+import { CoreCourseModuleData } from '@features/course/services/course-helper';
 import { CanLeave } from '@guards/can-leave';
 import { IonContent } from '@ionic/angular';
 import { CoreApp } from '@services/app';
@@ -53,7 +53,6 @@ export class AddonModFeedbackFormPage implements OnInit, OnDestroy, CanLeave {
 
     protected module?: CoreCourseModuleData;
     protected currentPage?: number;
-    protected siteAfterSubmit?: string;
     protected onlineObserver: Subscription;
     protected originalData?: Record<string, AddonModFeedbackResponseValue>;
     protected currentSite: CoreSite;
@@ -75,6 +74,7 @@ export class AddonModFeedbackFormPage implements OnInit, OnDestroy, CanLeave {
     hasNextPage = false;
     completed = false;
     completedOffline = false;
+    siteAfterSubmit?: string;
 
     constructor() {
         this.currentSite = CoreSites.getRequiredCurrentSite();
@@ -409,7 +409,7 @@ export class AddonModFeedbackFormPage implements OnInit, OnDestroy, CanLeave {
      */
     async continue(): Promise<void> {
         if (!this.siteAfterSubmit) {
-            return CoreCourseHelper.getAndOpenCourse(this.courseId, {}, this.currentSite.getId());
+            return CoreNavigator.back();
         }
 
         const modal = await CoreDomUtils.showModalLoading();
diff --git a/src/addons/mod/lesson/pages/player/player.html b/src/addons/mod/lesson/pages/player/player.html
index 3d0739c2f..adb7dd441 100644
--- a/src/addons/mod/lesson/pages/player/player.html
+++ b/src/addons/mod/lesson/pages/player/player.html
@@ -21,7 +21,7 @@
     <core-loading [hideUntil]="loaded">
         <!-- Info messages. Only show the first one. -->
         <ion-card class="core-info-card" *ngIf="lesson && messages?.length">
-            <ion-item>
+            <ion-item class="ion-text-wrap">
                 <ion-icon name="fas-info-circle" slot="start" aria-hidden="true"></ion-icon>
                 <ion-label>{{ messages[0].message }}</ion-label>
             </ion-item>
@@ -86,13 +86,12 @@
                         <!-- Essay. -->
                         <ng-container *ngSwitchCase="'essay'">
                             <ion-item *ngIf="question.textarea">
-                                <ion-label>
-                                    <core-rich-text-editor placeholder="{{ 'addon.mod_lesson.youranswer' | translate }}"
-                                        [control]="question.control" [component]="component" [componentId]="lesson?.coursemodule"
-                                        [autoSave]="true" contextLevel="module" [contextInstanceId]="lesson?.coursemodule"
-                                        elementId="answer_editor">
-                                    </core-rich-text-editor>
-                                </ion-label>
+                                <ion-label class="sr-only">{{ 'core.content' | translate }}</ion-label>
+                                <core-rich-text-editor placeholder="{{ 'addon.mod_lesson.youranswer' | translate }}"
+                                    [control]="question.control" [component]="component" [componentId]="lesson?.coursemodule"
+                                    [autoSave]="true" contextLevel="module" [contextInstanceId]="lesson?.coursemodule"
+                                    elementId="answer_editor">
+                                </core-rich-text-editor>
                             </ion-item>
                             <ion-item class="ion-text-wrap" *ngIf="!question.textarea && question.useranswer">
                                 <ion-label>
@@ -185,12 +184,12 @@
                         </core-progress-bar>
                     </ion-label>
                 </ion-item>
-                <div class="core-info-card" *ngIf="lesson?.progressbar && canManage">
-                    <ion-item>
+                <ion-card class="core-info-card" *ngIf="lesson?.progressbar && canManage">
+                    <ion-item class="ion-text-wrap">
                         <ion-icon name="fas-info-circle" slot="start" aria-hidden="true"></ion-icon>
                         <ion-label>{{ 'addon.mod_lesson.progressbarteacherwarning2' | translate }}</ion-label>
                     </ion-item>
-                </div>
+                </ion-card>
             </ion-list>
 
             <!-- End of lesson reached. -->
@@ -254,8 +253,8 @@
                     <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">
+                <ion-button *ngIf="activityLink && activityLink.formatted" expand="block" fill="outline" [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>
@@ -290,10 +289,10 @@
                     </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" *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"
+                <ion-button expand="block" class="ion-text-wrap ion-margin" fill="outline" *ngFor="let button of processDataButtons"
                     (click)="changePage(button.pageId, true)">
                     {{ button.label | translate }}
                 </ion-button>
diff --git a/src/addons/mod/lesson/services/lesson-helper.ts b/src/addons/mod/lesson/services/lesson-helper.ts
index 669a9bd5b..1ec765591 100644
--- a/src/addons/mod/lesson/services/lesson-helper.ts
+++ b/src/addons/mod/lesson/services/lesson-helper.ts
@@ -557,7 +557,7 @@ export class AddonModLessonHelperProvider {
 
             // Add some HTML to the answer if needed.
             if (textarea) {
-                data[textarea.name] = CoreTextUtils.formatHtmlLines(<string> data[textarea.name]);
+                data[textarea.name] = CoreTextUtils.formatHtmlLines(<string> data[textarea.name] || '');
             }
         } else if (question.template == 'multichoice' && (<AddonModLessonMultichoiceQuestion> question).multi) {
             // Only send the options with value set to true.
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 9899cb608..239b919fa 100644
--- a/src/addons/mod/quiz/components/navigation-modal/navigation-modal.html
+++ b/src/addons/mod/quiz/components/navigation-modal/navigation-modal.html
@@ -13,19 +13,6 @@
 <ion-content class="addon-mod_quiz-navigation-modal">
     <nav>
         <ion-list>
-            <!-- In player, show button to finish attempt. -->
-            <ion-item button class="ion-text-wrap" *ngIf="!isReview" (click)="loadPage(-1)" detail="true">
-                <ion-label>{{ 'addon.mod_quiz.finishattemptdots' | translate }}</ion-label>
-            </ion-item>
-
-            <!-- In review we can toggle between all questions in same page or one page at a time. -->
-            <ion-item button class="ion-text-wrap" *ngIf="isReview && numPages > 1" (click)="switchMode()" detail="true">
-                <ion-label>
-                    <span *ngIf="!showAll">{{ 'addon.mod_quiz.showall' | translate }}</span>
-                    <span *ngIf="showAll">{{ 'addon.mod_quiz.showeachpage' | translate }}</span>
-                </ion-label>
-            </ion-item>
-
             <ion-item button class="ion-text-wrap {{question.stateClass}}" *ngFor="let question of navigation"
                 [attr.aria-current]="!summaryShown && currentPage == question.page ? 'page' : 'false'"
                 (click)="loadPage(question.page, question.slot)" detail="false">
@@ -50,19 +37,12 @@
                     slot="end">
                 </ion-icon>
             </ion-item>
-
-            <!-- In player, show button to finish attempt. -->
-            <ion-item button class="ion-text-wrap" *ngIf="!isReview" (click)="loadPage(-1)" detail="true">
-                <ion-label>{{ 'addon.mod_quiz.finishattemptdots' | translate }}</ion-label>
-            </ion-item>
-
-            <!-- In review we can toggle between all questions in same page or one page at a time. -->
-            <ion-item button class="ion-text-wrap" *ngIf="isReview && numPages > 1" (click)="switchMode()" detail="true">
-                <ion-label>
-                    <span *ngIf="!showAll">{{ 'addon.mod_quiz.showall' | translate }}</span>
-                    <span *ngIf="showAll">{{ 'addon.mod_quiz.showeachpage' | translate }}</span>
-                </ion-label>
-            </ion-item>
         </ion-list>
     </nav>
 </ion-content>
+<ion-footer *ngIf="!isReview">
+    <!-- In player, show button to finish attempt. -->
+    <ion-button class="ion-text-wrap ion-margin" expand="block" (click)="loadPage(-1)">
+        {{ 'addon.mod_quiz.finishattemptdots' | translate }}
+    </ion-button>
+</ion-footer>
diff --git a/src/addons/mod/quiz/components/navigation-modal/navigation-modal.ts b/src/addons/mod/quiz/components/navigation-modal/navigation-modal.ts
index 92c958c0a..93fb6848c 100644
--- a/src/addons/mod/quiz/components/navigation-modal/navigation-modal.ts
+++ b/src/addons/mod/quiz/components/navigation-modal/navigation-modal.ts
@@ -26,15 +26,10 @@ import { ModalController } from '@singletons';
 })
 export class AddonModQuizNavigationModalComponent {
 
-    static readonly CHANGE_PAGE = 1;
-    static readonly SWITCH_MODE = 2;
-
     @Input() navigation?: AddonModQuizNavigationQuestion[]; // Whether the user is reviewing the attempt.
     @Input() summaryShown?: boolean; // Whether summary is currently being shown.
     @Input() currentPage?: number; // Current page.
     @Input() isReview?: boolean; // Whether the user is reviewing the attempt.
-    @Input() numPages = 0; // Num of pages for review mode.
-    @Input() showAll?: boolean; // Whether to show all questions in same page or not for review mode.
 
     /**
      * Close modal.
@@ -51,21 +46,11 @@ export class AddonModQuizNavigationModalComponent {
      */
     loadPage(page: number, slot?: number): void {
         ModalController.dismiss(<AddonModQuizNavigationModalReturn>{
-            action: AddonModQuizNavigationModalComponent.CHANGE_PAGE,
             page,
             slot,
         });
     }
 
-    /**
-     * Switch mode in review.
-     */
-    switchMode(): void {
-        ModalController.dismiss(<AddonModQuizNavigationModalReturn>{
-            action: AddonModQuizNavigationModalComponent.SWITCH_MODE,
-        });
-    }
-
 }
 
 /**
@@ -76,7 +61,6 @@ export type AddonModQuizNavigationQuestion = CoreQuestionQuestionParsed & {
 };
 
 export type AddonModQuizNavigationModalReturn = {
-    action: number;
     page?: number;
     slot?: number;
 };
diff --git a/src/addons/mod/quiz/pages/attempt/attempt.html b/src/addons/mod/quiz/pages/attempt/attempt.html
index 9454e17a9..c6a47f24d 100644
--- a/src/addons/mod/quiz/pages/attempt/attempt.html
+++ b/src/addons/mod/quiz/pages/attempt/attempt.html
@@ -53,15 +53,21 @@
                     </p>
                 </ion-label>
             </ion-item>
-            <ion-button *ngIf="showReviewColumn && attempt.finished" class="ion-margin" expand="block" (click)="reviewAttempt()">
-                <ion-icon name="fas-search" slot="start" aria-hidden="true"></ion-icon>
-                {{ 'addon.mod_quiz.review' | translate }}
-            </ion-button>
+
             <ion-item class="ion-text-wrap core-danger-item" *ngIf="!showReviewColumn">
                 <ion-label>
                     <p>{{ 'addon.mod_quiz.noreviewattempt' | translate }}</p>
                 </ion-label>
             </ion-item>
         </ion-list>
+
+        <div collapsible-footer *ngIf="loaded && attempt && showReviewColumn && attempt.finished" slot="fixed">
+            <div class="list-item-limited-width">
+                <ion-button class="ion-margin ion-text-wrap" expand="block" (click)="reviewAttempt()">
+                    <ion-icon name="fas-search" slot="start" aria-hidden="true"></ion-icon>
+                    {{ 'addon.mod_quiz.review' | translate }}
+                </ion-button>
+            </div>
+        </div>
     </core-loading>
 </ion-content>
diff --git a/src/addons/mod/quiz/pages/player/player.html b/src/addons/mod/quiz/pages/player/player.html
index b234f85ef..089a3ecf9 100644
--- a/src/addons/mod/quiz/pages/player/player.html
+++ b/src/addons/mod/quiz/pages/player/player.html
@@ -28,32 +28,10 @@
             <core-timer [endTime]="endTime" (finished)="timeUp()" [timerText]="'addon.mod_quiz.timeleft' | translate" [align]="'center'">
             </core-timer>
         </ion-title>
-        <ion-buttons slot="end">
-            <ion-button fill="clear" *ngIf="previousPage >= 0" (click)="changePage(previousPage)"
-                [attr.aria-label]="'core.previous' | translate">
-                <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
-            </ion-button>
-            <ion-button *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-buttons>
     </ion-toolbar>
 </ion-header>
 <ion-content>
     <core-loading [hideUntil]="loaded">
-        <!-- Navigation arrows if there's no timer. -->
-        <ion-toolbar *ngIf="!endTime && questions.length && !quizAborted && !showSummary" color="light">
-            <ion-buttons slot="end">
-                <ion-button fill="clear" *ngIf="previousPage >= 0" (click)="changePage(previousPage)"
-                    [attr.aria-label]="'core.previous' | translate">
-                    <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
-                </ion-button>
-                <ion-button *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-buttons>
-        </ion-toolbar>
-
         <!-- Button to start attempting. -->
         <ion-button *ngIf="!attempt" expand="block" class="ion-margin" (click)="start()">
             {{ 'addon.mod_quiz.startattempt' | translate }}
@@ -89,22 +67,23 @@
         </form>
 
         <!-- 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-button expand="block" color="light" (click)="changePage(previousPage)">
-                        <ion-icon name="fas-chevron-left" slot="start" aria-hidden="true"></ion-icon>
-                        {{ 'core.previous' | translate }}
-                    </ion-button>
-                </ion-col>
-                <ion-col *ngIf="nextPage >= -1">
-                    <ion-button expand="block" (click)="changePage(nextPage)">
-                        {{ 'core.next' | translate }}
-                        <ion-icon name="fas-chevron-right" slot="end" aria-hidden="true"></ion-icon>
-                    </ion-button>
-                </ion-col>
-            </ion-row>
-        </ion-grid>
+        <ion-row *ngIf="questions.length && !quizAborted && !showSummary">
+            <ion-col *ngIf="previousPage >= 0">
+                <ion-button expand="block" fill="outline" (click)="changePage(previousPage)" class="ion-text-wrap">
+                    <ion-icon name="fas-chevron-left" slot="start" aria-hidden="true"></ion-icon>
+                    {{ 'core.previous' | translate }}
+                </ion-button>
+            </ion-col>
+            <ion-col *ngIf="nextPage >= -1">
+                <ion-button expand="block" (click)="changePage(nextPage)" class="ion-text-wrap" *ngIf="nextPage > 0">
+                    {{ 'core.next' | translate }}
+                    <ion-icon name="fas-chevron-right" slot="end" aria-hidden="true"></ion-icon>
+                </ion-button>
+                <ion-button expand="block" (click)="changePage(nextPage)" class="ion-text-wrap" *ngIf="nextPage == -1">
+                    {{ 'core.submit' | translate }}
+                </ion-button>
+            </ion-col>
+        </ion-row>
 
         <!-- Summary -->
         <ion-card *ngIf="!quizAborted && showSummary && summaryQuestions.length" class="addon-mod_quiz-table">
@@ -141,11 +120,6 @@
                 </ion-item>
             </ng-container>
 
-            <!-- Button to return to last page seen. -->
-            <ion-button *ngIf="canReturn" expand="block" class="ion-margin" (click)="changePage(attempt!.currentpage!)">
-                {{ 'addon.mod_quiz.returnattempt' | translate }}
-            </ion-button>
-
             <!-- Due date warning. -->
             <ion-item class="ion-text-wrap" *ngIf="dueDateWarning">
                 <ion-label>{{ dueDateWarning }}</ion-label>
@@ -162,17 +136,6 @@
                     <p *ngFor="let message of preventSubmitMessages">{{message}}</p>
                 </ion-label>
             </ion-item>
-
-            <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)">
-                {{ 'addon.mod_quiz.submitallandfinish' | translate }}
-            </ion-button>
         </ion-card>
 
         <!-- Quiz aborted -->
@@ -180,10 +143,25 @@
             <ion-item class="ion-text-wrap">
                 <ion-label>{{ 'addon.mod_quiz.errorparsequestions' | translate }}</ion-label>
             </ion-item>
-            <ion-button expand="block" class="ion-margin" [href]="moduleUrl" core-link [showBrowserWarning]="false">
+            <ion-button *ngIf="canReturn" expand="block" class="ion-margin ion-text-wrap" fill="outline"
+                (click)="changePage(attempt!.currentpage!)">
+                {{ 'addon.mod_quiz.returnattempt' | translate }}
+            </ion-button>
+        </ion-card>
+
+        <div collapsible-footer *ngIf="!quizAborted && showSummary && summaryQuestions.length && loaded" slot="fixed"
+            class="list-item-limited-width">
+            <ion-button *ngIf="preventSubmitMessages.length" expand="block" class="ion-margin ion-text-wrap" [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>
-        </ion-card>
+
+            <!-- Button to submit the quiz. -->
+            <ion-button *ngIf="!attempt!.finishedOffline && !preventSubmitMessages.length" expand="block" class="ion-margin ion-text-wrap"
+                (click)="finishAttempt(true)">
+                {{ 'addon.mod_quiz.submitallandfinish' | translate }}
+            </ion-button>
+        </div>
     </core-loading>
 </ion-content>
diff --git a/src/addons/mod/quiz/pages/player/player.page.ts b/src/addons/mod/quiz/pages/player/player.page.ts
index 16e1a22de..d022c6d5e 100644
--- a/src/addons/mod/quiz/pages/player/player.page.ts
+++ b/src/addons/mod/quiz/pages/player/player.page.ts
@@ -602,9 +602,11 @@ export class AddonModQuizPlayerPage implements OnInit, OnDestroy, CanLeave {
             },
         });
 
-        if (modalData && modalData.action == AddonModQuizNavigationModalComponent.CHANGE_PAGE) {
-            this.changePage(modalData.page!, true, modalData.slot);
+        if (!modalData) {
+            return;
         }
+
+        this.changePage(modalData.page!, true, modalData.slot);
     }
 
     /**
diff --git a/src/addons/mod/quiz/pages/review/review.html b/src/addons/mod/quiz/pages/review/review.html
index 068dc2a6f..38286d18a 100644
--- a/src/addons/mod/quiz/pages/review/review.html
+++ b/src/addons/mod/quiz/pages/review/review.html
@@ -87,8 +87,6 @@
 
         <!-- Questions -->
         <div *ngIf="attempt && questions.length">
-            <!-- Arrows to go to next/previous. -->
-            <ng-container *ngTemplateOutlet="navArrows"></ng-container>
 
             <!-- Questions. -->
             <div *ngFor="let question of questions">
@@ -113,28 +111,30 @@
                     </core-question>
                 </ion-card>
             </div>
+        </div>
 
-            <!-- Arrows to go to next/previous. -->
-            <ng-container *ngTemplateOutlet="navArrows"></ng-container>
+        <div collapsible-footer *ngIf="loaded && numPages > 1" slot="fixed">
+            <ion-row class="ion-justify-content-between ion-align-items-center ion-no-padding ion-wrap">
+                <ion-col class="ion-text-start ion-no-padding core-navigation-arrow" size="auto" *ngIf="!showAll">
+                    <ion-button [disabled]="previousPage < 0" fill="clear" color="dark" [attr.aria-label]="'core.previous' | translate"
+                        (click)="changePage(previousPage)">
+                        <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
+                    </ion-button>
+                </ion-col>
+                <ion-col class="ion-text-center">
+                    <!-- In review we can toggle between all questions in same page or one page at a time. -->
+                    <ion-button class="ion-text-wrap" *ngIf="numPages > 1" (click)="switchMode()" fill="outline">
+                        <span *ngIf="!showAll">{{ 'addon.mod_quiz.showall' | translate }}</span>
+                        <span *ngIf="showAll">{{ 'addon.mod_quiz.showeachpage' | translate }}</span>
+                    </ion-button>
+                </ion-col>
+                <ion-col class="ion-text-end ion-no-padding core-navigation-arrow" size="auto" *ngIf="!showAll">
+                    <ion-button [disabled]="nextPage >= numPages" fill="clear" color="dark" [attr.aria-label]="'core.next' | translate"
+                        (click)="changePage(nextPage)">
+                        <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
+                    </ion-button>
+                </ion-col>
+            </ion-row>
         </div>
     </core-loading>
 </ion-content>
-
-<!-- Arrows to go to next/previous. -->
-<ng-template #navArrows>
-    <ion-grid>
-        <ion-row class="ion-align-items-center">
-            <ion-col class="ion-text-start">
-                <ion-button fill="outline" *ngIf="previousPage >= 0" (click)="changePage(previousPage)"
-                    [title]="'core.previous' | translate">
-                    <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
-                </ion-button>
-            </ion-col>
-            <ion-col class="ion-text-end">
-                <ion-button *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>
-        </ion-row>
-    </ion-grid>
-</ng-template>
diff --git a/src/addons/mod/quiz/pages/review/review.page.ts b/src/addons/mod/quiz/pages/review/review.page.ts
index 07fb1c5cd..04b7bb7a7 100644
--- a/src/addons/mod/quiz/pages/review/review.page.ts
+++ b/src/addons/mod/quiz/pages/review/review.page.ts
@@ -53,7 +53,7 @@ export class AddonModQuizReviewPage implements OnInit {
     attempt?: AddonModQuizAttemptWSData; // The attempt being reviewed.
     component = AddonModQuizProvider.COMPONENT; // Component to link the files to.
     showAll = false; // Whether to view all questions in the same page.
-    numPages?: number; // Number of pages.
+    numPages = 1; // Number of pages.
     showCompleted = false; // Whether to show completed time.
     additionalData?: AddonModQuizWSAdditionalData[]; // Additional data to display for the attempt.
     loaded = false; // Whether data has been loaded.
@@ -112,10 +112,9 @@ export class AddonModQuizReviewPage implements OnInit {
      * Change the current page. If slot is supplied, try to scroll to that question.
      *
      * @param page Page to load. -1 means all questions in same page.
-     * @param fromModal Whether the page was selected using the navigation modal.
      * @param slot Slot of the question to scroll to.
      */
-    async changePage(page: number, fromModal?: boolean, slot?: number): Promise<void> {
+    async changePage(page: number, slot?: number): Promise<void> {
         if (slot !== undefined && (this.attempt!.currentpage == -1 || page == this.currentPage)) {
             // Scrol to a certain question in the current page.
             this.scrollToQuestion(slot);
@@ -183,7 +182,7 @@ export class AddonModQuizReviewPage implements OnInit {
         this.setSummaryCalculatedData(data);
 
         this.questions = data.questions;
-        this.nextPage = page == -1 ? -2 : page + 1;
+        this.nextPage = page + 1;
         this.previousPage = page - 1;
 
         this.questions.forEach((question) => {
@@ -341,8 +340,6 @@ export class AddonModQuizReviewPage implements OnInit {
                 summaryShown: false,
                 currentPage: this.attempt?.currentpage,
                 isReview: true,
-                numPages: this.numPages,
-                showAll: this.showAll,
             },
         });
 
@@ -350,11 +347,7 @@ export class AddonModQuizReviewPage implements OnInit {
             return;
         }
 
-        if (modalData.action == AddonModQuizNavigationModalComponent.CHANGE_PAGE) {
-            this.changePage(modalData.page!, true, modalData.slot);
-        } else if (modalData.action == AddonModQuizNavigationModalComponent.SWITCH_MODE) {
-            this.switchMode();
-        }
+        this.changePage(modalData.page!, modalData.slot);
     }
 
 }
diff --git a/src/addons/qtype/essay/services/handlers/essay.ts b/src/addons/qtype/essay/services/handlers/essay.ts
index 707c9737e..94b3912b0 100644
--- a/src/addons/qtype/essay/services/handlers/essay.ts
+++ b/src/addons/qtype/essay/services/handlers/essay.ts
@@ -516,7 +516,7 @@ export class AddonQtypeEssayHandlerService implements CoreQuestionHandler {
 
         if (!isPlainText) {
             // Add some HTML to the text if needed.
-            answers[textarea.name] = CoreTextUtils.formatHtmlLines(<string> answers[textarea.name]);
+            answers[textarea.name] = CoreTextUtils.formatHtmlLines(<string> answers[textarea.name] || '');
         }
     }
 
diff --git a/src/core/components/timer/timer.scss b/src/core/components/timer/timer.scss
index 077ea389d..c7c9cc39c 100644
--- a/src/core/components/timer/timer.scss
+++ b/src/core/components/timer/timer.scss
@@ -6,6 +6,7 @@ $core-timer-iterations: 15 !default;
 :host {
     .core-timer {
         --background: transparent !important;
+        border-radius: var(--big-radius);
 
         .core-timer-time-left, .core-timesup {
             font-weight: bold;
diff --git a/src/core/features/course/lang.json b/src/core/features/course/lang.json
index 554f22f43..efa7b5613 100644
--- a/src/core/features/course/lang.json
+++ b/src/core/features/course/lang.json
@@ -35,9 +35,9 @@
     "errordownloadingsection": "Error downloading section.",
     "errorgetmodule": "Error getting activity data.",
     "failed": "Failed",
-    "gotonextactivity": "Continue to next activity",
+    "gotonextactivity": "Go to next activity",
     "gotonextactivitynotfound": "Next activity not found. It's possible that it has been hidden or deleted.",
-    "gotopreviousactivity": "Continue to previous activity",
+    "gotopreviousactivity": "Go to previous activity",
     "gotopreviousactivitynotfound": "Previous activity not found. It's possible that it has been hidden or deleted.",
     "hiddenfromstudents": "Hidden from students",
     "hiddenoncoursepage": "Available but not shown on course page",

From 521d4cec4b37951c8d705f26c0f90c34f50fdb56 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 25 Feb 2022 16:39:08 +0100
Subject: [PATCH 09/10] MOBILE-3149 style: Add spacers

---
 src/addons/mod/feedback/pages/form/form.html  |  6 +--
 src/addons/mod/quiz/pages/player/player.html  |  4 +-
 src/core/components/loading/loading.scss      |  6 +++
 .../core-course-unsupported-module.html       | 41 ++++++++++---------
 .../unsupported-module.scss                   |  3 ++
 .../unsupported-module/unsupported-module.ts  |  1 +
 .../pages/module-preview/module-preview.html  |  2 +-
 src/theme/theme.base.scss                     | 15 +++++++
 8 files changed, 53 insertions(+), 25 deletions(-)
 create mode 100644 src/core/features/course/components/unsupported-module/unsupported-module.scss

diff --git a/src/addons/mod/feedback/pages/form/form.html b/src/addons/mod/feedback/pages/form/form.html
index e2a2a4079..82446c6ad 100644
--- a/src/addons/mod/feedback/pages/form/form.html
+++ b/src/addons/mod/feedback/pages/form/form.html
@@ -12,9 +12,9 @@
     </ion-toolbar>
 </ion-header>
 <ion-content>
-    <core-loading [hideUntil]="feedbackLoaded">
+    <core-loading [hideUntil]="feedbackLoaded" class="has-spacer">
         <ng-container *ngIf="items && items.length">
-            <ion-list class="ion-no-margin">
+            <ion-list class="ion-no-margin has-spacer">
                 <ion-item class="ion-text-wrap">
                     <ion-label>
                         <h2>{{ 'addon.mod_feedback.mode' | translate }}</h2>
@@ -110,7 +110,7 @@
                     </ng-container>
                 </ng-container>
 
-                <ion-row class="ion-align-items-center" *ngIf="!preview">
+                <ion-row class="ion-align-items-center spacer-top" *ngIf="!preview">
                     <ion-col *ngIf="hasPrevPage">
                         <ion-button expand="block" fill="outline" (click)="gotoPage(true)" class="ion-text-wrap">
                             <ion-icon name="fas-chevron-left" slot="start" aria-hidden="true"></ion-icon>
diff --git a/src/addons/mod/quiz/pages/player/player.html b/src/addons/mod/quiz/pages/player/player.html
index 089a3ecf9..94d0aa3be 100644
--- a/src/addons/mod/quiz/pages/player/player.html
+++ b/src/addons/mod/quiz/pages/player/player.html
@@ -31,7 +31,7 @@
     </ion-toolbar>
 </ion-header>
 <ion-content>
-    <core-loading [hideUntil]="loaded">
+    <core-loading [hideUntil]="loaded" class="has-spacer">
         <!-- Button to start attempting. -->
         <ion-button *ngIf="!attempt" expand="block" class="ion-margin" (click)="start()">
             {{ 'addon.mod_quiz.startattempt' | translate }}
@@ -67,7 +67,7 @@
         </form>
 
         <!-- Go to next or previous page. -->
-        <ion-row *ngIf="questions.length && !quizAborted && !showSummary">
+        <ion-row *ngIf="questions.length && !quizAborted && !showSummary" class="spacer-top">
             <ion-col *ngIf="previousPage >= 0">
                 <ion-button expand="block" fill="outline" (click)="changePage(previousPage)" class="ion-text-wrap">
                     <ion-icon name="fas-chevron-left" slot="start" aria-hidden="true"></ion-icon>
diff --git a/src/core/components/loading/loading.scss b/src/core/components/loading/loading.scss
index bd77cefd5..a843495ec 100644
--- a/src/core/components/loading/loading.scss
+++ b/src/core/components/loading/loading.scss
@@ -75,6 +75,12 @@
         height: 100%;
     }
 
+    &.has-spacer .core-loading-content {
+        min-height: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+
     &.safe-area-padding:not(.core-loading-inline) .core-loading-content,
     &.safe-area-padding-horizontal:not(.core-loading-inline) .core-loading-content {
         @include safe-area-padding-horizontal(0px, 0px);
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 f8b7bd52f..92a7d5562 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,22 +1,25 @@
-<ion-card class="core-danger-card">
-    <ion-item>
-        <ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
+<div class="has-spacer">
+    <ion-card class="core-danger-card">
+        <ion-item>
+            <ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
+            <ion-label>
+                <p><strong>{{ 'core.uhoh' | translate }} </strong>
+                    <ng-container *ngIf="isDisabledInSite">{{ 'core.course.activitydisabled' | translate }}</ng-container>
+                    <ng-container *ngIf="!isDisabledInSite">
+                        {{ 'core.course.activitynotyetviewableremoteaddon' | translate }}
+                    </ng-container>
+                </p>
+            </ion-label>
+        </ion-item>
+    </ion-card>
+    <div class="spacer"></div>
+    <ion-item lines="none" class="ion-text-wrap" *ngIf="module?.url && module?.uservisible">
         <ion-label>
-            <p><strong>{{ 'core.uhoh' | translate }} </strong>
-                <ng-container *ngIf="isDisabledInSite">{{ 'core.course.activitydisabled' | translate }}</ng-container>
-                <ng-container *ngIf="!isDisabledInSite">
-                    {{ 'core.course.activitynotyetviewableremoteaddon' | translate }}
-                </ng-container>
-            </p>
+            <p>{{ 'core.course.useactivityonbrowser' | translate }}</p>
+            <ion-button expand="block" [href]="module?.url" core-link [showBrowserWarning]="false">
+                {{ 'core.openinbrowser' | translate }}
+                <ion-icon name="fas-external-link-alt" slot="end" aria-hidden="true"></ion-icon>
+            </ion-button>
         </ion-label>
     </ion-item>
-</ion-card>
-<ion-item lines="none" class="ion-text-wrap" *ngIf="module?.url && module?.uservisible">
-    <ion-label>
-        <p>{{ 'core.course.useactivityonbrowser' | translate }}</p>
-        <ion-button expand="block" [href]="module?.url" core-link [showBrowserWarning]="false">
-            {{ 'core.openinbrowser' | translate }}
-            <ion-icon name="fas-external-link-alt" slot="end" aria-hidden="true"></ion-icon>
-        </ion-button>
-    </ion-label>
-</ion-item>
+</div>
diff --git a/src/core/features/course/components/unsupported-module/unsupported-module.scss b/src/core/features/course/components/unsupported-module/unsupported-module.scss
new file mode 100644
index 000000000..b7ca8fa44
--- /dev/null
+++ b/src/core/features/course/components/unsupported-module/unsupported-module.scss
@@ -0,0 +1,3 @@
+:host {
+    display: contents;
+}
diff --git a/src/core/features/course/components/unsupported-module/unsupported-module.ts b/src/core/features/course/components/unsupported-module/unsupported-module.ts
index 15c3e7902..ab4892af8 100644
--- a/src/core/features/course/components/unsupported-module/unsupported-module.ts
+++ b/src/core/features/course/components/unsupported-module/unsupported-module.ts
@@ -23,6 +23,7 @@ import { CoreCourseModuleDelegate } from '@features/course/services/module-deleg
 @Component({
     selector: 'core-course-unsupported-module',
     templateUrl: 'core-course-unsupported-module.html',
+    styleUrls: ['unsupported-module.scss'],
 })
 export class CoreCourseUnsupportedModuleComponent implements OnInit {
 
diff --git a/src/core/features/course/pages/module-preview/module-preview.html b/src/core/features/course/pages/module-preview/module-preview.html
index 60efcbee6..cd47cd96d 100644
--- a/src/core/features/course/pages/module-preview/module-preview.html
+++ b/src/core/features/course/pages/module-preview/module-preview.html
@@ -22,7 +22,7 @@
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="doRefresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="loaded">
+    <core-loading [hideUntil]="loaded" class="has-spacer">
         <core-course-module-info [module]="module" [courseId]="courseId" [description]="module.description" [component]="module.modname"
             [componentId]="module.id" [expandDescription]="true" [showAvailabilityInfo]="true">
             <div class="core-module-additional-info" title>
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 58b86f8a2..a48641aba 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -1581,3 +1581,18 @@ body.core-iframe-fullscreen ion-content {
 
 
 }
+
+.has-spacer {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    flex-grow: 1;
+
+    .spacer-top {
+        flex-grow: 1;
+        align-content: flex-end;
+    }
+    .spacer {
+        flex-grow: 1;
+    }
+}

From 952bfd1ddf8b2c2c20d9549edd4de915cecd95e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Mon, 28 Feb 2022 10:15:53 +0100
Subject: [PATCH 10/10] MOBILE-3149 module: Show 2-buttons on row on
 collapsible footer

---
 .../components/index/index.html               |  2 +-
 .../index/addon-mod-choice-index.html         |  2 +-
 .../index/addon-mod-feedback-index.html       |  3 ++-
 src/addons/mod/feedback/pages/form/form.html  |  2 +-
 .../index/addon-mod-scorm-index.html          | 20 ++++++++++---------
 src/theme/theme.base.scss                     | 10 ++++++++++
 6 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/addons/mod/bigbluebuttonbn/components/index/index.html b/src/addons/mod/bigbluebuttonbn/components/index/index.html
index 1463c7c65..b960f1f79 100644
--- a/src/addons/mod/bigbluebuttonbn/components/index/index.html
+++ b/src/addons/mod/bigbluebuttonbn/components/index/index.html
@@ -103,7 +103,7 @@
     </ng-container>
 
     <div collapsible-footer *ngIf="!showLoading" slot="fixed">
-        <div class="list-item-limited-width"
+        <div class="list-item-limited-width adaptable-buttons-row"
             *ngIf="meetingInfo && (meetingInfo.canjoin || meetingInfo.statusrunning && meetingInfo.ismoderator)">
             <ion-button *ngIf="meetingInfo.statusrunning && meetingInfo.ismoderator" fill="outline" class="ion-margin ion-text-wrap"
                 expand="block" (click)="endMeeting()">
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 be4e8eb0b..715d95fc2 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
@@ -136,7 +136,7 @@
 
 
     <div collapsible-footer *ngIf="!showLoading" slot="fixed">
-        <div class="list-item-limited-width" *ngIf="options.length && choice && (canEdit || canDelete)">
+        <div class="list-item-limited-width adaptable-buttons-row" *ngIf="options.length && choice && (canEdit || canDelete)">
             <ion-button *ngIf="canDelete" expand="block" fill="outline" (click)="delete()" class="ion-margin ion-text-wrap">
                 {{ 'addon.mod_choice.removemychoice' | translate }}
             </ion-button>
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 bf91cdaec..7a1c4b742 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
@@ -35,7 +35,8 @@
     </core-tabs>
 
     <div collapsible-footer *ngIf="!showLoading" slot="fixed">
-        <div class="list-item-limited-width" *ngIf="access && (access.canedititems || access.canviewreports || !access.isempty)">
+        <div class="list-item-limited-width adaptable-buttons-row"
+            *ngIf="access && (access.canedititems || access.canviewreports || !access.isempty)">
             <ion-button expand="block" fill="outline" (click)="gotoAnswerQuestions(true)" class="ion-margin ion-text-wrap">
                 <ion-icon name="fas-search" slot="start" aria-hidden="true"></ion-icon>
                 {{ 'addon.mod_feedback.preview' | translate }}
diff --git a/src/addons/mod/feedback/pages/form/form.html b/src/addons/mod/feedback/pages/form/form.html
index 82446c6ad..99d48dd4e 100644
--- a/src/addons/mod/feedback/pages/form/form.html
+++ b/src/addons/mod/feedback/pages/form/form.html
@@ -150,7 +150,7 @@
         </ion-card>
 
         <div collapsible-footer *ngIf="feedbackLoaded && completed" slot="fixed">
-            <div class="list-item-limited-width">
+            <div class="list-item-limited-width adaptable-buttons-row">
                 <ion-button expand="block" fill="outline" (click)="showAnalysis()" class="ion-text-wrap ion-margin"
                     *ngIf="access!.canviewanalysis">
                     <ion-icon name="fas-chart-bar" 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 0c2f0ea6c..953256c40 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
@@ -197,15 +197,17 @@
                         </ion-label>
                     </ion-item>
 
-                    <!-- Open mode (Preview or Normal) -->
-                    <ion-button *ngIf="!scorm.hidebrowse" expand="block" fill="outline" (click)="open($event, true)"
-                        class="ion-text-wrap ion-margin">
-                        <ion-icon name="fas-search" slot="start" aria-hidden="true"></ion-icon>
-                        {{ 'addon.mod_scorm.browse' | translate }}
-                    </ion-button>
-                    <ion-button expand="block" (click)="open($event)" class="ion-text-wrap ion-margin">
-                        {{ 'addon.mod_scorm.enter' | translate }}
-                    </ion-button>
+                    <div class="adaptable-buttons-row">
+                        <!-- Open mode (Preview or Normal) -->
+                        <ion-button *ngIf="!scorm.hidebrowse" expand="block" fill="outline" (click)="open($event, true)"
+                            class="ion-text-wrap ion-margin">
+                            <ion-icon name="fas-search" slot="start" aria-hidden="true"></ion-icon>
+                            {{ 'addon.mod_scorm.browse' | translate }}
+                        </ion-button>
+                        <ion-button expand="block" (click)="open($event)" class="ion-text-wrap ion-margin">
+                            {{ 'addon.mod_scorm.enter' | translate }}
+                        </ion-button>
+                    </div>
                 </ng-container>
 
                 <!-- Download progress. -->
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index a48641aba..a9b897801 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -1467,6 +1467,16 @@ ion-grid.core-no-grid > ion-row {
     height: 0 !important;
 }
 
+@include media-breakpoint-up(md) {
+    .adaptable-buttons-row {
+        display: flex;
+        flex-direction: row;
+        ion-button {
+            flex: 1;
+        }
+    }
+}
+
 ion-header.no-title {
     --core-header-toolbar-border-width: 0;
     --core-header-toolbar-background: transparent;