217 lines
7.7 KiB
HTML
217 lines
7.7 KiB
HTML
{% extends "templates/base.html" %}
|
|
{% from "www/macros/common_macro.html" import MentorsSection %}
|
|
{% block title %}{{ course.title }}
|
|
{% endblock %}
|
|
{% block head_include %}
|
|
<link rel="stylesheet" href="/assets/frappe/css/font-awesome.css">
|
|
{% endblock %}
|
|
{% block content %}
|
|
<div class="common-page-style">
|
|
<div class="container course-home-page">
|
|
{{ widgets.BreadCrumb(course=course) }}
|
|
{{ CourseCardWide(course) }}
|
|
{{ CourseOutlineAndCreator(course) }}
|
|
{{ Mentors(course) }}
|
|
{{ CourseDescriptionAndOverview(course) }}
|
|
{{ widgets.Reviews(course=course, membership=membership) }}
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
<!-- Course Card -->
|
|
|
|
{% macro CourseCardWide(course) %}
|
|
<div class="common-card-style course-card-wide">
|
|
<div class="course-image-wide {% if not course.image %} default-image {% endif %}" {% if course.image
|
|
%}style="background-image: url({{ course.image }});" {% endif %}>
|
|
<div class="course-tags">
|
|
{% for tag in course.get_tags() %}
|
|
<div class="course-card-pills">{{ tag }}</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% if not course.image %}
|
|
<div class="default-image-text">{{ course.title[0] }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="course-card-wide-content">
|
|
<div class="course-info">
|
|
<div class="course-card-wide-title">
|
|
{{ course.title }}
|
|
</div>
|
|
<div class="course-card-wide-intro">
|
|
{{ course.short_introduction }}
|
|
</div>
|
|
</div>
|
|
<div class="course-buttons">
|
|
{% if not course.disable_self_learning and not membership and not course.upcoming and not restriction.restrict %}
|
|
<div class="button wide-button start-learning is-primary join-batch" data-course="{{ course.name | urlencode }}">
|
|
{{ _("Start Learning") }}
|
|
<img class="ml-2" src="/assets/school/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="button 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/school/icons/white-arrow.svg" />
|
|
</a>
|
|
{% endif %}
|
|
{% if course.upcoming and not is_user_interested %}
|
|
<button class="button wide-button is-default"
|
|
id="notify-me" data-course="{{course.name | urlencode}}">
|
|
Notify me when available
|
|
</button>
|
|
{% endif %}
|
|
{% if course.video_link %}
|
|
<div class="button wide-button is-secondary video-preview">
|
|
Watch Video Preview
|
|
<img class="ml-2" src="/assets/school/images/play.png" />
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="interest-alert" class="alert alert-dismissible empty-state p-4 mt-10 {% if not is_user_interested %} hide {% endif %}">
|
|
You have opted to be notified for this course. You will receive an email when the course becomes available.
|
|
<a href="#" class="close p-4" data-dismiss="alert" aria-label="close">×</a>
|
|
</div>
|
|
|
|
{% if course.video_link %}
|
|
<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>
|
|
{% endif %}
|
|
{% endmacro%}
|
|
|
|
<!-- Course Outline and Creator -->
|
|
|
|
{% macro CourseOutlineAndCreator(course) %}
|
|
{% set certificate = course.is_certified() %}
|
|
<div class="course-outline-instructor-parent">
|
|
<div class="course-home-outline">
|
|
{{ widgets.CourseOutline(course=course, membership=membership) }}
|
|
</div>
|
|
<div class="course-creator-progress-parent">
|
|
<div class="course-creator-section">
|
|
<div class="course-home-headings">
|
|
Creator
|
|
</div>
|
|
{{ widgets.MemberCard(member=course.get_instructor(), show_course_count=True, dimension_class="member-card-large") }}
|
|
</div>
|
|
{% set progress = frappe.utils.cint(membership.progress) %}
|
|
{% if progress %}
|
|
<div class="course-progress-section">
|
|
<div class="course-home-headings">
|
|
Your Progress
|
|
</div>
|
|
<div class="common-card-style progress-card">
|
|
<p class="small-title">
|
|
{% if progress != 100 %}
|
|
Great work so far!
|
|
{% else %}
|
|
Excellent work on completing this course 👏
|
|
{% endif %}
|
|
</p>
|
|
<p class="progress-text">
|
|
{% if progress != 100 %}
|
|
Challenge yourself to complete the lessons and grow professionally.
|
|
{% else %}
|
|
You have reached a new level in your journey to success!
|
|
{% endif %}
|
|
</p>
|
|
<div class="progress-percentage">
|
|
{{ frappe.utils.rounded(progress) }}%
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: {{ progress }}%" aria-valuenow="{{ progress }}"
|
|
aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
{% if certificate %}
|
|
<a class="muted-text dark-links mt-5 text-center" href="/courses/{{ course.name }}/{{ certificate }}">Get
|
|
Certificate</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
<!-- 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="") }}
|
|
{% endfor %}
|
|
</div>
|
|
<div class="view-all-mentors">
|
|
<span class="card-divider-dark flex-one"></span>
|
|
<span class="course-instructor"><span class="all-mentors-text">View all mentors</span> <img class="mentor-icon"
|
|
src="/assets/school/icons/down-arrow.svg" /></span>
|
|
<span class="card-divider-dark flex-one"></span>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endmacro %}
|
|
|
|
<!-- Course Description and Overview -->
|
|
|
|
{% macro CourseDescriptionAndOverview(course) %}
|
|
<div class="course-outline-instructor-parent">
|
|
<div class="course-description-section">
|
|
<div class="course-home-headings">
|
|
Course Description
|
|
</div>
|
|
<div class="common-card-style description-card">
|
|
{{ frappe.utils.md_to_html(course.description) }}
|
|
</div>
|
|
</div>
|
|
{% set avg_rating = course.get_average_rating() %}
|
|
{% if course.get_students() | length or avg_rating %}
|
|
<div class="course-overview-section">
|
|
<div class="course-home-headings">
|
|
Overview
|
|
</div>
|
|
<div class="common-card-style overview-card small-title">
|
|
{% if course.get_students() | length %}
|
|
<div class="overview-item">
|
|
<img class="icon-background mr-1" src="/assets/school/icons/user.svg" />
|
|
{{ course.get_students() | length }} Enrolled
|
|
</div>
|
|
{% endif %}
|
|
{% if avg_rating %}
|
|
<div class="overview-item">
|
|
<img class="icon-background mr-1" src="/assets/school/icons/rating.svg" />
|
|
{{ frappe.utils.flt(avg_rating, frappe.get_system_settings("float_precision") or 3) }} Rating
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endmacro %}
|