Link outline subsections into the course

common/lib/xmodule/xmodule/js/src/sequence/display.js

@@ -268,7 +268,16 @@
                 this.updatePageTitle();
                 sequenceLinks = this.content_container.find('a.seqnav');
                 sequenceLinks.click(this.goto);
-                this.path.text(this.el.find('.nav-item.active').data('path'));
+
+                edx.HtmlUtils.setHtml(
+                    this.path,
+                    edx.HtmlUtils.template($('#sequence-breadcrumbs-tpl').text())({
+                        courseId: this.el.parent().data('course-id'),
+                        blockId: this.id,
+                        pathText: this.el.find('.nav-item.active').data('path')
+                    })
+                );
+
                 this.sr_container.focus();
             }
         };

common/static/common/templates/sequence-breadcrumbs.underscore

+<a href="<%- '/courses/' + courseId + '/course/#' + blockId %>">
+    <span class="fa fa-arrow-circle-left" aria-hidden="true" aria-describedby="outline-description"></span>
+    <span class="sr-only" id="outline-description"><%- gettext('Return to course outline') %></span>
+    <b><%- gettext('Outline') %></b>
+</a>
+<span> > </span>
+<span class="position"><%- pathText %></span>

common/test/acceptance/pages/lms/courseware.py

@@ -274,7 +274,7 @@ class CoursewarePage(CoursePage):
     @property
     def breadcrumb(self):
         """ Return the course tree breadcrumb shown above the sequential bar """
-        return [part.strip() for part in self.q(css='.path').text[0].split('>')]
+        return [part.strip() for part in self.q(css='.path .position').text[0].split('>')]
 
     def unit_title_visible(self):
         """ Check if unit title is visible """

lms/djangoapps/courseware/static_tab.html

+## mako
+
+<%page expression_filter="h"/>
+<%!
+from openedx.core.djangolib.markup import HTML
+%>
+
+<%inherit file="/main.html" />
+<%block name="bodyclass">view-in-course view-statictab ${course.css_class or ''}</%block>
+<%namespace name='static' file='/static_content.html'/>
+
+<%block name="headextra">
+<%static:css group='style-course-vendor'/>
+<%static:css group='style-course'/>
+${HTML(fragment.head_html())}
+</%block>
+<%block name="js_extra">
+
+<%include file="/mathjax_include.html" args="disable_fast_preview=True"/>
+${HTML(fragment.foot_html())}
+</%block>
+
+<%block name="pagetitle">${tab['name']} | ${course.display_number_with_default}</%block>
+
+<%include file="/courseware/course_navigation.html" args="active_page=active_page" />
+
+<main id="main" aria-label="Content" tabindex="-1">
+    <section class="container">
+      <div class="static_tab_wrapper">
+        ${HTML(fragment.body_html())}
+      </div>
+    </section>
+</main>

lms/djangoapps/courseware/tabs.py

@@ -10,6 +10,7 @@ from django.utils.translation import ugettext as _, ugettext_noop
 from courseware.access import has_access
 from courseware.entrance_exams import user_can_skip_entrance_exam
 from openedx.core.lib.course_tabs import CourseTabPluginManager
+from request_cache.middleware import RequestCache
 from student.models import CourseEnrollment
 from xmodule.tabs import CourseTab, CourseTabList, key_checker, link_reverse_func
 
@@ -41,7 +42,8 @@ class CoursewareTab(EnrolledTab):
         """
         Returns a function that computes the URL for this tab.
         """
-        if waffle.switch_is_active('unified_course_view'):
+        request = RequestCache.get_current_request()
+        if waffle.flag_is_active(request, 'unified_course_view'):
             return link_reverse_func('unified_course_view')
         else:
             return link_reverse_func('courseware')

lms/djangoapps/courseware/views/index.py

@@ -28,6 +28,7 @@ except ImportError:
     newrelic = None  # pylint: disable=invalid-name
 
 import urllib
+import waffle
 
 from lms.djangoapps.gating.api import get_entrance_exam_score_ratio, get_entrance_exam_usage_key
 from lms.djangoapps.grades.new.course_grade import CourseGradeFactory
@@ -35,6 +36,7 @@ from opaque_keys.edx.keys import CourseKey
 from openedx.core.djangoapps.lang_pref import LANGUAGE_KEY
 from openedx.core.djangoapps.user_api.preferences.api import get_user_preference
 from openedx.core.djangoapps.crawlers.models import CrawlersConfig
+from request_cache.middleware import RequestCache
 from shoppingcart.models import CourseRegistrationCode
 from student.models import CourseEnrollment
 from student.views import is_course_blocked
@@ -402,6 +404,7 @@ class CoursewareIndex(View):
         Returns and creates the rendering context for the courseware.
         Also returns the table of contents for the courseware.
         """
+        request = RequestCache.get_current_request()
         courseware_context = {
             'csrf': csrf(self.request)['csrf_token'],
             'COURSE_TITLE': self.course.display_name_with_default_escaped,
@@ -417,7 +420,8 @@ class CoursewareIndex(View):
             'language_preference': self._get_language_preference(),
             'disable_optimizely': True,
             'section_title': None,
-            'sequence_title': None
+            'sequence_title': None,
+            'disable_accordion': waffle.flag_is_active(request, 'unified_course_view')
         }
         table_of_contents = toc_for_course(
             self.effective_user,

lms/djangoapps/courseware/views/views.py

@@ -1680,7 +1680,7 @@ class CourseOutlineFragmentView(FragmentView):
 
         return block
 
-    def render_fragment(self, request, course_id=None):
+    def render_fragment(self, request, course_id=None, **kwargs):
         """
         Renders the course outline as a fragment.
         """
@@ -1704,5 +1704,5 @@ class CourseOutlineFragmentView(FragmentView):
             # Recurse through the block tree, fleshing out each child object
             'blocks': self.populate_children(course_block_tree, all_blocks['blocks'])
         }
-        html = render_to_string('courseware/course-outline.html', context)
+        html = render_to_string('courseware/course_outline.html', context)
         return Fragment(html)

lms/static/sass/shared-v2/_course-outline.scss

 .course-outline {
   color: $lms-gray;
 
-  ul {
+  ol {
     margin: 0 $baseline;
     list-style: none;
 
-    > ul {
+    > ol {
       @include margin-left($baseline / 2);
     }
 
-    li.section-name {
+    div.section-name {
       @include padding($baseline * 0.75, $baseline * 0.75, $baseline * 0.75, $baseline / 4);
       background-color: $lms-background-color;
       border-top: 1px solid $lms-border-color;
+      margin-bottom: $baseline * 0.5;
     }
 
-    ul.outline-item {
+    ol.outline-item {
       @include margin-left($baseline);
       padding-bottom: ($baseline / 2);
 

lms/templates/courseware/course-outline.html

-## mako
-
-<%namespace name='static' file='../static_content.html'/>
-
-<%!
-from django.utils.translation import ugettext as _
-%>
-
-<%static:require_module_async module_name="js/courseware/course_outline_factory" class_name="CourseOutlineFactory">
-    CourseOutlineFactory('.block-tree');
-</%static:require_module_async>
-
-<section class="course-outline" id="main">
-    <ul class="block-tree" role="tree">
-        % for section in blocks.get('children') or []:
-            <li class="section-name outline-item focusable" role="treeitem" tabindex="0" aria-expanded="true">
-                <span class="icon fa fa-chevron-down" aria-hidden="true"></span>
-                ${ section['display_name'] }
-            </li>
-            <ul class="outline-item focusable" role="group" tabindex="0">
-                % for subsection in section.get('children') or []:
-                    <li class="outline-item focusable" role="treeitem" tabindex="0" aria-expanded="true">
-                        <a href="#">${ subsection['display_name'] }</a>
-                    </li>
-                % endfor
-            </ul>
-        % endfor
-    </ul>
-</section>

lms/templates/courseware/courseware.html

@@ -27,7 +27,7 @@ from openedx.core.djangolib.js_utils import js_escaped_string
 
 <%block name="header_extras">
 
-% for template_name in ["image-modal"]:
+% for template_name in ["image-modal", "sequence-breadcrumbs"]:
 <script type="text/template" id="${template_name}-tpl">
     <%static:include path="common/templates/${template_name}.underscore" />
 </script>