From 7c1c5af763138f907711ae3809149375954ef9f0 Mon Sep 17 00:00:00 2001
From: Sofiya Semenova <ssemenova@edx.org>
Date: Tue, 13 Feb 2018 15:37:14 -0500
Subject: [PATCH] Auto-open course outline to last viewed block

---
 .../sass/features/_course-experience.scss     |  6 +--
 .../course-outline-fragment-new.html          | 53 ++++++++-----------
 2 files changed, 26 insertions(+), 33 deletions(-)

diff --git a/lms/static/sass/features/_course-experience.scss b/lms/static/sass/features/_course-experience.scss
index 1e9c68d583..e6442e5f57 100644
--- a/lms/static/sass/features/_course-experience.scss
+++ b/lms/static/sass/features/_course-experience.scss
@@ -353,7 +353,7 @@
             .details {
               font-size: $body-font-size;
               color: theme-color("secondary");
-              margin-left: 35px;
+              margin-left: 34px;
             }
             .prerequisite {
               color: theme-color("secondary");
@@ -362,7 +362,7 @@
           }
 
           .vertical {
-            @include margin-left(10px);
+            @include margin-left(16px);
 
             list-style-type: none;
             border: 1px solid transparent;
@@ -398,7 +398,7 @@
 }
 
 // Course outline accordion
-button.accordion-trigger {
+button.accordion-trigger, button.prerequisite-button {
   margin: 2px;
   padding: 10px 0 10px 0;
   border: none;
diff --git a/openedx/features/course_experience/templates/course_experience/course-outline-fragment-new.html b/openedx/features/course_experience/templates/course_experience/course-outline-fragment-new.html
index b6cfa9ee92..d981f1eac9 100644
--- a/openedx/features/course_experience/templates/course_experience/course-outline-fragment-new.html
+++ b/openedx/features/course_experience/templates/course_experience/course-outline-fragment-new.html
@@ -16,18 +16,19 @@ from openedx.core.djangolib.markup import HTML, Text
     % if blocks.get('children'):
         <ol class="block-tree accordion" role="presentation">
             % for section in blocks.get('children'):
+                <% section_is_auto_opened = section.get('resume_block') is True %>
                 <li
                     class="outline-item section"
                     role="heading"
                 >
                     <button class="section-name accordion-trigger"
-                            aria-expanded="false"
+                            aria-expanded="${ 'true' if section_is_auto_opened else 'false' }"
                             aria-controls="${ section['id'] }_contents"
                             id="${ section['id'] }">
-                        <span class="fa fa-chevron-right" aria-hidden="true"></span>
+                        <span class="fa fa-chevron-right ${ 'fa-rotate-90' if section_is_auto_opened else '' }" aria-hidden="true"></span>
                         <h3 class="section-title">${ section['display_name'] }</h3>
                     </button>
-                    <ol class="outline-item accordion-panel is-hidden"
+                    <ol class="outline-item accordion-panel ${ '' if section_is_auto_opened else 'is-hidden' }"
                         id="${ section['id'] }_contents"
                         role="region"
                         aria-labelledby="${ section['id'] }"
@@ -36,32 +37,16 @@ from openedx.core.djangolib.markup import HTML, Text
                             <%
                                 gated_subsection = subsection['id'] in gated_content
                                 completed_prereqs = gated_content[subsection['id']]['completed_prereqs'] if gated_subsection else False
+                                subsection_is_auto_opened = subsection.get('resume_block') is True
                             %>
                             <li class="subsection accordion ${ 'current' if subsection['resume_block'] else '' }" role="heading">
                                 % if gated_subsection and not completed_prereqs:
-                                    <button class="subsection-text accordion-trigger"
-                                            id="${ subsection['id'] }"
-                                    >
-                                % else:
-                                    <button class="subsection-text accordion-trigger"
-                                            id="${ subsection['id'] }"
-                                            aria-expanded="false"
-                                            aria-controls="${ subsection['id'] }_contents"
-                                    >
-                                % endif
-                                    ## Subsection title
-                                    % if gated_subsection:
-                                        % if completed_prereqs:
-                                            <span class="menu-icon icon fa fa-unlock"
-                                                aria-hidden="true">
-                                            </span>
-                                            <span class="subsection-title">
-                                                ${ subsection['display_name'] }
-                                            </span>
-                                            <span class="sr">&nbsp;${_("Unlocked")}</span>
-                                        % else:
+                                    <a href="${ subsection['lms_web_url'] }">
+                                        <button class="subsection-text prerequisite-button"
+                                                id="${ subsection['id'] }"
+                                        >
                                             <span class="menu-icon icon fa fa-lock"
-                                            aria-hidden="true">
+                                                  aria-hidden="true">
                                             </span>
                                             <span class="subsection-title">
                                                 ${ subsection['display_name'] }
@@ -74,13 +59,18 @@ from openedx.core.djangolib.markup import HTML, Text
                                                     %>
                                                     ${ prerequisite_name }
                                             </div>
-                                        % endif
-                                    % else:
-                                        <span class="fa fa-chevron-right" aria-hidden="true"></span>
+                                % else:
+                                    <button class="subsection-text accordion-trigger"
+                                            id="${ subsection['id'] }"
+                                            aria-expanded="${ 'true' if subsection_is_auto_opened else 'false' }"
+                                            aria-controls="${ subsection['id'] }_contents"
+                                    >
+                                        <span class="fa fa-chevron-right ${ 'fa-rotate-90' if subsection_is_auto_opened else '' }"
+                                              aria-hidden="true"></span>
                                         <span class="subsection-title">
                                             ${ subsection['display_name'] }
                                         </span>
-                                    % endif
+                                % endif
                                     <div class="details">
 
                                         ## There are behavior differences between rendering of subsections which have
@@ -139,8 +129,11 @@ from openedx.core.djangolib.markup import HTML, Text
                                         % endif
                                   </div> <!-- /details -->
                                 </button> <!-- /subsection-text -->
+                                % if gated_subsection and not completed_prereqs:
+                                    </a>
+                                % endif
                                 % if not gated_subsection or (gated_subsection and completed_prereqs):
-                                    <ol class="outline-item accordion-panel is-hidden"
+                                    <ol class="outline-item accordion-panel ${ '' if subsection_is_auto_opened else 'is-hidden' }"
                                              id="${ subsection['id'] }_contents"
                                              role="region"
                                              aria-labelledby="${ subsection['id'] }"