286 lines
10 KiB
HTML
286 lines
10 KiB
HTML
{% extends "lms/templates/lms_base.html" %}
|
|
{% block title %}
|
|
{{ course.title if course.title else _("New Course") }}
|
|
{% endblock %}
|
|
|
|
|
|
{% block page_content %}
|
|
<div class="common-page-style">
|
|
<div class="course-home-top-container">
|
|
{{ CourseHomeHeader(course) }}
|
|
<div class="course-home-page">
|
|
<div class="container">
|
|
<div class="course-body-container">
|
|
{{ CourseHeaderOverlay(course) }}
|
|
{{ Description(course) }}
|
|
{{ widgets.CourseOutline(course=course, membership=membership, is_user_interested=is_user_interested) }}
|
|
{% if course.status == "Approved" and not frappe.utils.cint(course.upcoming) %}
|
|
{% include "lms/templates/reviews.html" %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
|
|
{% macro CourseHomeHeader(course) %}
|
|
<div class="course-head-container">
|
|
<div class="container">
|
|
<div class="course-card-wide">
|
|
{{ BreadCrumb(course) }}
|
|
{{ CourseCardWide(course) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
|
|
<!-- BreadCrumb -->
|
|
{% macro BreadCrumb(course) %}
|
|
<div class="breadcrumb">
|
|
<a class="dark-links" href="/courses">{{ _("All Courses") }}</a>
|
|
<img class="ml-1 mr-1" src="/assets/lms/icons/chevron-right.svg">
|
|
<span class="breadcrumb-destination">{{ course.title if course.title else _("New Course") }}</span>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
|
|
<!-- Course Card -->
|
|
{% macro CourseCardWide(course) %}
|
|
<div class="d-flex align-items-center mt-8">
|
|
{% for tag in get_tags(course.name) %}
|
|
<div class="course-card-pills">
|
|
{{ tag }}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div id="title" {% if course.name %} data-course="{{ course.name | urlencode }}" {% endif %} class="page-title">
|
|
{% if course.title %} {{ course.title }} {% endif %}
|
|
</div>
|
|
|
|
<div id="intro">
|
|
{% if course.short_introduction %}
|
|
{{ course.short_introduction }}
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if not course.upcoming %}
|
|
<div class="avg-rating-stars">
|
|
<div class="rating">
|
|
{% for i in [1, 2, 3, 4, 5] %}
|
|
<svg class="icon icon-lg {% if i <= frappe.utils.ceil(avg_rating) %} star-click {% endif %}" data-rating="{{ i }}">
|
|
<use href="#icon-star"></use>
|
|
</svg>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="mt-2">
|
|
<div class="bold-heading">{{ _("Instructors") }}:</div>
|
|
{% for instructor in get_instructors(course.name) %}
|
|
<div class="mt-1">
|
|
{{ widgets.Avatar(member=instructor, avatar_class="avatar-small") }}
|
|
<a class="button-links" href="{{ get_profile_url(instructor.username) }}">
|
|
<span class="course-instructor"> {{ instructor.full_name }} </span>
|
|
</a>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
{% if membership %}
|
|
{% set progress = frappe.utils.cint(membership.progress) %}
|
|
<div class="mt-8">
|
|
<div class="progress-percent m-0">{{ progress }}% {{ _("Completed") }}</div>
|
|
<div class="progress" title="{{ progress }}% Completed">
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="{{ progress }}"
|
|
aria-valuemin="0" aria-valuemax="100" style="width:{{ progress }}%">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endmacro %}
|
|
|
|
|
|
<!-- Overlay -->
|
|
{% macro CourseHeaderOverlay(course) %}
|
|
<div class="course-overlay-card">
|
|
|
|
{% if course.video_link %}
|
|
<iframe class="preview-video" frameborder="0" allowfullscreen src="https://www.youtube.com/embed/{{ course.video_link }}"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>
|
|
{% endif %}
|
|
|
|
<div class="course-overlay-content">
|
|
|
|
<div class="cta-parent">
|
|
{{ CTASection(course, membership) }}
|
|
</div>
|
|
|
|
{{ Notes(course) }}
|
|
|
|
{% if course.paid_course %}
|
|
<div class="vertically-center mb-3 bold-heading">
|
|
{{ frappe.utils.fmt_money(course.course_price, 0, course.currency) }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="vertically-center mb-3">
|
|
<svg class="icon icon-md mr-1">
|
|
<use class="" href="#icon-users">
|
|
</svg>
|
|
{{ format_number(get_students(course.name) | length) }} {{ _("Enrolled") }}
|
|
</div>
|
|
|
|
<div class="vertically-center mb-3">
|
|
<svg class="icon icon-md mr-1">
|
|
<use href="#icon-education"></use>
|
|
</svg>
|
|
{{ get_lessons(course.name, None, False) }} {{ _("Lessons") }}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{% endmacro %}
|
|
|
|
|
|
<!-- Description -->
|
|
{% macro Description(course) %}
|
|
<div class="course-description-section">
|
|
{{ course.description }}
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
|
|
|
|
<!-- Related Courses Section -->
|
|
{% macro RelatedCourses(course) %}
|
|
{% if course.related_courses | length %}
|
|
<div class="related-courses">
|
|
<div class="container">
|
|
<div class="page-title"> {{ _("Other Courses") }} </div>
|
|
<div class="carousel slide" id="carouselExampleControls" data-ride="carousel" data-interval="false">
|
|
<div class="carousel-inner">
|
|
{% for crs in course.related_courses %}
|
|
{% if loop.index % 3 == 1 %}
|
|
<div class="carousel-item {% if loop.index == 1 %} active {% endif %}"><div class="cards-parent">
|
|
{% endif %}
|
|
{{ widgets.CourseCard(course=crs, read_only=False) }}
|
|
{% if loop.index % 3 == 0 or loop.index == course.related_courses | length %} </div> </div> {% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
|
|
{% if course.related_courses | length > 3 %}
|
|
<div class="slider-controls">
|
|
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
</a>
|
|
|
|
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
{% endif %}
|
|
{% endmacro %}
|
|
|
|
|
|
<!-- CTA's -->
|
|
{% macro CTASection(course, membership) %}
|
|
{% set lesson_index = get_lesson_index(membership.current_lesson) if membership and
|
|
membership.current_lesson else "1.1" if first_lesson_exists(course.name) else None %}
|
|
|
|
<div class="all-cta">
|
|
{% if is_instructor and not course.published and course.status != "Under Review" %}
|
|
<div class="btn btn-primary wide-button" id="submit-for-review" data-course="{{ course.name | urlencode }}">
|
|
{{ _("Submit for Review") }}
|
|
</div>
|
|
|
|
{% elif is_instructor and lesson_index %}
|
|
<a class="btn btn-primary wide-button" id="continue-learning"
|
|
href="{{ get_lesson_url(course.name, lesson_index) }}{{ course.query_parameter }}">
|
|
{{ _("Checkout Course") }}
|
|
</a>
|
|
|
|
{% elif course.upcoming and not is_user_interested and not is_instructor %}
|
|
<div class="btn btn-secondary wide-button notify-me" data-course="{{course.name | urlencode}}">
|
|
{{ _("Notify me when available") }}
|
|
</div>
|
|
|
|
{% elif is_cohort_staff(course.name, frappe.session.user) %}
|
|
<a class="btn btn-secondary button-links wide-button" href="/courses/{{course.name}}/manage">
|
|
{{ _("Manage Cohorts") }}
|
|
</a>
|
|
|
|
{% elif membership %}
|
|
<a class="btn btn-primary wide-button" id="continue-learning"
|
|
href="{{ get_lesson_url(course.name, lesson_index) }}{{ course.query_parameter }}">
|
|
{{ _("Continue Learning") }}
|
|
</a>
|
|
|
|
{% elif course.paid_course and not is_instructor %}
|
|
<a class="btn btn-primary wide-button" href="/billing/{{ course.name | urlencode }}">
|
|
{{ _("Buy This Course") }}
|
|
</a>
|
|
|
|
{% elif show_start_learing_cta(course, membership) %}
|
|
<div class="btn btn-primary wide-button enroll-in-course" data-course="{{ course.name | urlencode }}">
|
|
{{ _("Start Learning") }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% set progress = frappe.utils.cint(membership.progress) %}
|
|
|
|
{% if membership and course.enable_certification %}
|
|
{% if certificate %}
|
|
<a class="btn btn-secondary wide-button mt-2" href="/courses/{{ course.name }}/{{ certificate }}">
|
|
{{ _("Get Certificate") }}
|
|
</a>
|
|
|
|
{% elif course.grant_certificate_after == "Completion" and progress == 100 %}
|
|
<div class="btn btn-secondary wide-button mt-2" id="certification" data-course="{{ course.name }}">
|
|
{{ _("Get Certificate") }}
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{% if is_instructor or has_course_moderator_role() %}
|
|
<a class="btn btn-secondary wide-button mt-2" title="Edit Course" href="/courses/{{ course.name }}/edit">
|
|
<!-- <svg class="icon icon-md">
|
|
<use href="#icon-edit"></use>
|
|
</svg> -->
|
|
{{ _("Edit") }}
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% endmacro %}
|
|
|
|
|
|
<!-- Notes and Messages -->
|
|
{% macro Notes(course) %}
|
|
<div id="interest-alert" class="{% 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.") }}
|
|
</div>
|
|
|
|
{% if course.status == "Under Review" and is_instructor %}
|
|
<div class="mb-4">
|
|
{{ _("This course is currently under review. Once the review is complete, the System Admins will publish it on the website.") }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if no_of_attempts and no_of_attempts >= course.max_attempts %}
|
|
<p>
|
|
{{ _("You have exceeded the maximum number of attempts allowed to appear for evaluations of this course.") }}
|
|
</p>
|
|
{% endif %}
|
|
{% endmacro %} |