WIP: Full-width Courseware Content

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

@@ -190,7 +190,7 @@ class @Sequence
       sequence_links = @content_container.find('a.seqnav')
       sequence_links.click @goto
 
-      @el.find('.path').text(@el.find('.nav-item.active').data('path'))
+      $('.breadcrumb-label').text(@el.find('.nav-item.active').data('path'))
 
       @sr_container.focus()
 

lms/djangoapps/courseware/views/index.py

@@ -382,6 +382,7 @@ class CoursewareIndex(View):
             'bookmarks_api_url': reverse('bookmarks'),
             'language_preference': self._get_language_preference(),
             'disable_optimizely': True,
+            'disable_window_wrap': True,
         }
         table_of_contents = toc_for_course(
             self.effective_user,

lms/static/sass/course/courseware/_courseware.scss

@@ -96,6 +96,50 @@ html.video-fullscreen {
   }
 }
 
+.wrapper-course-modes {
+  border-bottom: 3px solid $gray-l5;
+  padding: ($baseline/2);
+}
+
+.courseware-bookmarks-button,
+.courseware-search-bar {
+  @include float(right);
+  @include margin-left($baseline);
+}
+
+.courseware-content-menu,
+.courseware-bookmarks-button,
+.courseware-search-bar {
+  @include box-sizing(border-box);
+  display: inline-block;
+}
+
+.content-menu-button {
+  @extend %ui-clear-button;
+
+  // set styles
+  @extend %btn-pl-secondary-base;
+  @include font-size(13);
+  display: inline-block;
+  padding: ($baseline/4) ($baseline/2);
+
+  &:before {
+    content: "\f0c9";
+    font-family: FontAwesome;
+  }
+
+  &.is-active {
+    background-color: lighten($action-primary-bg,10%);
+    color: $white;
+  }
+}
+
+.breadcrumb-label {
+  @extend %t-title7;
+  @include margin-left($baseline/2);
+  display: inline-block;
+}
+
 // TO-DO should this be content wrapper?
 .course-wrapper {
   position: relative;

lms/static/sass/course/courseware/_sidebar.scss

 .course-index {
+    position: absolute;
+    left: 0px;
+    top: 25px;
+    z-index: 1;
+
     @include transition( all .2s $ease-in-out-quad 0s);
     @include border-right(1px solid $border-color-2);
     @include border-radius(3px, 0, 0, 3px);

lms/static/sass/search/_search.scss

@@ -125,7 +125,7 @@
 }
 
 .courseware-search-bar {
-   width: flex-grid(7);
+   width: flex-grid(2);
 }
 
 

lms/static/sass/views/_bookmarks.scss

-// Rules for placing bookmarks and search button side by side
-.wrapper-course-modes {
-  border-bottom: 1px solid $gray-l3;
-  padding: ($baseline/4);
-
-  > div {
-    @include box-sizing(border-box);
-    display: inline-block;
-  }
-}
-
-
 // Rules for Bookmarks Button
 .courseware-bookmarks-button {
-  width: flex-grid(5);
+  width: 120px;
   vertical-align: top;
 
   .bookmarks-list-button {

lms/templates/courseware/courseware.html

@@ -87,6 +87,14 @@ ${static.get_page_title_breadcrumbs(course_name())}
   % endif
 
   <script type="text/javascript">
+    $(".content-menu-button").click(
+            function(){
+                menu_button_position = $('.content-menu-button').position();
+                $('.course-index').offset({top: menu_button_position.top + 30, left: menu_button_position.left});
+                $(".course-index").toggle();
+            }
+    );
+
     var $$course_id = "${course.id | escapejs}";
 
     $(function(){
@@ -126,35 +134,38 @@ ${fragment.foot_html()}
 <div class="container">
   <div class="course-wrapper" role="presentation">
 
-% if disable_accordion is UNDEFINED or not disable_accordion:
-    <div class="course-index">
-
       <div class="wrapper-course-modes">
 
-          <div class="courseware-bookmarks-button" data-bookmarks-api-url="${bookmarks_api_url}">
-              <button type="button" class="bookmarks-list-button is-inactive" aria-pressed="false">
-                  ${_('Bookmarks')}
-              </button>
-          </div>
+          <div class="courseware-content-menu">
+              <button type="button" class="content-menu-button list-button is-inactive" aria-pressed="false"></button>
+              <div class="breadcrumb-label"></div>
+
+              % if settings.FEATURES.get('ENABLE_COURSEWARE_SEARCH'):
+                <div id="courseware-search-bar" class="search-bar courseware-search-bar" role="search" aria-label="Course">
+                  <form>
+                    <label for="course-search-input" class="sr">${_('Course Search')}</label>
+                    <div class="search-field-wrapper">
+                      <input id="course-search-input" type="text" class="search-field"/>
+                      <button type="submit" class="search-button">
+                        ${_('search')} <i class="icon fa fa-search" aria-hidden="true"></i>
+                      </button>
+                      <button type="button" class="cancel-button" aria-label="${_('Clear search')}">
+                        <i class="icon fa fa-remove" aria-hidden="true"></i>
+                      </button>
+                    </div>
+                  </form>
+                </div>
+              % endif
 
-          % if settings.FEATURES.get('ENABLE_COURSEWARE_SEARCH'):
-            <div id="courseware-search-bar" class="search-bar courseware-search-bar" role="search" aria-label="Course">
-              <form>
-                <label for="course-search-input" class="sr">${_('Course Search')}</label>
-                <div class="search-field-wrapper">
-                  <input id="course-search-input" type="text" class="search-field"/>
-                  <button type="submit" class="search-button">
-                    ${_('search')} <i class="icon fa fa-search" aria-hidden="true"></i>
-                  </button>
-                  <button type="button" class="cancel-button" aria-label="${_('Clear search')}">
-                    <i class="icon fa fa-remove" aria-hidden="true"></i>
+              <div class="courseware-bookmarks-button" data-bookmarks-api-url="${bookmarks_api_url}">
+                  <button type="button" class="bookmarks-list-button is-inactive" aria-pressed="false">
+                      ${_('Bookmarks')}
                   </button>
-                </div>
-              </form>
-            </div>
-          % endif
+              </div>
+          </div>
 
-      </div>
+% if disable_accordion is UNDEFINED or not disable_accordion:
+    <div class="course-index" style="display:none;">
 
       <div class="accordion">
         <nav class="course-navigation" aria-label="${_('Course')}">
@@ -165,11 +176,10 @@ ${fragment.foot_html()}
           % endif
         </nav>
       </div>
-
     </div>
 % endif
-    <section class="course-content" id="course-content">
-        <main id="main" aria-label="Content" tabindex="-1">
+
+    <section class="course-content" id="course-content" role="main" aria-label="Content">
         % if getattr(course, 'entrance_exam_enabled') and \
            getattr(course, 'entrance_exam_minimum_score_pct') and \
            entrance_exam_current_score is not UNDEFINED:
@@ -201,7 +211,6 @@ ${fragment.foot_html()}
         % endif
 
           ${fragment.body_html()}
-        </main>
     </section>
 
     <section class="courseware-results-wrapper">
@@ -210,8 +219,11 @@ ${fragment.foot_html()}
       <div class="courseware-results search-results" data-course-id="${course.id}" data-lang-code="${language_preference}"></div>
     </section>
 
-  </div>
 </div>
+</div>
+</div>
+
+
 <div class="container-footer">
   % if settings.FEATURES.get("LICENSING", False):
     <div class="course-license">

lms/templates/seq_module.html

@@ -2,7 +2,6 @@
 <%! from django.utils.translation import ugettext as _ %>
 
 <div id="sequence_${element_id}" class="sequence" data-id="${item_id}" data-position="${position}" data-ajax-url="${ajax_url}" data-next-url="${next_url}" data-prev-url="${prev_url}">
-  <div class="path"></div>
   <div class="sequence-nav">
     <button class="sequence-nav-button button-previous">
         <span class="icon fa fa-chevron-prev" aria-hidden="true"></span><span class="sr">${_('Previous')}</span>