Move Course Handouts to Course Resources and Tools.

The existing course handouts section is moved underneath Course
Updates and News, with updated styling.

ECOM-2808

common/lib/xmodule/xmodule/course_module.py

@@ -423,13 +423,13 @@ class CourseFields(object):
         scope=Scope.settings
     )
     has_children = True
-    info_sidebar_name = String(
+    info_section_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 Handouts')
+        scope=Scope.settings, default=_('Course Resources and Tools'))
     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_sidebar_name',
+            'info_section_name',
             'is_new',
             'issue_badges',
             'max_student_enrollments_allowed',

lms/static/sass/course/_info.scss

@@ -44,6 +44,7 @@
 div.info-wrapper {
 
   background-color: $homepage-background;
+  border-top: none;
 
   section.updates {
     @extend .content;
@@ -54,7 +55,8 @@ div.info-wrapper {
       @include text-align(left);
       @extend %t-strong;
       @extend %t-title6;
-      margin-bottom: $baseline;
+      margin-bottom: 0;
+      @include padding(12px, 26px, 20px, 0);
       font-style: normal;
     }
 
@@ -72,7 +74,6 @@ div.info-wrapper {
         padding: $baseline;
         list-style-type: none;
         margin-bottom: lh(1.5);
-        background-color: $white;
 
         ol, ul {
           ol,ul {
@@ -128,24 +129,20 @@ div.info-wrapper {
     }
   }
 
-  section.handouts {
-    padding: 20px 30px;
+  section.course-dates {
+    @include padding(32px, 30px, 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;
     }
 
-    h1 {
+    .course-info-heading {
       @include text-align(left);
       @extend %t-strong;
       @extend %t-title6;
@@ -154,146 +151,60 @@ div.info-wrapper {
       font-style: normal;
     }
 
-    ul {
-      margin-bottom: 14px;
-    }
-
-    ol {
-      margin-bottom: 14px;
-      li {
-        @include text-align(left);
-
-        a {
-          display: block;
-          padding: 0;
-          color: $link-color;
-
-          &:hover,
-          &:focus {
-            background: transparent;
+    @media print {
+      background: transparent !important;
     }
   }
 
-        &.expandable,
-        &.collapsable {
-          margin: 0 16px 14px 16px;
-          @include transition(all .2s linear 0s);
+  section.handouts {
+    margin: $baseline;
+    border-top: ($baseline/4) solid $gray-l5;
 
-          h4 {
-            color: $link-color;
-            font-size: 1em;
-            font-weight: normal;
-            padding-left: 30px;
-          }
+    .course-info-heading {
+      @include text-align(left);
+      @extend %t-strong;
+      @extend %t-title6;
+      margin-top: $baseline;
+      margin-bottom: ($baseline/2);
+      padding: 0;
+      font-style: normal;
     }
 
-        &.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;
-          }
+    h1 {
+      @include text-align(left);
+      @extend %t-strong;
+      @extend %t-title7;
+      margin-bottom: 0;
     }
 
-        &.multiple {
-
     a {
-            display: inline-block;
-            padding: 0;
-
-            &:hover,
-            &:focus {
-              background: transparent;
-            }
-          }
+      color: $link-color;
     }
 
     ul {
-          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;
+      margin: ($baseline/2) 0;
       padding: 0;
+      list-style: none;
 
-              &: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;
-            }
-          }
-
-          &.expandable-hitarea {
-            background-position: -72px 0px;
-          }
-
-          &.collapsable-hitarea {
-            background-position: -55px -23px;
-          }
+      > li {
+        margin: ($baseline/4) 0;
       }
-
-        h3 {
-          border-bottom: 0;
-          box-shadow: none;
-          color: #888;
-          font-size: 1em;
-          margin-bottom: 0;
     }
 
-        p {
-          letter-spacing: 0;
+    ol {
       margin: 0;
-          text-transform: none;
-
-          a {
-            padding-right: 8px;
-
-            &:before {
-              color: $gray-l3;
-              content: "•";
+      padding: 0;
       display: inline-block;
-              padding-right: 8px;
-            }
+      list-style: none;
+      @include font-size(14);
 
-            &:first-child {
-              &:before {
-                content: "";
-                padding-right: 0;
-              }
-            }
-          }
+      > li {
+        margin: ($baseline/4) 0;
+        border-bottom: 2px solid $gray-l4;
       }
+
+      li:last-child {
+        border: none;
       }
     }
 

lms/templates/courseware/info.html

@@ -34,15 +34,6 @@ from openedx.core.djangoapps.self_paced.models import SelfPacedConfiguration
 
 <%include file="/courseware/course_navigation.html" args="active_page='info'" />
 
-<%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">
@@ -59,6 +50,7 @@ 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':
@@ -68,27 +60,31 @@ from openedx.core.djangoapps.self_paced.models import SelfPacedConfiguration
               </a>
             </div>
           % endif
-
-      <h1>${_("Course Updates and News")}</h1>
+          <h1 class="course-info-heading">${_("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:
-        <h1>${_("Important Course Dates")}</h1>
+          <section aria-label="${_('Important Course Dates')}" class="course-dates">
+            <h1 class="course-info-heading">${_("Important Course Dates")}</h1>
             ${get_course_date_summary(course, user)}
-      % endif
-
-      <h1>${_(course.info_sidebar_name)}</h1>
-      ${get_course_info_section(request, masquerade_user, course, 'handouts')}
           </section>
+        % endif
       % else:
         <section class="updates">
-      <h1>${_("Course Updates &amp; News")}</h1>
+          <h1 class="course-info-heading">${_("Course Updates and 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>${_("Course Handouts")}</h1>
-      ${get_course_info_section(request, masquerade_user, course, 'guest_handouts')}
+        <h1 class='course-info-heading'>${_("Course Handouts")}</h1>
+        ${get_course_info_section(request, course, 'guest_handouts')}
       </section>
     % endif
   </div>