Merge pull request #3103 from crazyserver/MOBILE-3099

Mobile 3099

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>

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);
     }
 }
 

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);
         }
     }
 

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.

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;