feat: profile page and other issues
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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")
|
||||
|
||||
@@ -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:
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -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(() => {
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
Reference in New Issue
Block a user