Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit e97a612

Browse files
codercatdevalex-fusionauth
codercatdev
and
alex-fusionauth
authored
feature/better lessonlist (CodingCatDev#521)
* adjust lesson list * put back key to not break nav * add bookmarks * fix lesson complete --------- Co-authored-by: Alex Patterson <[email protected]>
1 parent 9bfefa7 commit e97a612

File tree

7 files changed

+75
-100
lines changed

7 files changed

+75
-100
lines changed

‎apps/codingcatdev/src/routes/(content-single)/course/+layout.svelte

+3-62
Original file line numberDiff line numberDiff line change
@@ -10,68 +10,9 @@
1010
</script>
1111

1212
{#if data?.content}
13-
<!-- App Shell -->
14-
<AppShell
15-
regionPage="overflow-y-scroll"
16-
slotPageFooter="pt-4 bg-surface-50-900-token block lg:hidden"
17-
slotSidebarRight="hidden lg:block"
18-
>
19-
<!-- Page Content -->
20-
<Lesson {data}>
21-
<slot />
22-
</Lesson>
23-
<svelte:fragment slot="sidebarRight">
24-
<!-- Div takes up same room as fixed -->
25-
<div class="w-[19.5rem] xl:w-96" />
26-
<div class="fixed top-[5.125rem] bottom-24 w-[19.5rem] xl:w-96 py-10 overflow-y-auto">
27-
<div class="flex flex-col gap-2 px-8 md:gap-8">
28-
<!-- Sponsors -->
29-
{#if data?.sponsors?.length}
30-
<span class="bcu-toc-label px-4 pt-0 font-bold">Sponsors</span>
31-
<section class="flex flex-col gap-2 md:flex-row md:gap-8">
32-
{#each data?.sponsors as sponsor (sponsor.slug)}
33-
<a
34-
class="overflow-hidden card bg-initial card-hover md:flex-1"
35-
href={`${sponsor.url}`}
36-
target="_blank"
37-
rel="noopener noreferrer"
38-
>
39-
<header>
40-
{#if sponsor?.cover}
41-
<Image
42-
src={sponsor.cover}
43-
alt={sponsor.name}
44-
classes="object-cover w-full bg-cover rounded bg-black/50 aspect-video"
45-
/>
46-
{/if}
47-
</header>
48-
<div class="p-4 space-y-4">
49-
<h3 data-toc-ignore="">{sponsor?.name}</h3>
50-
<article>
51-
<p>
52-
{sponsor?.description}
53-
</p>
54-
</article>
55-
</div>
56-
</a>
57-
{/each}
58-
</section>
59-
{/if}
60-
{#key $storeCurrentUrl}
61-
<TableOfContents />
62-
{/key}
63-
{#if data?.course?.lesson && data?.course?.lesson.length > 0 && data?.course?.slug}
64-
<LessonList {data} />
65-
{/if}
66-
</div>
67-
</div>
68-
</svelte:fragment>
69-
<svelte:fragment slot="pageFooter">
70-
{#if data?.course?.lesson && data?.course?.lesson.length > 0 && data?.course?.slug}
71-
<LessonList {data} />
72-
{/if}
73-
</svelte:fragment>
74-
</AppShell>
13+
<Lesson {data}>
14+
<slot />
15+
</Lesson>
7516
{:else}
7617
<Course {data}>
7718
<slot />

‎apps/codingcatdev/src/routes/(content-single)/course/Course.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
{:else if data?.course?.cover}
2424
<Image src={data.course.cover} alt={data.course.title} />
2525
{/if}
26-
<div class="flex">
26+
<div class="flex gap-2">
2727
{#if data?.course?.lesson?.filter((l) => l.locked).length}
2828
<span class="chip variant-filled-primary py-1 px-4 rounded-full font-bold text-xl"
2929
>Pro</span

‎apps/codingcatdev/src/routes/(content-single)/course/Lesson.svelte

+15-7
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
import Image from '$lib/components/content/Image.svelte';
77
import ProCourseMark from './ProCourseMark.svelte';
88
import type { LayoutData } from './$types';
9+
import LessonList from './LessonList.svelte';
910
export let data: LayoutData;
1011
</script>
1112

@@ -23,20 +24,27 @@
2324
<li class="crumb-separator" aria-hidden>&rsaquo;</li>
2425
<li>{data.content.title}</li>
2526
</ol>
26-
{#if data?.content?.youtube}
27-
<Video src={data.content.youtube} title={`${data.content.title}`} />
28-
{:else if data?.content?.cover}
29-
<Image src={data.content.cover} alt={data.content.title} />
30-
{/if}
31-
<div class="flex justify-between">
27+
<div class="w-full lg:grid lg:grid-cols-12 lg:space-y-0 relative">
28+
<div class="col-span-9">
29+
{#if data?.content?.youtube}
30+
<Video src={data.content.youtube} title={`${data.content.title}`} />
31+
{:else if data?.content?.cover}
32+
<Image src={data.content.cover} alt={data.content.title} />
33+
{/if}
34+
</div>
35+
<div class="flex flex-col col-span-3">
36+
<LessonList {data} />
37+
</div>
38+
</div>
39+
<div class="flex gap-2">
3240
{#if data?.course?.lesson?.filter((l) => l.locked).length}
3341
<span class="chip variant-filled-primary py-1 px-4 rounded-full font-bold text-xl"
3442
>Pro</span
3543
>
3644
{:else}
3745
<span class="chip variant-ringed py-1 px-4 rounded-full font-bold text-xl">Free</span>
3846
{/if}
39-
<ProCourseMark {data} />
47+
<ProCourseMark {data} lesson={data.content} />
4048
</div>
4149
{#if data?.authors}
4250
<section class="flex">

‎apps/codingcatdev/src/routes/(content-single)/course/LessonList.svelte

+53-26
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,67 @@
11
<script lang="ts">
2+
import { afterNavigate } from '$app/navigation';
23
import { storeCurrentUrl } from '$lib/stores/stores';
3-
44
import type { LayoutData } from './$types';
55
import ProCourseMark from './ProCourseMark.svelte';
66
export let data: LayoutData;
77
8+
// Scroll heading into view
9+
function scrollLessonIntoView(): void {
10+
const slug = window.location.href?.split('/').at(-1);
11+
const child: HTMLElement | null = document.querySelector(`#nav-${slug}`);
12+
child?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
13+
}
14+
15+
afterNavigate(() => scrollLessonIntoView());
16+
817
$: classesActive = (href: string) =>
918
$storeCurrentUrl?.split('/').at(-1) === href ? 'bg-primary-active-token !text-white' : '';
1019
</script>
1120

1221
{#if data?.course?.lesson}
13-
<div class="p-2 card md:p-4">
14-
<nav class="nav-list-nav">
15-
<ul>
16-
{#each data.course.lesson as l}
17-
{#if l?.section}
18-
<div class="pb-2">
19-
<span class="flex py-2 mt-4 text-xl font-bold">
20-
{l.section}
21-
</span>
22-
<hr />
23-
</div>
24-
{/if}
25-
<li class="flex justify-between">
26-
<a
27-
href={`/course/${data?.course?.slug}/lesson/${l.slug}`}
28-
class={`${classesActive(l.slug)} flex gap-1`}
29-
>
30-
{l.title}
31-
</a>
32-
<div class="flex w-12 gap-1">
33-
<ProCourseMark locked={l?.locked} lesson={l} {data} />
22+
<div class="relative h-full">
23+
<div class="top-0 left-0 flex flex-col w-full h-full shadow-sm lg:absolute">
24+
<div class="relative flex-grow">
25+
<div class="inset-0 lg:absolute">
26+
<div class="w-full h-full">
27+
<div class="flex flex-col h-full">
28+
<div class="flex-grow overflow-hidden">
29+
<div class="h-full overflow-hidden">
30+
<div class="overflow-auto h-72 lg:h-full">
31+
<div class="p-2 card md:p-4 rounded-none">
32+
<nav class="nav-list-nav">
33+
<ul>
34+
{#each data.course.lesson as l}
35+
{#if l?.section}
36+
<div class="pb-2">
37+
<span class="flex py-2 mt-4 text-xl font-bold">
38+
{l.section}
39+
</span>
40+
<hr />
41+
</div>
42+
{/if}
43+
<li class="flex justify-between relative" id={`nav-${l.slug}`}>
44+
<a
45+
href={`/course/${data?.course?.slug}/lesson/${l.slug}`}
46+
class={`${classesActive(l.slug)} flex gap-1`}
47+
>
48+
{l.title}
49+
</a>
50+
<div class="flex gap-1 absolute right-1 top-1">
51+
<ProCourseMark locked={l?.locked} lesson={l} {data} />
52+
</div>
53+
</li>
54+
{/each}
55+
</ul>
56+
</nav>
57+
</div>
58+
</div>
59+
</div>
60+
</div>
3461
</div>
35-
</li>
36-
{/each}
37-
</ul>
38-
</nav>
62+
</div>
63+
</div>
64+
</div>
65+
</div>
3966
</div>
4067
{/if}

‎apps/codingcatdev/src/routes/(content-single)/course/Locked.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
</script>
88

99
{#if locked}
10-
<Icon src={LockClosed} theme="solid" />
10+
<Icon src={LockClosed} theme="solid" class="w-6" />
1111
{:else}
12-
<Icon src={LockOpen} theme="solid" />
12+
<Icon src={LockOpen} theme="solid" class="w-6" />
1313
{/if}

‎apps/codingcatdev/src/routes/(content-single)/course/ProCourseMark.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
/>
5050
</div>{/if}
5151
{:else if data.content?.type === ContentType.lesson}
52-
<div class="flex w-6 gap-1">
52+
<div class="flex w-12 gap-1">
5353
<Locked {locked} />
5454
</div>
5555
{:else}

‎apps/codingcatdev/src/routes/+layout.svelte

-1
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,6 @@
166166
<CcdDrawer />
167167
<Modal />
168168
<Toast />
169-
<CannyButton />
170169

171170
{#if data?.preview}
172171
<div

0 commit comments

Comments
 (0)