Merge pull request #8309 from edx/frances/responsive-lms-cleanup

Responsive LMS cleanup

lms/static/sass/_build-course.scss

@@ -66,3 +66,6 @@
 
 // search
 @import 'search/_search';
+
+// responsive
+@import 'base/layouts'; // temporary spot for responsive course

lms/static/sass/base/_layouts.scss

+// base layout styles to support early responsive lms
+// may be discarded later once sass breakpoints are wired in
+
+// overriding existing styles on the body element
+// .view-incourse scopes these rules to be specific to student being in a course
+body.view-incourse {
+  background-color: $body-bg;
+
+  // keep application of widths to window-wrap
+  .window-wrap {
+    min-width: 760px;
+  }
+
+  // courseware header
+  header.global,
+  header.global.slim {
+    width: auto;
+
+    .nav-wrapper {
+      min-width: auto;
+      padding-right: 2%;
+      padding-left: 2%;
+    }
+  }
+
+  // courseware tabs and staff preview bar
+  .wrapper-course-material,
+  .wrapper-preview-menu {
+    padding: 0;
+  }
+
+  .wrapper-course-material .course-material,
+  .wrapper-preview-menu .preview-menu  {
+    width: auto;
+    padding: 15px 2%;
+  }
+
+  .wrapper-course-material .course-material .course-tabs {
+    padding: 0;
+  }
+
+  // content area wrapper
+  .container {
+    max-width: none;
+    min-width: initial;
+    width: auto;
+    padding: 0 2%;
+  }
+
+  // course info page
+  .info-wrapper {
+    max-width: 1180px;
+    margin: 0 auto;
+  }
+
+  // courseware and progress page
+  .course-wrapper,
+  .profile-wrapper {
+    max-width: 1180px;
+    margin: 0 auto ($baseline*2) auto;
+    padding: 0;
+  }
+
+  // post-container footer (creative commons)
+  .container-footer {
+    max-width: none;
+    min-width: none;
+    width: auto;
+  }
+
+  .course-license {
+    max-width: 1180px;
+    margin: 0 auto;
+    padding-right: 2%;
+    padding-left: 2%;
+  }
+
+  // site footer
+  .wrapper-footer {
+    padding-right: 2%;
+    padding-left: 2%;
+
+    footer#footer-openedx { // TODO check edX footer when it launches
+      min-width: auto;
+    }
+  }
+}

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

@@ -9,7 +9,7 @@
 // * +Resets - Old, Misc
 
 
-// +Containers 
+// +Containers
 // ====================
 
 .content-wrapper {
@@ -36,7 +36,6 @@
 // ====================
 
 body {
-  min-width: 980px;
   min-height: 100%;
   background-color: $course-bg-color;
 

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

@@ -47,7 +47,6 @@ html.video-fullscreen{
     margin: 0 auto;
     max-width: grid-width(12);
     min-width: 760px;
-    width: flex-grid(12);
     color: $gray;
     text-align: $bi-app-right;
   }
@@ -91,7 +90,7 @@ html.video-fullscreen{
   }
 }
 
-// TO-DO should this be content wrapper? 
+// TO-DO should this be content wrapper?
 div.course-wrapper {
   position: relative;
 

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

@@ -164,7 +164,7 @@ header.global.slim {
 
   h2 {
     display: block;
-    width: 550px;
+    width: 65%;
     @include float(left);
     font-size: 0.9em;
     font-weight: 600;

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

@@ -3,11 +3,11 @@
   @include box-sizing(border-box);
   margin: 0 auto 0;
   padding: ($baseline*0.75);
-  width: 100%;
   background-color: $gray-l3;
 
   .preview-menu {
     @extend %inner-wrapper;
+    width: auto;
   }
 
   .preview-actions {

lms/templates/courseware/courseware-chromeless.html

@@ -10,7 +10,7 @@ from edxnotes.helpers import is_feature_enabled as is_edxnotes_enabled
  <% return _("{course_number} Courseware").format(course_number=course.display_number_with_default) %>
 </%def>
 
-<%block name="bodyclass">courseware ${course.css_class or ''}</%block>
+<%block name="bodyclass">view-incourse view-courseware courseware ${course.css_class or ''}</%block>
 <%block name="title"><title>
     % if section_title:
 ${page_title_breadcrumbs(section_title, course_name())}

lms/templates/courseware/courseware.html

@@ -10,7 +10,7 @@ from edxnotes.helpers import is_feature_enabled as is_edxnotes_enabled
  <% return _("{course_number} Courseware").format(course_number=course.display_number_with_default) %>
 </%def>
 
-<%block name="bodyclass">courseware ${course.css_class or ''}</%block>
+<%block name="bodyclass">view-incourse view-courseware courseware ${course.css_class or ''}</%block>
 <%block name="title"><title>
     % if section_title:
 ${page_title_breadcrumbs(section_title, course_name())}

lms/templates/courseware/info.html

@@ -42,7 +42,7 @@ $(document).ready(function(){
   </script>
 </%block>
 
-<%block name="bodyclass">${course.css_class or ''}</%block>
+<%block name="bodyclass">view-incourse view-course-info ${course.css_class or ''}</%block>
 <section class="container">
   <div class="info-wrapper">
     % if user.is_authenticated():

lms/templates/courseware/progress.html

@@ -7,6 +7,7 @@ from util.date_utils import get_time_display, DEFAULT_LONG_DATE_FORMAT
 from django.conf import settings
 from django.utils.http import urlquote_plus
 %>
+<%block name="bodyclass">view-incourse view-progress</%block>
 
 <%block name="headextra">
 <%static:css group='style-course-vendor'/>

lms/templates/courseware/static_tab.html

 <%inherit file="/main.html" />
-<%block name="bodyclass">${course.css_class or ''}</%block>
+<%block name="bodyclass">view-incourse view-statictab ${course.css_class or ''}</%block>
 <%namespace name='static' file='/static_content.html'/>
 
 <%block name="headextra">

lms/templates/navigation-edx.html

@@ -48,7 +48,7 @@ site_status_msg = get_site_status_msg(course_id)
     </h1>
 
     % if course and not disable_courseware_header:
-    <h2><span class="provider">${course.display_org_with_default | h}:</span> ${course.display_number_with_default | h} ${course.display_name_with_default}</h2>
+    <h2 class="course-header"><span class="provider">${course.display_org_with_default | h}:</span> ${course.display_number_with_default | h} ${course.display_name_with_default}</h2>
     % endif
 
     % if user.is_authenticated():

lms/templates/navigation.html

@@ -38,7 +38,7 @@ site_status_msg = get_site_status_msg(course_id)
 </%block>
 
   <header id="global-navigation" class="global ${"slim" if course else ""}" >
-    <nav aria-label="${_('Global')}">
+    <nav class="nav-wrapper" aria-label="${_('Global')}">
     <h1 class="logo">
       <a href="${marketing_link('ROOT')}">
         <%block name="navigation_logo">
@@ -48,7 +48,7 @@ site_status_msg = get_site_status_msg(course_id)
     </h1>
 
     % if course:
-    <h2><span class="provider">${course.display_org_with_default | h}:</span>
+    <h2 class="course-header"><span class="provider">${course.display_org_with_default | h}:</span>
       ${course.display_number_with_default | h}
       <%
         display_name = course.display_name_with_default

lms/templates/wiki/base.html

@@ -3,12 +3,14 @@
 
 {% block title %}<title>{% block pagetitle %}{% endblock %} | {% trans "Wiki" %} | {% platform_name %}</title>{% endblock %}
 
+{% block bodyclass %}view-incourse view-wiki{% endblock %}
+
 {% block headextra %}
   {% compressed_css 'course' %}
-  
+
   <script type="text/javascript">
     function ajaxError(){}
-    
+
     $.ajaxSetup({
       timeout: 7000,
       cache: false,
@@ -58,7 +60,7 @@
   <section class="container wiki {{ selected_tab }}" id="wiki-content">
     <div class="wiki-wrapper">
       {% block wiki_body %}
-        
+
         {% block wiki_breadcrumbs %}{% endblock %}
 
         {% if messages %}