From ed9e5f9869b4393c07aad4bba7e3a85108a19ab3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 9 Feb 2022 12:56:21 +0100
Subject: [PATCH 1/2] MOBILE-3099 module: Fix module navigation animation

---
 .../module-navigation/module-navigation.ts       | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/core/features/course/components/module-navigation/module-navigation.ts b/src/core/features/course/components/module-navigation/module-navigation.ts
index 6da81c2f4..2b3573738 100644
--- a/src/core/features/course/components/module-navigation/module-navigation.ts
+++ b/src/core/features/course/components/module-navigation/module-navigation.ts
@@ -299,18 +299,20 @@ export class CoreCourseModuleNavigationComponent implements OnInit, OnDestroy {
             return;
         }
 
+        const options: CoreNavigationOptions = {
+            replace: true,
+            animationDirection: next ? 'forward' : 'back',
+        };
+
         if (module.uservisible === false) {
             const section = next ? this.nextModuleSection : this.previousModuleSection;
-            const options: CoreNavigationOptions = {
-                replace: true,
-                params: {
-                    module,
-                    section,
-                },
+            options.params = {
+                module,
+                section,
             };
             CoreNavigator.navigateToSitePath('course/' + this.courseId + '/' + module.id +'/module-preview', options);
         } else {
-            CoreCourseModuleDelegate.openActivityPage(module.modname, module, this.courseId, { replace: true });
+            CoreCourseModuleDelegate.openActivityPage(module.modname, module, this.courseId, options);
         }
     }
 

From be05bfa51b3fef23d5d1d11fae88300f80c7af5b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 9 Feb 2022 12:56:36 +0100
Subject: [PATCH 2/2] MOBILE-3099 module: Reduce module navigation bar height

---
 .../core-course-module-navigation.html          |  7 ++++---
 .../module-navigation/module-navigation.scss    | 17 ++++++-----------
 src/theme/theme.base.scss                       |  4 ++--
 src/theme/theme.light.scss                      |  6 +++---
 4 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/src/core/features/course/components/module-navigation/core-course-module-navigation.html b/src/core/features/course/components/module-navigation/core-course-module-navigation.html
index 34b0c5d27..6d04ae094 100644
--- a/src/core/features/course/components/module-navigation/core-course-module-navigation.html
+++ b/src/core/features/course/components/module-navigation/core-course-module-navigation.html
@@ -1,18 +1,19 @@
 <core-loading [hideUntil]="loaded" [fullscreen]="false">
     <ion-row class="ion-justify-content-between ion-align-items-center ion-no-padding ion-wrap" *ngIf="previousModule || nextModule">
-        <ion-col size="auto">
+        <ion-col size="auto" class="ion-no-padding">
             <ion-button fill="clear" class="core-course-previous-module" *ngIf="previousModule" (click)="goToActivity(false)"
                 [attr.aria-label]="'core.course.gotopreviousactivity' | translate">
                 <ion-icon name="fas-arrow-left" slot="icon-only" aria-hidden="true"></ion-icon>
             </ion-button>
         </ion-col>
-        <ion-col *ngIf="showCompletion && (currentModule.completiondata && showManualCompletion && currentModule.uservisible)">
+        <ion-col class="ion-no-padding"
+            *ngIf="showCompletion && (currentModule.completiondata && showManualCompletion && currentModule.uservisible)">
             <!-- Module completion. -->
             <core-course-module-completion [completion]="currentModule.completiondata" [moduleName]="currentModule.name"
                 [moduleId]="currentModule.id" [showManualCompletion]="true" (completionChanged)="completionChanged.emit($event)">
             </core-course-module-completion>
         </ion-col>
-        <ion-col size="auto">
+        <ion-col size="auto" class="ion-no-padding">
             <ion-button fill="clear" class="core-course-next-module" *ngIf="nextModule" (click)="goToActivity(true)"
                 [attr.aria-label]="'core.course.gotonextactivity' | translate">
                 <ion-icon name="fas-arrow-right" slot="icon-only" aria-hidden="true"></ion-icon>
diff --git a/src/core/features/course/components/module-navigation/module-navigation.scss b/src/core/features/course/components/module-navigation/module-navigation.scss
index 2a8b74f54..4dfc9e0ea 100644
--- a/src/core/features/course/components/module-navigation/module-navigation.scss
+++ b/src/core/features/course/components/module-navigation/module-navigation.scss
@@ -3,6 +3,7 @@
 :host {
     --height: var(--core-course-module-navigation-height, var(--core-course-module-navigation-max-height));
     --background: var(--core-course-module-navigation-background);
+    --button-vertical-margin: 2px;
 
     height: var(--height);
     width: 100%;
@@ -14,21 +15,15 @@
 
     @include core-transition(all, 200ms);
 
-    ion-col {
-        padding: 2px;
-    }
-
     core-loading {
         text-align: center;
-    }
-    
-    ion-buttom {
-        margin-top: 5px;
-        margin-bottom: 5px;
+        --loading-inline-min-height: var(--height);
     }
 
-    core-loading {
-        --loading-inline-min-height: var(--height);
+    ion-button,
+    ::ng-deep ion-button {
+        margin-top: var(--button-vertical-margin);
+        margin-bottom: var(--button-vertical-margin);
     }
 }
 
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 31aed6866..0143bf8b3 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -250,7 +250,7 @@ ion-header ion-toolbar {
 
     .button.button-clear.button-has-icon-only,
     .button.button-solid.button-has-icon-only {
-        --border-radius: 50%;
+        --border-radius: var(--huge-radius);
         width: 48px;
         height: 48px;
     }
@@ -307,7 +307,7 @@ button,
 }
 
 ion-button.button.button-clear.button-has-icon-only {
-    --border-radius: 50%;
+    --border-radius: var(--huge-radius);
 }
 
 // Clear buttons will be black.
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index 1ad8d7b27..71697c5f6 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -118,7 +118,7 @@
         color: var(--core-link-color);
     }
 
-    --core-header-toolbar-button-image-size: 44px;
+    --core-header-toolbar-button-image-size: var(--a11y-min-target-size);
     --core-header-toolbar-background: var(--white);
     --core-header-toolbar-border-width: 3px;
     --core-header-toolbar-border-color: var(--brand);
@@ -266,7 +266,7 @@
     --core-star-color: var(--brand);
 
     --core-large-avatar-size: 90px;
-    --core-avatar-size: 44px;
+    --core-avatar-size: var(--a11y-min-target-size);
 
     --core-send-message-input-background: var(--gray-200);
     --core-send-message-input-color: var(--gray-900);
@@ -274,7 +274,7 @@
     --core-courseimage-on-course-size: 72px;
     --core-courseimage-radius: var(--medium-radius);
 
-    --core-course-module-navigation-max-height: 56px;
+    --core-course-module-navigation-max-height: 48px;
     --core-course-module-navigation-background: var(--contrast-background);
 
     --core-user-menu-site-logo-max-height: 32px;