style: course home
This commit is contained in:
Jannat Patel
@@ -1,123 +0,0 @@
|
||||
<div>
|
||||
|
||||
<div class="chapter-title small-title" data-target="#{{ get_slugified_chapter_title(chapter.title) }}"
|
||||
data-toggle="collapse" aria-expanded="false">
|
||||
<img class="chapter-icon" src="/assets/school/icons/chevron-right.svg">
|
||||
{{ index }}. {{ chapter.title }}
|
||||
</div>
|
||||
|
||||
<div class="chapter-content collapse navbar-collapse" id="{{ get_slugified_chapter_title(chapter.title) }}">
|
||||
|
||||
{% if chapter.description %}
|
||||
<div class="chapter-description muted-text">
|
||||
{{ chapter.description }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% set is_instructor = frappe.session.user == course.instructor %}
|
||||
<div class="lessons">
|
||||
|
||||
{% for lesson in get_lessons(course.name, chapter) %}
|
||||
|
||||
<div class="lesson-info {% if membership.current_lesson == lesson.name %} active-lesson {% endif %}">
|
||||
|
||||
{% if membership or lesson.include_in_preview %}
|
||||
<a class="lesson-links" href="{{ get_lesson_url(course.name, lesson.number) }}{{course.query_parameter}}"
|
||||
data-course="{{ course.name }}">
|
||||
{{ lesson.title }}
|
||||
|
||||
{% if membership %}
|
||||
<img class="ml-1 lesson-progress-tick {{ get_progress(course.name, lesson.name) != 'Complete' and 'hide' }}"
|
||||
src="/assets/school/icons/check.svg">
|
||||
{% endif %}
|
||||
|
||||
</a>
|
||||
|
||||
{% elif is_instructor and not lesson.include_in_preview %}
|
||||
<a class="lesson-links"
|
||||
title="This lesson is not available for preview. As you are the Instructor of the course only you can see it."
|
||||
href="{{ course.get_lesson_url(lesson.number) }}{{course.query_parameter}}"
|
||||
data-course="{{ course.name }}">
|
||||
{{ lesson.title }}
|
||||
<img class="ml-2" src="/assets/school/icons/lock.svg">
|
||||
</a>
|
||||
|
||||
{% else %}
|
||||
<div class="no-preview" title="This lesson is not available for preview">
|
||||
<div class="lesson-links">
|
||||
{{ lesson.title }}
|
||||
<img class="ml-2" src="/assets/school/icons/lock.svg">
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if index != get_chapters(course.name) | length %}
|
||||
<div class="card-divider"></div>
|
||||
{% endif %}
|
||||
|
||||
<script>
|
||||
frappe.ready(() => {
|
||||
expand_the_active_chapter();
|
||||
|
||||
$(".chapter-title").unbind().click((e) => {
|
||||
rotate_chapter_icon(e);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
var expand_the_first_chapter = () => {
|
||||
var elements = $(".course-outline .collapse");
|
||||
elements.each((i, element) => {
|
||||
if (i < 1) {
|
||||
show_section(element);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var expand_the_active_chapter = () => {
|
||||
|
||||
/* Find anchor matching the URL for course details page */
|
||||
var selector = $(`a[href="${decodeURIComponent(window.location.pathname)}"]`).parent();
|
||||
if (!selector.length) {
|
||||
selector = $(`a[href^="${decodeURIComponent(window.location.pathname)}"]`).parent();
|
||||
}
|
||||
if (selector.length && $(".course-details-page").length) {
|
||||
$(".lesson-info").removeClass("active-lesson")
|
||||
selector.addClass("active-lesson");
|
||||
show_section(selector.parent().parent());
|
||||
}
|
||||
|
||||
/* For course home page */
|
||||
else if ($(".active-lesson").length) {
|
||||
selector = $(".active-lesson")
|
||||
show_section(selector.parent().parent());
|
||||
}
|
||||
|
||||
/* If no active chapter then exapand the first chapter */
|
||||
else {
|
||||
expand_the_first_chapter();
|
||||
}
|
||||
}
|
||||
|
||||
var show_section = (element) => {
|
||||
$(element).addClass("show");
|
||||
$(element).siblings(".chapter-title").children(".chapter-icon").css("transform", "rotate(90deg)");
|
||||
}
|
||||
|
||||
var rotate_chapter_icon = (e) => {
|
||||
var icon = $(e.currentTarget).children(".chapter-icon");
|
||||
if (icon.css("transform") == "none") {
|
||||
icon.css("transform", "rotate(90deg)");
|
||||
} else {
|
||||
icon.css("transform", "none");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -58,11 +58,11 @@
|
||||
{% endif %}
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
</span>
|
||||
{% set student_count = get_students(course.name) | length %}
|
||||
<span class="course-student-count">
|
||||
{% if student_count %}
|
||||
<span class="vertically-center mr-4">
|
||||
<span class="vertically-center mr-3">
|
||||
<img class="icon-background" src="/assets/school/icons/user.svg" />
|
||||
{{ student_count }}
|
||||
</span>
|
||||
@@ -85,15 +85,8 @@
|
||||
membership.current_lesson else '1.1' %}
|
||||
{% set query_parameter = "?batch=" + membership.batch if membership and
|
||||
membership.batch else "" %}
|
||||
{% set certificate = is_certified(course.name) %}
|
||||
|
||||
{% if certificate %}
|
||||
<a class="stretched-link" href="/courses/{{ course.name }}/{{ certificate }}"></a>
|
||||
|
||||
{% elif course.enable_certification and progress == 100 %}
|
||||
<a class="stretched-link" id="certification" data-course="{{ course.name }}"></a>
|
||||
|
||||
{% elif progress == 100 %}
|
||||
{% if progress == 100 %}
|
||||
<a class="stretched-link" href="/courses/{{ course.name }}"></a>
|
||||
|
||||
{% elif course.upcoming %}
|
||||
@@ -109,27 +102,3 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
frappe.ready(() => {
|
||||
|
||||
$("#certification").unbind().click((e) => {
|
||||
create_certificate(e);
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
var create_certificate = (e) => {
|
||||
e.preventDefault();
|
||||
course = $(e.currentTarget).attr("data-course");
|
||||
frappe.call({
|
||||
method: "school.lms.doctype.lms_certification.lms_certification.create_certificate",
|
||||
args: {
|
||||
"course": course
|
||||
},
|
||||
callback: (data) => {
|
||||
window.location.href = `/courses/${course}/${data.message}`;
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,12 +1,131 @@
|
||||
{% if get_chapters(course.name) | length %}
|
||||
<div class="">
|
||||
<div class="course-home-outline">
|
||||
<div class="course-home-headings">
|
||||
Course Outline
|
||||
{{ _("Course Content") }}
|
||||
</div>
|
||||
<div class="common-card-style course-outline">
|
||||
{% for chapter in get_chapters(course.name) %}
|
||||
{{ widgets.ChapterTeaser(index=loop.index, chapter=chapter, course=course, batch=batch, membership=membership) }}
|
||||
{% endfor %}
|
||||
{% for chapter in get_chapters(course.name) %}
|
||||
<div class="mb-2">
|
||||
<div class="chapter-title" data-target="#{{ get_slugified_chapter_title(chapter.title) }}"
|
||||
data-toggle="collapse" aria-expanded="false">
|
||||
<img class="chapter-icon" src="/assets/school/icons/chevron-right.svg">
|
||||
<div>{{ chapter.title }}</div>
|
||||
</div>
|
||||
|
||||
<div class="chapter-content collapse navbar-collapse" id="{{ get_slugified_chapter_title(chapter.title) }}">
|
||||
|
||||
{% if chapter.description %}
|
||||
<div class="chapter-description muted-text">
|
||||
{{ chapter.description }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% set is_instructor = frappe.session.user == course.instructor %}
|
||||
<div class="lessons">
|
||||
|
||||
{% for lesson in get_lessons(course.name, chapter) %}
|
||||
|
||||
<div class="lesson-info {% if membership.current_lesson == lesson.name %} active-lesson {% endif %}">
|
||||
|
||||
{% if membership or lesson.include_in_preview %}
|
||||
<a class="lesson-links" href="{{ get_lesson_url(course.name, lesson.number) }}{{course.query_parameter}}"
|
||||
data-course="{{ course.name }}">
|
||||
{{ lesson.title }}
|
||||
|
||||
{% if membership %}
|
||||
<img class="ml-1 lesson-progress-tick {{ get_progress(course.name, lesson.name) != 'Complete' and 'hide' }}"
|
||||
src="/assets/school/icons/check.svg">
|
||||
{% endif %}
|
||||
|
||||
</a>
|
||||
|
||||
{% elif is_instructor and not lesson.include_in_preview %}
|
||||
<a class="lesson-links"
|
||||
title="This lesson is not available for preview. As you are the Instructor of the course only you can see it."
|
||||
href="{{ course.get_lesson_url(lesson.number) }}{{course.query_parameter}}"
|
||||
data-course="{{ course.name }}">
|
||||
<img class="mr-3" src="/assets/school/icons/lock.svg">
|
||||
<div>{{ lesson.title }}</div>
|
||||
</a>
|
||||
|
||||
{% else %}
|
||||
<div class="no-preview" title="This lesson is not available for preview">
|
||||
<div class="lesson-links">
|
||||
<img class="mr-3" src="/assets/school/icons/lock.svg">
|
||||
<div>{{ lesson.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<script>
|
||||
|
||||
frappe.ready(() => {
|
||||
|
||||
expand_the_active_chapter();
|
||||
|
||||
$(".chapter-title").unbind().click((e) => {
|
||||
rotate_chapter_icon(e);
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
var expand_the_first_chapter = () => {
|
||||
var elements = $(".course-outline .collapse");
|
||||
elements.each((i, element) => {
|
||||
if (i < 1) {
|
||||
show_section(element);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var expand_the_active_chapter = () => {
|
||||
|
||||
/* Find anchor matching the URL for course details page */
|
||||
var selector = $(`a[href="${decodeURIComponent(window.location.pathname)}"]`).parent();
|
||||
if (!selector.length) {
|
||||
selector = $(`a[href^="${decodeURIComponent(window.location.pathname)}"]`).parent();
|
||||
}
|
||||
if (selector.length && $(".course-details-page").length) {
|
||||
$(".lesson-info").removeClass("active-lesson")
|
||||
selector.addClass("active-lesson");
|
||||
show_section(selector.parent().parent());
|
||||
}
|
||||
|
||||
/* For course home page */
|
||||
else if ($(".active-lesson").length) {
|
||||
selector = $(".active-lesson")
|
||||
show_section(selector.parent().parent());
|
||||
}
|
||||
|
||||
/* If no active chapter then exapand the first chapter */
|
||||
else {
|
||||
expand_the_first_chapter();
|
||||
}
|
||||
}
|
||||
|
||||
var show_section = (element) => {
|
||||
$(element).addClass("show");
|
||||
$(element).siblings(".chapter-title").children(".chapter-icon").css("transform", "rotate(90deg)");
|
||||
$(element).siblings(".chapter-title").attr("aria-expanded", true);
|
||||
}
|
||||
|
||||
var rotate_chapter_icon = (e) => {
|
||||
var icon = $(e.currentTarget).children(".chapter-icon");
|
||||
if (icon.css("transform") == "none") {
|
||||
icon.css("transform", "rotate(90deg)");
|
||||
} else {
|
||||
icon.css("transform", "none");
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<div class="common-card-style member-card">
|
||||
{{ widgets.Avatar(member=member, avatar_class=avatar_class) }}
|
||||
<div class="small-title member-card-title {% if show_course_count %} font-weight-bold {% endif %}">
|
||||
<div class=" member-card-title {% if show_course_count %} font-weight-bold {% endif %}">
|
||||
{{ member.full_name }}
|
||||
</div>
|
||||
{% set course_count = get_authored_courses(member.name) | length %}
|
||||
{% if show_course_count and course_count > 0 %}
|
||||
{% set suffix = "Courses" if course_count > 1 else "Course" %}
|
||||
<div class="small-title">
|
||||
<div class="">
|
||||
Created {{ course_count }} {{ suffix }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
@@ -10,29 +10,76 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if reviews | length %}
|
||||
<div class="reviews-section">
|
||||
{% for review in reviews %}
|
||||
<div class="review-card">
|
||||
<div class="common-card-style review-content small-title"> {{ review.review }} </div>
|
||||
<div class="review-card-footer">
|
||||
<div>
|
||||
{{ widgets.Avatar(member=review.owner_details, avatar_class="avatar-medium") }}
|
||||
<a class="button-links" href="{{get_profile_url(review.owner_details.username) }}">
|
||||
<span class="course-instructor">
|
||||
{{ review.owner_details.full_name }}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
{% set avg_rating = get_average_rating(course.name) %}
|
||||
<div class="reviews-header">
|
||||
<div class="text-center">
|
||||
<div class="avg-rating"> {{ avg_rating }} </div>
|
||||
<div class="course-meta"> {{ reviews | length }} {{ _("ratings") }} </div>
|
||||
<div class="avg-rating-stars">
|
||||
<div class="rating">
|
||||
{% for i in [1, 2, 3, 4, 5] %}
|
||||
<svg class="icon icon-md {% if i <= review.rating %} star-click {% endif %}" data-rating="{{ i }}">
|
||||
<svg class="icon icon-md {% if i <= avg_rating %} star-click {% endif %}" data-rating="{{ i }}">
|
||||
<use href="#icon-star"></use>
|
||||
</svg>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="course-meta"> {{ avg_rating }} {{ _("out of 5 ") }} </div>
|
||||
</div>
|
||||
<div class="vertical-divider"></div>
|
||||
{% set sorted_reviews = get_sorted_reviews(course.name) %}
|
||||
<div>
|
||||
{% for review in sorted_reviews %}
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<div class="course-meta mr-2"> {{ frappe.utils.cint(review) }} {{ _("stars") }} </div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="{{ sorted_reviews[review] }}"
|
||||
aria-valuemin="0" aria-valuemax="100" style="width:{{ sorted_reviews[review] }}%">
|
||||
<span class="sr-only"> {{ sorted_reviews[review] }} Complete</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="course-meta ml-3"> {{ frappe.utils.cint(sorted_reviews[review]) }}% </div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
{% if reviews | length %}
|
||||
<div class="mt-12">
|
||||
{% for review in reviews %}
|
||||
<div class="">
|
||||
<div class="review-card-footer">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="mr-5">
|
||||
{{ widgets.Avatar(member=review.owner_details, avatar_class="avatar-medium") }}
|
||||
</div>
|
||||
<div>
|
||||
<a class="button-links" href="{{get_profile_url(review.owner_details.username) }}">
|
||||
<span class="review-author">
|
||||
{{ review.owner_details.full_name }}
|
||||
</span>
|
||||
</a>
|
||||
<div class="rating">
|
||||
{% for i in [1, 2, 3, 4, 5] %}
|
||||
<svg class="icon icon-md {% if i <= review.rating %} star-click {% endif %}" data-rating="{{ i }}">
|
||||
<use href="#icon-star"></use>
|
||||
</svg>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-16 mt-4">
|
||||
<div> {{ review.review }} </div>
|
||||
<div class="frappe-timestamp mt-2 mb-6 course-meta" data-timestamp="{{ review.creation }}"> frappe.utils.pretty_date(review.creation) </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if loop.index != reviews | length %}
|
||||
<div class="card-divider"></div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user