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

feat: profile page and other issues

Browse Source
This commit is contained in:
pateljannat
2021-07-09 09:48:08 +05:30
parent 27c01b3b0c
commit b1de2481a8
15 changed files with 338 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
community/lms/doctype/lms_course/lms_course.py
View File

@@ -8,7 +8,7 @@ from frappe.model.document import Document
import json
from ...utils import slugify
from community.query import find, find_all
from frappe.utils import flt
from frappe.utils import flt, cint
class LMSCourse(Document):
@staticmethod
@@ -115,6 +115,26 @@ class LMSCourse(Document):
# TODO: chapters should have a way to specify the order
return find_all("Chapter", course=self.name, order_by="index_")
def get_lessons(self):
""" Returns all lessons of this course """
lessons = []
chapters = self.get_chapters()
for chapter in chapters:
lessons.append(frappe.get_all("Lesson", {"chapter": chapter.name}))
return lessons
def get_course_progress(self):
""" Returns the course progress of the session user """
lesson_count = len(self.get_lessons())
completed_lessons = frappe.db.count("LMS Course Progress",
{
"course": self.name,
"owner": frappe.session.user,
"status": "Complete"
})
precision = cint(frappe.db.get_default("float_precision")) or 3
return flt(((completed_lessons/lesson_count) * 100), precision)
def get_batch(self, batch_name):
return find("LMS Batch", name=batch_name, course=self.name)

7
community/lms/widgets/BreadCrumb.html
View File

@@ -1,6 +1,8 @@
<div class="course-instructor breadcrumb">
<a class="dark-links" href="/courses">All Courses</a>
<img class="ml-1 mr-1" src="/assets/community/icons/side-arrow.svg">
{% if course %}
{% if lesson %}
<a class="dark-links" href="/courses/{{ course.name }}">{{ course.title }}</a>
<img class="ml-1 mr-1" src="/assets/community/icons/side-arrow.svg">
@@ -8,5 +10,10 @@
{% else %}
<span class="muted-text">{{ course.title }}</span>
{% endif %}
{% endif %}
{% if member_name %}
<span class="muted-text">{{ member_name }}</span>
{% endif %}
</div>

31
community/lms/widgets/ChapterTeaser.html
View File

@@ -16,25 +16,25 @@
{% for lesson in chapter.get_lessons() %}
<div class="lesson-info">
<div class="lesson-info {% if membership.current_lesson == lesson.name %} active-lesson {% endif %}">
{% if show_link or lesson.include_in_preview %}
{% if membership or lesson.include_in_preview %}
<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>
{% if show_link %}
{% if membership %}
<img class="lesson-progress-tick {{ course.get_progress(lesson.name) != 'Complete' and 'hide' }}"
src="/assets/community/icons/white-tick.svg">
{% endif %}
{% else %}
<div title="This lesson is not available for preview">
<div class="no-preview" title="This lesson is not available for preview">
<span class="dark-links">
{{ lesson.title }}
</span>
<i class="fa fa-lock ml-2"></i>
<img class="ml-2" src="/assets/community/icons/lock.svg">
</div>
{% endif %}
@@ -51,7 +51,6 @@
<script>
frappe.ready(() => {
expand_the_first_chapter();
expand_the_active_chapter();
})
@@ -65,10 +64,28 @@
}
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) {
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) => {

63
community/lms/widgets/CourseCard.html Normal file
View File

@@ -0,0 +1,63 @@
<div class="common-card-style course-card">
<div class="course-image" style="background-image: url({{ course.image }});">
<div class="course-tags">
{% for tag in course.get_tags() %}
<div class="course-card-pills">{{ tag }}</div>
{% endfor %}
</div>
</div>
<div class="course-card-content">
<div class="course-card-meta muted-text">
{% if course.get_chapters() | length %}
<span>
{{ course.get_chapters() | length }} Chapters
</span>
{% endif %}
{% if course.get_chapters() | length and course.get_upcoming_batches() | length %}
<span class="font-weight-bold ml-3 mr-3"> . </span>
{% endif %}
{% if course.get_upcoming_batches() | length %}
<span class="">
{{ course.get_upcoming_batches() | length }} Open Batches
</span>
{% endif %}
</div>
<div class="course-card-title">{{ course.title }}</div>
<div class="card-divider"></div>
<div class="course-card-meta-2">
{{ widgets.Avatar(member=course.get_instructor(), avatar_class="avatar-small") }}
<span class="course-instructor">
{{ course.get_instructor().full_name }}
</span>
{% if course.get_students() | length %}
<span class="course-student-count">
<img class="icon-background mr-1" src="/assets/community/icons/user.svg" />
{{ course.get_students() | length }}
</span>
{% endif %}
</div>
{% set membership = course.get_membership(frappe.session.user) %}
{% set lesson_index = course.get_lesson_index(membership.current_lesson) if membership and
membership.current_lesson
else '1.1' %}
{% set query_parameter = "?batch=" + membership.batch if membership and membership.batch else "" %}
{% if membership %}
<div class="view-course-link is-primary">
Continue Course <img class="ml-3" src="/assets/community/icons/white-arrow.svg" />
</div>
<a class="stretched-link" href="{{ course.get_learn_url(lesson_index) }}{{ query_parameter }}"></a>
{% else %}
<div class="view-course-link">
View Course <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
</div>
<a class="stretched-link" href="/courses/{{ course.name }}"></a>
{% endif %}
</div>
</div>

2
community/lms/widgets/CourseOutline.html
View File

@@ -5,7 +5,7 @@
</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)}}
{{ widgets.ChapterTeaser(index=loop.index, chapter=chapter, course=course, batch=batch, membership=membership) }}
{% endfor %}
</div>
</div>

4
community/lms/widgets/MemberCard.html
View File

@@ -1,10 +1,10 @@
<div class="common-card-style member-card {{dimension_class}} ">
{% set avatar_class = "avatar-xl" if dimension_class == "member-card-large" else "avatar-large"%}
{% set avatar_class = "avatar-large" if dimension_class == "member-card-medium" else "avatar-xl"%}
{{ 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() %}
{% set course_count = member.get_authored_courses() | length %}
{% if show_course_count and course_count > 0 %}
{% set suffix = "Courses" if course_count > 1 else "Course" %}
<div class="small-title">

25
community/overrides/user.py
View File

@@ -5,15 +5,18 @@ import hashlib
class CustomUser(User):
def get_course_count(self) -> int:
def get_authored_courses(self) -> int:
"""Returns the number of courses authored by this user.
"""
return frappe.db.count(
return frappe.get_all(
'LMS Course', {
'owner': self.email
'owner': self.name
})
def get_palette(self):
"""
Returns a color unique to each member for Avatar """
palette = [
['--orange-avatar-bg', '--orange-avatar-color'],
['--pink-avatar-bg', '--pink-avatar-color'],
@@ -40,3 +43,19 @@ class CustomUser(User):
'member_type': 'Mentor'
})
def get_user_reviews(self):
""" Returns the reviews created by user """
return frappe.get_all("LMS Course Review",
{
"owner": self.name
})
def get_course_membership(self, member_type=None):
""" Returns all memberships of the user """
filters = {
"member": self.name
}
if member_type:
filters["member_type"] = member_type
return frappe.get_all("LMS Batch Membership", filters, ["name", "course"])

60
community/public/css/style.css
View File

@@ -285,12 +285,12 @@ input[type=checkbox] {
flex-direction: column;
width: 352px;
height: 380px;
margin: 0px 32px 32px 0px;
margin: 0px 20px 32px 0px;
}
@media (max-width: 768px) {
.course-card {
margin: 0px 18px 32px 0px;
margin: 0px 8px 32px 0px;
width: 336px;
}
}
@@ -368,7 +368,7 @@ input[type=checkbox] {
flex-wrap: wrap;
}
@media (max-width: 768px) {
@media (max-width: 375px) {
.cards-parent {
justify-content: center;
}
@@ -538,14 +538,14 @@ div.custom-checkbox>label>input:checked+img {
padding: 0px 0px 80px;
display: flex;
flex-direction: column;
width: 1120px;
max-width: 1120px;
margin: 0 auto;
}
@media (max-width: 768px) {
.course-home-page {
padding: 0px 0px 30px;
width: 90%;
max-width: 688px;
}
}
@@ -781,6 +781,10 @@ div.custom-checkbox>label>input:checked+img {
font-weight: bold;
}
.member-card-xl .member-card-title {
font-weight: bold;
}
.member-card-medium {
width: 160px;
height: 140px;
@@ -802,6 +806,12 @@ div.custom-checkbox>label>input:checked+img {
}
}
.member-card-xl {
height: 188px;
margin-top: 16px;
background: #E2E6E9;
}
.course-home-headings {
font-weight: 600;
font-size: 22px;
@@ -1029,3 +1039,43 @@ div.custom-checkbox>label>input:checked+img {
padding: 2px;
margin: 0px 4px 4px;
}
@media (max-width: 375px) {
.profile-courses {
padding: 0px 24px 0px;
}
}
.no-preview {
display: flex;
}
.progress-text {
font-size: 12px;
line-height: 165%;
}
.course-creator-progress-parent {
display: flex;
flex-direction: column;
}
.progress-card {
width: 256px;
display: flex;
flex-direction: column;
padding: 24px;
}
.progress {
width: 100%;
height: 8px;
}
.progress-bar {
background-color: #318AD8;
}
.hljs {
white-space: pre-wrap;
}

3
community/public/icons/lock.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.21372 1.32458C4.68749 0.842346 5.33007 0.571429 6.00009 0.571429C6.67011 0.571429 7.31269 0.842346 7.78647 1.32458C8.26024 1.80682 8.52641 2.46087 8.52641 3.14286V5.14286H3.47378V3.14286C3.47378 2.46087 3.73994 1.80682 4.21372 1.32458ZM2.91237 5.14286V3.14286C2.91237 2.30932 3.23769 1.50992 3.81675 0.920521C4.39581 0.331122 5.18118 0 6.00009 0C6.81901 0 7.60438 0.331122 8.18344 0.920521C8.7625 1.50992 9.08781 2.30932 9.08781 3.14286V5.14286H9.9299C10.705 5.14286 11.3334 5.78245 11.3334 6.57143V10.5714C11.3334 11.3604 10.705 12 9.9299 12H2.07026C1.29512 12 0.666748 11.3604 0.666748 10.5714V6.57143C0.666748 5.78245 1.29512 5.14286 2.07026 5.14286H2.91237ZM8.80711 5.71429H3.19308L2.07026 5.71429C1.60517 5.71429 1.22815 6.09804 1.22815 6.57143V10.5714C1.22815 11.0448 1.60517 11.4286 2.07026 11.4286H9.9299C10.395 11.4286 10.772 11.0448 10.772 10.5714V6.57143C10.772 6.09804 10.395 5.71429 9.9299 5.71429L8.80711 5.71429Z" fill="#192734"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

6
community/www/batch/learn.html
View File

@@ -22,10 +22,10 @@
{% block content %}
<div class="common-page-style">
<div class="course-details-page">
{{ widgets.Breadcrumb(course=course, lesson=lesson) }}
{{ widgets.BreadCrumb(course=course, lesson=lesson) }}
<div class="course-content-parent">
<div class="course-details-outline">
{{ widgets.CourseOutline(course=course, show_link=membership) }}
{{ widgets.CourseOutline(course=course, membership=membership) }}
</div>
<div class="lesson-pagination-parent">
{{ LessonContent(lesson) }}
@@ -40,7 +40,7 @@
{% macro LessonContent(lesson) %}
<div class="lesson-content">
<div class="course-home-headings title" data-lesson="{{ lesson.name }}" data-course="{{ course.name }}">
<div class="course-home-headings title {% if membership %} is-member {% endif %}" data-lesson="{{ lesson.name }}" data-course="{{ course.name }}">
{{ lesson.title }}
<span class="lesson-progress {{hide if course.get_progress(lesson.name) != 'Complete' else ''}}">COMPLETED</span>
</div>

11
community/www/batch/learn.js
View File

@@ -1,7 +1,5 @@
frappe.ready(() => {
highlight_active_lesson();
save_current_lesson();
$("#progress").click((e) => {
@@ -18,15 +16,8 @@ frappe.ready(() => {
})
var highlight_active_lesson = () => {
var selector = $(`a[href="${decodeURIComponent(window.location.pathname)}"]`).parent();
if (selector.length) {
selector.addClass('active-lesson');
}
}
var save_current_lesson = () => {
if ($(".title").attr("data-membership")) {
if ($(".title").hasClass("is-member")) {
frappe.call("community.lms.api.save_current_lesson", {
course_name: $(".title").attr("data-course"),
lesson_name: $(".title").attr("data-lesson")

3
community/www/batch/utils.py
View File

@@ -17,8 +17,9 @@ def get_common_context(context):
context.course = course
membership = course.get_membership(frappe.session.user, batch_name)
if membership:
print(membership)
context.membership = membership
if membership:
batch = course.get_batch(membership.batch)
if batch:

20
community/www/courses/course.html
View File

@@ -89,13 +89,29 @@
{% macro CourseOutlineAndCreator(course) %}
<div class="course-outline-instructor-parent">
<div class="course-home-outline">
{{ widgets.CourseOutline(course=course, show_link=membership) }}
{{ widgets.CourseOutline(course=course, membership=membership) }}
</div>
<div class="">
<div class="course-creator-progress-parent">
<div class="course-home-headings">
Creator
</div>
{{ widgets.MemberCard(member=course.get_instructor(), show_course_count=True, dimension_class="member-card-large") }}
{% if course.get_course_progress() %}
<div class="course-home-headings">
Your Progress
</div>
<div class="common-card-style progress-card">
<p class="small-title">
Great work so far!
</p>
<p class="progress-text">
Challenge yourself to complete the lesson and grow professionally.
</p>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: {{ course.get_course_progress() }}%" aria-valuenow="{{ course.get_course_progress() }}" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
{% endif %}
</div>
</div>
{% endmacro %}

71
community/www/courses/index.html
View File

@@ -10,88 +10,19 @@
{% block content %}
<div class="common-page-style">
<div class="">
<div class="course-top-section">
<div class="courses-header">
{{ 'All Courses' }}
</div>
<div class="cards-parent">
{% for course in courses %}
{{ course_card(course) }}
{{ widgets.CourseCard(course=course) }}
{% endfor %}
</div>
</div>
</div>
</div>
{% endblock %}
{% macro course_card(course) %}
<div class="common-card-style course-card">
<div class="course-image" style="background-image: url({{ course.image }});">
<div class="course-tags">
{% for tag in course.get_tags() %}
<div class="course-card-pills">{{ tag }}</div>
{% endfor %}
</div>
</div>
<div class="course-card-content">
<div class="course-card-meta muted-text">
{% if course.get_chapters() | length %}
<span>
{{ course.get_chapters() | length }} Chapters
</span>
{% endif %}
{% if course.get_chapters() | length and course.get_upcoming_batches() | length %}
<span class="font-weight-bold ml-3 mr-3"> . </span>
{% endif %}
{% if course.get_upcoming_batches() | length %}
<span class="">
{{ course.get_upcoming_batches() | length }} Open Batches
</span>
{% endif %}
</div>
<div class="course-card-title">{{ course.title }}</div>
<div class="card-divider"></div>
<div class="course-card-meta-2">
{{ widgets.Avatar(member=course.get_instructor(), avatar_class="avatar-small") }}
<span class="course-instructor">
{{ course.get_instructor().full_name }}
</span>
{% if course.get_students() | length %}
<span class="course-student-count">
<img class="icon-background mr-1" src="/assets/community/icons/user.svg" />
{{ course.get_students() | length }}
</span>
{% endif %}
</div>
{% set membership = course.get_membership(frappe.session.user) %}
{% set lesson_index = course.get_lesson_index(membership.current_lesson) if membership and
membership.current_lesson
else '1.1' %}
{% set query_parameter = "?batch=" + membership.batch if membership and membership.batch else "" %}
{% if membership %}
<div class="view-course-link is-primary">
Continue Course <img class="ml-3" src="/assets/community/icons/white-arrow.svg" />
</div>
<a class="stretched-link" href="{{ course.get_learn_url(lesson_index) }}{{ query_parameter }}"></a>
{% else %}
<div class="view-course-link">
View Course <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
</div>
<a class="stretched-link" href="/courses/{{ course.name }}"></a>
{% endif %}
</div>
</div>
{% endmacro %}
{% block script %}
<script>
frappe.ready(() => {

183
community/www/profiles/profile.html
View File

@@ -1,89 +1,110 @@
{% extends "templates/web.html" %}
{% extends "templates/base.html" %}
{% block head_include %}
<meta name="description" content="{{ 'Community' }}" />
<meta name="keywords" content="An app that supports Communities." />
<style>
section {
padding: 2rem;
color: #000000;
}
svg {
width: 200px;
height: 200px;
}
.dashboard__parent {
display: flex;
}
.dashboard__name {
font-weight: normal;
font-style: normal;
font-size: 36px;
line-height: 42px;
}
.dashboard__details {
padding-top: 2rem;
}
.dashboard__course {
border: 1px solid black;
padding: 1rem;
margin: 0.5rem;
width: 48%;
}
.dashboard__courseHeader {
display: flex;
justify-content: space-between;
height: 50px;
margin-bottom: 3px;
}
.dashboard__badge {
background: #D6D6FF;
border-radius: 20px;
color: #1712FE;
padding: 0.5rem;
height: fit-content;
}
.dashboard__description {
height: 100px;
}
@media (max-width: 900px) {
.dashboard__parent {
flex-direction: column;
}
}
</style>
{% endblock %}
{% block page_content %}
<div class="dashboard__parent">
<div class="dashboard__photo mr-5">
{{ widgets.Avatar(member=member, avatar_class="avatar-xl") }}
{% block content %}
<div class="common-page-style">
<div class="course-home-page">
{{ widgets.BreadCrumb(member_name = member.full_name)}}
{{ widgets.MemberCard(member=member, show_course_count=True, dimension_class="member-card-xl") }}
{{ AboutOverviewSection(member) }}
<div class="profile-courses">
{{ CoursesCreated(member) }}
{{ CoursesMentored(member) }}
{{ CoursesEnrolled(member) }}
</div>
<div class="dashboard__details">
<div class="dashboard__name">
<a class="anchor_style" href="/{{member.username}}">{{ member.full_name }}</a>
{{ ProfileTabs(profile_tabs) }}
</div>
</div>
{% endblock %}
{% macro AboutOverviewSection(member) %}
<div class="course-outline-instructor-parent">
{% if member.bio %}
<div>
<ul class="nav nav-tabs mt-4" id="myTab" role="tablist">
{% for tab in profile_tabs %}
<li class="nav-item">
{% set slug = title.lower().replace(" ", "-") %}
{% set selected = loop.index == 1 %}
{% set active = 'active' if loop.index == 1 else '' %}
<a class="nav-link {{ active }}" id="{{ slug }}-tab" data-toggle="tab" href="#{{ slug }}" role="tab" aria-controls="{{ slug }}"
aria-selected="{{ selected }}">Sketches</a>
</li>
<div class="course-home-headings">
About
</div>
<div class="common-card-style description-card">
{{ member.bio }}
</div>
</div>
{% endif %}
<div>
<div class="course-home-headings">
Overview
</div>
<div class="common-card-style overview-card small-title">
{% if member.get_course_membership("Student") | length %}
<div class="overtime-item">
<img class="icon-background mr-1" src="/assets/community/icons/user.svg" />
{{ member.get_course_membership("Student") | length }} Enrolled
</div>
{% endif %}
{% if member.get_user_reviews() | length %}
<div class="overtime-item">
<img class="icon-background mr-1" src="/assets/community/icons/rating.svg" />
{{ member.get_user_reviews() | length }} Created
</div>
{% endif %}
{% if member.get_course_membership("Mentor") | length%}
<div class="overtime-item">
<img class="icon-background mr-1" src="/assets/community/icons/calendar.svg" />
{{ member.get_course_membership("Mentor") | length }} Mentored
</div>
{% endif %}
</div>
</div>
</div>
{% endmacro %}
{% macro CoursesCreated(member) %}
{% if member.get_authored_courses() | length %}
<div class="course-home-headings">
Courses Created
</div>
<div class="cards-parent">
{% for course in member.get_authored_courses() %}
{% set course_details = frappe.get_doc("LMS Course", course) %}
{{ widgets.CourseCard(course=course_details) }}
{% endfor %}
</ul>
</div>
<div>
</div>
{% endif %}
{% endmacro %}
{% macro CoursesMentored(member) %}
{% if member.get_course_membership("Mentor") | length %}
<div class="course-home-headings">
Courses Mentored
</div>
<div class="cards-parent">
{% for membership in member.get_course_membership("Mentor") %}
{% set course_details = frappe.get_doc("LMS Course", membership.course) %}
{{ widgets.CourseCard(course=course_details) }}
{% endfor %}
</div>
{% endif %}
{% endmacro %}
{% macro CoursesEnrolled(member) %}
{% if member.get_course_membership("Student") | length %}
<div class="course-home-headings">
Courses Enrolled
</div>
<div class="cards-parent">
{% for membership in member.get_course_membership("Student") %}
{% set course_details = frappe.get_doc("LMS Course", membership.course) %}
{{ widgets.CourseCard(course=course_details) }}
{% endfor %}
</div>
{% endif %}
{% endmacro %}
{% macro ProfileTabs(profile_tabs) %}
<div>
{% for tab in profile_tabs %}
{% set slug = title.lower().replace(" ", "-") %}
<div class="tab-content">
@@ -92,9 +113,5 @@
</div>
</div>
{% endfor %}
</div>
</div>
</div>
{% endblock %}
<!-- this is a sample default web page template -->
{% endmacro %}