ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(course): restore mobile mark complete and outline progress card (#942)

Browse Source 
* fix(course): pass progress into mobile outline sheet card

The outline sheet bound CourseProgressCard with {courseProgress}, which
sets a courseProgress prop the card does not read. progress was
undefined, so opening the sheet crashed on progress.percent. Pass
progress={courseProgress} and treat missing progress as zeros.

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

* fix(course): keep mark complete on mobile student lessons

The mobile bottom nav hid the whole lesson action row, so students had no way to mark a lesson complete. Hide only prev/next when the bottom bar is shown.

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

* fix(course): show a check on the right of a completed lesson title

When a student marks a lesson complete, hide the disabled Mark as Complete
button and place a filled check icon on the right of the lesson title.

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

* fix(course): show completion check on mobile bottom-nav title

Move the filled check from the lesson page heading to the right of
the active lesson title in the mobile bottom bar.

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

---------
This commit is contained in:
Rotimi Best
2026-08-20 18:03:03 +01:00
committed by GitHub
co-authored by Rotimi Best
parent 4fae088626
commit 44f09bbe6b
7 changed files with 95 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dashboard/src/lib/features/course/components/course-progress-card.svelte
+14 -8
View File
@@ -4,27 +4,33 @@
import type { ContentProgress } from '$features/course/utils/content';
interface Props {
progress: ContentProgress;
progress?: ContentProgress;
class?: string;
}
let { progress, class: className = '' }: Props = $props();
const percent = $derived(progress?.percent ?? 0);
const lessonsComplete = $derived(progress?.lessonsComplete ?? 0);
const lessonsTotal = $derived(progress?.lessonsTotal ?? 0);
const exercisesComplete = $derived(progress?.exercisesComplete ?? 0);
const exercisesTotal = $derived(progress?.exercisesTotal ?? 0);
</script>
<div class={className}>
<div class="flex items-baseline justify-between gap-2">
<span class="text-xs font-medium">{$t('course.sidebar.progress.title')}</span>
<span class="ui:text-primary text-xs font-semibold tabular-nums">{progress.percent}%</span>
<span class="ui:text-primary text-xs font-semibold tabular-nums">{percent}%</span>
</div>
<Progress value={progress.percent} max={100} class="ui:h-1.5 mt-2" />
<Progress value={percent} max={100} class="ui:h-1.5 mt-2" />
<p class="ui:text-muted-foreground mt-2 truncate text-[11px]">
{$t('course.sidebar.progress.lessons', {
completed: progress.lessonsComplete,
total: progress.lessonsTotal
})}{#if progress.exercisesTotal > 0}
completed: lessonsComplete,
total: lessonsTotal
})}{#if exercisesTotal > 0}
· {$t('course.sidebar.progress.exercises', {
completed: progress.exercisesComplete,
total: progress.exercisesTotal
completed: exercisesComplete,
total: exercisesTotal
})}{/if}
</p>
</div>
apps/dashboard/src/lib/features/course/components/lesson/content-navigation-actions.svelte
+40 -36
View File
@@ -29,9 +29,11 @@
courseId: string;
/** When on an exercise page, pass this to show prev/next content in content order (no mark-complete). */
exerciseId?: string;
/** When false, hide prev/next chevrons (mobile bottom nav already has them). */
showPrevNext?: boolean;
}
let { lessonId, courseId, exerciseId }: Props = $props();
let { lessonId, courseId, exerciseId, showPrevNext = true }: Props = $props();
let isMarkingComplete = $state(false);
@@ -229,7 +231,7 @@
{watchProgressTooltip}
</Tooltip.Content>
</Tooltip.Root>
{:else if showMarkComplete && lessonId && !isLessonLocked && (showVideoWatchCompleteState || !isVideoWatchLesson)}
{:else if showMarkComplete && lessonId && !isLessonLocked && !isLessonComplete && !isVideoWatchLesson}
<Button
size="sm"
variant="secondary"
@@ -242,40 +244,42 @@
</Button>
{/if}
<div class="flex items-center gap-1">
<Tooltip.Root>
<Tooltip.Trigger>
<Button
size="icon-sm"
variant="outline"
onclick={() => goToContent(prevNextContent.prev)}
disabled={isPrevDisabled || isPrevNavBlocked}
aria-label={$t('course.navItem.lessons.prev')}
>
<ChevronLeftIcon size={14} />
</Button>
</Tooltip.Trigger>
<Tooltip.Content side="bottom" sideOffset={4}>
{prevNavTooltip}
</Tooltip.Content>
</Tooltip.Root>
{#if showPrevNext}
<div class="flex items-center gap-1">
<Tooltip.Root>
<Tooltip.Trigger>
<Button
size="icon-sm"
variant="outline"
onclick={() => goToContent(prevNextContent.prev)}
disabled={isPrevDisabled || isPrevNavBlocked}
aria-label={$t('course.navItem.lessons.prev')}
>
<ChevronLeftIcon size={14} />
</Button>
</Tooltip.Trigger>
<Tooltip.Content side="bottom" sideOffset={4}>
{prevNavTooltip}
</Tooltip.Content>
</Tooltip.Root>
<Tooltip.Root>
<Tooltip.Trigger>
<Button
size="icon-sm"
variant="outline"
onclick={() => goToContent(prevNextContent.next)}
disabled={isNextDisabled || isNextNavBlocked}
aria-label={$t('course.navItem.lessons.next')}
>
<ChevronRightIcon size={14} />
</Button>
</Tooltip.Trigger>
<Tooltip.Content side="bottom" sideOffset={4}>
{nextNavTooltip}
</Tooltip.Content>
</Tooltip.Root>
</div>
<Tooltip.Root>
<Tooltip.Trigger>
<Button
size="icon-sm"
variant="outline"
onclick={() => goToContent(prevNextContent.next)}
disabled={isNextDisabled || isNextNavBlocked}
aria-label={$t('course.navItem.lessons.next')}
>
<ChevronRightIcon size={14} />
</Button>
</Tooltip.Trigger>
<Tooltip.Content side="bottom" sideOffset={4}>
{nextNavTooltip}
</Tooltip.Content>
</Tooltip.Root>
</div>
{/if}
</Tooltip.Provider>
</div>
apps/dashboard/src/lib/features/course/components/mobile/course-mobile-bottom-nav.svelte
+1
View File
@@ -77,6 +77,7 @@
<PublicCourseBottomNav
{positionLabel}
sublineLabel={activeItem?.title}
sublineComplete={activeItem?.isComplete ?? false}
hasPrev={!isPreviousDisabled}
hasNext={!isNextDisabled}
onPrev={() => goToContent(previousItem)}
apps/dashboard/src/lib/features/course/components/mobile/course-mobile-outline-sheet.svelte
+1 -1
View File
@@ -52,7 +52,7 @@
</Drawer.Header>
<div class="shrink-0 px-3 pb-2">
<CourseProgressCard {courseProgress} class="rounded-lg border p-3" />
<CourseProgressCard progress={courseProgress} class="rounded-lg border p-3" />
</div>
<div bind:this={scrollContainer} class="flex-1 overflow-y-auto px-2 pb-[max(env(safe-area-inset-bottom),1rem)]">
apps/dashboard/src/lib/features/course/pages/lesson.svelte
+2 -2
View File
@@ -433,8 +433,8 @@
</Page.HeaderContent>
<Page.Action>
<div class="flex items-center gap-2">
{#if mode === MODES.view && $isCourseLearnerView && !showMobileBottomNav}
<ContentNavigationActions {lessonId} {courseId} />
{#if mode === MODES.view && $isCourseLearnerView}
<ContentNavigationActions {lessonId} {courseId} showPrevNext={!showMobileBottomNav} />
{/if}
<RoleBasedSecurity allowedRoles={[1, 2]}>
packages/storybook/src/molecules/public-course/public-course.stories.svelte
+19
View File
@@ -124,6 +124,25 @@
{/snippet}
</Story>
<Story name="Bottom nav · completed lesson">
{#snippet template()}
<div class="ui:relative ui:min-h-[200px] ui:bg-background">
<PublicCourse.PublicCourseBottomNav
positionLabel="2 / 6"
sublineLabel="Delving into Data Analysis with Pandas"
sublineComplete
hasPrev
hasNext
centerVariant="ring"
progressPercent={33}
onPrev={() => console.log('prev')}
onNext={() => console.log('next')}
onOpenSheet={() => console.log('open sheet')}
/>
</div>
{/snippet}
</Story>
<Story name="Mobile sheet · collapse + long course">
{#snippet template()}
{@const activeSlug = 'module-10-lesson-4'}
packages/ui/src/custom/public-course/bottom-nav.svelte
+18 -1
View File
@@ -8,6 +8,8 @@
/** Current position — e.g. "3 of 12" — plus a subline — e.g. "Hallucination & limitations". */
positionLabel: string;
sublineLabel?: string;
/** When true, a filled check is shown to the right of `sublineLabel`. */
sublineComplete?: boolean;
hasPrev: boolean;
hasNext: boolean;
onPrev: () => void;
@@ -27,6 +29,7 @@
let {
positionLabel,
sublineLabel,
sublineComplete = false,
hasPrev,
hasNext,
onPrev,
@@ -98,7 +101,21 @@
{positionLabel}
</span>
{#if sublineLabel}
<span class="ui:max-w-[55vw] ui:truncate ui:text-sm ui:font-medium ui:text-foreground">{sublineLabel}</span>
<span class="ui:flex ui:max-w-[55vw] ui:min-w-0 ui:items-center ui:gap-1">
<span class="ui:min-w-0 ui:truncate ui:text-sm ui:font-medium ui:text-foreground">{sublineLabel}</span>
{#if sublineComplete}
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
class="ui:size-3.5 ui:shrink-0 ui:text-primary"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10" fill="currentColor"></circle>
<path d="m9 12 2 2 4-4" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
{/if}
</span>
{/if}
</span>
</button>