Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 32 additions & 23 deletions src/components/app/ChapterView.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -243,43 +243,52 @@
/>
</p>
{/if}
<div
class={`${chapter.closing ? "mt-6" : ""} flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center`}
>
<div class={`${chapter.closing ? "mt-6" : ""} flex flex-col gap-3`}>
{#if showChapterQuiz}
<Button
size="lg"
class="w-full sm:h-11 sm:min-w-[12rem] sm:flex-1 sm:text-base"
class="w-full sm:h-11 sm:text-base"
onclick={() => game.runChapterQuizAction(chapter.quizCta.action)}
>
{chapter.quizCta.label}
</Button>
{/if}
{#if game.chapterKind === "shelf-chapter"}
{#if prevChapter}
<Button
size="lg"
variant="outline"
class="w-full sm:h-11 sm:min-w-[12rem] sm:flex-1 sm:text-base"
href={learnChapterPath(prevChapter.unitId, prevChapter.id)}
>
Previous chapter
</Button>
{/if}
{#if nextChapter}
<Button
size="lg"
variant="outline"
class="w-full sm:h-11 sm:min-w-[12rem] sm:flex-1 sm:text-base"
href={learnChapterPath(nextChapter.unitId, nextChapter.id)}
{#if prevChapter || nextChapter}
<nav
class="flex items-center gap-4"
aria-label="Adjacent chapters"
>
Next chapter
</Button>
<div class="flex min-w-0 flex-1 justify-start">
{#if prevChapter}
<Button
size="sm"
variant="outline"
class="px-3"
href={learnChapterPath(prevChapter.unitId, prevChapter.id)}
>
← Previous
</Button>
{/if}
</div>
<div class="flex min-w-0 flex-1 justify-end">
{#if nextChapter}
<Button
size="sm"
variant="outline"
class="px-3"
href={learnChapterPath(nextChapter.unitId, nextChapter.id)}
>
Next →
</Button>
{/if}
</div>
</nav>
{/if}
<Button
size="lg"
variant="outline"
class="w-full sm:h-11 sm:min-w-[12rem] sm:flex-1 sm:text-base"
class="w-full sm:h-11 sm:text-base"
href={learnShelfPath(chapter.unitId)}
>
Browse chapters
Expand Down