diff --git a/src/assets/wise5/themes/default/navigation/navigation.component.html b/src/assets/wise5/themes/default/navigation/navigation.component.html
index 1608caa9889..5fa6ec40d6e 100644
--- a/src/assets/wise5/themes/default/navigation/navigation.component.html
+++ b/src/assets/wise5/themes/default/navigation/navigation.component.html
@@ -8,7 +8,7 @@
[nodeId]="id"
type="card"
class="w-full sm:w-{{ navItemIsExpanded[id] ? 'full' : '1/2' }}"
- >
+ />
}
diff --git a/src/assets/wise5/vle/nav-item/nav-item.component.html b/src/assets/wise5/vle/nav-item/nav-item.component.html
index b97654eabb1..cc1a1cc7b47 100644
--- a/src/assets/wise5/vle/nav-item/nav-item.component.html
+++ b/src/assets/wise5/vle/nav-item/nav-item.component.html
@@ -1,4 +1,5 @@
@if (nodeStatus.isVisible) {
+
@switch (type) {
@case ('card') {
@@ -52,9 +53,7 @@
i18n-matTooltip
matTooltip="{{ nodeStatus.progress.completionPct }}% completed"
matTooltipPosition="above"
- >
- }
- @if (isGroup) {
+ />
{{ nodeStatus.progress.completedItems }}/{{ nodeStatus.progress.totalItems }} items
@@ -85,7 +84,7 @@
tabindex="0"
i18n-title
title="Go to {{ nodeTitle }}"
- [ngClass]="{ group: isGroup }"
+ [ngClass]="{ group: isGroup, 'selected-bg-bg': isPrevStep }"
>
diff --git a/src/assets/wise5/vle/nav-item/nav-item.component.ts b/src/assets/wise5/vle/nav-item/nav-item.component.ts
index d217e21fcf3..4164e8a45d7 100644
--- a/src/assets/wise5/vle/nav-item/nav-item.component.ts
+++ b/src/assets/wise5/vle/nav-item/nav-item.component.ts
@@ -57,6 +57,10 @@ export class NavItemComponent {
this.isCurrentNode = this.currentNode.id === this.nodeId;
if (this.isGroup && this.isCurrentNode) {
this.setExpanded();
+ this.zoomToElement();
+ }
+ if (this.dataService.previousStep) {
+ this.isPrevStep = this.nodeId === this.dataService.previousStep.id;
}
this.subscriptions.add(this.projectService.projectParsed$.subscribe(() => this.setNodeTitle()));
this.subscriptions.add(
@@ -127,7 +131,9 @@ export class NavItemComponent {
}
private zoomToElement(): void {
- // TODO: implement me
+ setTimeout(() => {
+ document.getElementById(`nav-item-${this.nodeId}`).scrollIntoView({ behavior: 'smooth' });
+ }, 500);
}
protected itemClicked(): void {
diff --git a/src/messages.xlf b/src/messages.xlf
index a7efba237f9..7ec3d98f169 100644
--- a/src/messages.xlf
+++ b/src/messages.xlf
@@ -13800,7 +13800,7 @@ The branches will be removed but the steps will remain in the unit.
src/assets/wise5/vle/nav-item/nav-item.component.html
- 53,54
+ 54,55
@@ -14981,7 +14981,7 @@ The branches will be removed but the steps will remain in the unit.
src/assets/wise5/vle/nav-item/nav-item.component.html
- 87,88
+ 86,87
@@ -22517,14 +22517,14 @@ If this problem continues, let your teacher know and move on to the next activit
Expand or collapse lesson content
src/assets/wise5/vle/nav-item/nav-item.component.html
- 13,17
+ 14,18
/ items
src/assets/wise5/vle/nav-item/nav-item.component.html
- 59,60
+ 58,59
src/assets/wise5/vle/student-account-menu/student-account-menu.component.html
@@ -22535,14 +22535,14 @@ If this problem continues, let your teacher know and move on to the next activit
Lesson is locked
src/assets/wise5/vle/nav-item/nav-item.component.html
- 70,73
+ 69,72
Item is locked
src/assets/wise5/vle/nav-item/nav-item.component.html
- 100,103
+ 99,102