style: course home

school/www/courses/course.html

@@ -1,234 +1,246 @@
 {% 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="common-page-style pt-0">
+  {{ CourseHomeHeader(course) }}
   <div class="container course-home-page">
-    {{ widgets.BreadCrumb(course=course) }}
-    {{ CourseCardWide(course) }}
-    {{ CourseSections(course) }}
-    {{ Mentors(course) }}
-    {{ widgets.Reviews(course=course, membership=membership) }}
+    <div class="course-body-container">
+      {{ Description(course) }}
+      {{ widgets.CourseOutline(course=course, membership=membership) }}
+      {{ CourseCreator(course) }}
+      {{ widgets.Reviews(course=course, membership=membership) }}
+    </div>
+    {{ RelatedCourses(course) }}
   </div>
 </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) }}
+    {{ CourseHeaderOverlay(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="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>
+<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>
-    {% if not course.image %}
-    <div class="default-image-text">{{ course.title[0] }}</div>
+    <span> {{ avg_rating }} {{ _(" Rating ") }} </span>
     {% 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 = 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 %}
-      <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 %}
 
-      {% 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 %}
+  {% 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>
 
-<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">&times;</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">&times;</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 CourseHeaderOverlay(course) %}
+<div class="course-overlay-card {% if course.video_link %} video-in-overlay {% endif %}">
 
-{% macro CourseSections(course) %}
-<div class="course-outline-instructor-parent">
-  <div class="course-home-outline">
-    {{ widgets.CourseOutline(course=course, membership=membership) }}
-    {{ Description(course) }}
-  </div>
-  <div class="course-creator-progress-parent">
-    {{ CreatorSection(course) }}
-    {{ Progress(course) }}
-    {{ Overview(course) }}
-  </div>
-</div>
-{% endmacro %}
+  {% if course.video_link %}
+  <iframe class="preview-video" src="{{ course.video_link }}"></iframe>
+  {% endif %}
 
-{% macro CreatorSection(course) %}
-<div class="course-creator-section">
-  <div class="course-home-headings">
-    Creator
-  </div>
-  {% for instructor in get_instructors(course.name) %}
-  {{ widgets.MemberCard(member=instructor, show_course_count=True, avatar_class="avatar-large") }}
-  {% endfor %}
-</div>
-{% endmacro %}
+  <div class="course-overlay-content">
 
-{% macro Progress(course) %}
-{% set certificate = is_certified(course.name) %}
-{% 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 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="progress">
-      <div class="progress-bar" role="progressbar" style="width: {{ progress }}%" aria-valuenow="{{ progress }}"
-        aria-valuemin="0" aria-valuemax="100"></div>
+
+    {% 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 %}
+
+    <div class="overlay-heading"> {{ _("Course Include:") }} </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>
-    {% if certificate %}
-    <a class="muted-text dark-links mt-5 text-center" href="/courses/{{ course.name }}/{{ certificate }}">Get
-      Certificate</a>
     {% endif %}
   </div>
+
 </div>
-{% endif %}
 {% endmacro %}
 
 {% macro Description(course) %}
 <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>
+  {{ frappe.utils.md_to_html(course.description) }}
 </div>
 {% endmacro %}
 
-{% macro Overview(course) %}
-{% set avg_rating = get_average_rating(course.name) %}
-{% if get_students(course.name) | length or avg_rating %}
-<div class="course-overview-section">
-  <div class="course-home-headings">
-    Overview
+{% 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>
-  <div class="common-card-style overview-card small-title">
-    {% if get_students(course.name) | length %}
-    <div class="overview-item">
-      <img class="icon-background mr-1" src="/assets/school/icons/user.svg" />
-      {{ get_students(course.name) | 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
+  {% endfor %}
+</div>
+{% endmacro %}
+
+{% macro RelatedCourses(course) %}
+{% if course.related_courses | length %}
+<div class="related-courses">
+  <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>
-{% endif %}
-{% endmacro %}
-
-<!-- Mentors -->
-
-{% macro Mentors(course) %}
-{% if get_mentors(course.name) | length %}
-<div class="course-home-mentors">
-  <div class="course-home-headings">
-    Mentors
-  </div>
-  <div class="member-parent">
-    {% for mentor in get_mentors(course.name) %}
-    {{ widgets.MemberCard(member=mentor, show_course_count=False) }}
-    {% 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 %}
+{% endif%}
 {% endmacro %}

school/www/courses/course.py

@@ -11,7 +11,17 @@ def get_context(context):
         frappe.local.flags.redirect_location = "/courses"
         raise frappe.Redirect
 
-    course = frappe.get_doc("LMS Course", course_name)
+    course = frappe.db.get_value("LMS Course", course_name,
+        ["name", "title", "image", "short_introduction", "description", "is_published", "upcoming",
+        "disable_self_learning", "video_link"],
+        as_dict=True)
+
+    related_courses = frappe.get_all("Related Courses", {"parent": course.name}, ["course"])
+    for csr in related_courses:
+        csr.update(frappe.db.get_value("LMS Course",
+            csr.course, ["name", "upcoming", "title", "image", "enable_certification"], as_dict=True))
+    course.related_courses = related_courses
+
     if course is None:
         frappe.local.flags.redirect_location = "/courses"
         raise frappe.Redirect