264 lines
8.9 KiB
HTML
264 lines
8.9 KiB
HTML
{% extends "templates/base.html" %}
|
|
{% 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 pt-0">
|
|
<div class="course-home-top-container">
|
|
{{ CourseHomeHeader(course) }}
|
|
{{ CourseHeaderOverlay(course) }}
|
|
<div class="container course-home-page">
|
|
<div class="course-body-container">
|
|
{{ Description(course) }}
|
|
{{ widgets.CourseOutline(course=course, membership=membership) }}
|
|
{{ widgets.Reviews(course=course, membership=membership) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ RelatedCourses(course) }}
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% macro CourseHomeHeader(course) %}
|
|
<div class="course-head-container"
|
|
style=" {% if course.image %} background-position: center; background-size: cover; background-image: url({{ course.image }});
|
|
{% else %} background-color: var(--gray-200) {% endif %}">
|
|
<div class="container pt-10 pb-10">
|
|
{{ BreadCrumb(course) }}
|
|
{{ CourseCardWide(course) }}
|
|
</div>
|
|
</div>
|
|
|
|
{% endmacro %}
|
|
<!-- BreadCrumb -->
|
|
|
|
{% macro BreadCrumb(course) %}
|
|
<div class="breadcrumb">
|
|
<a class="dark-links" href="/courses">{{ _("All Courses") }}</a>
|
|
<img class="ml-2 mr-2" src="/assets/school/icons/chevron-right.svg">
|
|
<span class="breadcrumb-destination">{{ course.title }}</span>
|
|
</div>
|
|
{% endmacro %}
|
|
<!-- Course Card -->
|
|
|
|
{% macro CourseCardWide(course) %}
|
|
<div class="course-card-wide">
|
|
<div class="d-flex align-items-center">
|
|
{% for tag in get_tags(course.name) %}
|
|
<div class="course-card-pills">{{ tag }}</div>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="course-card-wide-title">
|
|
{{ course.title }}
|
|
</div>
|
|
<div class="">
|
|
{{ course.short_introduction }}
|
|
</div>
|
|
|
|
<div class="course-intructor-rating-section">
|
|
<div class="d-flex align-items-center">
|
|
{% set instructors = get_instructors(course.name) %}
|
|
{% set ins_len = instructors | length %}
|
|
{% for instructor in instructors %}
|
|
{% if ins_len > 1 and loop.index == 1 %}
|
|
<div class="avatar-group overlap">
|
|
{% endif %}
|
|
{{ widgets.Avatar(member=instructor, avatar_class="avatar-small") }}
|
|
|
|
{% if ins_len > 1 and loop.index == ins_len %}
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
<a class="button-links" href="{{ get_profile_url(instructors[0].username) }}">
|
|
<span class="course-instructor">
|
|
{% if ins_len == 1 %}
|
|
{{ instructors[0].full_name }}
|
|
{% else %}
|
|
{% set suffix = "other" if ins_len - 1 == 1 else "others" %}
|
|
{{ instructors[0].full_name.split(" ")[0] }} and {{ ins_len - 1 }} {{ suffix }}
|
|
{% endif %}
|
|
</span>
|
|
</a>
|
|
</div>
|
|
|
|
<span class="seperator"></span>
|
|
|
|
{% set avg_rating = get_average_rating(course.name) %}
|
|
{% if avg_rating %}
|
|
<div class="rating mr-2">
|
|
{% for i in [1, 2, 3, 4, 5] %}
|
|
<svg class="icon icon-md {% if i <= avg_rating %} star-click {% endif %}" data-rating="{{ i }}">
|
|
<use href="#icon-star"></use>
|
|
</svg>
|
|
{% endfor %}
|
|
</div>
|
|
<span> {{ avg_rating }} {{ _(" Rating ") }} </span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if membership %}
|
|
{% set progress = frappe.utils.cint(membership.progress) %}
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="{{ progress }}"
|
|
aria-valuemin="0" aria-valuemax="100" style="width:{{ progress }}%">
|
|
<span class="sr-only"> {{ progress }} Complete</span>
|
|
</div>
|
|
</div>
|
|
<div class="progress-percent">{{ progress }}% Completed</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
|
|
{% endmacro%}
|
|
|
|
{% macro CourseHeaderOverlay(course) %}
|
|
<div class="course-overlay-card {% if course.video_link %} video-in-overlay {% endif %}">
|
|
|
|
{% if course.video_link %}
|
|
<iframe class="preview-video" src="{{ course.video_link }}"></iframe>
|
|
{% endif %}
|
|
|
|
<div class="course-overlay-content">
|
|
|
|
<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>
|
|
|
|
<div class="course-home-headings"> {{ course.title }} </div>
|
|
{% if get_lessons(course.name) | length %}
|
|
<div class="mt-3">
|
|
<img class="mr-3" src="/assets/school/icons/book.svg">
|
|
{{ get_lessons(course.name) | length }} {{ _("Lessons") }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if get_students(course.name) | length %}
|
|
{% set initial_members = get_initial_members(course.name) %}
|
|
<div class="overlay-student-count">
|
|
{% for member in initial_members %}
|
|
{% if initial_members | length > 1 and loop.index == 1 %}
|
|
<div class="avatar-group overlap">
|
|
{% endif %}
|
|
{{ widgets.Avatar(member=member, avatar_class="avatar-small") }}
|
|
|
|
{% if initial_members | length > 1 and loop.index == initial_members | length %}
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
<div class="course-meta ml-2">{{ get_students(course.name) | length }} {{ _("Enrolled") }} </div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
|
|
{% 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 = 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="{{ get_lesson_url(course.name, 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 %}
|
|
<div class="button wide-button is-default"
|
|
id="notify-me" data-course="{{course.name | urlencode}}">
|
|
Notify me when available
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if is_cohort_staff(course.name, frappe.session.user) %}
|
|
<a class="button wide-button is-secondary"
|
|
href="/courses/{{course.name}}/manage"
|
|
style="color: inherit;">
|
|
Manage the course
|
|
</a>
|
|
{% endif %}
|
|
|
|
{% set certificate = is_certified(course.name) %}
|
|
{% set progress = frappe.utils.cint(membership.progress) %}
|
|
{% if certificate %}
|
|
<a class="button wide-button is-secondary mt-2" href="/courses/{{ course.name }}/{{ certificate }}">
|
|
{{ _("Get Certificate") }}
|
|
</a>
|
|
{% elif course.enable_certification and progress == 100 %}
|
|
<div class="button wide-button is-secondary mt-4" id="certification" data-course="{{ course.name }}">
|
|
{{ _("Get Certificate") }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro Description(course) %}
|
|
<div class="course-description-section">
|
|
{{ frappe.utils.md_to_html(course.description) }}
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro CourseCreator(course) %}
|
|
<div class="course-home-headings"> {{ _("Course Creators") }} </div>
|
|
|
|
<div class="common-card-style course-creators-card">
|
|
{% set instructors = get_instructors(course.name) %}
|
|
{% for instructor in instructors %}
|
|
<div class="d-flex align-items-center">
|
|
{{ widgets.Avatar(member=instructor, avatar_class="avatar-medium") }}
|
|
<div class="ml-4">
|
|
<div class="course-creator-name"> {{ instructor.full_name }} </div>
|
|
<div class="course-meta"> {{ get_authored_courses(instructor.name) | length }} {{ _("Courses Created") }} </div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro RelatedCourses(course) %}
|
|
{% if course.related_courses | length %}
|
|
<div class="related-courses">
|
|
<div class="container">
|
|
<div class="course-home-headings"> {{ _("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>
|
|
<span class="sr-only">Previous</span>
|
|
</a>
|
|
|
|
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="sr-only">Next</span>
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
{% endif%}
|
|
{% endmacro %}
|