feat: course home
This commit is contained in:
pateljannat
@@ -10,5 +10,5 @@ frappe.ui.form.on('LMS Batch Membership', {
|
||||
}
|
||||
};
|
||||
});
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
@@ -274,6 +274,11 @@ class LMSCourse(Document):
|
||||
return False
|
||||
return True
|
||||
|
||||
def get_average_rating(self):
|
||||
ratings = [review.rating for review in self.get_reviews()]
|
||||
if not len(ratings):
|
||||
return None
|
||||
return sum(ratings)/len(ratings)
|
||||
|
||||
def get_outline(self):
|
||||
return CourseOutline(self)
|
||||
|
||||
@@ -2,7 +2,13 @@
|
||||
// For license information, please see license.txt
|
||||
|
||||
frappe.ui.form.on('LMS Course Mentor Mapping', {
|
||||
// refresh: function(frm) {
|
||||
|
||||
// }
|
||||
onload: function(frm) {
|
||||
frm.set_query('mentor', function(doc) {
|
||||
return {
|
||||
filters: {
|
||||
"ignore_user_type": 1,
|
||||
}
|
||||
};
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
@@ -13,23 +13,26 @@
|
||||
{
|
||||
"fieldname": "review",
|
||||
"fieldtype": "Small Text",
|
||||
"in_list_view": 1,
|
||||
"label": "Review"
|
||||
},
|
||||
{
|
||||
"fieldname": "rating",
|
||||
"fieldtype": "Rating",
|
||||
"in_list_view": 1,
|
||||
"label": "Rating"
|
||||
},
|
||||
{
|
||||
"fieldname": "course",
|
||||
"fieldtype": "Link",
|
||||
"in_list_view": 1,
|
||||
"label": "Course",
|
||||
"options": "LMS Course"
|
||||
}
|
||||
],
|
||||
"index_web_pages_for_search": 1,
|
||||
"links": [],
|
||||
"modified": "2021-06-28 15:00:35.146196",
|
||||
"modified": "2021-07-05 14:57:03.841430",
|
||||
"modified_by": "Administrator",
|
||||
"module": "LMS",
|
||||
"name": "LMS Course Review",
|
||||
|
||||
@@ -1,8 +1,18 @@
|
||||
# Copyright (c) 2021, FOSS United and contributors
|
||||
# For license information, please see license.txt
|
||||
|
||||
# import frappe
|
||||
import frappe
|
||||
from frappe.model.document import Document
|
||||
|
||||
class LMSCourseReview(Document):
|
||||
pass
|
||||
|
||||
@frappe.whitelist()
|
||||
def submit_review(rating, review, course):
|
||||
frappe.get_doc({
|
||||
"doctype": "LMS Course Review",
|
||||
"rating": rating,
|
||||
"review": review,
|
||||
"course": course
|
||||
}).save(ignore_permissions=True)
|
||||
return "OK"
|
||||
|
||||
@@ -1,25 +1,23 @@
|
||||
<div>
|
||||
<a data-target="#{{ chapter.get_slugified_chapter_title() }}" data-toggle="collapse" aria-expanded="false">
|
||||
<img class="" src="/assets/community/icons/side-arrow.svg"/>
|
||||
<span class="chapter-title">
|
||||
{{ chapter.title }}
|
||||
</span>
|
||||
</a>
|
||||
<div class="small-title chapter-title" data-target="#{{ chapter.get_slugified_chapter_title() }}" data-toggle="collapse"
|
||||
aria-expanded="false">
|
||||
<img class="chapter-icon" src="/assets/community/icons/side-arrow.svg">
|
||||
{{ index }}. {{ chapter.title }}
|
||||
</div>
|
||||
<div class="chapter-content collapse navbar-collapse" id="{{ chapter.get_slugified_chapter_title() }}">
|
||||
<div class="course-card-meta">
|
||||
<div class="chapter-description muted-text">
|
||||
{{ chapter.description }}
|
||||
</div>
|
||||
<div class="lessons">
|
||||
{% for lesson in chapter.get_lessons() %}
|
||||
<div class="lesson-info">
|
||||
{% if show_link or lesson.include_in_preview %}
|
||||
<a class="" href="{{ course.get_learn_url(course.get_lesson_index(lesson.name)) }}{{course.query_parameter}}" data-course="{{ course.name }}">
|
||||
{{ loop.index }}.
|
||||
<a class="dark-links" href="{{ course.get_learn_url(course.get_lesson_index(lesson.name)) }}{{course.query_parameter}}"
|
||||
data-course="{{ course.name }}">
|
||||
{{ lesson.title }}</a>
|
||||
{% else %}
|
||||
<div title="This lesson is not available for preview">
|
||||
<span class="">
|
||||
{{ loop.index }}.
|
||||
<span class="dark-links">
|
||||
{{ lesson.title }}
|
||||
</span>
|
||||
<i class="fa fa-lock ml-2"></i>
|
||||
@@ -30,13 +28,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
frappe.ready(() => {
|
||||
var elements = $(".collapse")
|
||||
elements.each((i, elem) => {
|
||||
if (i <= 5) {
|
||||
$(elem).addClass("show")
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
{% if index != course.get_chapters() | length %}
|
||||
<div class="card-divider"></div>
|
||||
{% endif %}
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
{% if course.get_chapters() | length %}
|
||||
<div class="">
|
||||
<h3>
|
||||
<div class="course-home-headings">
|
||||
Course Outline
|
||||
</h3>
|
||||
</div>
|
||||
<div class="coure-outline">
|
||||
{% for chapter in course.get_chapters() %}
|
||||
{{ widgets.ChapterTeaser(index=loop.index, chapter=chapter, course=course, batch=batch, show_link=show_link, show_progress=show_progress)}}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
14
community/lms/widgets/MemberCard.html
Normal file
14
community/lms/widgets/MemberCard.html
Normal file
@@ -0,0 +1,14 @@
|
||||
<div class="common-card-style member-card {{dimension_class}} ">
|
||||
{% set avatar_class = "avatar-xl" if dimension_class == "member-card-large" else "avatar-large"%}
|
||||
{{ widgets.Avatar(member=member, avatar_class=avatar_class) }}
|
||||
<div class="small-title member-card-title">
|
||||
{{ member.full_name }}
|
||||
</div>
|
||||
{% set course_count = member.get_course_count() %}
|
||||
{% if show_course_count and course_count > 0 %}
|
||||
{% set suffix = "Courses" if course_count > 1 else "Course" %}
|
||||
<div class="small-title">
|
||||
Created {{ course_count }} {{ suffix }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@@ -1,22 +1,22 @@
|
||||
<div>
|
||||
{% if course.get_reviews() | length %}
|
||||
<div class="reviews-parent">
|
||||
<div class="reviews-heading">
|
||||
<div class="reviews-title mb-5">Review</div>
|
||||
<div class="course-home-headings">Review</div>
|
||||
{% if course.is_eligible_to_review(membership) %}
|
||||
<a href="/lms-course-review?new=1">
|
||||
<a class="review-link" href="">
|
||||
Provide your Feedback
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="cards-parent">
|
||||
<div class="mentors-section">
|
||||
{% for review in course.get_reviews() %}
|
||||
<div class="common-card-style review-card">
|
||||
<div class="review-content"> {{ review.review }} </div>
|
||||
<div class="card-divider"></div>
|
||||
<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-small") }}
|
||||
{{ widgets.Avatar(member=review.owner_details, avatar_class="avatar-medium") }}
|
||||
<span class="course-instructor">
|
||||
{{ course.get_instructor().full_name }}
|
||||
{{ review.owner_details.full_name }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="rating">
|
||||
@@ -32,33 +32,54 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="review-modal" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal fade review-modal" id="review-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Modal title</h5>
|
||||
<div class="course-home-headings modal-headings">Review</div>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<iframe src="/lms-course-review?new=1"></iframe>
|
||||
<form class="review-form" id="review-form">
|
||||
<div class="form-group">
|
||||
<div class="clearfix">
|
||||
<label class="control-label reqd" style="padding-right: 0px;">Rating</label>
|
||||
</div>
|
||||
<div class="control-input-wrapper">
|
||||
<div class="control-input">
|
||||
<div class="rating rating-field" id="rating">
|
||||
{% for i in [1, 2, 3, 4, 5] %}
|
||||
<svg class="icon icon-md icon-rating" data-rating="{{ i }}">
|
||||
<use href="#icon-star"></use>
|
||||
</svg>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="clearfix">
|
||||
<label class="control-label reqd" style="padding-right: 0px;">Review</label>
|
||||
</div>
|
||||
<div class="control-input-wrapper">
|
||||
<div class="control-input">
|
||||
<textarea type="text" autocomplete="off" class="input-with-feedback form-control review-field" data-fieldtype="Text"
|
||||
data-fieldname="feedback_comments" placeholder="" style="height: 300px;"
|
||||
spellcheck="false"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="error-field muted-text"></p>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
<div class="wide-button submit-review is-primary" data-course="{{ course.name | urlencode}}" id="submit-review">Submit</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
frappe.ready(() => {
|
||||
frappe.provide('frappe.ui');
|
||||
console.log(frappe.ui)
|
||||
})
|
||||
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
@@ -76,14 +76,6 @@ img.profile-photo {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.preview-video {
|
||||
margin: 20px 0px;
|
||||
}
|
||||
|
||||
.preview-video iframe {
|
||||
max-width: 100%
|
||||
}
|
||||
|
||||
.message {
|
||||
border: 1px dashed var(--text-color);
|
||||
padding: 20px;
|
||||
@@ -286,7 +278,6 @@ input[type=checkbox] {
|
||||
align-items: flex-start;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 5px 10px rgb(0 0 0 / 10%);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -294,29 +285,34 @@ input[type=checkbox] {
|
||||
flex-direction: column;
|
||||
width: 352px;
|
||||
height: 380px;
|
||||
margin: 0px 16px 32px;
|
||||
margin: 0px 32px 32px 0px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.common-card-style {
|
||||
.course-card {
|
||||
margin: 0px 18px 32px 0px;
|
||||
width: 336px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.common-card-style {
|
||||
.course-card {
|
||||
margin: 0px 0px 32px;
|
||||
width: 312px;
|
||||
}
|
||||
}
|
||||
|
||||
.course-card-meta {
|
||||
.muted-text {
|
||||
font-size: 12px;
|
||||
line-height: 135%;
|
||||
margin: 16px 0px 8px;
|
||||
color: var(--muted-text);
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.course-card-meta {
|
||||
margin: 16px 0px 8px;
|
||||
}
|
||||
|
||||
.course-card-content {
|
||||
width: 100%;
|
||||
padding: 0px 24px 20px;
|
||||
@@ -372,8 +368,8 @@ input[type=checkbox] {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.course-cards-parent {
|
||||
@media (max-width: 768px) {
|
||||
.cards-parent {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
@@ -388,12 +384,12 @@ input[type=checkbox] {
|
||||
}
|
||||
|
||||
.course-top-section {
|
||||
margin: 0px 140px 0px;
|
||||
margin: 0px 120px 0px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.course-top-section {
|
||||
margin: 0px 40px 0px;
|
||||
margin: 0px 30px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -428,27 +424,48 @@ input[type=checkbox] {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.reviews-title {
|
||||
font-weight: 600;
|
||||
font-size: 22px;
|
||||
line-height: 145%;
|
||||
.review-card {
|
||||
width: 352px;
|
||||
margin: 0px 20px 32px 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.review-card {
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
margin: 0px 16px 32px;
|
||||
padding: 16px;
|
||||
@media (max-width: 768px) {
|
||||
.review-card {
|
||||
width: 336px;
|
||||
margin: 0px 8px 32px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.review-card {
|
||||
width: 312px;
|
||||
}
|
||||
}
|
||||
|
||||
.review-card-footer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.review-content {
|
||||
font-size: 15px;
|
||||
line-height: 135%;
|
||||
padding: 24px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.review-link {
|
||||
margin: 48px 0px 16px;
|
||||
}
|
||||
|
||||
.submit-review {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.rating .star-click {
|
||||
--star-fill: #74808B;
|
||||
}
|
||||
|
||||
div.custom-checkbox>label>input {
|
||||
@@ -471,7 +488,6 @@ div.custom-checkbox>label>input:checked+img {
|
||||
}
|
||||
|
||||
.course-card-wide {
|
||||
width: 1120px;
|
||||
height: 248px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -480,6 +496,22 @@ div.custom-checkbox>label>input:checked+img {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.course-card-wide {
|
||||
height: 535px;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.course-card-wide {
|
||||
height: 572px;
|
||||
padding: 40px 24px 40px;
|
||||
border-radius: 0px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.course-image-wide {
|
||||
width: 352px;
|
||||
height: 200px;
|
||||
@@ -488,8 +520,43 @@ div.custom-checkbox>label>input:checked+img {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.course-image-wide {
|
||||
width: 640px;
|
||||
height: 320px;
|
||||
flex-direction: column;
|
||||
background-size: 640px 320px;
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.course-image-wide {
|
||||
width: 312px;
|
||||
height: 216px;
|
||||
background-size: 312px 216px;
|
||||
}
|
||||
}
|
||||
|
||||
.course-home-page {
|
||||
padding: 80px;
|
||||
padding: 0px 0px 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 1120px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.course-home-page {
|
||||
padding: 0px;
|
||||
width: 688px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.course-home-page {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.course-card-wide-content {
|
||||
@@ -506,42 +573,332 @@ div.custom-checkbox>label>input:checked+img {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.course-card-wide-title {
|
||||
width: 632px;
|
||||
margin-top: 24px;
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.course-card-wide-title {
|
||||
width: 264px;
|
||||
margin-top: 16px;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.course-card-wide-intro {
|
||||
font-size: 16px;
|
||||
line-height: 172%;
|
||||
letter-spacing: -0.011em;
|
||||
color: #4C5A67;
|
||||
width: 688px;
|
||||
height: 80px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.course-card-wide-intro {
|
||||
width: 632px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.course-card-wide-intro {
|
||||
width: 264px;
|
||||
}
|
||||
}
|
||||
|
||||
.wide-button {
|
||||
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.13), 0px 0px 0.5px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 6px;
|
||||
padding: 12px 0px 12px 24px;
|
||||
padding: 12px;
|
||||
margin-right: 16px;
|
||||
height: 48px;
|
||||
cursor: pointer;
|
||||
width: 190px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.start-learning {
|
||||
background: var(--primary-color);
|
||||
width: 185px;
|
||||
height: 48px;
|
||||
@media (max-width: 375px) {
|
||||
.wide-button {
|
||||
width: 264px;
|
||||
}
|
||||
}
|
||||
|
||||
.is-primary:hover {
|
||||
text-decoration: none;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.course-home-outline {
|
||||
width: 832px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.course-home-outline {
|
||||
width: 424px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.course-home-outline {
|
||||
width: 312px;
|
||||
}
|
||||
}
|
||||
|
||||
.small-title {
|
||||
letter-spacing: -0.011em;
|
||||
}
|
||||
|
||||
.chapter-title {
|
||||
font-weight: bold;
|
||||
margin: 0px 5px 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.chapter-description {
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.chapter-icon {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.course-outline-instructor-parent {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.course-outline-instructor-parent {
|
||||
flex-direction: column;
|
||||
padding: 0px 24px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.course-home-mentors {
|
||||
padding: 0px 24px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.reviews-parent {
|
||||
padding: 0px 24px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.lesson-info {
|
||||
font-size: 16px;
|
||||
line-height: 250%;
|
||||
letter-spacing: -0.011em;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.chapter-content {
|
||||
margin: 4px 0px 0px 28px;
|
||||
}
|
||||
|
||||
.coure-outline {
|
||||
background: #FFFFFF;
|
||||
border-radius: 12px;
|
||||
padding: 16px 12px 16px;
|
||||
}
|
||||
|
||||
.lessons {
|
||||
margin: 12px 0px 16px;
|
||||
}
|
||||
|
||||
.video-preview {
|
||||
background: #FFFFFF;
|
||||
width: 234px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.video-preview {
|
||||
width: 264px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.course-buttons {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
* {
|
||||
outline: 1px solid #f00 !important;
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
@media (max-width: 375px) {
|
||||
.course-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.member-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20px 0px 16px;
|
||||
}
|
||||
|
||||
.member-card-large {
|
||||
width: 256px;
|
||||
height: 188px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.member-card-large {
|
||||
width: 248px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.member-card-large {
|
||||
width: 312px;
|
||||
}
|
||||
}
|
||||
|
||||
.member-card-title {
|
||||
margin: 12px 0px 4px;
|
||||
}
|
||||
|
||||
.member-card-large .member-card-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.member-card-medium {
|
||||
width: 160px;
|
||||
height: 140px;
|
||||
margin: 0px 20px 32px 0px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.member-card-medium {
|
||||
width: 216px;
|
||||
height: 140px;
|
||||
margin: 0px 12px 16px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.member-card-medium {
|
||||
width: 144px;
|
||||
height: 140px;
|
||||
}
|
||||
}
|
||||
|
||||
.course-home-headings {
|
||||
font-weight: 600;
|
||||
font-size: 22px;
|
||||
line-height: 146%;
|
||||
letter-spacing: -0.0175em;
|
||||
color: #192734;
|
||||
margin: 48px 0px 16px;
|
||||
}
|
||||
|
||||
.modal-headings {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.avatar-xl {
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
}
|
||||
|
||||
.description-card {
|
||||
padding: 24px;
|
||||
width: 832px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.description-card {
|
||||
width: 424px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.description-card {
|
||||
width: 312px;
|
||||
}
|
||||
}
|
||||
|
||||
.overview-card {
|
||||
padding: 8px 24px 8px;
|
||||
width: 256px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.overview-card {
|
||||
width: 248px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.overview-card {
|
||||
width: 312px;
|
||||
}
|
||||
}
|
||||
|
||||
.mentors-section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.overtime-item {
|
||||
margin: 16px 0px 16px;
|
||||
}
|
||||
|
||||
.view-all-mentors {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.flex-one {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.preview-modal {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.preview-modal .modal-dialog {
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.preview-modal .modal-content {
|
||||
height: 90%;
|
||||
}
|
||||
|
||||
.video-iframe {
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
}
|
||||
|
||||
.review-modal .modal-dialog {
|
||||
width: 50%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.error-field {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.question {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.dark-links {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.breadcrum {
|
||||
margin: 16px 10px 16px;
|
||||
}
|
||||
BIN
community/public/images/play.png
Normal file
BIN
community/public/images/play.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 326 B |
@@ -3,13 +3,33 @@
|
||||
{% block title %}{{ course.title }}
|
||||
{% endblock %}
|
||||
{% block head_include %}
|
||||
<meta name="description" content="Courses"/>
|
||||
<meta name="keywords" content="Courses {{course.title}}"/>
|
||||
<link rel="stylesheet" href="/assets/frappe/css/font-awesome.css">
|
||||
<meta name="description" content="Courses" />
|
||||
<meta name="keywords" content="Courses {{course.title}}" />
|
||||
<link rel="stylesheet" href="/assets/frappe/css/font-awesome.css">
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
<div class="common-page-style course-home-page">
|
||||
<div class="common-card-style course-card-wide">
|
||||
<div class="common-page-style">
|
||||
<div class="course-home-page">
|
||||
{{ BreadCrum(course) }}
|
||||
{{ CourseCardWide(course) }}
|
||||
{{ CourseOutlineAndCreator(course) }}
|
||||
{{ Mentors(course) }}
|
||||
{{ CourseDescriptionAndOverview(course) }}
|
||||
{{ widgets.Reviews(course=course, membership=membership) }}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% macro BreadCrum(course) %}
|
||||
<div class="course-instructor breadcrum">
|
||||
<a class="dark-links" href="/courses">All Courses</a> > <span class="muted-text">{{ course.title }}</span>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
<!-- Course Card -->
|
||||
|
||||
{% macro CourseCardWide(course) %}
|
||||
<div class="common-card-style course-card-wide">
|
||||
<div class="course-image-wide" style="background-image: url({{ course.image }});">
|
||||
<div class="course-tags">
|
||||
{% for tag in course.get_tags() %}
|
||||
@@ -25,40 +45,127 @@
|
||||
{{ course.short_introduction }}
|
||||
</div>
|
||||
<div class="course-buttons">
|
||||
<div class="wide-button start-learning">
|
||||
{% if not course.disable_self_learning and not membership %}
|
||||
<div class="wide-button start-learning is-primary join-batch" data-course="{{ course.name | urlencode }}">
|
||||
Start Learning
|
||||
<img class="" src="/assets/community/icons/white-arrow.svg"/>
|
||||
<img class="ml-2" src="/assets/community/icons/white-arrow.svg" />
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if membership %}
|
||||
{% set lesson_index = course.get_lesson_index(membership.current_lesson) if membership and
|
||||
membership.current_lesson
|
||||
else '1.1' %}
|
||||
<a class="wide-button is-primary" id="continue-learning"
|
||||
href="{{ course.get_learn_url(lesson_index) }}{{ course.query_parameter }}">
|
||||
Continue Learning <img class="ml-2" src="/assets/community/icons/white-arrow.svg" />
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if course.video_link %}
|
||||
<div class="wide-button video-preview">
|
||||
Watch Video Preview
|
||||
<img class="" src="/assets/community/icons/play.svg"/>
|
||||
</div>
|
||||
<img class="ml-2" src="/assets/community/images/play.png" />
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade preview-modal" id="video-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<div class="course-home-headings modal-headings">{{ course.title }}</div>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<iframe class="video-iframe" frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen src="{{ course.video_link }}"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endmacro%}
|
||||
|
||||
<!-- Course Outline and Creator -->
|
||||
|
||||
{% macro CourseOutlineAndCreator(course) %}
|
||||
<div class="course-outline-instructor-parent">
|
||||
<div class="course-home-outline">
|
||||
{{ widgets.CourseOutline(course=course, show_link=membership) }}
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="course-home-headings">
|
||||
Creator
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% macro CourseVideo(course) %}
|
||||
{% if course.video_link %}
|
||||
<div class="preview-video">
|
||||
<iframe width="560" height="315" src="{{course.video_link}}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"></iframe>
|
||||
{{ widgets.MemberCard(member=course.get_instructor(), show_course_count=True, dimension_class="member-card-large") }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endmacro %}
|
||||
{% macro CourseDescription(course) %}
|
||||
<div class="mt-5">
|
||||
<h3>Course Description</h3>
|
||||
|
||||
<div class="course-description text-justify">
|
||||
<!-- Mentors -->
|
||||
|
||||
{% macro Mentors(course) %}
|
||||
{% if course.get_mentors() | length %}
|
||||
<div class="course-home-mentors">
|
||||
<div class="course-home-headings">
|
||||
Mentors
|
||||
</div>
|
||||
<div class="mentors-section">
|
||||
{% for mentor in course.get_mentors() %}
|
||||
{{ widgets.MemberCard(member=mentor, show_course_count=False, dimension_class="member-card-medium") }}
|
||||
{% endfor %}
|
||||
<div class="view-all-mentors">
|
||||
<span class="card-divider flex-one"></span>
|
||||
<span class="course-instructor"><span class="all-mentors-text">View all mentors</span> <img class="mentor-icon"
|
||||
src="/assets/community/icons/down-arrow.svg" /></span>
|
||||
<span class="card-divider flex-one"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endmacro %}
|
||||
|
||||
<!-- Course Description and Overview -->
|
||||
|
||||
{% macro CourseDescriptionAndOverview(course) %}
|
||||
<div class="course-outline-instructor-parent">
|
||||
<div>
|
||||
<div class="course-home-headings">
|
||||
Course Description
|
||||
</div>
|
||||
<div class="common-card-style description-card small-title">
|
||||
{{ frappe.utils.md_to_html(course.description) }}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="course-home-headings">
|
||||
Overview
|
||||
</div>
|
||||
<div class="common-card-style overview-card small-title">
|
||||
{% if course.get_students() | length %}
|
||||
<div class="overtime-item">
|
||||
<img class="icon-background mr-1" src="/assets/community/icons/user.svg" />
|
||||
{{ course.get_students() | length }} Enrolled
|
||||
</div>
|
||||
{% endif %}
|
||||
{% set avg_rating = course.get_average_rating() %}
|
||||
{% if avg_rating %}
|
||||
<div class="overtime-item">
|
||||
<img class="icon-background mr-1" src="/assets/community/icons/rating.svg" />
|
||||
{{ avg_rating }} Rating
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro BatchSection(course) %}
|
||||
<div class="row">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 col-md-12">
|
||||
{% if course.is_mentor(frappe.session.user) %}
|
||||
{{ BatchSectionForMentors(course, course.get_batches(mentor=frappe.session.user)) }}
|
||||
@@ -66,34 +173,35 @@
|
||||
{{ BatchSectionForStudents(course, course.get_upcoming_batches()) }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
{% macro BatchSectionForMentors(course, mentor_batches) %}
|
||||
<h2>Your Batches</h2>
|
||||
<h2>Your Batches</h2>
|
||||
|
||||
{% if mentor_batches %}
|
||||
{% if mentor_batches %}
|
||||
|
||||
<div class="row">
|
||||
<div class="row">
|
||||
{% for batch in mentor_batches %}
|
||||
<div class="col-lg-4 col-md-6">
|
||||
{{ widgets.RenderBatch(course=course, batch=batch, can_manage=True) }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="add-batch margin-bottom" href="/add-a-new-batch?new=1&course={{course.name}}">Add a new batch</a>
|
||||
{% else %}
|
||||
<div class="mentor_message">
|
||||
<a class="add-batch margin-bottom" href="/add-a-new-batch?new=1&course={{course.name}}">Add a new batch</a>
|
||||
{% else %}
|
||||
<div class="mentor_message">
|
||||
<p>
|
||||
You are a mentor for this course.
|
||||
</p>
|
||||
<a class="" href="/add-a-new-batch?new=1&course={{course.name}}">Create your first batch</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endmacro %}
|
||||
|
||||
{% macro BatchSectionForStudents(course, upcoming_batches) %}
|
||||
{% if upcoming_batches %}
|
||||
<div class="mt-5">
|
||||
{% if upcoming_batches %}
|
||||
<div class="mt-5">
|
||||
<h3 class="upcoming">Upcoming Batches</h3>
|
||||
<div class="row">
|
||||
{% for batch in upcoming_batches %}
|
||||
@@ -105,5 +213,5 @@
|
||||
{% else %}
|
||||
<div class="mt-5 upcoming">There are no Upcoming Batches for this course currently.</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
@@ -1,5 +1,51 @@
|
||||
frappe.ready(() => {
|
||||
if (frappe.session.user != "Guest") {
|
||||
check_mentor_request();
|
||||
}
|
||||
|
||||
expand_the_first_chapter();
|
||||
|
||||
hide_wrapped_mentor_cards();
|
||||
|
||||
$("#apply-now").click((e) => {
|
||||
create_mentor_request(e);
|
||||
});
|
||||
|
||||
$("#cancel-request").click((e) => {
|
||||
cancel_mentor_request(e);
|
||||
});
|
||||
|
||||
$(".join-batch").click((e) => {
|
||||
join_course(e)
|
||||
});
|
||||
|
||||
$(".view-all-mentors").click((e) => {
|
||||
view_all_mentors(e);
|
||||
});
|
||||
|
||||
$(".video-preview").click((e) => {
|
||||
show_video_dialog(e);
|
||||
});
|
||||
|
||||
$(".review-link").click((e) => {
|
||||
show_review_dialog(e);
|
||||
});
|
||||
|
||||
$(".chapter-title").click((e) => {
|
||||
rotate_chapter_icon(e);
|
||||
});
|
||||
|
||||
$(".icon-rating").click((e) => {
|
||||
highlight_rating(e);
|
||||
});
|
||||
|
||||
$("#submit-review").click((e) => {
|
||||
submit_review(e);
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
var check_mentor_request = () => {
|
||||
frappe.call({
|
||||
'method': 'community.lms.doctype.lms_mentor_request.lms_mentor_request.has_requested',
|
||||
'args': {
|
||||
@@ -12,9 +58,28 @@ frappe.ready(() => {
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
var hide_wrapped_mentor_cards = () => {
|
||||
var offset_top_prev;
|
||||
|
||||
$('.member-card-medium').each(function () {
|
||||
var offset_top = $(this).offset().top;
|
||||
if (offset_top > offset_top_prev) {
|
||||
$(this).addClass('wrapped').slideUp("fast");
|
||||
}
|
||||
if (!offset_top_prev) {
|
||||
offset_top_prev = offset_top;
|
||||
}
|
||||
|
||||
$("#apply-now").click((e) => {
|
||||
});
|
||||
|
||||
if ($(".wrapped").length < 1) {
|
||||
$(".view-all-mentors").hide();
|
||||
}
|
||||
}
|
||||
|
||||
var create_mentor_request = (e) => {
|
||||
e.preventDefault();
|
||||
if (frappe.session.user == "Guest") {
|
||||
window.location.href = `/login?redirect-to=/courses/${$(e.currentTarget).attr("data-course")}`;
|
||||
@@ -32,9 +97,9 @@ frappe.ready(() => {
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
$("#cancel-request").click((e) => {
|
||||
var cancel_mentor_request = (e) => {
|
||||
e.preventDefault()
|
||||
frappe.call({
|
||||
"method": "community.lms.doctype.lms_mentor_request.lms_mentor_request.cancel_request",
|
||||
@@ -48,9 +113,9 @@ frappe.ready(() => {
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
$(".join-batch").click((e) => {
|
||||
var join_course = (e) => {
|
||||
e.preventDefault();
|
||||
var course = $(e.currentTarget).attr("data-course")
|
||||
if (frappe.session.user == "Guest") {
|
||||
@@ -74,5 +139,85 @@ frappe.ready(() => {
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
var view_all_mentors = (e) => {
|
||||
$(".wrapped").each((i, element) => {
|
||||
$(element).slideToggle("slow");
|
||||
})
|
||||
})
|
||||
var text_element = $(".view-all-mentors .course-instructor .all-mentors-text");
|
||||
var text = text_element.text() == "View all mentors" ? "View less" : "View all mentors";
|
||||
text_element.text(text);
|
||||
|
||||
if ($(".mentor-icon").css("transform") == "none") {
|
||||
$(".mentor-icon").css("transform", "rotate(180deg)");
|
||||
} else {
|
||||
$(".mentor-icon").css("transform", "");
|
||||
}
|
||||
}
|
||||
|
||||
var show_video_dialog = (e) => {
|
||||
e.preventDefault();
|
||||
$("#video-modal").modal("show");
|
||||
}
|
||||
|
||||
var show_review_dialog = (e) => {
|
||||
e.preventDefault();
|
||||
$("#review-modal").modal("show");
|
||||
}
|
||||
|
||||
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");
|
||||
}
|
||||
}
|
||||
|
||||
var expand_the_first_chapter = () => {
|
||||
var elements = $(".collapse");
|
||||
elements.each((i, elem) => {
|
||||
if (i <= 1) {
|
||||
$(elem).addClass("show");
|
||||
$(elem).siblings(".chapter-title").children(".chapter-icon").css("transform", "rotate(90deg)");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var highlight_rating = (e) => {
|
||||
var rating = $(e.currentTarget).attr("data-rating");
|
||||
$(".icon-rating").removeClass("star-click");
|
||||
$(".icon-rating").each((i, elem) => {
|
||||
if (i <= rating-1) {
|
||||
$(elem).addClass("star-click");
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
var submit_review = (e) => {
|
||||
e.preventDefault();
|
||||
var rating = $(".rating-field").children(".star-click").length;
|
||||
var review = $(".review-field").val();
|
||||
if (!review || !rating) {
|
||||
$(".error-field").text("Both Rating and Review are required.");
|
||||
return;
|
||||
}
|
||||
frappe.call({
|
||||
method: "community.lms.doctype.lms_course_review.lms_course_review.submit_review",
|
||||
args: {
|
||||
"rating": rating,
|
||||
"review": review,
|
||||
"course": decodeURIComponent($(e.currentTarget).attr("data-course"))
|
||||
},
|
||||
callback: (data) => {
|
||||
if (data.message == "OK") {
|
||||
$(".review-modal").modal("hide");
|
||||
frappe.msgprint("Thanks for providing your feedback!");
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="course-card-content">
|
||||
<div class="course-card-meta">
|
||||
<div class="course-card-meta muted-text">
|
||||
{% if course.get_chapters() | length %}
|
||||
<span>
|
||||
{{ course.get_chapters() | length }} Chapters
|
||||
|
||||
Reference in New Issue
Block a user