diff --git a/lms/public/css/style.css b/lms/public/css/style.css index 2ed8e865..41bcf7ca 100644 --- a/lms/public/css/style.css +++ b/lms/public/css/style.css @@ -120,6 +120,27 @@ textarea.field-input { height: 300px; } +.outline-lesson { + border-bottom: 1px solid var(--gray-300); + padding: 1rem 0; +} + +.common-card-style .outline-lesson:last-child { + border-bottom: none; + padding-bottom: 0; +} + +.level { + justify-content: start; +} + +.icon-bg { + background: var(--gray-100); + padding: 0.5rem; + border-radius: var(--border-radius-md); + margin: 0 0.5rem; +} + body { background-color: #FFFFFF; } diff --git a/lms/public/icons/symbol-defs.svg b/lms/public/icons/symbol-defs.svg index 0e7bb679..68602344 100644 --- a/lms/public/icons/symbol-defs.svg +++ b/lms/public/icons/symbol-defs.svg @@ -77,4 +77,8 @@ + + + + diff --git a/lms/www/courses/outline.html b/lms/www/courses/outline.html index a20f11c9..1fdda8b0 100644 --- a/lms/www/courses/outline.html +++ b/lms/www/courses/outline.html @@ -7,12 +7,105 @@ {% block page_content %}
-
+ +
+
+ + +
{{ _("Course Outline") }}
+
+
+ +
+ {{ Outline(chapters) }} + {{ CreateChapter() }} {{ EmptyState() }}
{% endblock %} +{% macro Outline(chapters) %} +{% if chapters %} +{% for chapter in chapters %} +
+
+
+ + + +
+ {{ chapter.title }} +
+
+ + {% for lesson in get_lessons(course.name, chapter) %} +
+ + + + +
+ {{ lesson.title }} +
+
+ {% endfor %} + + +
+
+{% endfor %} +{% endif %} +{% endmacro %} + + +{% macro CreateChapter() %} +
+
+
+
+
+ {{ _("Chapter Title") }} +
+
+ {{ _("Something Short and Concise") }} +
+
+
+ +
+
+ +
+
+
+ {{ _("Short Description") }} +
+
+ {{ _("A breif description about this chapter.") }} +
+
+
+ +
+
+
+
+{% endmacro %} + + {% macro EmptyState() %}
diff --git a/lms/www/courses/outline.js b/lms/www/courses/outline.js new file mode 100644 index 00000000..ae5ec9c1 --- /dev/null +++ b/lms/www/courses/outline.js @@ -0,0 +1,13 @@ +frappe.ready(() => { + pin_header(); +}); + +const pin_header = () => { + const el = document.querySelector(".sticky"); + const observer = new IntersectionObserver( + ([e]) => + e.target.classList.toggle("is-pinned", e.intersectionRatio < 1), + { threshold: [1] } + ); + observer.observe(el); +}; diff --git a/lms/www/courses/outline.py b/lms/www/courses/outline.py index 873e3656..087fc587 100644 --- a/lms/www/courses/outline.py +++ b/lms/www/courses/outline.py @@ -1,4 +1,5 @@ import frappe +from lms.lms.utils import get_chapters def get_context(context): @@ -6,3 +7,4 @@ def get_context(context): context.course = frappe.db.get_value( "LMS Course", frappe.form_dict["course"], ["name", "title"], as_dict=True ) + context.chapters = get_chapters(context.course.name)