edx-platform/cms/templates/course_outline.html

<%page expression_filter="h"/>
<%inherit file="base.html" />
<%def name="online_help_token()"><% return "develop_course" %></%def>
<%!
import logging
from six.moves.urllib.parse import quote

from cms.djangoapps.contentstore.config.waffle_utils import should_show_checklists_quality
from common.djangoapps.util.date_utils import get_default_time_display
from django.utils.translation import gettext as _
from openedx.core.djangolib.js_utils import js_escaped_string, dump_js_escaped_json
from openedx.core.djangolib.markup import HTML, Text
from django.urls import reverse
%>
<%block name="title">${_("Course Outline")}</%block>
<%block name="bodyclass">is-signedin course view-outline</%block>

<%namespace name='static' file='static_content.html'/>

<%block name="requirejs">
    require(["js/factories/outline"], function (OutlineFactory) {
        OutlineFactory(
            ${course_structure | n, dump_js_escaped_json},
            ${initial_state | n, dump_js_escaped_json},
            ${initial_user_clipboard | n, dump_js_escaped_json}
        );
    });
</%block>

<%block name="header_extras">
<link rel="stylesheet" type="text/css" href="${static.url('js/vendor/timepicker/jquery.timepicker.css')}" />
% for template_name in ['course-outline', 'xblock-string-field-editor', 'basic-modal', 'modal-button', 'course-outline-modal', 'due-date-editor', 'self-paced-due-date-editor', 'release-date-editor', 'grading-editor', 'publish-editor', 'staff-lock-editor', 'unit-access-editor', 'discussion-editor', 'content-visibility-editor', 'verification-access-editor', 'timed-examination-preference-editor', 'access-editor', 'settings-modal-tabs', 'show-correctness-editor', 'highlights-editor', 'highlights-enable-editor', 'course-highlights-enable', 'course-manage-tags', 'course-video-sharing-enable', 'summary-configuration-editor', 'tag-count', 'subsection-share-link-modal-tabs', 'full-page-share-link-editor', 'embed-link-share-link-editor']:
<script type="text/template" id="${template_name}-tpl">
    <%static:include path="js/${template_name}.underscore" />
</script>
% endfor
<%static:optional_include_mako file="course_outline_header_extras_post.html" />

% if not settings.STUDIO_FRONTEND_CONTAINER_URL:
<link rel="stylesheet" type="text/css" href="${static.url('common/css/vendor/common.min.css')}" />
<link rel="stylesheet" type="text/css" href="${static.url('common/css/vendor/courseOutlineHealthCheck.min.css')}" />
% endif
</%block>

<%block name="page_alert">
  %if notification_dismiss_url is not None:
  <div class="wrapper wrapper-alert wrapper-alert-announcement is-shown">
    <div class="alert announcement has-actions">
      <span class="feedback-symbol fa fa-bullhorn" aria-hidden="true"></span>

      <div class="copy">
        <h2 class="title title-3">${_("This course was created as a re-run. Some manual configuration is needed.")}</h2>

        <p>${_("No course content is currently visible, and no learners are enrolled. Be sure to review and reset all dates, including the Course Start Date; set up the course team; review course updates and other assets for dated material; and seed the discussions and wiki.")}</p>
      </div>

      <ul class="nav-actions">
        <li class="action action-dismiss">
          <a href="#" class="button dismiss-button" data-dismiss-link='${notification_dismiss_url}'>
            <span class="icon fa fa-times-circle" aria-hidden="true"></span>
            <span class="button-copy">${_("Dismiss")}</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
  %endif

  %if context_course.discussions_settings.get('provider_type') == "openedx":
  <div class="wrapper wrapper-alert wrapper-alert-announcement is-shown" style="background-color:#F0CC00">
    <div class="alert announcement has-actions">
      <span class="feedback-symbol fa fa-bullhorn" style="color:black" aria-hidden="true"></span>
      <div class="copy">
        <div style="color:black; display:inline-block">
            <div>
                ${_("This course run is using an upgraded version of edx discussion forum. In order to display the discussions sidebar, discussions xBlocks will no longer be visible to learners.")}
            </div>
            <div style="margin-left:auto; width:fit-content;">
              %if settings.DISCUSSIONS_INCONTEXT_LEARNMORE_URL:
                <span>
                    <a href="${settings.DISCUSSIONS_INCONTEXT_LEARNMORE_URL}" target="_blank" rel="noreferrer noopener">${_(" Learn more")}</a>
                    <i class="fa fa-share-square-o" aria-hidden="true"></i>
                </span>
              %endif
              %if settings.DISCUSSIONS_INCONTEXT_FEEDBACK_URL:
                <span style="margin-left: 1rem">
                    <a href="${settings.DISCUSSIONS_INCONTEXT_FEEDBACK_URL}" target="_blank" rel="noreferrer noopener">${_("Share feedback")}</a>
                    <i class="fa fa-share-square-o" aria-hidden="true"></i>
                </span>
              %endif
            </div>
        </div>
      </div>

      <ul class="nav-actions">
        <li class="action action-dismiss">
          <a href="#" class="button dismiss-button-announcement" style="color:black; border-color:black">
            <span class="icon fa fa-times-circle" aria-hidden="true"></span>
            <span class="button-copy">${_("Dismiss")}</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
  %endif


    %if deprecated_blocks_info.get('blocks') or deprecated_blocks_info.get('deprecated_enabled_block_types'):
      <div class="wrapper wrapper-alert wrapper-alert-error is-shown">
        <div class="alert announcement">
          <span class="feedback-symbol fa fa-warning" aria-hidden="true"></span><span class="sr">${_("Warning")}</span>

          <div class="copy">
            <h2 class="title title-3 warning-heading-text">${_("This course uses features that are no longer supported.")}</h2>

            %if deprecated_blocks_info.get('blocks'):
              <div class="components-list">
                <p class="components-list-heading-text">${_("You must delete or replace the following components.")}</p>
                  <nav class="nav-related" aria-label="${_('Unsupported Components')}">
                    <ul>
                      % for component_parent_url, component_display_name in deprecated_blocks_info['blocks']:
                          <li class="nav-item">
                                % if component_display_name:
                                    <a href="${component_parent_url}">${component_display_name}</a>
                                % else:
                                    <a href="${component_parent_url}">${_("Deprecated Component")}</a>
                                % endif
                          </li>
                      % endfor
                    </ul>
                  </nav>
              </div>
            %endif

            % if deprecated_blocks_info.get('deprecated_enabled_block_types'):
              <div class="advance-modules-list">
                <p class="advance-modules-remove-text">
                  ${Text(_("To avoid errors, {platform_name} strongly recommends that you remove unsupported features from the course advanced settings. To do this, go to the {link_start}Advanced Settings page{link_end}, locate the \"Advanced Module List\" setting, and then delete the following modules from the list.")).format(
                    platform_name=static.get_platform_name(),
                    link_start=HTML('<a href="{advance_settings_url}">').format(advance_settings_url=deprecated_blocks_info['advance_settings_url']),
                    link_end=HTML("</a>")
                  )}
                </p>
                <nav class="nav-related" aria-label="${_('Unsupported Advance Modules')}">
                  <ul>
                    % for block_type in deprecated_blocks_info['deprecated_enabled_block_types']:
                      <li class="nav-item">${block_type}</li>
                    % endfor
                  </ul>
                </nav>
              </div>
            % endif
          </div>
        </div>
      </div>
    %endif

  %if proctoring_errors:
    <div class="wrapper wrapper-alert wrapper-alert-error is-shown">
      <div class="alert announcement has-actions">
        <span class="feedback-symbol fa fa-warning" aria-hidden="true"></span>

        <div class="exam-settings-alert copy">
          <h2 class="title title-3">${_("This course has proctored exam settings that are incomplete or invalid.")}</h2>
          <p>
            % if mfe_proctored_exam_settings_url:
              <% url_encoded_course_id = quote(str(context_course.id).encode('utf-8'), safe='') %>
              ${Text(_("To update these settings go to the {link_start}Proctored Exam Settings page{link_end}.")).format(
                link_start=HTML('<a href="{mfe_proctored_exam_settings_url}">').format(
                        mfe_proctored_exam_settings_url=mfe_proctored_exam_settings_url
                ),
                link_end=HTML("</a>")
              )}
            % else:
              ${Text(_("To update these settings go to the {link_start}Advanced Settings page{link_end}.")).format(
                link_start=HTML('<a href="{advance_settings_url}">').format(advance_settings_url=advance_settings_url),
                link_end=HTML("</a>")
              )}
            % endif
          </p>
          <div class="errors-list">
            <nav class="nav-related" aria-label="${_('Proctoring Settings Errors')}">
              <ul>
                % for error in proctoring_errors:
                  <li class="nav-item">
                    <h3 class="title title-4">${error.get('model', {}).get('display_name')}</h3>
                    <p>${error.get('message')}</p>
                  </li>
                % endfor
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>
  %endif

</%block>

<%block name="content">
<div class="wrapper-mast wrapper">
    <header class="mast has-actions has-subtitle">
        <h1 class="page-header">
            <small class="subtitle">${_("Content")}</small>
            <span class="sr">&gt; </span>${_("Course Outline")}
        </h1>

        <nav class="nav-actions" aria-label="${_('Page Actions')}">
            <h3 class="sr">${_("Page Actions")}</h3>
            <ul>
                <li class="nav-item">
                    <a href="#" class="button button-new" data-category="chapter" data-parent="${context_course.location}" data-default-name="${_('Section')}" title="${_('Click to add a new section')}">
                        <span class="icon fa fa-plus" aria-hidden="true"></span>${_('New Section')}
                    </a>
                </li>
                %if reindex_link:
                    <li class="nav-item">
                        <a href="${reindex_link}" class="button button-reindex" data-category="reindex" title="${_('Reindex current course')}">
                            <span class="icon-arrow-right" aria-hidden="true"></span>${_('Reindex')}
                        </a>
                    </li>
                %endif
                <li class="nav-item">
                    <a href="#" class="button button-toggle button-toggle-expand-collapse collapse-all is-hidden">
                        <span class="collapse-all"><span class="icon fa fa-arrow-up" aria-hidden="true"></span> <span class="label">${_("Collapse All Sections")}</span></span>
                        <span class="expand-all"><span class="icon fa fa-arrow-down" aria-hidden="true"></span> <span class="label">${_("Expand All Sections")}</span></span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="${lms_link}" rel="external" class="button view-button view-live-button"
                       title="${_('Click to open the courseware in the LMS in a new tab')}">${_("View Live")}</a>
                </li>
            </ul>
        </nav>
    </header>
</div>

<div class="wrapper-content wrapper">
    <section class="content">
        <article class="content-primary" role="main">
            <div class="course-status">
                ## set width dynamically depending upon whether course has a start date to ensure spacing looks good
                % if course_release_date == 'Set Date':
                    <div style="width: 40%" class="status-studio-frontend">
                % else:
                    <div style="width: 50%" class="status-studio-frontend">
                % endif
                    <%static:studiofrontend entry="courseOutlineHealthCheck">
                        <%
                            course_key = context_course.id
                        %>
                        {
                            "lang": "${language_code | n, js_escaped_string}",
                            "course": {
                                "id": "${context_course.id | n, js_escaped_string}",
                                "name": "${context_course.display_name_with_default | n, js_escaped_string}",
                                "course_release_date": "${course_release_date | n, js_escaped_string}",
                                "is_course_self_paced": ${context_course.self_paced | n, dump_js_escaped_json},
                                "url_name": "${context_course.location.block_id | n, js_escaped_string}",
                                "org": "${context_course.location.org | n, js_escaped_string}",
                                "num": "${context_course.location.course | n, js_escaped_string}",
                                "display_course_number": "${context_course.display_coursenumber | n, js_escaped_string}",
                                "revision": "${context_course.location.branch | n, js_escaped_string}"
                            },
                            "help_tokens": {
                                "files": "${get_online_help_info(online_help_token())['doc_url'] | n, js_escaped_string}"
                            },
                            "enable_quality": ${should_show_checklists_quality(context_course.id) | n, dump_js_escaped_json},
                            "links": {
                                "settings": ${reverse('settings_handler', kwargs={'course_key_string': str(course_key)})| n, dump_js_escaped_json}
                            }
                        }
                    </%static:studiofrontend>
                </div>
                <div class="status-highlights-enabled"></div>
                <div class="status-manage-tags"></div>
                <div class="status-video-sharing-enabled"></div>
            </div>
            <div class="wrapper-dnd"
              % if getattr(context_course, 'language'):
                lang="${context_course.language}"
              % endif
            >
                <%
                course_locator = context_course.location
                assets_url = reverse('assets_handler', kwargs={'course_key_string': str(course_locator.course_key)})
                %>
                <h2 class="sr">${_("Course Outline")}</h2>
                <article class="outline outline-complex outline-course" data-locator="${course_locator}" data-course-key="${course_locator.course_key}" data-course-assets="${assets_url}">
                </article>
            </div>
            <div class="ui-loading">
                <p><span class="spin"><span class="icon fa fa-refresh" aria-hidden="true"></span></span> <span class="copy">${_("Loading")}</span></p>
            </div>
        </article>
        <aside class="content-supplementary" role="complementary">
            <div class="bit">
                <h3 class="title-3">${_("Creating your course organization")}</h3>
                <p>${_("You add sections, subsections, and units directly in the outline.")}</p>
                <p>${_("Create a section, then add subsections and units. Open a unit to add course components.")}</p>
            </div>
            <div class="bit">
                <h3 class="title-3">${_("Reorganizing your course")}</h3>
                <p>${_("Drag sections, subsections, and units to new locations in the outline.")}</p>
                <div class="external-help">
                    <a href="${get_online_help_info('outline')['doc_url']}" rel="noopener" target="_blank" class="button external-help-button">${_("Learn more about the course outline")}</a>
                </div>
            </div>
            <div class="bit">
                <h3 class="title-3">${_("Setting release dates and grading policies")}</h3>
                <p>${_("Select the Configure icon for a section or subsection to set its release date. When you configure a subsection, you can also set the grading policy and due date.")}</p>
                <div class="external-help">
                    <a href="${get_online_help_info('grading')['doc_url']}" rel="noopener" target="_blank" class="button external-help-button">${_("Learn more about grading policy settings")}</a>
                </div>
            </div>
            <div class="bit">
                <h3 class="title-3">${_("Changing the content learners see")}</h3>
                <p>${_("To publish draft content, select the Publish icon for a section, subsection, or unit.")}</p>
                <p>${Text(_("To make a section, subsection, or unit unavailable to learners, select the Configure icon for that level, then select the appropriate {em_start}Hide{em_end} option. Grades for hidden sections, subsections, and units are not included in grade calculations.")).format(em_start=HTML("<strong>"), em_end=HTML("</strong>"))}</p>
                <p>${Text(_("To hide the content of a subsection from learners after the subsection due date has passed, select the Configure icon for a subsection, then select {em_start}Hide content after due date{em_end}. Grades for the subsection remain included in grade calculations.")).format(em_start=HTML("<strong>"), em_end=HTML("</strong>"))}</p>
                <div class="external-help">
                    <a href="${get_online_help_info('visibility')['doc_url']}" rel="noopener" target="_blank" class="button external-help-button">${_("Learn more about content visibility settings")}</a>
                </div>
            </div>

        </aside>
    </section>
</div>

<div id="manage-tags-drawer" class="drawer"></div>
<div class="drawer-cover gray-cover"></div>
</%block>