Revert "Move Course Handouts to Course Resources and Tools."

This reverts commit e8909e4439f22a7568d95a7672ab60d4a36f7322.

common/lib/xmodule/xmodule/course_module.py

@@ -423,13 +423,13 @@ class CourseFields(object):
         scope=Scope.settings
     )
     has_children = True
-    info_section_name = String(
+    info_sidebar_name = String(
         display_name=_("Course Home Sidebar Name"),
         help=_(
             "Enter the heading that you want students to see above your course handouts on the Course Home page. "
             "Your course handouts appear in the right panel of the page."
         ),
-        scope=Scope.settings, default=_('Course Resources and Tools'))
+        scope=Scope.settings, default='Course Handouts')
     show_timezone = Boolean(
         help=_(
             "True if timezones should be shown on dates in the courseware. "

common/test/acceptance/pages/studio/settings_advanced.py

@@ -176,7 +176,7 @@ class AdvancedSettingsPage(CoursePage):
             'advertised_start',
             'announcement',
             'display_name',
-            'info_section_name',
+            'info_sidebar_name',
             'is_new',
             'issue_badges',
             'max_student_enrollments_allowed',

lms/static/sass/course/_info.scss

@@ -44,7 +44,6 @@
 div.info-wrapper {
 
   background-color: $homepage-background;
-  border-top: none;
 
   section.updates {
     @extend .content;
@@ -57,8 +56,7 @@ div.info-wrapper {
       @include text-align(left);
       @extend %t-strong;
       @extend %t-title6;
-      margin-bottom: 0;
-      @include padding(12px, 26px, 20px, 0);
+      margin-bottom: $baseline;
       font-style: normal;
     }
 
@@ -95,6 +93,7 @@ div.info-wrapper {
         padding: $baseline;
         list-style-type: none;
         margin-bottom: lh(1.5);
+        background-color: $white;
 
         ol, ul {
           ol,ul {
@@ -163,20 +162,24 @@ div.info-wrapper {
     }
   }
 
-  section.course-dates {
-    @include padding(32px, 30px, 20px, 30px);
+  section.handouts {
+    padding: 20px 30px;
     margin: 0;
     @extend .sidebar;
     background: rgba(0, 0, 0, 0);
     box-shadow: none;
     font-size: 14px;
 
+    a {
+      color: $link-color;
+    }
+
     &:after {
       left: -1px;
       right: auto;
     }
 
-    .course-info-heading {
+    h1 {
       @include text-align(left);
       @extend %t-strong;
       @extend %t-title6;
@@ -185,60 +188,146 @@ div.info-wrapper {
       font-style: normal;
     }
 
-    @media print {
-      background: transparent !important;
-    }
+    ul {
+      margin-bottom: 14px;
     }
 
-  section.handouts {
-    margin: $baseline;
-    border-top: ($baseline/4) solid $gray-l5;
-
-    .course-info-heading {
+    ol {
+      margin-bottom: 14px;
+      li {
         @include text-align(left);
-      @extend %t-strong;
-      @extend %t-title6;
-      margin-top: $baseline;
-      margin-bottom: ($baseline/2);
+
+        a {
+          display: block;
           padding: 0;
-      font-style: normal;
+          color: $link-color;
+
+          &:hover,
+          &:focus {
+            background: transparent;
+          }
         }
 
-    h1 {
-      @include text-align(left);
-      @extend %t-strong;
-      @extend %t-title7;
-      margin-bottom: 0;
+        &.expandable,
+        &.collapsable {
+          margin: 0 16px 14px 16px;
+          @include transition(all .2s linear 0s);
+
+          h4 {
+            color: $link-color;
+            font-size: 1em;
+            font-weight: normal;
+            padding-left: 30px;
           }
+        }
+
+        &.collapsable {
+          background: $white;
+          border-radius: 3px;
+          padding: 14px 0;
+          box-shadow: 0 0 1px 1px $shadow-l1, 0 1px 3px rgba(0, 0, 0, .25);
+
+          h4 {
+            margin-bottom: 16px;
+          }
+        }
+
+        &.multiple {
 
           a {
-      color: $link-color;
+            display: inline-block;
+            padding: 0;
+
+            &:hover,
+            &:focus {
+              background: transparent;
+            }
+          }
         }
 
         ul {
-      margin: ($baseline/2) 0;
+          background: none;
+          margin: 0;
+
+          li {
+            border-bottom: 0;
+            border-top: 1px solid #e6e6e6;
+            font-size: 0.9em;
+            margin: 0;
+            padding: 15px 30px;
+
+            a {
+              display: inline-block;
               padding: 0;
-      list-style: none;
 
-      > li {
-        margin: ($baseline/4) 0;
+              &:hover,
+              &:focus {
+                background: transparent;
+              }
+            }
+          }
+        }
+
+        div.hitarea {
+          background-image: url('#{$static-path}/images/treeview-default.gif') no-repeat;
+          display: block;
+          height: 100%;
+          margin-left: 0;
+          max-height: 20px;
+          position: absolute;
+          width: 100%;
+
+          &:hover,
+          &:focus {
+            opacity: 0.6;
+            filter: alpha(opacity=60);
+
+            + h4 {
+              @extend a:hover;
+              text-decoration: underline;
             }
           }
 
-    ol {
+          &.expandable-hitarea {
+            background-position: -72px 0px;
+          }
+
+          &.collapsable-hitarea {
+            background-position: -55px -23px;
+          }
+        }
+
+        h3 {
+          border-bottom: 0;
+          box-shadow: none;
+          color: #888;
+          font-size: 1em;
+          margin-bottom: 0;
+        }
+
+        p {
+          letter-spacing: 0;
           margin: 0;
-      padding: 0;
-      display: inline-block;
-      list-style: none;
-      @include font-size(14);
+          text-transform: none;
+
+          a {
+            padding-right: 8px;
 
-      > li {
-        margin: ($baseline/4) 0;
-        border-bottom: 2px solid $gray-l4;
+            &:before {
+              color: $gray-l3;
+              content: "•";
+              display: inline-block;
+              padding-right: 8px;
             }
 
-      li:last-child {
-        border: none;
+            &:first-child {
+              &:before {
+                content: "";
+                padding-right: 0;
+              }
+            }
+          }
+        }
       }
     }
 

lms/templates/courseware/info.html

@@ -38,6 +38,15 @@ from openedx.core.djangoapps.self_paced.models import SelfPacedConfiguration
         ToggleElementVisibility();
 </%static:require_module>
 
+<%block name="js_extra">
+<script type="text/javascript" src="${static.url('js/jquery.treeview.js')}"></script>
+<script type="text/javascript" charset="utf-8">
+ $(document).ready(function(){
+     $(".handouts").treeview({collapsed:true, unique:true/*, cookieId: "treeview-book-nav", persist: "cookie"*/});
+ });
+</script>
+</%block>
+
 <%block name="bodyclass">view-in-course view-course-info ${course.css_class or ''}</%block>
 <section class="container">
   <div class="home">
@@ -54,7 +63,6 @@ from openedx.core.djangoapps.self_paced.models import SelfPacedConfiguration
     % endif
   </div>
   <div class="info-wrapper">
-    <div class="course-updates">
     % if user.is_authenticated():
     <section class="updates">
       % if studio_url is not None and masquerade and masquerade.role == 'staff':
@@ -64,31 +72,27 @@ from openedx.core.djangoapps.self_paced.models import SelfPacedConfiguration
         </a>
       </div>
       % endif
-          <h1 class="course-info-heading">${_("Course Updates and News")}</h1>
+
+      <h1>${_("Course Updates and News")}</h1>
       ${get_course_info_section(request, masquerade_user, course, 'updates')}
     </section>
+    <section aria-label="${_('Handout Navigation')}" class="handouts">
       % if SelfPacedConfiguration.current().enable_course_home_improvements:
-          <section aria-label="${_('Important Course Dates')}" class="course-dates">
-            <h1 class="course-info-heading">${_("Important Course Dates")}</h1>
+        <h1>${_("Important Course Dates")}</h1>
         ${get_course_date_summary(course, user)}
-          </section>
       % endif
+
+      <h1>${_(course.info_sidebar_name)}</h1>
+      ${get_course_info_section(request, masquerade_user, course, 'handouts')}
+    </section>
     % else:
     <section class="updates">
-          <h1 class="course-info-heading">${_("Course Updates and News")}</h1>
+      <h1>${_("Course Updates &amp; News")}</h1>
       ${get_course_info_section(request, masquerade_user, course, 'guest_updates')}
     </section>
-      % endif
-    </div>
-    % if user.is_authenticated():
-      <section aria-label="${_('Handout Navigation')}" class="handouts">
-        <h1 class="course-info-heading">${_(course.info_section_name)}</h1>
-        ${get_course_info_section(request, masquerade_user, course, 'handouts')}
-      </section>
-    % else:
     <section aria-label="${_('Handout Navigation')}" class="handouts">
-        <h1 class='course-info-heading'>${_("Course Handouts")}</h1>
-        ${get_course_info_section(request, course, 'guest_handouts')}
+      <h1>${_("Course Handouts")}</h1>
+      ${get_course_info_section(request, masquerade_user, course, 'guest_handouts')}
     </section>
     % endif
   </div>