eduvia/lms
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: course outline page

Browse Source
This commit is contained in:
Jannat Patel
2023-04-26 11:46:08 +05:30
parent 4eb5390ad8
commit fcdd70dcc7
5 changed files with 134 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
lms/public/css/style.css
View File

@@ -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;
}

4
lms/public/icons/symbol-defs.svg
View File

@@ -77,4 +77,8 @@
<svg width="20" height="20" viewBox="0 0 20 20" id="icon-success" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 18.75C14.8325 18.75 18.75 14.8325 18.75 10C18.75 5.16751 14.8325 1.25 10 1.25C5.16751 1.25 1.25 5.16751 1.25 10C1.25 14.8325 5.16751 18.75 10 18.75ZM13.966 7.48104C14.1856 7.21471 14.1477 6.8208 13.8813 6.60122C13.615 6.38164 13.2211 6.41954 13.0015 6.68587L8.68984 11.9155L7.01289 9.74823C6.80165 9.47524 6.40911 9.42517 6.13611 9.6364C5.86311 9.84764 5.81304 10.2402 6.02428 10.5132L8.18004 13.2993C8.29633 13.4495 8.47467 13.5388 8.66468 13.5417C8.85468 13.5447 9.0357 13.461 9.15658 13.3144L13.966 7.48104Z" fill="#171717"/>
</svg>
<svg width="16" height="16" id="icon-drag" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 3C4 3.82843 4.67157 4.5 5.5 4.5C6.32843 4.5 7 3.82843 7 3C7 2.17157 6.32843 1.5 5.5 1.5C4.67157 1.5 4 2.17157 4 3ZM5.5 9.5C4.67157 9.5 4 8.82843 4 8C4 7.17157 4.67157 6.5 5.5 6.5C6.32843 6.5 7 7.17157 7 8C7 8.82843 6.32843 9.5 5.5 9.5ZM5.5 14.5C4.67157 14.5 4 13.8284 4 13C4 12.1716 4.67157 11.5 5.5 11.5C6.32843 11.5 7 12.1716 7 13C7 13.8284 6.32843 14.5 5.5 14.5ZM9 3C9 3.82843 9.67157 4.5 10.5 4.5C11.3284 4.5 12 3.82843 12 3C12 2.17157 11.3284 1.5 10.5 1.5C9.67157 1.5 9 2.17157 9 3ZM10.5 9.5C9.67157 9.5 9 8.82843 9 8C9 7.17157 9.67157 6.5 10.5 6.5C11.3284 6.5 12 7.17157 12 8C12 8.82843 11.3284 9.5 10.5 9.5ZM10.5 14.5C9.67157 14.5 9 13.8284 9 13C9 12.1716 9.67157 11.5 10.5 11.5C11.3284 11.5 12 12.1716 12 13C12 13.8284 11.3284 14.5 10.5 14.5Z" fill="#171717"/>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 17 KiB

95
lms/www/courses/outline.html
View File

@@ -7,12 +7,105 @@
{% block page_content %}
<main class="common-page-style">
<div class="container">
<header class="sticky">
<div class="container w-75">
<button class="btn btn-primary btn-sm btn-save-course pull-right mt-1">
{{ _("Save") }}
</button>
<div class="page-title"> {{ _("Course Outline") }} </div>
</div>
</header>
<div class="container w-75">
{{ Outline(chapters) }}
{{ CreateChapter() }}
{{ EmptyState() }}
</div>
</main>
{% endblock %}
{% macro Outline(chapters) %}
{% if chapters %}
{% for chapter in chapters %}
<article>
<div class="common-card-style column-card p-4 mb-5">
<div class="level">
<svg class="icon icon-xs level-item mr-2">
<use class="" href="#icon-drag"></use>
</svg>
<div class="bold-heading">
{{ chapter.title }}
</div>
</div>
{% for lesson in get_lessons(course.name, chapter) %}
<div class="outline-lesson level">
<svg class="icon icon-xs level-item mr-2">
<use class="" href="#icon-drag"></use>
</svg>
<!-- <div class="icon-bg">
<svg class="icon icon-sm level-item">
<use class="" href="#{{ lesson.icon }}">
</svg>
</div> -->
<div class="">
{{ lesson.title }}
</div>
</div>
{% endfor %}
<button class="btn btn-default btn-sm align-self-start">
<svg class="icon icon-xs">
<use class="" href="#icon-add"></use>
</svg>
<span>
{{ _("Add Lesson") }}
</span>
</button>
</div>
</article>
{% endfor %}
{% endif %}
{% endmacro %}
{% macro CreateChapter() %}
<article>
<div class="common-card-style column-card p-4">
<div class="field-group">
<div>
<div class="field-label">
{{ _("Chapter Title") }}
</div>
<div class="field-description">
{{ _("Something Short and Concise") }}
</div>
</div>
<div class="">
<input id="chapter-title" type="text" class="field-input">
</div>
</div>
<div class="field-group">
<div>
<div class="field-label">
{{ _("Short Description") }}
</div>
<div class="field-description">
{{ _("A breif description about this chapter.") }}
</div>
</div>
<div class="">
<input id="chapter-description" type="text" class="field-input">
</div>
</div>
</div>
</article>
{% endmacro %}
{% macro EmptyState() %}
<article class="empty-state">
<div class="text-center">

13
lms/www/courses/outline.js Normal file
View File

@@ -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);
};

2
lms/www/courses/outline.py
View File

@@ -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)