Skip to content

Commit

Permalink
style: put lesson content to the left of screen
Browse files Browse the repository at this point in the history
  • Loading branch information
@jamesx00
jamesx00 committed Dec 18, 2024
1 parent d7b4ea1 commit 33ee31c
Show file tree
Hide file tree
Showing 2 changed files with 240 additions and 232 deletions.
82 changes: 41 additions & 41 deletions _includes/layouts/lesson.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,51 @@ layout: layouts/base.njk
{% set nextLesson = collections.lesson|filter("course_id", course_id)|sortByDirectoryPrefix|getNextCollectionItem(page) %}
<div x-data="{ newFileOpen: false, sidebarOpen: false}">
<button
class="fixed right-0 top-[100px] border bg-gray-300 hover:bg-gray-400 px-2 py-1 shadow-lg"
class="fixed right-0 top-[100px] border bg-gray-300 hover:bg-gray-400 px-2 py-1 shadow-lg z-50"
@click="sidebarOpen = true">
<i class="far fa-bars text-xl"></i>
</button>
<div class="py-6 px-4 bg-gray-50 dark:bg-zinc-900 min-h-screen">
<div class="grid {% if code_editor %}md:grid-cols-2{% endif %} gap-4 justify-center">
<div class="grid md:flex gap-4 justify-center">
<div class="md:flex-1 max-w-prose overflow-y-hidden">
<div class="mb-6 mx-auto bg-white dark:bg-zinc-950 p-4 {% if not code_editor %}max-w-prose{% endif %}">
<p class="text-gray-500 dark:text-slate-300 text-xs font-light mb-2">
<a href="/courses/{{ course_slug }}" class="hover:underline">{{ course_name }}</a>
</p>
<div id="lesson-content" class="prose">
{{ content|safe }}
</div>
</div>
<!-- This is a very confusing part for mobile. Thing is, when there's no code editor, the complete and next button
should be displayed below the content, so we need to check if there's a code editor or not. If there's no code editor,
the form container should be visible regardless. Then we toggle the visibility of the form inside for the tests. The
form should be hidden to begin with to avoid flickering. We can figure this out later, but it works for now. -->
<div
id="next-container-below-content"
class="complete-and-next-form-container {% if code_editor %}hidden {% endif %}md:block">
<div class="{% if code_editor %}hidden{% endif %}">
<a href="{% if nextLesson %}{{ nextLesson.url }}{% else %}/courses/{{ course_slug }}{% endif %}" class="mb-4 mt-6 flex w-full items-center justify-center bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-800 focus:outline-none md:mb-0">
{% if nextLesson %}Next{% else %}Complete the course{% endif %}
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6 inline-block ml-2">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3 8.689c0-.864.933-1.406 1.683-.977l7.108 4.061a1.125 1.125 0 0 1 0 1.954l-7.108 4.061A1.125 1.125 0 0 1 3
16.811V8.69ZM12.75 8.689c0-.864.933-1.406 1.683-.977l7.108 4.061a1.125 1.125 0 0 1 0 1.954l-7.108 4.061a1.125 1.125 0 0
1-1.683-.977V8.69Z"/>
</svg>
</a>
</div>
</div>
</div>
{% if code_editor %}
<div class="order-2 md:order-1 relative">
<div class="relative flex-1">
<div class="sticky top-4">
<div class="mb-4 flex justify-end {% if not file_group_selector %}hidden{% endif %}">
<div>
Expand Down Expand Up @@ -102,46 +139,9 @@ layout: layouts/base.njk
</div>
</div>
{% endif %}
<div class="order-1 md:order-2 max-w-full overflow-y-hidden">
<div class="mb-6 mx-auto bg-white dark:bg-zinc-950 p-4 {% if not code_editor %}max-w-prose{% endif %}">
<p class="text-gray-500 dark:text-slate-300 text-xs font-light mb-2">
<a href="/courses/{{ course_slug }}" class="hover:underline">{{ course_name }}</a>
</p>
<div id="lesson-content" class="prose">
{{ content|safe }}
</div>
</div>
<!-- This is a very confusing part for mobile. Thing is, when there's no code editor, the complete and next button
should be displayed below the content, so we need to check if there's a code editor or not. If there's no code editor,
the form container should be visible regardless. Then we toggle the visibility of the form inside for the tests. The
form should be hidden to begin with to avoid flickering. We can figure this out later, but it works for now. -->
<div
id="next-container-below-content"
class="complete-and-next-form-container {% if code_editor %}hidden {% endif %}md:block">
<div class="{% if code_editor %}hidden{% endif %}">
<a href="{% if nextLesson %}{{ nextLesson.url }}{% else %}/courses/{{ course_slug }}{% endif %}" class="mb-4 mt-6 flex w-full items-center justify-center bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-800 focus:outline-none md:mb-0">
{% if nextLesson %}Next{% else %}Complete the course{% endif %}
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6 inline-block ml-2">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3 8.689c0-.864.933-1.406 1.683-.977l7.108 4.061a1.125 1.125 0 0 1 0 1.954l-7.108 4.061A1.125 1.125 0 0 1 3
16.811V8.69ZM12.75 8.689c0-.864.933-1.406 1.683-.977l7.108 4.061a1.125 1.125 0 0 1 0 1.954l-7.108 4.061a1.125 1.125 0 0
1-1.683-.977V8.69Z"/>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="mt-6 bg-white p-4" x-data="{open: false}">
<button @click="open = !open" class="text-gray-600 hover:underline">Custom settings</button>
<button @click="open = !open" class="text-gray-600 hover:underline">Custom settings <i class="far fa-cogs"></i></button>
<div x-cloak x-show="open" class="mt-4 text-gray-600">
<div x-data="{showHiddenFiles: $persist(false).as('editor.showHiddenFiles')}">
<input class="mr-2" type="checkbox" id="show-hidden-files" x-model="showHiddenFiles"><label for="show-hidden-files">Show hidden files</label>
Expand Down
Loading

0 comments on commit 33ee31c

Please sign in to comment.