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

* 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
@@ -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'}