edx-platform/lms/templates/courseware/course_about.html

<%page expression_filter="h"/>
<%namespace name='static' file='../static_content.html'/>
<%!
from django.utils.translation import ugettext as _
from django.utils.translation import pgettext
from django.urls import reverse
from lms.djangoapps.courseware.courses import get_course_about_section
from django.conf import settings
from six import text_type
from edxmako.shortcuts import marketing_link
from openedx.core.djangolib.js_utils import js_escaped_string
from openedx.core.djangolib.markup import clean_dangerous_html, HTML, Text
from openedx.core.lib.courses import course_image_url

from six import string_types
%>

<%inherit file="../main.html" />
<%block name="headextra">
  ## OG (Open Graph) title and description added below to give social media info to display
  ## (https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content#tags)
  <meta property="og:title" content="${course.display_name_with_default}" />
  <meta property="og:description" content="${get_course_about_section(request, course, 'short_description')}" />
</%block>

<%block name="js_extra">
  <script type="text/javascript">
  (function() {
    $(".register").click(function(event) {
      $("#class_enroll_form").submit();
      event.preventDefault();
    });

    $('#class_enroll_form').on('ajax:complete', function(event, xhr) {
      if (xhr.status == 200) {
        if (xhr.responseText == "") {
          location.href = "${reverse('dashboard') | n, js_escaped_string}";
        }
        else {
          location.href = xhr.responseText;
        }
      } else if (xhr.status == 403) {
        $('#register_error').text(
            (xhr.responseText ? xhr.responseText : "${_("An error has occurred. Please ensure that you are logged in to enroll.") | n, js_escaped_string}")
        ).css("display", "block");
      } else {
        $('#register_error').text(
            (xhr.responseText ? xhr.responseText : "${_("An error occurred. Please try again later.") | n, js_escaped_string}")
        ).css("display", "block");
      }
    });

  })(this)
  </script>

  <script src="${static.url('js/course_info.js')}"></script>
</%block>

<%block name="pagetitle">${course.display_name_with_default}</%block>

<section class="course-info">

  <%block name="course_about_header">
  <header class="course-profile">
    <div class="intro-inner-wrapper">
      <div class="table">
      <section class="intro">
        <div class="heading-group">
          <h1>
            ${course.display_name_with_default}
          </h1>
          <br />
          <span>${course.display_org_with_default}</span>
        </div>

        <div class="main-cta">
        %if user.is_authenticated and registered:
          %if show_courseware_link:
            <a href="${course_target}">
          %endif

          <span class="register disabled">${_("You are enrolled in this course")}</span>

          %if show_courseware_link:
            <strong>${_("View Course")}</strong>
            </a>
          %endif

        % elif is_course_full:
          <span class="register disabled">
            ${_("Course is full")}
          </span>
        % elif invitation_only and not can_enroll:
          <span class="register disabled">${_("Enrollment in this course is by invitation only")}</span>
        ## Shib courses need the enrollment button to be displayed even when can_enroll is False,
        ## because AnonymousUsers cause can_enroll for shib courses to be False, but we need them to be able to click
        ## so that they can register and become a real user that can enroll.
        % elif not is_shib_course and not can_enroll:
          <span class="register disabled">${_("Enrollment is Closed")}</span>
        %elif allow_anonymous:
          %if show_courseware_link:
            <a href="${course_target}">
            <strong>${_("View Course")}</strong>
            </a>
          %endif
        %else:
          <%
            if ecommerce_checkout:
              reg_href = ecommerce_checkout_link
            else:
              reg_href="#"
            if single_paid_mode:
              href_class = "add-to-cart"
            else:
              href_class = "register"
          %>
          <a href="${reg_href}" class="${href_class}">
            ${_("Enroll Now")}
          </a>
          <div id="register_error"></div>
        %endif
        </div>

      </section>
      % if get_course_about_section(request, course, "video"):
      <a href="#video-modal" class="media" rel="leanModal">
        <div class="hero">
          <img src="${course_image_urls['large']}" alt="" />
          <div class="play-intro"></div>
        </div>
      </a>
      %else:
      <div class="media">
        <div class="hero">
          <img src="${course_image_urls['large']}" alt="" />
        </div>
      </div>
      % endif
    </div>
      </div>
  </header>
  </%block>

  <div class="container">

    <%block name="course_about_details">
    <div class="details">
      % if staff_access and studio_url is not None:
        <div class="wrap-instructor-info studio-view">
          <a class="instructor-info-action" href="${studio_url}">${_("View About Page in studio")}</a>
        </div>
      % endif

      <div class="inner-wrapper">
        ${clean_dangerous_html(get_course_about_section(request, course, "overview"))}
      </div>
    </div>
    </%block>

    <div class="course-sidebar">
      <div class="course-summary">

        <%include file="course_about_sidebar_header.html" />

        <%block name="course_about_important_dates">
        <ol class="important-dates">
          <li class="important-dates-item"><span class="icon fa fa-info-circle" aria-hidden="true"></span><p class="important-dates-item-title">${_("Course Number")}</p><span class="important-dates-item-text course-number">${course.display_number_with_default}</span></li>
          % if not course.start_date_is_still_default:
              <%
                  course_start_date = course.advertised_start or course.start
              %>
            <li class="important-dates-item">
              <span class="icon fa fa-calendar" aria-hidden="true"></span>
              <p class="important-dates-item-title">${_("Classes Start")}</p>
              % if isinstance(course_start_date, string_types):
                  <span class="important-dates-item-text start-date">${course_start_date}</span>
              % else:
                  <%
                     course_date_string = course_start_date.strftime('%Y-%m-%dT%H:%M:%S%z')
                  %>
                  <span class="important-dates-item-text start-date localized_datetime" data-format="shortDate" data-datetime="${course_date_string}" data-language="${LANGUAGE_CODE}"></span>
              % endif
            </li>
          % endif
            ## We plan to ditch end_date (which is not stored in course metadata),
            ## but for backwards compatibility, show about/end_date blob if it exists.
            % if course.end:
                <%
                    course_end_date = course.end
                %>

            <li class="important-dates-item">
                <span class="icon fa fa-calendar" aria-hidden="true"></span>
                <p class="important-dates-item-title">${_("Classes End")}</p>
                  % if isinstance(course_end_date, string_types):
                      <span class="important-dates-item-text final-date">${course_end_date}</span>
                  % else:
                    <%
                        course_date_string = course_end_date.strftime('%Y-%m-%dT%H:%M:%S%z')
                    %>
                    <span class="important-dates-item-text final-date localized_datetime" data-format="shortDate" data-datetime="${course_date_string}" data-language="${LANGUAGE_CODE}"></span>
                  % endif
            </li>
            % endif

          % if get_course_about_section(request, course, "effort"):
            <li class="important-dates-item"><span class="icon fa fa-pencil" aria-hidden="true"></span><p class="important-dates-item-title">${_("Estimated Effort")}</p><span class="important-dates-item-text effort">${get_course_about_section(request, course, "effort")}</span></li>
          % endif

          ##<li class="important-dates-item"><span class="icon fa fa-clock-o" aria-hidden="true"></span><p class="important-dates-item-title">${_('Course Length')}</p><span class="important-dates-item-text course-length">${_('{number} weeks').format(number=15)}</span></li>

          %if course_price and (is_cosmetic_price_enabled):
            <li class="important-dates-item">
              <span class="icon fa fa-money" aria-hidden="true"></span>
              <p class="important-dates-item-title">${_("Price")}</p>
              <span class="important-dates-item-text">${course_price}</span>
            </li>
          %endif

          % if pre_requisite_courses:
          <% prc_target = reverse('about_course', args=[text_type(pre_requisite_courses[0]['key'])]) %>
          <li class="prerequisite-course important-dates-item">
            <span class="icon fa fa-list-ul" aria-hidden="true"></span>
            <p class="important-dates-item-title">${_("Prerequisites")}</p>
            ## Multiple pre-requisite courses are not supported on frontend that's why we are pulling first element
            <span class="important-dates-item-text pre-requisite"><a href="${prc_target}">${pre_requisite_courses[0]['display']}</a></span>
            <p class="tip">
            ${Text(_("You must successfully complete {link_start}{prc_display}{link_end} before you begin this course.")).format(
              link_start=HTML('<a href="{}">').format(prc_target),
              link_end=HTML('</a>'),
              prc_display=pre_requisite_courses[0]['display'],
            )}
            </p>
          </li>
          % endif

          % if get_course_about_section(request, course, "prerequisites"):
            <li class="important-dates-item"><span class="icon fa fa-book" aria-hidden="true"></span><p class="important-dates-item-title">${_("Requirements")}</p><span class="important-dates-item-text prerequisites">${get_course_about_section(request, course, "prerequisites")}</span></li>
          % endif
        </ol>
        </%block>
    </div>

      <%block name="course_about_reviews_tool">
      ## Course reviews tool
      % if reviews_fragment_view:
       ${HTML(reviews_fragment_view.body_html())}
      % endif
      </%block>

      ## For now, ocw links are the only thing that goes in additional resources
      % if get_course_about_section(request, course, "ocw_links"):
      <div class="additional-resources">
        <header>
          <h1>${_("Additional Resources")}</h1>
      </div>

        <div>
          ## "MITOpenCourseware" should *not* be translated
          <h2 class="opencourseware">MITOpenCourseware</h2>
             ${get_course_about_section(request, course, "ocw_links")}
        </div>
    </div>
      %endif

    % if sidebar_html_enabled:
      % if get_course_about_section(request, course, "about_sidebar_html"):
        <section class="about-sidebar-html">
          ${get_course_about_section(request, course, "about_sidebar_html")}
        </section>
      % endif
    %endif
  </div>

  </div>
</div>

## Need to put this hidden form on the page so that the registration button works.
## Since it's no harm to display a hidden form, we display it with the most permissive conditional
## which is when the student is not registered.
%if active_reg_button or is_shib_course:
  <div style="display: none;">
    <form id="class_enroll_form" method="post" data-remote="true" action="${reverse('change_enrollment')}">
      <fieldset class="enroll_fieldset">
        <legend class="sr">${pgettext("self","Enroll")}</legend>
        <input name="course_id" type="hidden" value="${course.id}">
        <input name="enrollment_action" type="hidden" value="enroll">
      </fieldset>
      <div class="submit">
        <input name="submit" type="submit" value="${pgettext('self','enroll')}">
      </div>
    </form>
  </div>
%endif

<%include file="../video_modal.html" />

<%static:require_module_async module_name="js/dateutil_factory" class_name="DateUtilFactory">
    DateUtilFactory.transform(iterationKey=".localized_datetime");
</%static:require_module_async>