feat: profile page and other issues

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

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>

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

View File

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

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 %}

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) }}
{% endfor %}
</div>
<div class="course-top-section">
<div class="courses-header">
{{ 'All Courses' }}
</div>
<div class="cards-parent">
{% for course in courses %}
{{ widgets.CourseCard(course=course) }}
{% endfor %}
</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(() => {

View File

@@ -1,100 +1,117 @@
{% 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") }}
</div>
<div class="dashboard__details">
<div class="dashboard__name">
<a class="anchor_style" href="/{{member.username}}">{{ member.full_name }}</a>
</div>
<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>
{% endfor %}
</ul>
</div>
<div>
{% for tab in profile_tabs %}
{% set slug = title.lower().replace(" ", "-") %}
<div class="tab-content">
<div class="tab-pane fade py-4 show active" role="tabpanel" id="slug">
{{ tab.render() }}
</div>
</div>
{% endfor %}
{% 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>
{{ ProfileTabs(profile_tabs) }}
</div>
</div>
{% endblock %}
<!-- this is a sample default web page template -->
{% macro AboutOverviewSection(member) %}
<div class="course-outline-instructor-parent">
{% if member.bio %}
<div>
<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 %}
</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">
<div class="tab-pane fade py-4 show active" role="tabpanel" id="slug">
{{ tab.render() }}
</div>
</div>
{% endfor %}
</div>
{% endmacro %}