creation of a courseware preview menu to contain staff view toggle.

lms/static/sass/base/_base.scss

+// lms - base
+// ====================
+
 // html {
 //   overflow-y: scroll;
 // }

lms/static/sass/base/_variables.scss

@@ -360,12 +360,14 @@ $dashboard-course-cover-border: $light-gray;
 
 // MISC: course assets
 $content-wrapper-bg: $white;
-$course-bg-color: #d6d6d6;
-$course-bg-image: url(../images/bg-texture.png);
+$course-bg-color: #f2f2f2;
 $account-content-wrapper-bg: shade($body-bg, 2%);
 $course-profile-bg: rgb(245,245,245);
 $course-header-bg: rgba(255,255,255, 0.93);
 
+// MISC: course background texture
+//$course-bg-image: url(../images/bg-texture.png);
+
 // MISC: borders
 $border-color-1: rgb(190,190,190);
 $border-color-2: rgb(200,200,200);

lms/static/sass/course.scss.mako

@@ -30,6 +30,7 @@
 
 // course - base
 @import 'course/layout/courseware_header';
+@import 'course/layout/courseware_preview';
 @import 'course/layout/footer';
 @import 'course/base/mixins';
 @import 'course/base/base';

lms/static/sass/course/base/_base.scss

+// lms - course - base
+// ====================
+
 body {
   min-width: 980px;
   min-height: 100%;
-  background-image: $course-bg-image;
   background-color: $course-bg-color;
+
+  //for background texture:
+  //background-image: $course-bg-image;
 }
 
 body, h1, h2, h3, h4, h5, h6, p, p a:link, p a:visited, a, label {
@@ -27,7 +32,7 @@ a {
 }
 
 .container {
-  padding: 20px 0 0 0;
+  padding: 0;
 
   > div {
     display: table;
@@ -53,6 +58,7 @@ form.choicegroup {
   }
 }
 
+
 textarea,
 input[type="text"],
 input[type="email"],

lms/static/sass/course/base/_extends.scss

+// lms - course - extends
+// ====================
+
+// lms inner wrapper
+%inner-wrapper {
+  margin: 0 auto;
+  max-width: 1180px;
+  width: flex-grid(12);
+}
+
+// Older Course Extends - to review/remove with LMS cleanup
 h1.top-header {
   border-bottom: 1px solid $border-color-2;
   text-align: $left;

lms/static/sass/course/layout/_courseware_header.scss

-nav.course-material {
+.wrapper-course-material {
   @include clearfix();
   @include box-sizing(border-box);
   border-bottom: none;
-  margin: 0px auto 0px;
-  padding: 0px;
+  margin: 0 auto 0;
+  padding: 0;
   width: 100%;
 
-  .inner-wrapper {
-    margin: 0 auto;
-    max-width: 1200px;
-    width: flex-grid(12);
+  .course-material{
+    @extend %inner-wrapper; 
   }
 
   ol.course-tabs {
     @include border-top-radius(4px);
     @include clearfix();
-    padding: 28px 0 10px 0;
     @include margin-left(10px);
+    padding: ($baseline*0.75) 0 ($baseline*0.75) 0;
 
     li {
       @include float(left);
@@ -30,7 +28,7 @@ nav.course-material {
       }
 
       &.prominent + li {
-          padding-left: 15px;
+          padding-left: ($baseline*0.75);
           border-left: 1px solid #333;
       }
 
@@ -39,7 +37,7 @@ nav.course-material {
         color: #555;
         display: block;
         text-align: center;
-        padding: 10px 13px 12px;
+        padding: ($baseline/2) 13px 12px;
         font-size: 14px;
         font-weight: bold;
         text-decoration: none;
@@ -74,7 +72,7 @@ nav.course-material {
 header.global.slim {
   box-shadow: 0 1px 2px $shadow-l1;
   height: auto;
-  padding: 5px 0 10px 0;
+  padding: ($baseline/4) 0 ($baseline/2) 0;
   border-bottom: 1px solid $outer-border-color;
   background: $header-bg;
 

lms/static/sass/course/layout/_courseware_preview.scss

+.wrapper-preview-menu {
+  @include clearfix();
+  @include box-sizing(border-box);
+  margin: 0 auto 0;
+  padding: ($baseline*0.75);
+  width: 100%;
+  background-color: $gray-l3;
+
+  .preview-menu {
+    @extend %inner-wrapper;
+  }
+
+  .preview-actions {
+    display: inline-block;
+
+    .action-preview {
+      display: inline-block;
+
+      .action-preview-label {
+        display: inline-block;
+        margin-right: ($baseline/2);
+        margin-bottom: 0;
+        vertical-align: middle;
+      }
+    }
+  }
+}

lms/static/sass/ie.scss

@@ -139,7 +139,7 @@
   }
 
   // active navigation
-  nav.course-material ol.course-tabs li a.active, nav.course-material .xmodule_SequenceModule nav.sequence-nav ol.course-tabs li a.seq_video.active, .xmodule_SequenceModule nav.sequence-nav nav.course-material ol.course-tabs li a.seq_video.active {
+  nav.wrapper-course-material ol.course-tabs li a.active, nav.wrapper-course-material .xmodule_SequenceModule nav.sequence-nav ol.course-tabs li a.seq_video.active, .xmodule_SequenceModule nav.sequence-nav nav.wrapper-course-material ol.course-tabs li a.seq_video.active {
     background-color: #333;
     background-color: rgba(0, 0, 0, .4);
   }

lms/templates/courseware/course_navigation.html

@@ -23,9 +23,35 @@ def url_class(is_active):
   user_is_enrolled = user.is_authenticated() and CourseEnrollment.is_enrolled(user, course.id)
 %>
 
+% if show_preview_menu:
+    <nav class="wrapper-preview-menu">
+        <div class="preview-menu">
+            <ol class="preview-actions">
+                <li class="action-preview">
+                    <form action="#" class="action-preview-form" method="post">
+                        <label for="action-preview-select" class="action-preview-label">${_("previewing as:")}</label>
+                        <select class="action-preview-select" id="action-preview-select" name="select">
+                            <option value="staff" ${"selected" if not is_student_masquerade else ""}>${_("Staff")}</option>
+                            <option value="student" ${"selected" if is_student_masquerade and not masquerade_group_id else ""}>${_("Student")}</option>
+                            % if cohorted_user_partition:
+                                % for group in sorted(cohorted_user_partition.groups, key=lambda group: group.name):
+                                <option value="group.id" data-group-id="${group.id}" ${"selected" if masquerade_group_id == group.id else ""}>
+                                    ${_("Student in {content_group}").format(content_group=group.name)}
+                                </option>
+                                % endfor
+                            % endif
+                        </select>
+                        <button type="submit" class="sr" name="submit" value="submit">${_("set preview mode")}</button>
+                    </form>
+                </li>
+            </ol>
+        </div>
+    </nav>
+% endif
+
 % if disable_tabs is UNDEFINED or not disable_tabs:
-<nav class="${active_page} course-material">
-  <div class="inner-wrapper">
+<nav class="${active_page} wrapper-course-material">
+  <div class="course-material">
     <ol class="course-tabs">
       % for tab in CourseTabList.iterate_displayable(course, settings, user.is_authenticated(), has_access(user, 'staff', course, course.id), user_is_enrolled):
         <%