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 @@ - + - + - + 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/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); } } 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;