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