MOBILE-3833 module: Make module navigation less prominent

scripts/langindex.json

@@ -1558,10 +1558,6 @@
   "core.course.errordownloadingsection": "local_moodlemobileapp",
   "core.course.errorgetmodule": "local_moodlemobileapp",
   "core.course.failed": "completion",
-  "core.course.gotonextactivity": "local_moodlemobileapp",
-  "core.course.gotonextactivitynotfound": "local_moodlemobileapp",
-  "core.course.gotopreviousactivity": "local_moodlemobileapp",
-  "core.course.gotopreviousactivitynotfound": "local_moodlemobileapp",
   "core.course.hiddenfromstudents": "moodle",
   "core.course.hiddenoncoursepage": "moodle",
   "core.course.highlighted": "moodle",
@@ -1570,8 +1566,12 @@
   "core.course.lastaccessedactivity": "local_moodlemobileapp",
   "core.course.manualcompletionnotsynced": "local_moodlemobileapp",
   "core.course.modulenotfound": "local_moodlemobileapp",
+  "core.course.nextactivity": "local_moodlemobileapp",
+  "core.course.nextactivitynotfound": "local_moodlemobileapp",
   "core.course.nocontentavailable": "local_moodlemobileapp",
   "core.course.overriddennotice": "grades",
+  "core.course.previousactivity": "local_moodlemobileapp",
+  "core.course.previousactivitynotfound": "local_moodlemobileapp",
   "core.course.refreshcourse": "local_moodlemobileapp",
   "core.course.section": "moodle",
   "core.course.startdate": "moodle",

src/addons/mod/feedback/pages/form/form.html

@@ -158,7 +158,7 @@
                 </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>
+                    <ng-container *ngIf="siteAfterSubmit">{{ 'core.course.nextactivity' | translate }}</ng-container>
                 </ion-button>
             </div>
         </div>

src/core/features/course/components/course-format/course-format.scss

@@ -10,6 +10,8 @@
         overflow: hidden;
         text-transform: none;
         flex: 1;
+        margin-left: 4px;
+        margin-right: 4px;
     }
 }
 

src/core/features/course/components/module-navigation/core-course-module-navigation.html

@@ -1,17 +1,16 @@
 <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-row class="ion-justify-content-between ion-align-items-center ion-no-padding" *ngIf="previousModule || nextModule">
-        <ion-col size="auto" class="ion-no-padding core-course-module-navigation-arrow">
+        <ion-col size="6" class="ion-no-padding core-course-module-navigation-arrow">
-            <ion-button fill="clear" class="core-course-previous-module" [disabled]="!previousModule" (click)="goToActivity(false)"
+            <ion-button fill="clear" class="core-course-previous-module ion-text-wrap" [disabled]="!previousModule"
-                [attr.aria-label]="'core.course.gotopreviousactivity' | translate">
+                (click)="goToActivity(false)">
-                <ion-icon name="fas-arrow-left" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-chevron-left" slot="start" aria-hidden="true"></ion-icon>
-                {{ 'core.previous' | translate }}
+                <div class="button-text">{{ 'core.course.previousactivity' | translate }}</div>
             </ion-button>
         </ion-col>
-        <ion-col size="auto" class="ion-no-padding core-course-module-navigation-arrow">
+        <ion-col size="6" class="ion-no-padding core-course-module-navigation-arrow">
-            <ion-button fill="clear" class="core-course-next-module" [disabled]="!nextModule" (click)="goToActivity(true)"
+            <ion-button fill="clear" class="core-course-next-module ion-text-wrap" [disabled]=" !nextModule" (click)="goToActivity(true)">
-                [attr.aria-label]="'core.course.gotonextactivity' | translate">
+                <div class="button-text">{{ 'core.course.nextactivity' | translate }}</div>
-                {{ 'core.next' | translate }}
+                <ion-icon name="fas-chevron-right" slot="end" aria-hidden="true"></ion-icon>
-                <ion-icon name="fas-arrow-right" slot="end" aria-hidden="true"></ion-icon>
             </ion-button>
         </ion-col>
     </ion-row>

src/core/features/course/components/module-navigation/module-navigation.scss

@@ -3,7 +3,7 @@
 :host {
     --height: var(--core-navigation-max-height);
     --background: var(--core-navigation-background);
-    --button-vertical-margin: 2px;
+    --button-color: var(--gray-700);
 
     height: var(--height);
     width: 100%;
@@ -16,18 +16,42 @@
         --loading-inline-min-height: var(--height);
     }
 
-    ion-button,
-    ::ng-deep ion-button {
-        margin-top: var(--button-vertical-margin);
-        margin-bottom: var(--button-vertical-margin);
-    }
-
     &.empty {
         display: none;
     }
+
+    .core-course-module-navigation-arrow {
+        ion-button {
+            margin: 0;
+            --border-radius: 0;
+            width: 100%;
+            text-transform: none;
+            font-size: 12px;
+            font-weight: normal;
+            --color: var(--button-color);
+
+            .button-text {
+                width:100%;
+            }
+
+            ion-icon {
+                font-size: 12px;
+            }
+        }
+        .core-course-previous-module {
+            text-align: start;
+        }
+        .core-course-next-module {
+            text-align: end;
+        }
+    }
 }
 
 :host-context(core-course-format.core-course-format-singleactivity) {
     opacity: 0 !important;
     height: 0 !important;
 }
+
+:host-context(body.dark) {
+    --button-color: var(--gray-100);
+}

src/core/features/course/components/module-navigation/module-navigation.ts

@@ -215,7 +215,7 @@ export class CoreCourseModuleNavigationComponent implements OnInit, OnDestroy {
         if (!module) {
             // It seems the module was hidden. Show a message.
             CoreDomUtils.instance.showErrorModal(
-                next ? 'core.course.gotonextactivitynotfound' : 'core.course.gotopreviousactivitynotfound',
+                next ? 'core.course.nextactivitynotfound' : 'core.course.previousactivitynotfound',
                 true,
             );
 

src/core/features/course/lang.json

@@ -20,11 +20,11 @@
     "confirmdownload": "You are about to download {{size}}.{{availableSpace}} Are you sure you want to continue?",
     "confirmdownloadunknownsize": "It was not possible to calculate the size of the download.{{availableSpace}} Are you sure you want to continue?",
     "confirmdownloadzerosize": "You are about to start downloading.{{availableSpace}} Are you sure you want to continue?",
-    "confirmpartialdownloadsize": "You are about to download <strong>at least</strong> {{size}}.{{availableSpace}} Are you sure you want to continue?",
     "confirmlimiteddownload": "You are not currently connected to Wi-Fi. ",
-    "courseindex": "Course index",
+    "confirmpartialdownloadsize": "You are about to download <strong>at least</strong> {{size}}.{{availableSpace}} Are you sure you want to continue?",
     "couldnotloadsectioncontent": "Could not load the section content. Please try again later.",
     "couldnotloadsections": "Could not load the sections. Please try again later.",
+    "courseindex": "Course index",
     "coursesummary": "Course summary",
     "done": "Done",
     "downloadcourse": "Download course",
@@ -35,20 +35,20 @@
     "errordownloadingsection": "Error downloading section.",
     "errorgetmodule": "Error getting activity data.",
     "failed": "Failed",
-    "gotonextactivity": "Go to next activity",
-    "gotonextactivitynotfound": "Next activity not found. It's possible that it has been hidden or deleted.",
-    "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",
     "highlighted": "Highlighted",
-    "insufficientavailablespace": "You are trying to download {{size}}. This will leave your device with insufficient space to operate normally. Please clear some storage space first.",
     "insufficientavailablequota": "Your device could not allocate space to save this download. It may be reserving space for app and system updates. Please clear some storage space first.",
+    "insufficientavailablespace": "You are trying to download {{size}}. This will leave your device with insufficient space to operate normally. Please clear some storage space first.",
     "lastaccessedactivity": "Last accessed activity",
     "manualcompletionnotsynced": "Manual completion not synchronised.",
     "modulenotfound": "Resource or activity not found, please make sure you're online and it's still available.",
+    "nextactivity": "Next activity",
+    "nextactivitynotfound": "Next activity not found. It's possible that it has been hidden or deleted.",
     "nocontentavailable": "No content available at the moment.",
     "overriddennotice": "Your final grade from this activity was manually adjusted.",
+    "previousactivity": "Previous activity",
+    "previousactivitynotfound": "Previous activity not found. It's possible that it has been hidden or deleted.",
     "refreshcourse": "Refresh course",
     "section": "Section",
     "startdate": "Course start date",